HTML5新增标签
一、结构标签
1.<header>
- 定义section或page的页眉
- footer
- 定义section或page的页脚
3.<main>
- 标签规定文档的主要内容
- 该元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧边栏，导航栏，出版信息，站点标志或搜索表单。
- 注释：
-
在一个文档中，不能出现一个以上的
<main>元素。 -
<main>元素不能是以下元素的后代<article>、<aside>、<footer>、<header>、<nav>
-
IE不支持
-
4.<nav>
- 表示链接导航部分 如果文档中有“前后”按钮，则应该把它放到nav元素中
5.<section>
- 定义文档中的节，通常不推荐那些没有标题的内容使用。
6.<article>
- 定义文章，论坛帖子，报纸文章，博客条目、用户评论
7.<aside>
- 相关内容，相关辅助信息，如侧边栏
8.<details>
- 标签用于描述文档或文档某个部分的细节。
- 与
<summary>标签，配合使用可以为details定义标题。标题是可见得，用户点击标题时，会显示出details - 属性open定义details可见
- Chrome Safari支持
9.<summary>
- 为
<details>元素定义可见的标题 - Chrome Safari支持
10.<dialog>
- 标签定义对话框或窗口
- 属性open dialog 元素是活动的，用户可与之交互。
- Chrome Safari支持
二、文本语义标签
1.<bdi>
- 标签允许设置一段文本，使其脱离其父元素的文本方向设置（经测试各大浏览器不起作用）
2.<mark>
- 标签定义带有记号的文本，在需要突出显示文本时使用，如搜索引擎搜索页面
3.<meter>
-
定义预定义范围的度量
-
IE不支持
-
属性
form 规定`<meter>`元素所属的一个或多个表单 high number 规定被视作高的值的范围。 low number 规定被视作高的值的范围。 max number 规定范围的最大值 min number 规定范围的最小值 optimum number 规定度量的优化值 value number 必需，规定度量的当前值
4.<progress>
-
属性
- max number :规定任务一个需要多少工作
- value number :规定已经完成多少任务
-
提示
- 结合
<progress>标签与JavaScript一同使用,来显示任务的进度。
- 结合
-
注释
- IE9以及更早的版本不支持
5.<time>
- 如何定义时间和日期
- 属性
- datetime规定时间/日期。否则，有元素的内容给定日期/时间
- pubdate指示
<time>元素的日期/时间是文档的（或<article>元素）的发布日
6.<wbr>
- 规定文本中的何处适合添加换行符（一般在单词太长处设置）
- br是强制换行，而wbr不是
7.<ruby>
- 标签定义ruby注释（中文拼音或字符）
- 与
<ruby>以及<rt>标签一起使用-
ruby元素有一个或多个字符（需要一个解释/发音）和一个提供该信息的rt元素组成，还包括可选择的rp元素，定义当浏览器不支持ruby元素时显示的内容。
例如： <p> <ruby>同志 <rt>tongzhi</rt></ruby> <ruby>同<rt>tong</rt> 志<rt>zhi</rt> </ruby> <ruby>同<rp>(</rp><rt>tong</rt><rp>)</rp> 志 <rp>(</rp><rt>zhi</rt><rp>)</rp> </ruby> </p>
-
三、图像
1.<figure>
-
一段独立的流内容，比如文章中的插图
-
该元素的内容应该与主内容相关，但如果被删除，则不应该对文档流产生影响
-
使用
<figcaption>元素为figure添加标题（caption）例如 <figure style="300px"> <figcaption>同志</figcaption> <img src="../../dist/images/1.jpg" alt="" style="100%"> </figure>
2.<canvas>
- 定义图形
四、列表标签
1.<menu>
-
定义命令的列表或菜单
-
Firefox支持
例如 <menu id="mymenu" type="context"> <menuitem label="分享到QQ"></menuitem> <menuitem label="分享到微信"></menuitem> </menu>
2.<menuitem>
-
标签定义用户可以弹出菜单调用的命令/菜单项目
-
Firefox支持
-
属性
checked 规定在页面加载后选中命令/菜单项目。仅适用于type="radio"或type="checkbox" default 把命令或/菜单项设置为默认命令 disabled 规定命令或菜单项应该被禁用 icon URL规定命令或菜单项的图标 open 定义details是否可见 lable 必需。规定命令或菜单项的名称，以向用户显示 radiogroup 规定命令组的名称，命令组会在命令或菜单项本身被切换时进行切换。仅适用于type="radio" type checkbox|command|radio 规定命令/菜单项的类型。默认是“command”
3.<command>
- 定义命令按钮
- 大部分浏览器都不支持
4.<dl>
- 定义了定义列表
5.<dt>
- 标签定义了列表中的项目（即术语部分）
6.<dd>
- 在定义列表中定义条目的定义部分
五、多媒体标签
1.<audio>
- 定义声音内容
2.<video>
- 定义视频
3.<source>
- 定义媒介源
4.<track>
- 定义用在媒体播放器中的文本轨道
六、表单标签
1.<datalist>
- 定义下拉列表
2.<keygen>
- 定义生成秘钥
3.<output>
- 定义输入的类型
七、其他
1.<embed>
-
定义嵌入的内容，比如插件
height pixels设置嵌入内容的高度 src url嵌入内容的URL type type 定义嵌入内容的类型 width pixels设置嵌入内容的宽度
HTML5音频/视频
一、视频
1.<video>
-
通过video元素来包含视频的标准方法
浏览器 MP4 WebM Ogg IE9+ YES NO NO Chrome6+ YES YES YES Firefox3.6+ NO YES YES Safari5+ YES NO NO Opera10.6+ NO YES YES
2.视频格式等MIME类型
格式 MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg
二、音频
1.<audio>
-
通过audio元素
浏览器 MP4 WebM Ogg IE9+ YES NO NO Chrome6+ YES YES YES Firefox3.6+ NO YES YES Safari5+ YES YES NO Opera10.6+ NO YES YES
2.音频格式的MIME类型
格式 MIME-type
MP3 audio/mpeg
Wav audio/wav
Ogg audio/ogg
三、相关元素
1.<video>
-
定义视频
属性 值 描述 src url 要播放的视频的URL autoplay autoplay 视频在就绪后马上播放 controls controls 显示控件 比如播放按钮 loop loop 循环 muted muted 静音 preload preload 在页面加载时进行加载，并预备播放。如果使用autoplay,则忽略该属性 `poster` URL 规定视频下载时显示的图像，视频播放前的图片 height pixels 设置视频播放器的高度 width pixels 设置播放器宽度
2.<audio>
- 定义音频
- 属性（类似视频）
3.<source>
- 定义多媒体资源，比如
<video>和<audio> - 属性
- src url 规定媒体文件的URL
- type numeric value 规定媒体资源的MIME类型
4.<track>
- 播放器文本轨迹
- 属性
-
default default 规定该轨道是默认的，假如没有选择任何轨道
-
kind 表示规定属于什么文本类型
- chapters
- captions
- descriptions
- metadata
- subtitles
-
label label 轨道的标签或标题
-
src url 轨道的URL
-
srclang language_code 轨道的语言，若kind属性值是“subtitles”,则该属性必需的
-
HTML5表单
一、form元素新增属性
1.autocomplete
- 规定form应该拥有自动完成功能。值：off|on
2.novalidate
- 规定在提交表单时不应该验证form或input域
二、input
1.type类型
- email:匹配邮箱地址
- url：必需输入url地址
- number
- 属性：min|max|step|value
- range
- 取值范围
- 属性：min|max|step（步长）|value(默认值)
- search
- 效果和text一样，专用于搜索框
- 属性：results
- tel
- 用于电话号，因为存在一等字符，所以等同于text，但是用移动设备，会直接弹出数字键盘
- color
- 调出取色面板
- 时间相关（火狐不支持）
- date：选取 日 月 年
- month：选取 月 年
- week： 选取 周 年
- time： 选取 时间，小时和分钟
- datetime：选取utc时间，日月年
- datetime-local：选取本地时间，日月年
2.属性
-
pattern
- 一个正则表达式用于验证input元素的值。
- 注意：pattern属性适用于以下类型的input标签
- text,search,url,tel,email,password
-
multiple
-
规定input元素中选择多个值
-
注意：multiple属性适用于以下类型的input标签
- email和file
-
<input type="submit|image">- form
- formaction
- formmethod
- formenctype
- formtarget
- formtarget
- formnovalidate
-
三、新增标签
1.<output>
- 定义不同类型的输出，比如脚本的输出
2.<datalist>
-
标签定义选项列表。与input元素配合使用该元素，来定义input可能的值
<input type="text" id="text" name="mr" autocomplete="off" list="test"/> <datalist id="test" style="display:none"> <option value="aa">aaaa</option> <option value="aa">aaaa</option> <option value="aa">aaaa</option> <option value="aa">aaaa</option> <option value="aa">aaaa</option> </datalist>
3.<keygen>
- 是提供一种验证用户的可靠方法
四、表单控件新增标签
1.<placeholder>
<input type="text" id="text" placeholder="请输入文字"/>- 提示文字，有别与value值
2.<pattern>
- 正则 自动验证
3.<autocomplete>
- 自动完成，可以设置为on/off
4.<autofocus>
- 自动获取焦点
5.<required>
- 必填项目，不输入不能提交
全局属性
1.<class>
- 规定元素的一个或多个类名（引用样式表中的类）
- class属性不能在以下元素中使用
- base,head,html,meta,param,script,style,title
2.<id>
- 规定元素的唯一id
3.<dir>
- 规定元素中内容的文本方向
- 注释：在以下标签无效
- base,br,frame,frameset,hr,iframe,param以及script
4.<style>
- 规定元素的行内CSS样式
5.<title>
- 规定有关元素的额外信息
6.<lang>
- 规定元素内容的语言
- 在以下标签中无效
- base，br,frame,frameset,hr,iframe,param以及script
- 值：语言代码
7.<tabindex>
- 规定元素的tab键次序
8.contenteditable
- 规定元素内容是否可编辑。
<element contenteditable="true|false">
9.contextmenu
- 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
- 只有Firefox可用
10.data-*
- 用于存储页面或应用程序的私有定制数据。
11.draggable
- 规定元素是否可拖动
<element draggable="true|false|auto">
12.dropzone
- 规定在拖动被拖动数据时是否进行复制、移动或链接。
<element dropzone="copy|move|link">
13.hidden
- 规定元素仍未或不再相关
14.spellcheck
- 规定是否对元素进行拼写和语法检查
<element spellcheck="true|false">- 可以对以下内容进行拼写检查
- input元素中的文本值（非密码）
- textarea元素中的文本
15.translate
- 规定是否应该翻译元素内容
<element translate="yes|no">
HTML5兼容性解决方案
1.使用html5shiv.js让IE9以下浏览器识别HTML5标签
<!--[if lt IE 9]>
<script src="html5shiv/dist/html5shiv.js"></script>
<![endif]-->
2.开启IE的兼容模式
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
3.壳浏览器，优先使用webkit内核
<meta name="renderer" content="webkit">
4.视频处理方案
-
使用ckplayer插件
<div id="a1"><div> <script type="text/javascirpt" src="/ckplayer/ckplayer.js" charset="utf-8"><script> <script type="text/javascript"> var flashvars={ f:'http://movie.ks.js.cn/flv/other/1_0.flv', c:0, i:'./video/page.jpg' }; var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:'transparent'}; vat video=['./video/1_0.mp4->video/mp4']; CKobject.embed('/ckplayer/ckplayer.swf','a1','ckplayer_a1','100%''100%',false,flash,flashvars,video,params); </scrpit>
IE条件注释
一、条件注释
1.IE中的条件注释对IE的版本和非IE版本有优先的区分能力。
2.条件注释的基本结构和HTML的注释是一样的。因此IE以外的浏览器将会把他们看作普通的注释而完全忽略它们。
3.IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
4.IE9以及IE9以下浏览器 可以识别
二、基础
1.lt: <
2.gt: >
3.gte: >=
4.lte: <=
5.!: 不是
三、案例
<!--[if IE 8]>仅IE8可见<![endif]-->
<!--[if gt IE 8]>仅IE 8以上可见<![endif]-->
<!--[if lt IE 8]>仅IE8 以下可见<![endif]-->
<!--[if gte IE 8]>IE8及以上可见<![endif]-->
<!--[if lte IE 8]>IE 8 及以下可见<![endif]-->
<!--[if !IE 8 ]>非IE8可见<![endif]-->
<!--[if !IE]><!-->您使用的不是IE<!--<![endif]-->>