html5 ≈ 标签(HTML5) +CSS3+JavaScript
IE9chrome 谷歌 FFOpearSafari 2010 开始支持 HTML5
DTD 文档声明 <!DOCTYPE HTML>
字符集 <meta charset="utf-8">
标签书写的改变
a)不允许写结束标签(单标签)
br,hr,img,input,link,param,keygen,area,base,col,wbr,.....
b)可以忽略结束标签(框架内部的列表选项)
li,tr,td,dd,dt,option,p...
c)可以忽略的标签(可以不写)
head,body,HTML,tbody,thead,colgroup
有些单属性设置的时候可能需要加上 布尔值 checked=true(格式)
Section 主体内容, 文章
article 完整的文章, 新闻, 博文, 评论
aside 非主体内容(一般侧边栏)
header 页面或文章头部区域
Footer 页面或文章底部区域
Hgroup 一组标题区域
Nav 导航区域(页面中文章的分页区域)
Figure 内容描述解释区域
- <figure>
- <figcaption>
- <img src="t011f8ea1d640ac90d5.jpg">
- </figcaption>
- <P>
- 中国反恐工作面临 "严峻" 挑战
- </P>
- </figure>
Figcaption 描述配合标签 (定义描述主体如图片, 把图片包含其内部)
Address 真实地址或者 url 地址区域
Audio 用于播放音频文件
格式:(普通格式)
<audio src="音频地址"controls autoplay loop > 后备内容: 您的浏览器不支持该功能</audio>
格式:(完整格式)
- <audio controls>
- <source src="音频地址" type="audio/mp3">
- <source src="音频地址" type="audio/wav">
- <source src="音频地址" type="audio/ogg">
后备内容: 您的浏览器不支持该功能
</audio>
注意其中 preload 属性为音频是否预加载
值一: none 不预加载(默认值)
值二: auto 预先加载(打开页面就加载)
注意: preload 属性和 autoplay 属性冲突.
video 视频标签和 audio 标签用法一样
其中它的 source 的 type 属性的值为 video/mp4
- <source src="视频地址" type="video/mp4">
- <source src="视频地址" type="video / 视频格式">
Video 比 audio 多的两个属性:
Width: 设置视频窗口宽度
Height: 高度
Poster: 使用方法 ="url" 引入播放视频前背景图片;
Canvas 画布标签
embed 多媒体标签 1 属性 src="用于引入 flash 路径"
<embed src="http://img5.3lian.com/flash/01/26/58.swf"></embed>
Meter 状态标签
<meter max="100" min="0" value="59" low="60" high="85" optimum="100"></meter>
max 最大值 min 最小值 value 指定值
high 指定边线值 大于指定值 默认绿色警告
low 指定边线值 小于指定值 默认红色警告
optimum 设置是否大于最大边线值或者小于最小边线值 optimum 若大于最大边线值 ->指定值大于最大边线值时为绿色
optimum 若小于最小边线值 ->指定值小于最小边线值时为绿色(也是默认的无 optimum 设定时的状态)
Progress 进度条标签
<progress max="100" value="0"></progress>
max 进度条最大值 - 整数
value 进度条当前值 - 整数
mark 高亮标记标签
<p > 近几日,<mark style="background:purple">苍老师</mark > 要到烟台演出, 据说门票 580 元, 可惜俺去不了</p>
time 标注时间的标签
- <p>
- <time datetime="2014-05-08T19:30:28">
- 今晚日落时分
- </time>
- , 在宿舍洗干净等着我.
- </p>
- <p>
- <time datetime="2014-05-08T19:30:28" pubdate>
- 今晚日落时分
- </time>
- , 发布 MH370 事故报告.
- </p>
属性 1: datetime 解释具体的时间
属性 2: pubdate 设定当前时间为发布时间(单属性)
格式: 年 - 月 - 日 T 时: 分: 秒
年 - 月 - 日 T 时: 分: 秒 + 08:00 带时区时间
年 - 月 - 日 T 时: 分: 秒 Z 国际统一时间
Ruby 设定文字的拼音或者其他音译解释
Rt 用于设置音标的标签
<Ruby>
漢 <rt>han</rt>
- </Ruby>
- <p > 猥 (zheng) 琐(zhi)</p>
Rp 当浏览器不支持拼音注释时 使用
Details 细节描述标签
Summary 描述的标题标签
datalist 可选的数据下拉列表标签(下来菜单)
使用:
1. 为 datalist 添加一个 id
2. 在 input 标签中使用 list 属性指定 id 即可
dialog 对话标签
该标签需要配合 dt 和 dd 标签使用
dt 标签用于表示姓名或者昵称
dd 用来表示对话内容
abbr 缩写代码标签
title 属性用于描述详细内容
4. 删除的标签
删除的标签分 4 种:
1. 可以使用 CSS 代替的标签
font,big,center,u,tt,basefont,s,strike..
2. 框架集标签
frame 和 frameset 被删除了, 但是 iframe 没有删除
3. 只有部分浏览器支持的标签
bgsound,applet,blink,marquee..
4. 被替换的标签
Rb->Ruby 代替
Acronym->abbr 代替
Xmp->code 代替
...
新增的属性(智能表单)
新增的表单属性. type 的新类型
email 邮件地址表单
urlurl 地址表单
number 数值表单
range 滑块表单
search 搜索表单 Chrome 可以使用 results="n" 搜索小图标
color 颜色表单
tel 电话表单 没有验证规则 和 type=text 没区别
date 日期表单
time 时间表单
datetime 完整的日期时间表单
week 周选取表单
month 月选取表单
表单的新用法:(分散式表单书写规则)
html5 为了布局的方便, 设定了新的表单使用方式
1. 为 form 标签添加 id
2. 为所有当前 form 中的表单标签添加 form 属性指定 form 标签的 id, 即可绑定该表单, 任意位置都可以使用.
output 标签 表单值输出标签
其他表单属性:
Autofocus 自动获取焦点属性 (焦点只能有一个)
placeholder 用于设定表单的提示信息 不会随表单提交给服务器
Form 为表单设定归属于哪一个 form 表单当中(值为 form 标签的 id)
Required 设定字段的值必须由用户填写, 不写不能提交
Min 设定表单的最小值 (number 类型 , 时间类型, 滑块类型)
max 设定表单的最大值(number 类型, 时间类型, 滑块类型)
Multiple 多选下拉列表属性(select) 多选文件上传表单(input type="file")
Step 设定表单数值的增加或者减小的值(适合 number 表单)
Pattern 设定一个表单的自定义验证规则.
Formaction 设定当前提交按钮的提交页面(该设置会覆盖 form 标签的 action 属性)
Formmethod 设定当前按钮的提交方式 (该设置会覆盖 form 标签的 method 属性)
Formenctype 设定当前按钮的提交类型(该设置会覆盖 form 标签的 enctype 属性)
Formtarget 设定当前按钮提交之后的页面打开方式.(该设置会覆盖 form 标签的 target 属性)
Formnovalidate 设定当前按钮提交的验证方式.(该设置会覆盖 form 标签的 novalidate 属性)
novalidate 禁止验证属性 form 标签使用后, 所有该表单中需要验证的表单将不做验证操作
新增的其他属性:
a 标签增加了 media 属性
meta 标签增加了 charset 属性
link 标签增加了 size 的属性
base 标签增加了 target 属性
ol 标签 增加了 reversed 属性
style 标签 增加了 scoped 属性 用于设定 CSS 作用范围(重要但是不能用)
script 标签增加了 async 属性
HTML 标签增加了 mainfest 属性 离线网站应用的属性
删除的属性
1. 页面中终于表示样式的属性全部删除
例如 body 标签中 bgcolor,background,vlink,alink, 等...
2. 删除了部分无用的属性
link 标签中 target 属性, img 标签中 name 属性...
新增的全局属性
ContentEditable 设定内容可以编辑
设定具有该属性的元素是否具备可以编辑的功能(页面中临时改变, 如果需要改变真实内容, 需要其他语言配合)
designMode 设定页面所有元素是否可以编辑(只能在 JS 中设置)
可以再 JS 中通过语法
document.designMode='on'; 设置该选项
Hidden 设定元素是否显示
在 HTML5 中 该属性可以对任何元素使用, 设定该元素为不显示状态, 效果和 display:none 效果相似
Spellcheck 设定元素进行英文拼写检测属性(不支持汉字)(未实现)
tabindex 设定 tab 键的索引属性
video 视频标签
格式:(普通格式)
<video src="视频地址"controls > 后备内容</video>
Width: 设置视频的宽度
height: 设置视频的高度
poster: 设置视频预览图片
Details 细节描述标签
Summary 描述的标题标签
- <details>
- <summary>
- 手贱请点击
- </summary>
- <p>
色戒信息 < br />
主演: 梁朝伟, 汤唯, 王力宏...
</p>
</details>
datalist 可选的数据下拉列表标签(下来菜单)
- <input type="text" name="user" value="" list="lamp84" />
- <datalistid="lamp84">
- <option>
- 丛涛的不归路
- </option>
- <option>
- 丛浩的不归路
- </option>
- </datalist>
dialog 对话标签
- <dialog>
- <dt>
- 丛浩:
- </dt>
- <dd>
- 小玲, 今天晚上有空吗?
- </dd>
- <dt>
- 小玲:
- </dt>
- <dd>
- 我们一起翻滚吧~
- </dd>
- <dt>
- 莹莹:
- </dt>
- <dd>
- 你们不要这样子啦~~
- </dd>
- </dialog>
abbr 缩写代码标签 < abbr title="开房菜">KFC</abbr>
title 属性用于描述详细内容
删除的标签
删除的标签分 4 种:
1. 可以使用 CSS 代替的标签 font,big.
2. 框架集标签 frame 和 frameset 被删除, 但 iframe 木删除
3. 只有部分浏览器支持的标签 bgsound,marquee..
4. 被替换的标签
Rb->Ruby 代替 - 解释汉字
Acronym->abbr 代替 < abbr title="开房菜">KFC</abbr>
Xmp->code 代替 - 代码
...
新增的表单属性. type 的新类型
email 邮件 - 规定格式 @
urlurl 地址 - 规定格式 http://www/ ...
number 数值
range 滑块(max="100"value="0")
滑块通过 (output 对标签) 标签实现滑动显示值
- 滑块:<input type="range" name="fen1"max="100"value="0" />
- <!-- 仅 opear 浏览器有效 -->
- <output onforminput="value=fen1.value">0</output>
search 搜索 Chrome 可以使用 results="n" 搜索小图标
<input type="search" name="keywords" value=""results="n"/>
color 颜色表单
tel 电话表单 没有验证规则 和 type=text 没区别
date 日期表单
time 时间表单
datetime 完整的日期时间表单
week 周选取表单
month 月选取表单
表单的新用法:(分散式表单书写规则)
- <!-- 使用前 -->
- <form action="1.php" method="get">
- <input type="text" name="username" value="" placeholder=" 请输入名字 " autofocus>
- <!--Autofocus 自动获取焦点(单属性)->
- <!--placeholder 设定表单的提示信息不会自动提交和 value 的区别 ->
- <button type="submit">提交</button>
- </form>
- <!-- 使用后 -->
- <form action="1.php" method="get" id="myform">
- </form>
- <input type="text" name="username" value="" form="myform">
- <button type="submit" form="myform">
- 提交
- </button>
表单的其他属性
Required 设定字段的值必须由用户填写, 不写不能提
用户名:<input type="text" name="username" value=""required /><br>
Min 设定最小值 (number , 时间, 滑块)
max 设定最大值(number, 时间, 滑块)
Multiple 多选文件上传
多文件上传:<input type="file" name="face"multiplevalue="" /><br>
Step 数值的增加或减小段
数值 < input type="number" name="no" value=""step="5">
- Pattern 自定义验证规则 =""电话:<input type="tel"name="tel"value=""pattern="\d{
- 11
- }"><br>
- 电话:<input type="tel" name="tel" value=""pattern="^1((3\d)|(47)|(5[0-35-9])|(8[0-35-9]))\d{
- 8
- }$"><br>
Formaction 当前按钮提交页面 formaction="2.php"
Formmethod 当前按钮提交方式 f ormmethod="post"
Formenctype 当前按钮提交类型
Formtarget 当前按钮提交后页面打开方式 formtarget="_blank"
Formnovalidate 当前按钮页面无验证提交(单属性)
novalidateform 里面的的禁止验证属性 设定后, 该页面中所有设定验证的表单将不做验证就可提交(单属性)
新增的其他属性:
a 增 media 属性
meta 增 charset
link 增 size
base 增 target
ol 增 reversed----à 列表的序号倒过来
- <!doctype HTML>
- <meta charset="utf-8">
- <ol reversed type="a">
- <li>
- 曾小玲
- <li>
- 付莹莹
- <li>
- 许雪颖
- <li>
- 詹慧婷
- </ol
style 标签 增加了 scoped 属性 用于设定 CSS 作用范围(重要但是不能用)
script 增 async
HTML 增 mainfest 离线网站应用的属性
删除的属性
1. 页面中表示样式的属性全部删除 bgcolor,background,vlink,alink, 等...
2. 删除了无用属性 link 标签中 target 属性, img 标签中 name 属性...
新增的全局属性
contentEditable 设定内容可以编辑
设定具有该属性的元素是否具备可以编辑的功能(页面中临时改变, 如果需要改变真实内容, 需要其他语言配合)
designMode 设定页面所有元素是否可以编辑 (只能在 JS 中设置)
可以再 JS 中通过语法
document.designMode='on'; 设置该选项
hidden 设定元素是否显示
在 HTML5 中 该属性可以对任何元素使用, 设定该元素为不显示状态, 效果和 display:none 效果相似
Spellcheck 设定元素进行英文拼写检测属性单属性(不支持汉字)(未实现)
tabindex 设定 tab 键的索引顺序
- <!doctype HTML>
- <meta charset="utf-8">
- <script>
- // 设定页面所有内容可以编辑
- //document.designMode='on';
- </script>
- <phidden>
- 请问: 饥饿和饥渴有什么区别? 答案: 区别就是可以表示黄瓜的 2 种的不同用法!
- </p>
- <pcontentEditable>
- 请问: 饥饿和饥渴有什么区别? 答案: 区别就是可以表示黄瓜的 2 种的不同用法!
- </p>
- <phidden>
- 请问: 饥饿和饥渴有什么区别? 答案: 区别就是可以表示黄瓜的 2 种的不同用法!
- </p>
- <pspellcheck>
- spellcheck
- </p>
- <hr>
- value=""placeholder=" 请输入名字 " 该属性 不会提交默认字
- <input type="text" name="user" value="" tabindex=1 autofocus />
- <input type="text" name="user" value="" tabindex=4>
- <input type="text" name="user" value="" tabindex=2 />
- <input type="text" name="user" value="" tabindex=5>
- <input type="text" name="user" value="" tabindex=3 />
- <button type="submit" tabindex=6>
- 提交
- </button>
HTML5 及 DOM2.3 扩展
innerHTML 获取 / 设置元素内部所有的内容, 包括文本, 标签注释等... 解析 HTML 标签
innerText / textContent 获取 / 设置元素内容的文本内容, 该方法设置时不解析 HTML 标签
outerHTML 获取当前元素和元素内部的所有内容, 包括文本, 注释, 标签等.... 可以解析 HTML 标签效果.
outerText 获取当前元素和元素内部的所有文本内容, 但是效果和 innerText 一样 不解析 HTML 标签
节点新增的属性: 关系属性
firstElementChild 获取元素的第一个子元素节点
lastElementChild 获取元素的最后一个子元素节点
nextElementSibling 获取下一个兄弟元素节点
previousElementSibling 获去上一个兄弟元素节点
ChildElementCount 获取某个元素的子元素节点个数
children 获取元素所有子元素节点的列表数组
新的获取元素的方法:
getElementsByClassName()通过元素的 class 属性来获取节点集合
格式 1:document.getElementsByClassName() 全文档查找
格式 2: 元素节点. getElementsByClassName() 元素内部查找
getElementsByTagName()通过元素的标签名来会获取属性节点集合
格式 1:document.getElementsByTagName() 全文档查找
格式 2: 元素节点. getElementsByTagName() 元素内部查找
querySelector()通过 CSS 选择器来查找所有符合当前选择器的元素, 但是返回第一个
querySelectorAll()通过 CSS 选择器来查找所有符合当前选择器的元素, 返回所有符合当前选择器的数组
Html5
来源: http://www.bubuko.com/infodetail-2837549.html