HTML5中常用的一些标签

       在HTML 5出来之前，我们用div来表示页面章节，但是这些div都没有实际意义。（即使我们用css样式的id和class形容这块内容的意义）。这些标签只是我们提供给浏览器的指令，只是定义一个网页的某些部分。但现在，那些之前没“意义”的标签因为因为html5的出现消失了，这就是我们平时说的“语义”。

section元素 表示页面中的一个区块，                                例如：   div

article元素 表示一块与上下文无关的独立的内容                例如：texrear

aside元素 在article之外的，与article内容相关的辅助信息 例如：textarea

header元素 表示页面中一个内容区块或整个页面的标题  例如：H1

footer元素 表示页面中一个内容区块或整个页面的脚注

nav元素 表示页面中导航链接部分

figure元素 表示一段独立的内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)

main元素 表示页面中的主要的内容(ie不兼容)  一个页面只能出现一个main标签

hgroup标题的一个分组       和表格中的colgroup（合并列）单词很像

mark定义高亮显示的文本(span)   内联

time时间 内联     分秒

dialog标记定义一个对话框(会话框)类似微信

embed 标记定义外部的可交互的内容或插件 比如flash

date日期     精确到年月日

 

多媒体标签：

<video src=""></video>   视频

<audio src=""></audio>  音频

多媒体标签属性：

controls属性：如果出现该属性，则向用户显示控件，比如播放按钮。

autoplay属性：如果出现该属性，则视频在就绪后马上播放。（好多浏览器为了用户体验，都屏蔽此功能但是可以和静音属性一起使用）

loop属性：重复播放属性。

muted属性：静音属性。

poster属性：规定视频正在下载时显示的图像，直到用户点击播放按钮。

source <source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。 <source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

例：<video controls loop>

<Source><src=”video/move4”   type=”video/mp4”> </source>（video后的是视频类型）

<Source><src=”video/move4”  type=”video/ogg”> </source>

<Source><src=”video/move4”  type=”video/webm”> </source>

您的浏览器版本过低，不支持视频播放

</video>

<video controls loop>

<Source><src=”autio/move4”  type=”autio/mp3”> </source>（autio后的是音频类型）

<Source><src=”autio/move4”  type=”autio/ogg”> </source>

<Source><src=”autio/move4”  type=”autio/mav”> </source>

<Source><src=”autio/move4”  type=”autio/mpeg”> </source>

您的浏览器版本过低，不支持视频播放

</video>

补充：Object-fit：cover；可以使视频封面在视频界面铺满。

HTML5表单：

新增表单form type类型：

Type=“email” 限制用户必须输入email类型

Type=“url” 限制用户必须输入url类型 http：//

Type=“range” 产生一个滑动条表单

Type=“number” Type=“search” 产生一个搜索意义的表单

Type=“color” 生成一个颜色选择的表单

Type=“time” 限制用户必须输入时间类型

Type=“month” 限制用户必须输入月类型

Type=“week” 限制用户必须输入周类型

Type=“datetime-local” 选取本地时间 type=”date”

 

新增表单属性：

required 监测是否为空。

min 最小

max 最大

step 步幅 确定一个法定值。 -3 0 3 6 9

list 必须结合datalist标签，绑定datalist id名称。

autocomplete 是否自动提示信息缓存信息 属性值 on off

placeholder 文本框的提示信息

autofocus 自动聚焦。一个页面只能由一个。

pattern 后面的属性值是一个正则表达式。

novalidate 取消验证

multiple 选择（上传）多个

 

新增HTML5表单标签：

output

<form action="" οninput="x.value=parseInt(a.value)+parseInt(b.value)">
    <input id="a" type="range" min="0" max="100">100+
    <input id="b" type="text" value="50">=
    <output name="x" for="a b"></output>
</form>

datalist 必须和list属性结合使用。做提示信息。

<input type="url"     list="url_list"    name="link" />
<datalist    id="url_list">
    <option label="W3School" value="http://www.W3School.com.cn" />
    <option label="Google" value="http://www.google.com" />
    <option label="Microsoft" value="http://www.microsoft.com" />
</datalist>