浅析HTML5

1.0 HTML5

HTML5—MDN
HTML5——W3C

该规范定义了万维网核心语言（超文本标记语言（HTML））的第五次重要修订，于2014年10月29日标准规范制定完成。

  • 语义：是一个新版本的HTML语言，新增了新的元素，属性和行为。当然，也淘汰了一些旧属性。
  • 通信：信息传递增强，让你和服务器之间通过创新的新技术方法进行通信。
  • 多媒体：<video>和<audio>的加入，支持新的多媒体内容创作。
  • 离线&存储：离线资源缓存，编辑，离线事件支持等。
  • 2D/3D绘图：<canvas>引入。
  • 性能：Web Works，XMLHttpRequest Level2，支持拖放API，requestAnimationFrame更好的动画性能......
  • 多用途互联网邮件扩展（MIME）和协议处理程序注册

等等

1.1 语义

关于DOCTYPE与字符集编码

早期网页设计中，并不是所有网页代码都遵循标准进行编写，所有现代浏览器中都拥有不同的呈现模式，这样一来，浏览器不仅能正常解析标准的文档，也能解析老式的、不符合标准的网页。呈现模式分为标准模式、怪异模式、近似模式。

浏览器根据doctype来选择使用不同的模式、HTML版本、文档类型定义（DTD）规则来解析。所以在以前的HTML中会看到诸如这样的声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

DTD中包含了一系列标记、属性，用于标记Web文档中能出现哪些元素和元素之间的包含关系，在遵循标准的所有Web文档中，DOCTYPE这条指令是必不可少的，决定浏览器最终如何解析Web文档，影响最终呈现效果。

在HTML中，文档类型声明是必要的。所有的文档的头部，你都将会看到"<!DOCTYPE html>" 的身影。这个声明的目的是防止浏览器在渲染文档时，切换到我们称为“怪异模式(兼容模式)”的渲染模式。“<!DOCTYPE html>" 确保浏览器按照最佳的相关规范进行渲染，而不是使用一个不符合规范的渲染模式。——MDN

HTML5的DOCTYPE
HTML5的doctype非常简单，明你的HTML内容使用HTML5，只需要简单的使用：

<!DOCTYPE html>

这样做会让目前还不支持的HTML5的浏览器采用标准模式解析，这意味着他们会解析那些HTML5中兼容的旧的HTML的标签的部分，而忽略他们不支持HTML5的新特性。
这个doctype比以前更短，更简单，使的它更容易被记住并且减少必须下载的字节数。

用HTML5的doctype声明文件包含HTML5标记

文档编码
在一个页面上做的第一件事通常是声明使用的字符集。在以前版本的HTML，它是一个非常复杂的<meta>元素，现在它变得非常简单：

<meta charset="UTF-8">

标签闭合
在HTML5中一些标签不再是需要闭合标签的。
li dt dd p rt option tbody tfoot tr td th
自闭合标签最后的/也不推荐再加
<img> <input> <br> <hr>
HTML标签，闭合还是不闭合？
正确闭合HTML标签，停止使用不标准的标签和属性

具有boolean值的属性
对于具有boolean值的属性，例如disable和readonly等只写属性不写属性值时值为true

<input type="checkbox" checked >
<input type="checkbox" checked="checked" >
<input type="checkbox" checked="" >

省略属性值引号
属性值可以用单引号或者双引号，在属性值不包括<、>、=、'、"时可以忽略引号

<input type=text >

新增元素

<section>
表示文档中一个区域（或节点），比如，内容中的一个专题组，一般会**包含一个标题（Heading），通过包含一个标题作为子节点来辨识每一个<section>

不要把 <section> 元素作为一个普通的容器来使用，这是本应该是<div>的用法（特别是当片段（the sectioning ）仅仅是为了美化样式的时候）。 一般来说，一个 <section> 应该出现在文档大纲中。

之前

<div>
  <h2>Heading</h2>
  <img src="bird.jpg" alt="bird">
</div>

之后

<div>
  <h2>Heading</h2>
  <img src="bird.jpg" alt="bird">
</div>

<article>
<article>元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。

例子：

<article class="film_review">
  <header>
    <h2>Jurassic Park</h2>
  </header>
  <section class="main_review">
    <p>Dinos were great!</p>
  </section>
  <section class="user_reviews">
    <article class="user_review">
      <p>Way too scary for me.</p>
      <footer>
        <p>
          Posted on <time datetime="2015-05-16 19:00">May 16</time> by Lisa.
        </p>
      </footer>
    </article>
    <article class="user_review">
      <p>I agree, dinos are my favorite.</p>
      <footer>
        <p>
          Posted on <time datetime="2015-05-17 19:00">May 17</time> by Tom.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Posted on <time datetime="2015-05-15 19:00">May 15</time> by Staff.
    </p>
  </footer>
