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

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

1、新增标签

新增语义化标签。

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

<nav>定义导航链接。

<footer> 定义 section 或 page 的页脚

<section> 定义 section。

<article> 定义文章。

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

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

语义化标签的好处:

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

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

新增多媒体标签

audio和vedio标签

<audio controls="controls">

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

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

Your browser does not support the audio tag.

</audio>

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

属性:

autoplay :自动播放

controls:显示控件

loop:循环播放

src:文件路径

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

</video>

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

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

<video width="320" height="240" controls="controls">

<source src="forrest_gump.mp4" type="video/mp4" />

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

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

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

</video>

新增表单元素及属性

1、新增7个输入类型

  • email

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

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

  • url

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

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

  • Number

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

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

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

属性

描述

max

number

规定允许的最大值

min

number

规定允许的最小值

step

number

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

value

number

规定默认值

  • Range

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

range 类型显示为滑动条。

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

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

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

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

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

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

  • Color
  • 会调出颜色面板

1、新增3个表单元素

  • datalist

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

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

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

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

<option label="W3School" value="http://www.W3School.com.cn" />

<option label="Google" value="http://www.google.com" />

<option label="Microsoft" value="http://www.microsoft.com" /></datalist>

  • Keygen

浏览器支持度还不够

  • output

用处不是很大

2、新增属性

新的 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

html5小结的更多相关文章

  1. HTML最新标准HTML5小结

    写在前面 HTML5出来已经很久了,然而由于本人不是专业搞前端的,只知道有这个东西,具体概念有点模糊(其实就是一系列标准规范啦):因此去年(2015.11.09),专门对HTML5做了个简单的小结,今 ...

  2. HTML5给我们带来了什么?

    HTML5初探 传说中的HTML标准已经超过10年没有更新了,如今HTML5席卷全球,那么到底什么是HTML5呢?都在讲HTML5是web的新一代标准,它有着很多之前浏览器没有的新特性,可以说HTML ...

  3. HTML5基础小结(二)——标签小例

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl1amlhaGFuNjI5NjI5/font/5a6L5L2T/fontsize/400/fill/I0 ...

  4. IT兄弟连 HTML5教程 CSS3揭秘 小结及习题

    小结 CSS3对于开发者来说,给web应用带来了更多的可能性,极大提高了开发效率.CSS3在选择器上的支持可谓是丰富多彩,使得我们能够灵活的控制样式,而不必为元素进行规范化的命名.CSS3支持的动画类 ...

  5. IT兄弟连 HTML5教程 HTML5表单 小结及习题

    小结 HTML表单提交的方法有get方法和post方法,get方法的作用是从指定的资源请求数据,post方法的作用是向指定的资源提交要被处理的数据.HTML表单一直都是Web的核心技术之一,有了它我们 ...

  6. IT兄弟连 HTML5教程 多媒体应用 小结及习题

    小结 在互联网上,图像和链接则是通过URL唯一确定信息资源的位置.URL分为绝对URL和相对URL.通过使用<img />标记在浏览器中显示一张图像.超文本具有的链接能力,可层层链接相关文 ...

  7. IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 小结及试题

    小结 HTML标签包含结构标签和基础标签,基础标签是在页面制作最常使用的一些标签.基础标签包含标题标签(<h1>~<h6>).换行标签(<br>).段落标签(< ...

  8. IT兄弟连 HTML5教程 HTML5的基本语法 小结及习题

    小结 一个完整的HTML文件由标题.段落.列表.表格.文本,即嵌入的各种对象所组成,这些逻辑上统一的对象称为元素.HTML文档主体结构分为两部分,一部分是定义文档类型,另一部分则是定义文档主体的结构框 ...

  9. HTML5学习小结

    HTML5是用于取代1999年所制定的 HTML4.01和XHTML1.0标准的HTML标准版本.HTML5的第一份正式草案已于2008年1月公布:2012年12月,规范已经正式定稿.W3C计划在20 ...

随机推荐

  1. Python socket编程之构造IP首部和ICMP首部

    这两天在做一个实验需要自己构造IP首部,遇到诸多问题,搞了一天终于搞定. 关于socket的介绍网上一大堆,我只记录构造IP头时我遇到的问题.由于没玩过socket构造IP首部,网上找了段代码研究下, ...

  2. [转]微信小程序之购物车功能

    本文转自:https://www.cnblogs.com/linxin/p/6834206.html 前言 以往的购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法 ...

  3. HTML5的新结构标签

    在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式.而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文章内容容器,或者是导航模块的容器,或者是作者介绍的容器等等.也 ...

  4. SQL Server删除表及删除表中数据的方法

    删除表的T-SQL语句为: drop table <表名> drop是丢弃的意思,drop table表示将一个表彻底删除掉. 删除表数据有两种方法:delete和truncate. de ...

  5. js获取url中参数名也参数值

    要撮利用js获取url中参数名也参数值这个不多见了,但我今天需要这样操作,下面我来给大家介绍一下具体的实例方法.   在已知参数名的情况下,获取参数值,使用正则表达式能很容易做到. js的实现方法如下 ...

  6. Dynamics 365Online 查询Web Api的请求WebUri

    在on-premises版本中,获取weburi的方式是进设置-自定义项-开发人员资源中查看地址,但online版本中的地址会有些许的差异 online的开发者资源中的地址如下图,如果你在页面java ...

  7. MySQL的索引与优化

    写在前面:索引对查询的速度有着至关重要的影响,理解索引也是进行数据库性能调优的起点.考虑如下情况,假设数据库中一个表有10^6条记录,DBMS的页面大小为4K,并存储100条记录.如果没有索引,查询将 ...

  8. fuzz实战之honggfuzz

    Honggfuzz实战 前言 本文介绍 libfuzzer 和 afl 联合增强版 honggfuzz .同时介绍利用 honggfuzz 来 fuzz 网络应用服务. 介绍 honggfuzz 也是 ...

  9. textarea显示默认值

    点击不显示默认值,鼠标离开如果没有内容就显示默认值,如果有内容就显示内容. <textarea class="area" onfocus="if(value=='请 ...

  10. 大O表示法

    概念 大O表示法是和数据项的个数相关联的粗略度量算法时间复杂度的快捷方法. 常数一个无序可重复数组插入一个数据项的时间T是常数K,常数K表示一次插入所花费的时间,包含cpu.编译器等工作时间.可表示为 ...