相对不行错失的超实用HTML5代码片段

图片 1

本文提到的HTML5仅仅指于2014年完成新一代的HTML标准。

本文提到的HTML5仅仅指于2014年完成新一代的HTML标准。

HTML5绝对是一个流行元素,受到如此多的公司组织的追捧,作为极客来说,岂能错过呢?在今天这篇文章中,我们将分享一些超实用的HTML5的代码片段,相信大家一定会喜欢!

html5主要在以下方面做了改变。

html5主要在以下方面做了改变。

HTML5视频和fallback

 

 

实用HTML5的一个好处就是简化了视频和音频的嵌入代码量,不过呢,如何兼容老版本的浏览器绝对是一个令人头疼的问题,特别是在天朝,老版本的浏览器绝对处于优势地位,下面代码或者能够帮你忙:

1、新增标签

1、新增标签

<video width=“640” height=“360” controls>

<source src=“__VIDEO__.MP4” type=“video/mp4” />

<source src=“__VIDEO__.OGV” type=“video/ogg” />

<object width=“640” height=“360” type=“application/x-shockwave-flash” data=“__FLASH__.SWF”>

<param name=“movie” value=“__FLASH__.SWF” />

<param name=“flashvars” value=“controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4” />

<img src=“__VIDEO__.JPG” width=“640” height=“360” alt=“__TITLE__”

title=“No video playback capabilities, please download the video below” />

</object>

</video>

 

 

HTML5中新的Input类型及其验证

新增语义化标签。

新增语义化标签。

在HTML5出现之前,我们一般使用input来处理email,url,或者其它输入,然后使用Javascript来验证正确性,在HTML5中,我们使用如下代码即可:

<header> 定义 section 或 page 的页眉。

<header> 定义 section 或 page 的页眉。

输入一个URL地址:<input type=“url” value=“”>

输入一个邮件地址:<input type=“email” pattern=“[^ @]*@[^ @]*” value=“”>

<nav>定义导航链接。

<nav>定义导航链接。

注意:这里我们可以使用pattern属性来格式化输入内容

<footer> 定义 section 或 page 的页脚

<footer> 定义 section 或 page 的页脚

另外我们也可以使用一些HTML5的标签来处理表单验证,省去了javascript,如下:

<section> 定义 section。

<section> 定义 section。

<input title=“至少8位并且至少包含1个数字一个小写字母和一个大写字母” type=“text” pattern=“(?=.*\d)(?=.*[a-z])(?=.*[A-Z])。{8,}” required />

<input type=“text” required pattern=“(\+?\d[- 。]*){7,13}” title=“国际,国家和本地电话号码”/>

<article> 定义文章。

<article> 定义文章。

以上分别定义了输入的内容正确性原则。

<aside> 定义页面内容之外的内容。

<aside> 定义页面内容之外的内容。

HTML5直接添加项目到浏览器的右键菜单

下面用一个图示来说明其用法。

下面用一个图示来说明其用法。

使用HTML5可以直接添加菜单选项到你的浏览器右键菜单中,代码如下:

图片 2

图片 3

<section contextmenu=“mymenu”>

<p>右键点击这里</p>

</section>

<menu type=“context” id=“mymenu”>

<menuitem label=“极客社区” icon=“;

<menu label=“极客应用”>

<menuitem label=“在线教程” onclick=“window.location.href = ; </menuitem>

</menu>

</menu>

语义化标签的好处:

语义化标签的好处:

右键点击网页中文字处, 可以看到如下的菜单:

1、对搜索引擎友好,有利于SEO

1、对搜索引擎友好,有利于SEO

图片 4

2、便于程序员进行代码阅读和维护

2、便于程序员进行代码阅读和维护

在线调试

 

 

HTML5的datalist实现自动补齐功能

新增多媒体标签

新增多媒体标签

自动补齐功能大家应该都很熟悉,包括jQueryUI中,或者第三方的自动补齐插件也很多,在HTML5中我们使用datalist来实现,如下:

 

 

<input name=“frameworks” list=“frameworks” />

<datalist id=“frameworks”>

<option value=“Foundation”>

<option value=“Bootstrap”>

<option value=“Dojo Toolkit”>

<option value=“jQuery”>

<option value=“YUI”>

</datalist>

audio和vedio标签

audio和vedio标签

在线调试

 

 

元素的自动focus

<audio controls=”controls”>

<audio controls=”controls”>

无须使用javascript,代码很简单:

 

 