</article>

<nav>
HTML导航栏 (<nav>) 描绘一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表.

  • 并不是所有链接都必须使用<nav>元素，只用来一些热门的链接放入导航栏，例如<footer>元素就常用来在页面底部包含一个不常用到，没必须要加入nav的链接列表。
  • 一个网页也可能包含多个<nav>元素，例如是一个网站内的导航列表，另一个是页面内的导航列表。

例子：

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<header>
HTML <header> 元素用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。

<header> 元素不是分段内容，因此不会往 大纲 中引入新的段落。也就是说，<header> 元素通常用于包含周围部分的标题（h1 至 h6 元素），但这不是必需的。

<header class="page-header">
    <h1>Cute Puppies Express!</h1>
</header>

<main>
    <p>I love Beagles <strong>so</strong> much! Like really, a lot. They're adorable and their ears are so, so snuggly soft!</p>
</main>

注意 <header> 元素不能作为 <address>、<footer> 或另一个 <header> 元素的子元素。

<footer>
HTML <footer> 元素表示最近一个章节内容或者根节点（sectioning root ）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

例子略。

注意<footer>元素必须不能是 <address>, <header> 或者另一个<footer> 元素的后代元素。

一般的，一个页面只有一个footer。

<aside>
<aside>元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者嵌入内容。他们通常包含在工具条，例如来自词汇表的定义。也可能有其他类型的信息，例如相关的广告、笔者的传记、web 应用程序、个人资料信息，或在博客上的相关链接。

<article>
  <p>
    迪斯尼电影 <em>海的女儿</em> 于1989年首次搬上银屏
  </p>
  <aside>
    这个电影在首次发行期间就赚得了8千7百万美元.
  </aside>
  <p>
    该电影更多信息...
  </p>
</article>

<audio>
HTML <audio>元素用于在文档中表示音频内容。 <audio> 元素可以包含多个音频资源， 这些音频资源可以使用 src 属性或者<source> 元素来进行描述； 浏览器将会选择最合适的一个来使用。对于不支持<audio>元素的浏览器，<audio>元素也可以作为浏览器不识别的内容加入到文档中。

元素属性
autoplay
布尔属性，true表示自动播放，不会停下等待数据载入结束

autobuffer
布尔属性，true将会自动开始加载，即使没有设置自动播放。直到媒体缓存满了或者全部音频文件加载完毕。

controls
如果设置了该属性，浏览器将提供一个包含声音，播放速度，播放暂停的控制面板，让用户可以控制音频的播放。

loop
是否循环播放

src
嵌入的音频的URL。 该URL应遵从 HTTP access controls. 这是一个可选属性；你可以在audio元素中使用 <source> 元素来替代该属性指定嵌入的音频。
d
volume
音频播放的音量。值从0.0 (无声) 到 1.0 (最大声)，时间偏移量目前是指定为float类型的值，表示偏移的秒数。

其他新增元素
HTML5 标签列表

input新增类型

type="email"

用于编辑 e-mail 的字段。 合适的时候可以使用 :valid 和 :invalid CSS 伪类。

自带Email格式的正则检测

type="url"

用于编辑URL的字段

也同样自带URL的正则检测

type="number"

用于输入浮点数的控件。

type="range"

用于输入不精确值控件。如果未指定相应的属性，控件使用如下缺省值

  • min : 0
  • max : 100
  • value : min+(max-min)/2，或当小于min时使用min
  • step : 1
        <input id="input" type="range" min="100" max="1000" value="50" step="10">

Date
type="date"
用于输入日期的控件（年，月，日，不包括时间）。

webkit稍微提供了一些轻微修改样式的方法：

::-webkit-datetime-edit – 控制编辑区域的
::-webkit-datetime-edit-fields-wrapper – 控制年月日这个区域的
::-webkit-datetime-edit-text – 这是控制年月日之间的斜线或短横线的
::-webkit-datetime-edit-month-field – 控制月份
::-webkit-datetime-edit-day-field – 控制具体日子
::-webkit-datetime-edit-year-field – 控制年文字, 如2017四个字母占据的那片地方
::-webkit-inner-spin-button – 这是控制上下小箭头的
::-webkit-calendar-picker-indicator – 这是控制下拉小箭头的
::-webkit-clear-button –这是控制清除按钮的

input[type="date"]默认样式修改
html5中如何去掉input type date默认样式
HTML5中input[type='date']自定义样式&日历校验功能

