Home >Web Front-end >H5 Tutorial >Summary of new tags in Html5

Summary of new tags in Html5

巴扎黑Original: 2017-08-08 16:35:021629browse

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,

b97864c2e0ef2353a16c4d64c7734e92 Simply put, it is an audio tag. Its main commonly used attributes are src=""audio path controls="controls" control parameters, which allows it to display the effect of a player on the page autoplay="autoplay" automatic play attribute loop="loop"The number of loops

39000f942b2545a5315c57fa3276f220is the same as the audio tag. is a video tag. The main commonly used attributes are the same as above

fc86e7b705049fc9d4fccc89a2e80ee3define 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

a5e9d42b316b6d06c62de0deffc36939Define 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

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

5c0e96d12fc7501cef2ae2efde646ee0Quickly create a list. The usage is menu li combined with

208700f394e4cf40a7aa505373e0130bthe label that stores the address

6ecb87e5318a36c03c59e25d55f43372This 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.

46dd80ba616c57a652514755c74c4211The 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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Guide to how to jump to and obtain values from a web pageNext article：Guide to how to jump to and obtain values from a web page

See more

Summary of new tags in Html5

Related articles