HTML5

2018-01-09 本文已影响17人没汁帅

HTML 参考手册

一、有哪些特点

1、DOCTYPE及字符编码

<!doctype html>  //
<html lang="zh-cn">  //文档语言
<meta charset="utf-8">  //字符编码

2、大小写都可以

<Input tYpe=RadiO>  //不区分大小写

3、布尔值

<input type="checkbox" checked/>  //checked表示true，不写就是false

4、省略引号

<input type="checkbox" checked/>  //写两个引号
<input type='text'/>    //写单引号
<input type=radio>      //不写引号

出现了空格必须要写引号

5、可以进行省略的标签

最好还是按照规范书写。

不允写结束符的标签：
area、basebr、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
可以省略结束符的标签：
li、dt、dd、p、rt、optgroup、option、colgroup、thread、tbody、tr、td、th
可以完全省略的标签：
html、head、body、colgroup、tbody

^[2]

二、新增的标签

2.1 新增的结构标签

section元素
表示页面中的一个内容区块，比如张杰、页眉、页脚或页面的其他部分。可以和h2\h3等元素结合使用，表示文档结构，比如html5中<section>...</section> html4中<div>...</div>
article元素
表示页面中一块与上下文不相关的独立内容。比如一篇文章。
aside元素
表示与article元素内容之外的，与article元素内容相关的辅助信息。
header元素
表示页面中一个内容区块或整个页面的标题。
hgroup元素
表示对整个页面或页面中的一个内容区块的标题进行组合。
footer元素
表示整个页面或页面中的一个内容区块的的脚注。一般来说，会包含创作者的姓名，创作日期以及创作这的联系信息。
nav元素
表示页面中导航链接的部分。
figure元素
表示一段独立的流内容，一般表示文档主题流内容中的一个独立单元

^[3]

2.2 新增的媒体标签

video标签
定义视频，像电影片段或其他视频流，例：

<video src="movie.ogg" controls="controls">这是XXX的视频</video>

audio标签
定义音频，如音乐或其他音频流。例：

<audio src="someaudio.wav">audio标签</audio>

embed标签
用来嵌入内容（包括各种媒体）。格式可以是midi、wav、aiff、au、MP3、flash等。例：

<embed src="flash.swf"/>

^[4]

2.3 新增表单控件标签

email //必须输入email
url //必须输入url地址
number //必须输入数值
range //必须输入一定范围内数值
Date Pickers（日期选择器），拥有多个可供选择的日期和时间的新输入类型：
date - 选取日月年
month - 选取月、年
week - 选取周和年
time - 选取时间
datetime - 选取时间、日、月、年（UTC时间）
datetime-local - 选取时间、日、月、年（本地时间）
search
color

^[5]

2.4 新增的其他标签

mark标签
主要用来在视觉上向用户呈现哪些需要突出显示或高亮现实的文字，典型应用搜索结果中高亮显示搜索关键字
<html5>: <mark></mark>;
progress标签
表示运行中的进程，可以使用progress标签显示JS中耗时时间函数的进程，等待中...、请稍后等。

<progress max="100" value="85"><span>85</span>%</progress>

time标签

<p>"发布日期"<time datetime="2017-10-20T09:00Z">9:00</time>    //T表示时间和日期的分隔符，Z表示UTC时间制
      "更新日期"<time datetime="2017-10-20T09:00Z" pubdate>9:00</time>
</p>

ruby标签
对内容进行注释

<ruby>"厼"<rt> </rt>     //rt表示注释内容
    <rp>(</rp>
    "ㄩㄜ ㄇ "<rp>)</rp>    //rp表示浏览器不支持时的显示
</ruby>

wbr标签
软换行：当页面足够宽不换行，当页面小了之后换行
canvas标签
跟着script进行图形的绘制

图形绘制
command标签

<menu>
  command onclick="alert('hello world')" label="click">
  "Click Me!"
</menu>   //兼容性不是很好

details标签

<details open>
    <summary>MacBook Pro Sepcification</summary>
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</details>

details的使用效果