type="mouth"
用于输入年月的控件，不带时区。

type="week"
用于输入一个由星期-年组成的日期，日期不包括时区。\

type="time"
用于输入不含时区的时间控件。

type="datetime-local"
用于输入日期时间控件，不包含时区。

关于Input Datetime对象的参考：
<input type="datetime-local">
HTML DOM Input Datetime 对象

移除(废弃)元素

一些能被CSS替代的元素将被移除，因为不符合样式结构分离原则。

  • <basefont>
    <basefont>用来设置文档的默认字体大小。使用<font>可以相对于默认字体大小进行变化。

  • <big>
    <big>会使字体加大一号（例如从小号(small)到中号(medium)，从大号(large)到加大(x-large)），最大不超过浏览器的最大字体。

  • <center>
    <center>是个 块级元素，可以包含段落，以及其它块级和内联元素。这个元素的整个内容在它的上级元素中水平居中(通常是 <body>)。

  • <font>
    font 属性是设置 font-style, font-variant, font-weight, font-size, line-height 和 font-family属性的简写，或使用特定的关键字设置元素的字体为某个系统字体。

  • <s>
    HTML <s> 元素 **使用删除线来渲染文本。使用 <s> 元素来表示不再相关，或者不再准确的事情。但是当表示文档编辑时，不提倡使用 <s> ；为此，提倡使用 <del> 和 <ins> 元素。

  • <u>
    <u>元素使文本在其内容的基线下的一行呈现下划线。在HTML5中, 此元素表示具有未标注的文本跨度，显示渲染，非文本注释，例如将文本标记为中文文本中的专有名称(一个正确的中文标记), 或 将文本标记为拼写错误。

  • <tt>
    电报文本元素 (<tt>) 产生一个内联元素，使用浏览器内置的 monotype 字体展示。这个元素用于给文本排版，使其等宽展示，就像电报那样。使用 <code> 元素来展示等宽文本可能更加普遍。

  • <strike>
    <strike> 元素（或者 HTML 删除线元素）在文本上放置删除线。

不再使用的frame框架

  • frame
  • frameset
  • noframes

新增属性

  • contentEditable
    contenteditable 是一个枚举属性（enumerated attribute），表示元素是否可被用户编辑。 如果可以，浏览器会修改元素的部件（widget）以允许编辑。

  • designMode
    document.designMode 控制整个文档是否可编辑。有效值为 “on”和 “off”

  • hidden
    hidden 是一个布尔属性，表示一个元素尚未或者不再相关。例如，它可以被用来隐藏一个页面元素直到登录完毕。如果一个元素设置了这个属性，它就不会被显示。

  • spellcheck
    spellcheck 全局属性是枚举属性，定义是否可以检查元素的拼写错误。它可以具有以下值：

  • tabindex
    tabindex 全局属性 是个整数，表示元素（如果可聚焦）是否能够接受输入焦点。 如果它应该参与键盘序列导航，那么就是它的位置。它可以设为多种值：

    • tabindex=负值 (通常是tabindex=“-1”)，表示元素是可聚焦的，但是不能通过键盘导航来访问到该元素，用JS做页面小组件内部键盘导航的时候非常有用。
    • tabindex="0" ，表示元素是可聚焦的，并且可以通过键盘导航来聚焦到该元素，它的相对顺序是当前处于的DOM结构来决定的。
    • tabindex=正值，表示元素是可聚焦的，并且可以通过键盘导航来访问到该元素；它的相对顺序按照tabindex 的数值递增而滞后获焦。如果多个元素拥有相同的 tabindex，它们的相对顺序按照他们在当前DOM中的先后顺序决定。

