New features of HTML5 (1) _html5 tutorial skills

HTML5 is a standard version of HTML [1] (an application under the Standard Universal Markup Language) that replaces the HTML 4.01 and XHTML 1.0 standards formulated in 1999; it is still in the development stage, but most browsers already support it Certain HTML5 technologies.

1. New document type declaration
The three document type declarations specified by HTML4:

XML/HTML CodeCopy content to clipboard

1. >
2. >
3. >

The three document type declarations specified by XHTML 1.0:

XML/HTML CodeCopy content to clipboard

1. > 
2. >
3. >

XHTML 1.1 document strictly defines the type, which is equivalent to the transitional definition type of XHTML1.0 document

XML/HTML CodeCopy content to clipboard

1. >

Document type declaration for HTML 5

XML/HTML CodeCopy content to clipboard

1. >

2. There is no need to write type in script and link

XML/HTML CodeCopy content to clipboard

1. <link rel=”stylesheet” href=”path/to/stylesheet.css” type=”text/css” />   ==》  <link rel=”stylesheet” href=”path/to/stylesheet.css”/>  
2. <script src=”path/to/script.js” type=”text/javascript”>script>    ==》  <script src=”path/to/script.js”>script>  

3. 语义化header和footer标签
在HTML4或XHTML里，我们定义网页的页眉或页脚时会这样：

XML/HTML Code复制内容到剪贴板

1. <div id=”header”>  
2. …   
3. div>  
4. 或   
5. <div id=”footer”>  
6. …   
7. div>  

而在HTML5里有直接定义上面元素块的标签，可以使代码更加的简洁和语义化

XML/HTML Code复制内容到剪贴板

1. <header>  
2. …   
3. header>  
4. 或   
5. <footer>  
6. …   
7. footer>  

4. hgroup标签，它主要是表明标题的集合。如果有主标题、副标题，可以用这个来包裹一下。但是这个标签没什么大的用处，在最新的HTML5.1版中被废除了。我们如果想声明主标题和对应副标题说明，可以向下面这样。
使用标点符号分割，一般适合于文章标题，不太适合网站标题。

XML/HTML Code复制内容到剪贴板

1. <h1>Front-end test questions: New features of HTML5h1>

Use span tags to mark subtitle descriptions

XML/HTML CodeCopy content to clipboard

1. <h1>Front-end test questions
2.  <span>New features of HTML5span>
3. h1>

Use header tags to wrap the title and description

XML/HTML CodeCopy content to clipboard

1. <header>
2.  <h1>Front-end test questionsh1> 
3.  <p>New features of HTML5p>
4. header>

5. Mark element mark

XML/HTML CodeCopy content to clipboard

1. The <mark> element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.

can be used as a highlight tag, and the characters enclosed by it will be highlighted. …
6. Graphic element figure
In HTML4 or XHTML, the following codes are used to decorate the comments of the picture .

XML/HTML CodeCopy content to clipboard

1. <img src=”path/to/image” alt=”About image”/>
2. <p>Image of Flower p>

The above code does not connect text and image memory, but the figure and figcaption combination added by HTML5 can perfectly connect images and text.

XML/HTML CodeCopy content to clipboard

1. <figure>
2. <img src=”path/to/image” alt=”About image”/>
3. <figcaption>
4.  <p>beautiful flowerp> 
5. <figcaption>
6. figure>

7. Redefined the small tag
The tag in HTML5 renders marginalia as small text, responsible for statements, precautions, legal restrictions or versions Declared features are usually small text.
Small has been defined in HTML4 or XHTML, but there is no complete explanation of its use. In HTML, it is mainly used for small text such as version statements and email addresses at the bottom of web pages.
8. Placeholder
In HTML4 or XHTML, if we want to display a prompt message when the input box is empty, the input box field will be focused. The effect of prompt disappearing can only be written with js. The placeholder added in HTML5 directly achieves this effect.
The placeholder attribute is applicable to the following types: text, search, url, telephone, email and password.

XML/HTML CodeCopy content to clipboard

1. <input placeholder=”text”>