HTML5新增的标签与属性

时间 2019-11-10

标签 html5 html 新增标签属性栏目 HTML5 繁體版

原文原文链接

1、关于DTD

HTML5 不基于 SGML，因此不须要引用 DTD（HTML 4.01 基于 SGML）html

2、HTML5结构标签

<header> ：标记定义一个页面或一个区域的头部
<nav> 标记定义导航连接

<section> 标记定义一个区域
<aside> 标记定义页面内容部分的侧边栏

<article> 标记定义一篇文章
<hgroup> 标记定义文件中一个区块的相关信息
<figure> 标记定义一组媒体内容以及它们的标题
<figcaption>标记定义 figure 元素的标题。
<dialog> 标记定义一个对话框(会话框)相似微信

<footer> 标记定义一个页面或一个区域的底部

3、HTML5多媒体标签

video（视频）web

兼容性：

safari支持mp四、不支持webm和ogv
ie8（包含）如下都不支持 video 标签
ie9 支持 video 标签（但只支持 mp4 ）

<video src="..." autoplay="autoplay" controls="controls" loop="loop" width="500" height="500" poster="..." muted>

//其中loop设置循环 poster设置封面 muted静音
复制代码

audio（音频）chrome

兼容性：

safari支持mp3和wav、不支持ogg
JS中new Audia() 等同于 html 上加一个 <audio></audio>标签
chrome和opera不能自动播放，须要一个页面元素上的交互才能够
width / height 属性没有做用，必须使用 style 标签里面的样式去控制它
为了提高客户的体验度，能够在audio的开始和结束标签之间添加文字
<source> 标是为媒介元素定义媒介资源，不能够在<source>开始标签里添加，并且<source> 标签是单标签，没有结束标签。

<audio src="..." autoplay="autoplay" controls="controls" loop="loop" width="500" height="500">
复制代码

source：媒介元素（音视频）

<video autoplay="autoplay"
       controls="controls"
       loop="loop"
       width="500"
       height="500">
    <source src="..." type="video/mp4"
</video>复制代码

embed：嵌入插件（音视频）浏览器

<embed src="..."
       type="audio/mp3"
       width="300" 
       height="300" />
复制代码

4、HTML5的Web应用标签

Menu
<menu> 命令列表（目前全部主流浏览器都不支持）
<menuitem> menu命令列表标签（只有FireFox8.0+支持）
<command> menu标记定义一个命令按钮（只有IE9支持）ruby
状态标签
<meter> 状态标签(实时状态显示：气压、气温)C、O
<progress> 状态标签 (任务过程：安装、加载) C、F、Obash
列表标签
<datalist> 为input标记定义一个下拉列表,配合option F、O
<details> 标记定义一个元素的详细内容，配合summary C微信

5、HTML5其余标签

<ruby> 标记定义注释或音标
<rp> 告诉那些不支持 ruby元素的浏览器如何去显示
<rt> 标记定义对ruby的注释内容文本
<mark> 标记定义有标记的文本 (黄色选中状态)
<output> 标记定义一些输出类型，计算表单结果配合oninput事件
<keygen> 标记定义表单里一个生成的键值(加密信息传送)
<time> 标记定义一个日期/时间，目前全部主流浏览器都不支持

6、HTML5重定义标签

（显示不变，只是表达的含义进行了从新定义的标签）app

<b> 表明内联文本，一般是粗体，没有传递表示重要的意思
<i> 表明内联文本，一般是斜体，没有传递表示重要的意思
<dd> 能够同details与figure一同使用，定义包含文本，dialog也可用
<dt> 能够同details与figure一同使用，汇总细节，dialog也可用
表示主题结束，而不是水平线，虽然显示相同
<menu> 从新定义用户界面的菜单，配合command或者menuitem使用
<small> 表示小字体，例如打印注释或者法律条款
<strong>表示重要性而不是强调符号

7、HTML5中Input新增的type

email
url
number
range
Date picker：

Date —— 选取日、月、年

Month —— 选取月、年

Week —— 选取周和年

Time —— 选取时间（小时和分钟）

Datetime —— 选取时间、日、月、年（UTC 时间）

Datetime-local —— 选取时间、日、月、年（本地时间）
search
color
tel

8、HTML5表单属性

autocomplete：自动完成，适用于 <form> 标签，以及如下类型的 <input> 标签：
text, search, url, telephone, email, password, datepickers, range, color。
用法：<form autocomplete="on“></form>或者单独在input中用off异步
autofocus：自动地得到焦点，适用于全部 <input> 标签的类型
用法：<input autofocus="autofocus" />async
multiple：可选择多个值，适用于<input>中type为email和file
用法：<input type="file" multiple="multiple" />
placeholder：适用于<input>中type为：text, search, url, telephone, email, password
required：规定不能为空，适用于如下类型的 <input> 标签：
text, search, url, telephone, email, password, date pickers, number, checkbox, radio, file
用法：<input type="text" required="required" />

9、HTML5连接属性

size
<link rel=“icon” href=“icon.gif” type=“image/gif” size=“16x16”>
target
<base href=“http://localhost/” target=“_blank”>
超连接
a：media=""（表示对设备进行优化，handhelp对“手持“设备进行支持，tv对”电视）；
a：hreflang="zh"（设置语言，这里设置语言是中文）；
a：ref=“external”（设置超连接的引用，这里超连接为外部连接）

10、HTML5其余属性

defer:加载完脚本后并不执行，而是等整个页面加载完以后再执行
<script defer src=“URL”></script>
async:加载完脚本后马上执行，不用等整个页面都加载完，属于异步执行。
<script async src=“URL”></script>
Start —— 起始值
Reversed —— 倒叙排列
<ol start=“10” reversed>
<li>Html</li>
<li>Css</li>
<li>JavaScript</li>
</ol>
manifest=“cache.manifest”（定义页面离线应用文件）<html manifest=“cache.manifest”>