Catalogue
3. Download resources and audio tags
5. Tags, hyperlinks
14: Single choice, check, drop-down and upload Tags
18: iframe (n. inline frame; inline frame) label
21:html entity code, escape, special symbol
1. html definition
2. HTML document display
Code interpretation:
1)<!DOCTYPE html>
Declare / tell the browser: the following documents / codes are html codes
@< ~ ~ ~ > is the start tag and < / ~ ~ ~ > is the end tag
2) HTML header < head > tag
It defines some meta information (information describing the information < for the browser >), and the content for the readers of the browser / search engine is mostly in < body >
3)<meta charset="utf-8">
meta represents the tag, charset represents the tag attribute name, and = "(attribute value)"
Code meaning: it means that the browser should use "utf-8" coding to display when rendering (because the coding form used when writing code is utf-8) to ensure that there is no random code
4)<!-- Annotation content (not displayed when the browser renders) - >
5) < meta keywords = "wechat, even communication" > label meaning: Keywords in search engine
be careful:
1) < HTML > < head > start and end tags must be written
2) The code (in the form of txt text at this time) may be garbled when opened with Notepad. Open it here with Notepad + +, and select H - > HTML (for convenience of inspection)
3.HTML presentation steps
1) change txt suffix to html (open with browser)
The top left corner is the document title
2) View source code
2.video tag
Not using flash: hot mobile phone, security issues
3. Download resources and audio tags
<audio controls>
<!--audio:audio frequency-->
<source src="test.mp3">
<!--Can't add type="mp3/m4a"，Otherwise, it cannot be played-->
Your browser does not support audio label
</audio>4.img label
<img src="Good looking 1/1.png">
<!--1 in folder 1 of current directory.png picture-->
<img src="../Good looking 1/1.png">
<!--1 in the folder one level above the current directory.png picture(One more for each upper floor../)-->
<img src="https://img1.baidu.com/it/u=2285020071,1228316245&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=341">
<!--When the original file is a URL link, if the link has no picture suffix, you don't need to add it yourself-->
<img src="C:\Users\13912\Desktop/hei.jpg">
<!--Absolute path-->
<!--The direct copy path of the original picture (to supplement the picture name) is\，If in windows The following is recommended\\，Or use/Substitute positive\-->
<!--<img src="C:/Users/13912/Desktop/hei.jpg">-->
<!--An agreement can also be added:<img src="file:\\\C:\Users\13912\Desktop/hei.jpg">，file: \\Represents the protocol name-->
<!--Direct use html How to carry pictures: picture transfer base64,Disadvantages: the picture is not easy to maintain and modify-->5. < a > tags, hyperlinks
<a href="https://kannikanyun. github. IO "> Click to jump to kanyun's blog</a>
<!--href:Hypertext reference, hyperlink address pointing( hypertext reference<Reference, reference>-->
<br>
<br>
<a href="https://kannikanyun. github. io" target="_ Blank "> Click me to jump to kanyun's blog</a>
<!--
arget Their values and their meanings:
_blank: Open in a new window;
_self: Default. Open in the same frame;
_parent: Open in parent frame set;
_top: Open in the whole window;
-->
<br>
<br>
<a href="C:\Users\13912\Desktop\html study\Note file\target Testing\white.html">Click me to jump to white.html</a>
<br>
<br>
<a href="C:\Users\13912\Desktop\html study\Note file\target Testing\white.html" target="_blank">Click me to jump to white.html</a>
<!--Pay attention to path selection when using-->
<!--
-->
<br>
<br>
<a href="mailto:1391205637@qq.com">Click my pop-up email client to send mail</a>
<!--mailto You can write more parameters later-->
<br>
<br>
<a href="javascript:alert('Cheer Up')">Let me have a try</a>
<!--stay javascript In, alert The usage of is“ alert(Plain text displayed in the dialog box)". -->
<br>
<br>
<!--
-->
<!--Anchor mark-->
<a href="#Mark "> point me</a>
<br>
<br>
<div id="Mark 1">Locate here 1</div>
<!--
Follow the URL #Mark, it will be automatically positioned to the position of the mark
-->
<br>
<br>
<div id="sign" style="position: absolute; top: 9000px;">You came here by clicking "I"</div>
<!--div Can be understood as: display text label“ position: absolute"It means absolute positioning,
Simple use absolute Attributes do not have their effect,
Need cooperation“ top bottom left right "Property to see the effect.
-->6: h label
<h1>First sentence</h1>
<h2>Second sentence</h2>
<h3>Third sentence</h3>
<h4>Fourth sentence</h4>
<h5>Fifth sentence</h5>
<h6>Sixth sentence</h6>
<h7>Seventh sentence</h7>
<!--
h After the number exceeds 6, the text is ordinary text
-->
<br>
<br>7: meta tag
<!--
6: meta Label keywords: A set of keywords is defined for the document. When some search engines encounter these keywords,
Will use these keywords to classify the web pages of the website
-->
<meta name="keywords" content="Hee hee, digital baby, the world is worth it">
<!--
7: meta Label description
Describe the website pages to facilitate the search engine to display to users and enable users to understand the nature of the website
-->
<meta name="description" content="What are you doing with this website?">8: div tag:
<!--
8:div label:Used to control and layout, wrap text or other labels
every last div Labels wrap automatically
-->
<div style="color: aqua;">Look at my color</div>
<br>9:span label
<!--
9:span label:Used to control and layout, wrap text or other labels
every last div Labels do not wrap automatically
-->
<span style="color: red">I'm Xiao Hong</span>
<!--Escape character: indicates an English space-->
<br />
<br />
<!--<br/>Standard writing method of label (no start and end labels can be added)/-->10: pre tag
<!--
10: pre label: pre Element defines pre formatted text.
Surrounded by pre Text in an element usually retains spaces and line breaks.
-->
<pre>
You don't know you,
So you are you.
</pre>11: p tag
<!--
11: p Label: indicates a paragraph (auto wrap with large spacing)
-->
<p>
<Enlightenment
<p>
<br />
Don't talk about destiny when you understand the Tao,
<br />
Don't take the Sutra in practice.
<br />
One sorrow, one joy, one withered glory,
<br />
Which previous life is doomed?
<br />
</p>
<p>
The cassock is not pure,
<br />
The world of mortals is spotless and empty.
<br />
The Millennium Bell in the secluded ancient temple,
<br />
It's all nonsense.
</p>
<br />
12: center label
<!--
12: center Labels: center content horizontally
-->
<center>
<div>To become a Buddha is to seek.</div>
<div>Understanding is the nature of understanding.</div>
<div>Practice is based on practice, and enlightenment is based on nature. The awakened person generates law from the heart, and the cultivator controls the heart with law.</div>
<div>Those who do not bear the consequences of evil have faith without evidence. They live in the cause, the fruit, the mind and the heart. This is life and death.</div>
<div>Those who are not ignorant of cause and effect live without dwelling, without desire, without desire, without precepts, without precepts, such as nirvana.</div>
</center>
<br />
13: form label
<!--
13: form(Form, table, form) label
-->
<input type="text" value="Input here will not be submitted">
<br />
<br />
<input type="text" placeholder="Placeholder text and not submitted">
<br />
<br />
<!--placeholder:n,Placeholder, placeholder text-->
<input type="button" value="I'm just a button">
<br />
<br />
<input type="submit" value="I am a button that can submit (if in form Words in the form,haha)">
<!--
If in form In the form: submit Button to submit all input to the server
If it is button Button, you need to button Redefine an event
-->
<br />
<br />
<button>I am a simple button type</button>
<br />
<br />
<!--
stay url Parameters can be transmitted in the following ways: get Pass parameters (our values pass http Protocol to server)
-->
<!--
https://www.baidu.com/s?wd = person I love
？Former url，？After is the parameter and between parameters&separate
wd――Keywords of query(Keyword)
-->
<form action="https://www.baidu.com/s" target="_blank" method="get">
<input type="text" name="wd">
<input type="submit" value="Click I submit content to Baidu">
</form>
<!--
eage of url Keyword parameter is wd，So use name="wd"
target Yes or no
-->
<br />
<br />
<pre>
user name: <input type="text"/>
<br/>
User password:<input type="password"/>
<!--If password If there is a value in, you can F12 In the source code Elements Lieutenant general password Change to text
(After the source code is rendered by the browser, a state of the code in the memory is "code after dynamic execution"
If you right-click directly, the real source code is displayed-->
</pre>
<br/>
<br/>
<input type="hidden" value="Can you see me?">
<!--
Hidden domain
Pay attention to the use of functions, but do not want users to see the parameters
-->
<br/>
<br/>
<input type="hidden" type="text" value="Can't you see me"/>
<!--
html Medium: in case of attribute conflict, the first one will prevail
-->
<br/>14: Single choice, check, drop-down and upload Tags
<!--
14: Single choice, check, drop-down and upload Tags
-->
<!--checkbox Labels: check boxes
Check box value Refers to the value of this check box
-->
<input type="checkbox"/>Why
<input type="checkbox"/>Look, look at the clouds
<input type="checkbox"/>Forget the sea
<br/>
<br/>
<!--radio Labels: Radio boxes
For radio box value Same as check box
In the background, if you want to get the content of the check box value Come and get
When you get data from a page that receives form data,
What you get is value Value of
-->
<!--Radio box case 1-->
Please select:
<input type="radio" name="gender" value="1" />male
<input type="radio" name="gender" value="1" />female
</br>
</br>
Please select:
<!--Radio box condition 2-->
<input type="radio" name="sex" />male
<input type="radio" name="sex" />female
<br/>
<br/>
<!--Radio box condition 3:Select one by default-->
A 1 is selected by default
<input type="radio" name="a" />male
<!--This method fails and the reason is unclear@_@
Problem solving: between groups of options name Cannot be the same
-->
<input type="radio" name="a" checked/>female
<br/>
<br/>
Select a 2 by default
<!--Radio box condition 4:Select one by default-->
<input type="radio" name="b" checked="true"/>male
<input type="radio" name="b" />female
<!--Radio box condition 3:Select one by default-->
<br/>
<br/>
Select a 3 by default
<input type="radio" name="c"/>male
<input type="radio" name="c" checked="checked"/>female
<br/>
<br/>
<!--Drop down box/((label) select
Options for visitors
Show the computer value Value in
-->
<select>
<option>--Please select--</option>
<option value="1">Grape</option>
<option value="a mandarin orange">a mandarin orange</option>
<option>Banana</option>
<option>lemon</option>
<option>Perfume</option>
</select>
<br/>
<br/>
<!--Text field textarea
rows: Number of rows (i.e. height)
cols: Number of columns (i.e. width)
-->
<textarea rows="1" cols="50">
You are a night cloud, floating in my dreamy sky
</textarea>
<br/>
<br/>
<!--Upload tag file-->
<input type="file">
<br/>
<br/>15: u tag
<!--15: u label-->
<ul>
<li>john</li>
<li>yohn</li>
<li>smith</li>
</ul>
<br/>
<br/>
<ul type="circle">
<li>john</li>
<li>yohn</li>
<li>smith</li>
</ul>
<br/>
<br/>
<ul type="disc">
<li>john</li>
<li>yohn</li>
<li>smith</li>
</ul>
<br/>
<br/>16: table label
<!--16: table(Table) label
table: (Table), table
border: Border (pixel 1?)
thead: Table header
tr: Table row
th: Columns in table headers
td: Table column
colspan: The number of label attribute (number of cross columns of merged columns) is the number of merged columns
rowspan: Consolidated rows (number of cross rows)
align: alignment
Tip: outer label( head,body,foot)No, the effect is the same
-->
<table border="1">
<thead>
<tr>
<th colspan="2" align="center">The distance between ideal and reality</td>
</tr>
</thead>
<tbody>
<tr>
<th>ideal</th>
<th>the moment</th>
</tr>
<tr>
<td>distance</td>
<td>little</td>
</tr>
<tr>
<td>time</td>
<td>little</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>max</td>
</tr>
</tfoot>17:frameset tab
<!doctype html>
<!--Document type declaration html-->
<html>
<!--17: frameset label
frameset:n.Frame page frame set of frame type frame
frame: n. Frame, border;
-->
<!----Hybrid framework---->
<frameset rows="50%,50%">
<frame src="frame Frame 1.html"></frame>
<frameset cols="50%,50%">
<frame src="frame Frame 2.html"></frame>
<frame src="frame Frame 3.html"></frame>
</frameset>
</frameset>
</html>18: iframe (n. inline frame; inline frame) label
<!--
18: iframe(n. Embedded frame; Inline frame) label
Function: nested in the current page
src Can be: picture html,Website, etc....
1:vh Is 1 of the visible height of the current screen%，in other words
height:100vh == height:100%;
2:vw Is 1 of the current screen width%
3:scorlling:n,v: Scroll, scroll
Note: some older browsers do not support iframe
If you don't get support, iframe Is invisible
-->
<br/>
<br/>
<iframe src="https://www.4399.com/" style="width: 100vw; height:100vh" frameborder="0" scorlling="no"></iframe>
<!--
<iframe src="https://www.baidu.com" style="width: 100vw; height:100vh frameborder="0" scorlling="no";></iframe>
This site cannot be embedded and has not been resolved (request denied)
-->
I am here iframe Waiao
<br/>
<br/>19: Attributes
<!--
19:attribute
every last html Tags have their own attributes. By setting the value of the attribute, the desired appearance or functional effect can be achieved
Of course, it can also be passed on the label name="value"Write custom attributes in a way that can be called by yourself
Common attributes;
width,height,id(only,Equivalent to giving each label a unique identification) name(Can be the same)
src(img,iframe Etc value(Value) type,align(Text alignment)
-->20: Hrlabel (horizontal line)
<!--
20:hr Label (horizontal line)
-->
There is a horizontal line below
<hr>
drop
<hr>
There is also a horizontal line on it
<br/>
<br/>21:html entity code, escape, special symbol
<!--
21:html Entity code, escape, special symbol
-->
M<sup>2</sup>
<pre>HTML Special escape character comparison table</pre>
https://tool.oschina.net/commons?type=2
<pre>HTML Useful character entities in</pre>
https://www.w3school.com.cn/html/html_entities.asp
<pre>URL Coding reference manual</pre>
https://www.runoob.com/tags/html-urlencode.html
<pre>URL Chinese character transformation html Entity symbol Chinese conversion&#Character encoding at the beginning < / pre >
https://seo.juziseo.com/tools/entity/ html entity code
<h1 style="color: lawngreen;" align="center">html see you soon</h1>