datalist标签

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
    <input id="myCar" list="cars">
    <datalist id="cars">
        <option value="BMW"></option>
        <option value="Ford"></option>
        <option value="Volvo"></option>
    </datalist>
</form>

keygen标签
<keygen> 标签规定用于表单的密钥对生成器字段。
当提交表单时，私钥存储在本地，公钥发送到服务器。

<form action="demo_keygen.asp" method="get">
    Username: <input type="text" name="usr_name" />
    Encryption: <keygen name="security" />
    <input type="submit" />
</form>

火狐浏览器支持较好

output标签

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
    0
    <input type="range" id="a" value="50">
    100+
    <input type="number" id="a" value="50">
    =
    <output name="x" for="a b">
        139
    </output>
</form>

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

<audio controls>
   <source src="horse.ogg" type="audio/ogg">
   <source src="horse.mp3" type="audio/mpeg">
   Your browser does not support the audio element.
</audio>

menu标签

<menu type="toolbar">
    <li><input type="checkbox" />Red</li>
    <li><input type="checkbox" />Blue</li>
</menu>

^[6]

三、新增及废除的属性

3.1 表单属性

manifest
表示定义应用离线文件的本地文件，也就是应用程序缓存 :

<!DOCTYPE HTML>
<html manifest="demo.appcache">  //定义缓存文件
<body>
文档内容......
</body>
</html>

禁用缓存的方法：

<meta http-equiv="pragma" content="no-cache">

charset

<meta charset="utf-8">

link logo的sizes属性

<link rel="icon" href="demo_icon.gif" type="image/gif" sizes="16x16">

base target属性
base标签

<base href="http://localhost/" target="_blank">

-script 标签的defer和async属性

<script defer src="http://code.jquery.com/jquery-1.10.1.min.js" onload="alert('a')"></script>
<script async src="http://code.jquery.com/jquery-1.10.1.min.js" onload="alert('b')"></script>

上面的代码会先弹出“b”，defer表示延缓加载，async表示异步加载

a标签的media和其他属性

<a media="handheld" href="#">手持</a>  //为手持设备优化
<a media="tv" href="#">电视</a>  //为TV优化
<a href="#" hreflang="zh" ref="external">慕课网</a>  //external表示这是一个外部超链接

ol标签的start和reversed属性

<ol start="50" reversed>  //他会从50开始倒序显示
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ol>

menu 的type属性
HTML <menu> 标签
目前所有主流浏览器都不支持 <menu> 标签。
scoped
内嵌css样式

<div>
    <style type="text/css" scoped>
        h1 {color: red;}
        p {color: blue;}
    </style>  //这里定义的样式只对该div标签下的元素作用
    <h1>This is a head</h1>
    <p>This is a paragragh</p>
</div>

iframe增加的属性

<iframe seamless srcdoc="<h1>Hello</h1>" sandbox src="http://baidu.com"></iframe>

seamless：该框架没有边距，也没有边框；
srcdoc：嵌入框架的内容，和后面的src同时存在，浏览器会忽略src的内容；
sandbox：表示iframe受到严格安全限制。嵌入的百度，表单提交不能使用了。他会禁用三个：禁止提交表单、禁止运行JS、内嵌页面和该页面不是同源的，是异源。他还有四个值：allow-forms、allow-same-origin(允许 iframe 内容被视为与包含文档有相同的来源)、allow-script、allow-top-navigation(允许 iframe 内容从包含文档导航加载内容)

删除的属性多是可用CSS代替的属性
html5新增及废除属性

^[7]

四、全局属性

data-yourvalue

<form data-type="comment" class="container">  //自定义属性

hidden

<label hidden>隐藏的东西</label>

spellcheck 语法纠错

<textarea tabindex="2" spellcheck="true" cols="60" rows="5"></textarea>

tabindex 表示用tab键的切换顺序

<input tabindex="1">

contenteditable 让标签变成可输入的

<p contenteditable="true">请您留言</p>

desginMode
JS的一个属性可以让页面任意位置变成可输入的，但实用度不高

<script>window.document.designMode = 'on' ;</script>