<input autofocus=“autofocus” />

  <source src=”song.ogg” type=”audio/ogg”>

  <source src=”song.ogg” type=”audio/ogg”>

希望大家喜欢,如果你有任何问题,请访问极客标签提问或者讨论,谢谢阅读

 

 

  <source src=”song.mp3″ type=”audio/mpeg”>

  <source src=”song.mp3″ type=”audio/mpeg”>

 

 

Your browser does not support the audio tag.

Your browser does not support the audio tag.

 

 

</audio>

</audio>

 

 

代码中的source标签为媒介元素,由于不同内核的浏览器支持不同格式的文件,source提供不同格式的资源供浏览器选择。

代码中的source标签为媒介元素,由于不同内核的浏览器支持不同格式的文件,source提供不同格式的资源供浏览器选择。

 

 

 

 

属性:

属性:

 

 

autoplay :自动播放

autoplay :自动播放

 

 

controls:显示控件

controls:显示控件

 

 

loop:循环播放

loop:循环播放

 

 

src:文件路径

src:文件路径

 

 

<video src=”movie.ogg” controls=”controls”>

<video src=”movie.ogg” controls=”controls”>

 

 

</video>

</video>

 

 

除了具有audio标签的属性外,Vedio标签还可以设置宽高属性。

除了具有audio标签的属性外,Vedio标签还可以设置宽高属性。

 

 

当播放带有字幕的视频时可以用track标签进行引入。

当播放带有字幕的视频时可以用track标签进行引入。

 

 

<video width=”320″ height=”240″ controls=”controls”>

<video width=”320″ height=”240″ controls=”controls”>

 

 

  <source src=”forrest_gump.mp4″ type=”video/mp4″ />

  <source src=”forrest_gump.mp4″ type=”video/mp4″ />

 

 

  <source src=”forrest_gump.ogg” type=”video/ogg” />

  <source src=”forrest_gump.ogg” type=”video/ogg” />

 

 

  <track kind=”subtitles” src=”subs_chi.srt” srclang=”zh”
label=”Chinese”>

  <track kind=”subtitles” src=”subs_chi.srt” srclang=”zh”
label=”Chinese”>

 

 

  <track kind=”subtitles” src=”subs_eng.srt” srclang=”en”
label=”English”>

  <track kind=”subtitles” src=”subs_eng.srt” srclang=”en”
label=”English”>

 

 

</video>

</video>

新增表单元素及属性

新增表单元素及属性

1、新增7个输入类型

1、新增7个输入类型

 

 

  • email
  • email

email 类型用于应该包含 e-mail 地址的输入域。

email 类型用于应该包含 e-mail 地址的输入域。

在提交表单时,会自动验证
email 域的值。

在提交表单时,会自动验证
email 域的值。

  • url
  • url

url 类型用于应该包含 URL 地址的输入域。

url 类型用于应该包含 URL 地址的输入域。

在提交表单时,会自动验证
url 域的值。

在提交表单时,会自动验证
url 域的值。

  • Number
  • Number

number 类型用于应该包含数值的输入域。

number 类型用于应该包含数值的输入域。

您还能够设定对所接受的数字的限定:

您还能够设定对所接受的数字的限定:

Points: <input type=”number” name=”points” min=”1″ max=”10″ />

Points: <input type=”number” name=”points” min=”1″ max=”10″ />

属性

描述

max

number

规定允许的最大值

min

number

规定允许的最小值

step

number

规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)

value

number

规定默认值

属性

描述

max

number

规定允许的最大值

min

number

规定允许的最小值

step

number

规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)

value

number

规定默认值

 

 

  • Range
  • Range

range 类型用于应该包含一定范围内数字值的输入域。

range 类型用于应该包含一定范围内数字值的输入域。

range 类型显示为滑动条。

range 类型显示为滑动条。

您还能够设定对所接受的数字的限定:

您还能够设定对所接受的数字的限定:

  • Date pickers (date, month, week, time, datetime, datetime-local)
  • Date pickers (date, month, week, time, datetime, datetime-local)

HTML5 拥有多个可供选取日期和时间的新输入类型:

HTML5 拥有多个可供选取日期和时间的新输入类型:

  • date – 选取日、月、年
  • month – 选取月、年
  • week – 选取周和年
  • time – 选取时间(小时和分钟)
  • datetime – 选取时间、日、月、年(UTC 时间)
  • datetime-local – 选取时间、日、月、年(本地时间)
  • date – 选取日、月、年
  • month – 选取月、年
  • week – 选取周和年
  • time – 选取时间(小时和分钟)
  • datetime – 选取时间、日、月、年(UTC 时间)
  • datetime-local – 选取时间、日、月、年(本地时间)

  • Search
  • Search

