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"/>
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>
三、新增及废除的属性
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新增及废除属性
四、全局属性
- 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>
网友评论