表单属性

  • autofocus
    这个布尔属性允许您指定的表单控件在页面加载时具有焦点（自动获得焦点），除非用户将其覆盖，例如通过键入不同的控件。文档中只有一个表单元素可以具有autofocus属性，它是一个布尔值。 如果type属性设置为隐藏则不能应用（即您不能自动获得焦点的属性设置为隐藏的控件）。
  • placeholder
    提示用户输入框的作用。用于提示的占位符文本不能包含回车或换行。
  • required
    表示任意拥有[required](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#attr-required)属性的 <input> 或 <textarea> 元素使用它. 它允许表单在提交之前容易的展示必填字段并且渲染其外观.
  • novalidate
    novalidate 属性规定当提交表单时不对其进行验证。
    如果使用该属性，则表单不会验证表单的输入。

链接相关

  • link新增sizes属性，sizes表示资源大小的以逗号隔开的一个或多个字符串

  • base新增target属性，该属性指定在何处显示链接的资源。 取值为标签（tab），窗口（window），或框架（iframe）等浏览上下文的名称或其他关键词。以下关键字具有特殊的意义:

    • _self: 当前页面加载，即当前的响应到同一HTML 4 frame（或HTML5浏览上下文）。此值是默认的，如果没有指定属性的话。
    • _blank: 新窗口打开，即到一个新的未命名的HTML4窗口或HTML5浏览器上下文
    • _parent: 加载响应到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self。
    • _top: IHTML4中：加载的响应成完整的，原来的窗口，取消所有其它frame。 HTML5中：加载响应进入顶层浏览上下文（即，浏览上下文，它是当前的一个的祖先，并且没有parent）。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self

  • area新增hreflang和rel。
    hreflang：此属性指明了被链接资源的语言. 其意义仅供参考。可取的值参见 BCP47。仅当设置了 href 属性时才应设置该属性。
    rel：此属性指明被链接文档对于当前文档的关系。这个属性一定得是一个由空格分开的链接类型值的列表。 这个属性最通常的用法是指向一个连接到外部样式表的链接：将rel的值设置为stylesheet

其他

  • ol新增reversed
    这个布尔属性规定了列表的条目采用倒序，即最不重要的条目放在列表第一个位置。

  • meta新增charset
    此特性声明当前文档所使用的字符编码，但该声明可以被任何一个元素的 lang 特性的值覆盖。此特性的值必须是一个符合由IANA所定义的字符编码首选MIME 名称（preferred MIME name ）之一。尽管标准不要求必须使用某些特定的字符编码，但它还是给出了一些建议：
    鼓励使用 UTF-8；

  • menu新增 type和label
    label：显示给用户的菜单名称。在嵌套菜单中使用，以提供可通过其访问子菜单的标签。必须仅在父元素<menu>处于上下文菜单状态时指定。
    type：此属性指示要声明的菜单类型，可以是两个值之一。

    • context：上下文菜单状态，表示通过另一个元素激活的一组命令。这可能是通过a的[menu](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button#attr-menu)属性<button>或具有contextmenu属性的元素。将<menu>元素直接嵌套在另一个中时，如果父元素已处于此状态，则这是缺省值的缺省值。
    • list：列表菜单状态，表示用于用户交互的一系列命令。这是缺省值的默认值，除非父元素<menu>在上下文菜单状态中是a 。

  • script新增async
    该布尔属性指示浏览器是否在允许的情况下异步执行该脚本。该属性对于内联脚本无作用 (即没有src属性的脚本）。

  • iframe新增sandbox， seamless， srcdoc
    sandbox: 如果指定了空字符串，该属性对呈现在iframe框架中的内容启用一些额外的限制条件。属性值可以是用空格分隔的一系列指定的字符串
    srcdoc: 该属性值可以是HTML代码，这些代码会被渲染到iframe中，如果同时指定了src属性，srcdoc会覆盖src所指向的页面。该属性最好能与sandbox和seamless属性一起使用。
    seamless: 该布尔属性指示浏览器将iframe渲染成容器页面文档的一部分。例如，通过打被包含的文档的链接，在iframe页面的样式被渲染之前，父页面的CSS样式就可以应用在iframe中（除非被其他设置阻止）。

低版本IE支持HTML5标签

  • 使用JavaScript 语句 document.createElement("header") 即可让低版本 IE 浏览器支持新的元素
<script>
　　var header = document.createElement("header");
</script>
<style>
　　header{
    display: block;
    background-color: red;
　　}
</style>
</head>
<body>
<header>hello world!</header>
</body>

脚本与样式表顺序可颠倒放置。
到这里，低版本IE浏览器就可以支持html5元素了。

  • 更简单的方法是使用HTML5 shiv来解决。
<!--[if lt IE 9]>
  <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

以上代码意思是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件，并解析它。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,547评论 6赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,399评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,428评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,599评论 1赞 274
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,612评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,577评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,941评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,603评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,852评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,375评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,955评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2赞 342

推荐阅读更多精彩内容

  • 网络技术与应用
    HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的，因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,828评论 0赞 0
  • [转]HTML5设计原理
    格式后期处理。 Jeremy Keith在 Fronteers 2010 上的主题演讲 今天我想跟大家谈一谈HTM...
    LordZhou阅读 1,118评论 0赞 17
  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,725评论 1赞 92
  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,406评论 1赞 45
  • 九、DOM
      DOM（文档对象模型）是针对 HTML 和 XML 文档的一个 API（应用程序编程接口）。   DOM 描绘...
    霜天晓阅读 3,613评论 0赞 7