search 类型用于搜索域,比如站点搜索或 Google 搜索。

search 类型用于搜索域,比如站点搜索或 Google 搜索。

search 域显示为常规的文本域。

search 域显示为常规的文本域。

  • Color
  • 会调出颜色面板
  • Color
  • 会调出颜色面板

 

 

1、新增3个表单元素

1、新增3个表单元素

 

 

  • datalist
  • datalist

 

 

datalist 元素规定输入域的选项列表。

datalist 元素规定输入域的选项列表。

 

 

列表是通过 datalist
内的 option 元素创建的。

列表是通过 datalist
内的 option 元素创建的。

 

 

如需把 datalist
绑定到输入域,请用输入域的 list 属性引用 datalist 的 id:

如需把 datalist
绑定到输入域,请用输入域的 list 属性引用 datalist 的 id:

 

 

Webpage: <input type=”url” list=”url_list” name=”link”
/><datalist id=”url_list”>

Webpage: <input type=”url” list=”url_list” name=”link”
/><datalist id=”url_list”>

 

 

<option label=”W3School” value=”” />

<option label=”W3School” value=”” />

 

 

<option label=”Google” value=”” />

<option label=”Google” value=”” />

 

 

<option label=”Microsoft” value=””
/></datalist>

<option label=”Microsoft” value=””
/></datalist>

 

 

 

 

 

 

  • Keygen
  • Keygen

 

 

浏览器支持度还不够

浏览器支持度还不够

 

 

  • output
  • output

 

 

用处不是很大

用处不是很大

 

 

2、新增属性

2、新增属性

 

 

新的 form 属性:

 

  • Autocomplete

 

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

 

  • Novalidate

 

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

 

新的 form 属性:

 

  • Autocomplete

 

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

 

  • Novalidate

 

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

 

新的 input 属性:

 

  • autocomplete
  • Autofocus

 

autofocus 属性规定在页面加载时,域自动地获得焦点。

 

  • form
  • form overrides (formaction, formenctype, formmethod, formnovalidate,
    formtarget)
  • List

 

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

 

  • Multiple

 

multiple 属性规定输入域中可选择多个值。

 

  • pattern (regexp)

 

pattern 属性规定用于验证 input 域的模式(pattern)。模式(pattern)
是正则表达式。

 

Country code: <input type=”text”
name=”country_code”pattern=”[A-z]{3}” title=”Three letter country
code” />

 

 

 

  • Placeholder

 

placeholder 属性提供一种提示(hint),描述输入域所期待的值。

 

  • required

 

required 属性规定必须在提交之前填写输入域(不能为空)。

 

 

 

HTML5标签针对ie浏览器需要做兼容性处理,兼容写法在之前的文章也提到过,需要引入一个第三方插件,方式如下:

 

<!–[if lt IE 9]>

 

<script src=”libs/html5shiv/html5shiv.js”></script>

 

<![endif]–>

2、元素拖拽

3、web存储

 

4、地理定位

5、Canvas

 

新的 input 属性:

 

  • autocomplete
  • Autofocus

 

autofocus 属性规定在页面加载时,域自动地获得焦点。

 

  • form
  • form overrides (formaction, formenctype, formmethod, formnovalidate,
    formtarget)
  • List

 

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

 

  • Multiple

 

multiple 属性规定输入域中可选择多个值。

 

  • pattern (regexp)

 

pattern 属性规定用于验证 input 域的模式(pattern)。模式(pattern)
是正则表达式。

 

Country code: <input type=”text”
name=”country_code”pattern=”[A-z]{3}” title=”Three letter country
code” />

 

 

 

  • Placeholder

 

placeholder 属性提供一种提示(hint),描述输入域所期待的值。

 

  • required

 

required 属性规定必须在提交之前填写输入域(不能为空)。

 

 

 

HTML5标签针对ie浏览器需要做兼容性处理,兼容写法在之前的文章也提到过,需要引入一个第三方插件,方式如下:

 

<!–[if lt IE 9]>

 

<script src=”libs/html5shiv/html5shiv.js”></script>

 

<![endif]–>

2、元素拖拽

3、web存储

 

4、地理定位

5、Canvas

 

Post Author: admin

发表评论

电子邮件地址不会被公开。 必填项已用*标注