HTML5

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="width:300px">
      <figcaption>同志</figcaption>
      <img src="../../dist/images/1.jpg" alt="" style="width: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]-->>

posted @ 2017-08-02 00:40 blue星期天阅读(204) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

blue星期天

HTML5

HTML5新增标签

一、结构标签

1.<header>

3.<main>

4.<nav>

5.<section>

6.<article>

7.<aside>

8.<details>

9.<summary>

10.<dialog>

二、文本语义标签

1.<bdi>

2.<mark>

3.<meter>

4.<progress>

5.<time>

6.<wbr>

7.<ruby>

三、图像

1.<figure>

2.<canvas>

四、列表标签

1.<menu>

2.<menuitem>

3.<command>

4.<dl>

5.<dt>

6.<dd>

五、多媒体标签

1.<audio>

2.<video>

3.<source>

4.<track>

六、表单标签

1.<datalist>

2.<keygen>

3.<output>

七、其他

1.<embed>

HTML5音频/视频

一、视频

1.<video>

2.视频格式等MIME类型

二、音频

1.<audio>

2.音频格式的MIME类型

三、相关元素

1.<video>

2.<audio>

3.<source>

4.<track>

HTML5表单

一、form元素新增属性

1.autocomplete

2.novalidate

二、input

1.type类型

2.属性

三、新增标签

1.<output>

2.<datalist>

3.<keygen>

四、表单控件新增标签

1.<placeholder>

2.<pattern>

3.<autocomplete>

4.<autofocus>

5.<required>

全局属性

1.<class>

2.<id>

3.<dir>

4.<style>

5.<title>

6.<lang>

7.<tabindex>

8.contenteditable

1.`<header>`

3.`<main>`

4.`<nav>`

5.`<section>`

6.`<article>`

7.`<aside>`

8.`<details>`

9.`<summary>`

10.`<dialog>`

1.`<bdi>`

2.`<mark>`

3.`<meter>`

4.`<progress>`

5.`<time>`

6.`<wbr>`

7.`<ruby>`

1.`<figure>`

2.`<canvas>`

1.`<menu>`

2.`<menuitem>`

3.`<command>`

4.`<dl>`

5.`<dt>`

6.`<dd>`

1.`<audio>`

2.`<video>`

3.`<source>`

4.`<track>`

1.`<datalist>`

2.`<keygen>`

3.`<output>`

1.`<embed>`

1.`<video>`

1.`<audio>`

1.`<video>`

2.`<audio>`

3.`<source>`

4.`<track>`

1.`autocomplete`

2.`novalidate`

1.`<output>`

2.`<datalist>`

3.`<keygen>`

1.`<placeholder>`

2.`<pattern>`

3.`<autocomplete>`

4.`<autofocus>`

5.`<required>`

1.`<class>`

2.`<id>`

3.`<dir>`

4.`<style>`

5.`<title>`

6.`<lang>`

7.`<tabindex>`

8.`contenteditable`

9.`contextmenu`

10.`data-*`

11.`draggable`

12.`dropzone`

13.`hidden`

14.`spellcheck`

15.`translate`

4.IE9以及IE9以下浏览器可以识别