前端实训课程 HTML5 课堂笔记

首先，对于前端学习有几点自己的原则：

1. 训练手写代码
2. 参考官方文档
3. 重视基础训练

官方网站

WHATWG文档

What is the WHATWG?
The Web Hypertext Application Technology Working Group (WHATWG) is a community of people interested in evolving the web through standards and tests.

MDN文档

Documenting web technologies, including CSS, HTML, and JavaScript, since 2005.

全局属性

下列属性是通用的，所有 HTML 元素 都可以指定。 （即使是本规范中没有定义的那些元素）：

accesskey
autocapitalize
autofocus
contenteditable
dir
draggable
enterkeyhint
hidden
is
itemid
itemprop
itemref
itemscope
itemtype
lang
spellcheck
style
tabindex
title
translate

本规范定义的这些属性只用于 HTML 元素 的属性。 当本规范引用具有这些属性的元素时， 没有定义这些属性的命名空间下的元素不得当作具有这些属性的元素处理。

标签元素

article标签

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

WHATWG网站示例
This example shows a blog post using the article element, 
with some schema.org annotations:

<article itemscope itemtype="http://schema.org/BlogPosting">
 <header>
  <h1 itemprop="headline">The Very First Rule of Life</h1>
  <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
  <link itemprop="url" href="?comments=0">
 </header>
 <p>If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.</p>
 <p>...</p>
 <footer>
  <a itemprop="discussionUrl" href="?comments=1">Show comments...</a>
 </footer>
</article>

section标签

HTML <section>元素表示一个包含在 HTML 文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。
只有全局属性

WHATWG网站示例
In the following example,
we see an article (part of a larger web page) about apples,
containing two short sections.

<article>
 <hgroup>
  <h1>Apples</h1>
  <h2>Tasty, delicious fruit!</h2>
 </hgroup>
 <p>The apple is the pomaceous fruit of the apple tree.</p>
 <section>
  <h1>Red Delicious</h1>
  <p>These bright red apples are the most common found in many
  supermarkets.</p>
 </section>
 <section>
  <h1>Granny Smith</h1>
  <p>These juicy, green apples make a great filling for
  apple pies.</p>
 </section>
</article>
Notice how the use of section means that the author can use 
h1 elements throughout, without having to worry about whether 
a particular section is at the top level, the second level, 
the third level, and so on.

nav标签

HTML <nav>元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。
只包含全局标签

MDN示例
<nav class="crumbs">
    <ol>
        <li class="crumb"><a href="#">Bikes</a></li>
        <li class="crumb"><a href="#">BMX</a></li>
        <li class="crumb">Jump Bike 3000</li>
    </ol>
</nav>

<h1>Jump Bike 3000</h1>
<p>This BMX bike is a solid step into the pro world. It looks as legit as it rides and is built to polish your skills.</p>

header标签

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

内容类型	Flow content (en-US)，palpable content。
许可内容	Flow content (en-US)，但是不允许 或 成为子元素
允许的父元素	任何接受 flow content (en-US) 的元素。注意 元素不能作为 <address>、 <footer> 或另一个 元素的子元素。

元素不是分段内容，因此不会往 大纲 中引入新的段落。也就是说，

元素通常用于包含周围部分的标题（h1 至 h6 元素），但这不是必需的。

MDN示例
<header>
  <h1>主页标题</h1>
  <img src="mdn-logo-sm.png" alt="MDN logo">
</header>

待完善
语义化标签

<footer>
<div>

多媒体标签

<audio>
<video>