How to use new tags in HTML5

HTML5 provides some new elements and attributes, such as nav (website navigation block) and footer. This tag will help search engine indexing and better assist small screen devices and visually impaired people. In addition, it also provides new functionality for other browsing elements, such as audio and video tags. Let's learn how to use new tags in HTML5 with everyone.

<header style="text-align: center; color: 
blue;">欢迎来到Html5的学习之路，我是header标签。</header>

This is a tag datalist that defines an option list. This function is to combine the text text box with the select tag.

<input type="text" list="phone">
<datalist id="phone">
    <option></option>
    <option>IPhone</option>
    <option>华为 </option>
    <option>小米 </option>
    <option>三星</option>
</datalist>    
<font color="red">这里我发现了两者一个不同之处在于，datalist只有在输入框为空的时候才会有自己定义下拉的内容!</font>
<br/>

And this select option box It will exist no matter what the content is

<select>
<option>IPhone</option>
<option>华为 </option>
<option>小米 </option>
<option>三星</option>
</select>
------------------------
<br><br><br>

This is a tag that defines the details of the document. detail tag. Its main function is simple.

<details>
<summary>这是一个detail标签，下面就是他的使用方法</summary>
<p>detail标签是什么？</p>
<p>detail标签有什么作用？</p>
<p>detail标签能干什么？</p>
<p>detail标签我改怎么用它？</p>
</details>
<br>
detail标签常与sunmmary标签用在一起。比如这个标签是高亮标签<mark>mark</mark>比重不一样。
<br><br>

The next tag is the definition list tag. menu.

<menu>
    <li>西游记</li><li>水浒传</li><li>红楼梦</li><li>三国演义</li>
</menu>
<br><br>

We use progress bar tags more often. Such as this.

<mark>progress</mark>
<progress value="5" max="10">value=5 max=10</progress>
<br>
<audio src="" controls="controls" autoplay="autoplay" loop="loop"></audio>
<footer>我是底部footer标签</footer>

The above content is a tutorial on how to use the new tags in HTML5. It is more suitable for friends who are new to HTML5. I hope it will be helpful to everyone.

Related recommendations:

The most complete HTML5 tags

HTML5 tag selection method guide

HTML5 tag collection

The above is the detailed content of How to use new tags in HTML5. For more information, please follow other related articles on the PHP Chinese website!