html5

Time:2020-10-9

**html5
New label**
DOCTYPE is not a tag of HTML, it just indicates the version of HTML


Why does HTML5 not refer to DTDs?
DTD (document type definition)
DTD specifies the rules of markup language so that browsers can present content correctly
HTML5 is not based on SGML, so there is no need to refer to DTDs


New label:
1. Structure label
Massive element — meaningful div
– < article > tag defines an article
-The < header > tag defines the header of a page or area
-< NAV > tag defines navigation links
-The < section > tag defines an area
-The < aside > tag defines the sidebar of the content section of the page
For example, the classification on the left of Taobao is aside, and the expanded articles on the right are articles
-< hgroup > tag the information about a block in the definition file
-< figure > tags define a set of multimedia content and their titles
-The < figcaptation > tag defines the label of the figure element
-The < footer > tag defines the bottom of a page or area
– < diglog > tag defines a dialog box (conversation box) similar to wechat

Don’t nest header / section / aside / article / footer inside
Only when the header / section / footer level is the highest, can you write aside / article / figure / hgroup / NAV, and then div figcaptation


2. Multimedia Tags
<video>
Tag defines a video
Video can increase the width and height to change the size of the video, but audio is only audio, there is no height and width

<audio>
Tags define audio content
<body>
<audio src=“../Source/passion.mp3” autoplay=“autoplay”></audio>
</body>
loop=“-1”
Controls = controls (there will be a controller to play, pause)
You can add a text in the middle of the audio. If the audio doesn't run out, you can display that
<source>
Tags define media resources
<audio autoplay=“autoplay”>
    <source src=“../Source/passion.mp3” type=“audio/mpeg”>
</audio>

< canvas > tag definition image

< embed > tag defines external interactive content or plug-ins
Like flash
<embed src=“../Source/HappyBirthday.swf” width=“1024” height=“768”></embed>
Similar to flash with plug-ins, you can use it
The development of multimedia tags means that users can operate media files without using plug-ins, which greatly improves the user experience


3. Status label:
< meter > status tag (real time status display: air pressure, air temperature)
<meter value=“220” min=“20” max=“380” low=“200” high=“240” optimum=“220”></meter>

< progress > status tag (task process: installation, loading)
<progress value=“30” max=“100” >
If there is only max, there will be a loading bar


4. List label:
< datalist > defines a drop-down list for the input tag with option

<body>
< input holder = "please select your favorite mobile phone brand" list = "phonelist" / >
<datalist id=“phoneList”>
    <option value=“IPhone”>iPhone</option>
    <option value=“Samsung”>Samsung</option>
    <option value=“HuaWei”>Huawei</option>
    <option value=“HTC”>hTC</option>
    <option value=“Meizu”>Meizu</option>
</datalist>
</body>
<details>
    < summary > content < / summary >
    <p>lalalal</p>
</details>

One property is open = “open”


5. Note label:
<ruby>
A notation or phonetic symbol
<body>
<p>Let’s talk about < Ruby > fight < RT > Fen < / RT > < / RUBY ></p>
Put the pronunciation above the word

<rt>
<body>
<p>Let’s talk about < Ruby > < RP > (< / RP > < RT > Fen < / RT > < RP >) < / RP > < / RUBY ></p>
If Ruby doesn’t appear or is not compatible
RP can’t be put in RT

<rp>


6. Other labels:
<mark>
<body>
<p>My mother told me to buy a box of < mark > milk < / mark > on my way home. I need a fresh one. </p>
Equivalent to highlight

<output>
< oninput >: events can monitor the input changes of text box in real time

<body>
<form oninput=“totalPrice.value=parseInt(price.value)*parseInt(number.value)”></form>
    <input type=“text” id=“price” value=“5000”>
    <input type=“number” id=“number” value=“1”>=
    <output name=“totalPrice” for=“price number”></output>
</body>

7. Deleted Tags:
– purely expressive elements
Basefont,big,center,font,s,strike,tt,u
– elements that have a negative impact on usability
frame,frameset,noframes
iframe
– confusing elements
acronym,applet,isindex,dir


8. Redefine labels:

<b>Represents inline text, usually bold, without passing on significant meaning
<i> Represents inline text, usually italicized, that does not convey significant meaning
< DD > can be used with details and figure, definition contains text, and dialog can also be used
< DT > can be used together with details and figure, summarize details, and dialog can also be used
< HR > it not only expresses the horizontal line, but also expresses the end of the theme with the same display effect
For example, Baidu Post Bar, forum, a main body after a horizontal line, or novel
< Menu > redefine the menu of user interface and use it with command or MenuItem
The big tag has been removed
< small > indicates small font, such as printing notes or legal terms
< strong > indicates importance rather than emphasis

Attribute changes:
1.Input:

<input type= “email” name= “email” >

<input type= “url” name= “url” >
IPhone only
<input type= “tel” name= “tel” > 
<input type=“number” name=“number” >

2. Date pickers input type:
Date
<input type=“date” name =“date” >

Month
<input type=“month” name=“month”>

Week
For iPhone 6 and above, week is not compatible

Time

Datetime

Datetime-local

3. Other inputs

  • Range Input

<input type=“range” name=“range” min=“1” max=“10”>
If there is no input, the default is 100

  • Search Input

<input type=“search” name=“search” >
When it’s worth it, there’s a fork in the back

  • color input

<input type=“color” name =“color” >
Default black color selection box
You can do some online text editor to adjust the font

4. Form properties

1.autocomplete

Both the form and input fields should have automatic completion
<form autocomplete= “on”></form>
Autocomplete applies to < form > tags and the following types of < input > Tags:
text,search,url,telephone,email,password,datapickers,range,color
<form action=“lesson2_1 autocomplete.html” autocomplete=“on/off”></form>

<input type=“text” name=“text”>
<input type=“submit”>

2. Autofocus property

<input type=“text” name=“text”>
<input type=“email” name=“email” autofocus=“autofocus”/>
<input type=“submit”>

For all
Specifies that the domain automatically gets focus when the page is loaded

3. Multiple attribute

Multiple values can be selected in the specified field
Multiple applies to the following types of < input > Tags: email and file
<input type =“file” multiple= “multiple”/>

4. Placeholder attribute

Provides a hint that describes the expected value of the input field
<input type=“search” placeholder= “Search Content”/>
For:
text,search,url,telephone,email,password

5.required

Form validation is judged by JS
Input field must be filled in before submission (cannot be empty)
<input type=“text” required=“required” />
For:
text,search,url,telephone,email,password,date picker,number,checkbox,radio,file

5. Other attributes:

  • script:

Defer: the script is not executed after loading, but after the entire page is loaded
<script defer src=“URL” ></script>

Async: execute the script immediately after loading, without waiting for the entire page to load. It is asynchronous execution
<script async src=“URL” ></script>

  • ol

start:
What can change start from

reversed:
< ol start = “reversed” > flashback

  • html

manifest= “ cache.manifest ”(define page offline application file)
<html manifest= “cache.manifest” >
It is equivalent to not affected by network interruption

  • style

Scoped; embedded CSS
<style scoped>
</style>
It can be written anywhere
Not recommended