Summary of new tags in Html5-H5 Tutorial-php.cn

Summary of new tags in Html5

巴扎黑

Release： 2017-08-08 16:35:02

Original

1565 people have browsed it

This article has compiled the nine new tags in html5 for everyone. It is very good. Friends who need it can refer to it.

I learned 9 new tags today,

define the option list. This is actually a relatively big improvement, but it also has shortcomings. This tag actually combines the "text in the input tag" and the select tag to produce an input combo box that can input and drop-down options. The disadvantage is that if it is not controlled through JS, the defined drop-down options will only take effect when the input box is empty

Define document details. This tag actually has many practical uses, and is often used with the summary tag. Write the title of the document in the summary tag. Details of p tag writing documents

A highlighted display tag, you no longer need to use the font attribute to mark a certain paragraph of text.

Quickly create a list. The usage is menu li combined with

the label that stores the address

This is a progress bar label. Its main attributes are value and max. value represents the current progress bar position, and max represents the total length of the progress bar.

The label contains the time label.

Initial contact with html5 tags. The first impression you get is that you know what the text means. This label is easy to remember.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Html5学习之路</title>
</head>
<body>
<header style="text-align: center; color: blue;">欢迎来到Html5的学习之路，我是header标签。</header>
这是一个定义选项列表的标签datalist 这个的作用就是将text文本框与select标签结合起来
<input type="text" list="phone">
<datalist id="phone">
    <option></option>
    <option>IPhone</option>
    <option>华为    </option>
    <option>小米    </option>
    <option>三星</option>
</datalist>
<br/>
<br/>
<font color="red">这里我发现了两者一个不同之处在于，datalist只有在输入框为空的时候才会有自己定义下拉的内容!</font>
<br/>
而这个select选项框是不管什么内容它都会存在的
<select>
    <option>IPhone</option>
    <option>华为    </option>
    <option>小米    </option>
    <option>三星</option>
</select>
<br>
<br>
<br>
------------------------
<br><br><br>
这是一个定义文档细节的标签。detail标签。它的主要作用很简单。
<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>
接下来这个标签是定义列表标签。menu。
<menu>
    <li>西游记</li><li>水浒传</li><li>红楼梦</li><li>三国演义</li>
</menu>
<br><br>
进度条标签我们用的比较多。比如这个。<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>
</body>
</html>

Copy after login

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