What are the new tags added in html5-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

What are the new tags added in html5

php中世界最好的语言

Mar 26, 2018 pm 03:42 PM

h5 html5 Which

This time I will bring you what are the newly added tags of html5, and what are the precautions when using the newly added tags of html5. The following is a practical case, let's take a look.

I learned 9 new tags today.

< ;video> is the same as the audio tag. is a video tag. The main commonly used attributes are the same as above

define the option list. This is actually a relatively big improvement, but it also has shortcomings. This tag actually combines the "text in input tag" and the select tag to produce an input combo box that allows 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 writing documents with the p tag

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!