HTML内联元素
通用容器
<span>元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图(通过使用类或者Id属性)，或者这些元素有着共同的属性，比如lang。应该在没有其他合适的语义元素时才使用它。<span>与<div>元素很相似，但<div>是一个块元素而<span>则是行内元素
<p>Some <span>text</span></p>
强调重要
虽然浏览器通常用斜体和粗体来显示em和strong，但这些元素不应用作加粗和斜体。这两个元素分别用来提升包含内容的强调程度和重要性
<em>表示强调，<em>元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。
<strong> 表示重要
<p>I am <em>very</em> worried!</p>
<strong>warning</strong>文字间隔
i和b元素历来是用来展示粗体和斜体字体的，但在HTML5中，它们有了新的语义
<i>
1、表示不同情绪或声音的文本，如内心对白
<p>Simon smirked,"Yes,I'm happy to take the garbage out." <i>Ugh,I <em>really</em> don't want to !</i> he thought as he picked up the garbage bag.</p>2、表示外来语、分类学名和技术术语等
<i lang="fr">Oh la la!</i>
<b>
1、用于分隔文字
<p>After bringing <b>water</b> to a boil, add <b>potatoes</b> and <b>carrots</b></p>2、用于文章或故事的引言
<p><b class="lede">Meteorologists predict more sunshine and scorching temperatures for the upcoming week, prompting area farmers to install irrigation systems.</b></p>不精确文字
<s> 在HTML5中重新定义为有错的、过时的、不被建议使用的文本，常用于表示价格变动等
<p>价格<s>￥1298</s>￥998！</p>
<p><s>37度</s> <strong>41度</strong></p>
高亮显示
<mark> 表示高亮或用于引用而标记的文字
<p><mark>We're all hoping it rains soon</mark>, some farmers have installed irrigation systems, at <em>considerable</em> expense</p>次要评论
<small> 表示旁注，可用于免责声明、使用条款和版权信息等需要小字体的场景
<small>图片仅供参考，请以实物为准</small>
<small>Chris Elhorn | The city Press</small>术语处理
<dfn> 用来定义术语
<p>The term <dfn>organic food</dfn> refers to food produced without synthetic chemicals</p>
<abbr> 缩写词，可以配合<dfn>定义术语
<p>The <dfn><abbr title="Garage Door Operner">GDO</abbr></dfn> id a device allows off-world teams to open the iris.</p>引用
<cite> 表示作品标题的引用，可以是书影音画等
<p>我最喜欢的电影是<cite>千与千寻</cite></p>
<q> 表示短引用，常用于引用别人说的话，用引号可以表达等价语义
<p>The judge said <q>You can drink water form the fish tank</q> but advised against it.</p>
换行
<br> 换行
注意：<br>标签是文本级语义元素，可以设置行高和字体大小，但设置宽高无效
<p>
<b>The City Press</b><br />
123 General Street <br />
Springfield, OH 45501
</p><wbr> 需要时指定单词可以换行的位置
<i>Irrigation<wbr /> Direct</i>
上标下标
这两个标签在数学等式、科学符号和化学公式中非常有用
<sup> 表示上标
<p>
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
</p>
<sub> 表示下标
<p>
H<sub>2</sub>
SO<sub>4</sub>
</p>文本删改
如果要表示文档的增删改记录，则应该使用ins和del标签
<ins> 文档中插入的内容
<del> 文档中删除的内容
注意：<ins>和<del>可以嵌套任何元素
【属性】
1、datetime:用于标明编辑的日期和可选的时间
2、cite:用于指定说明编辑的文档网址
<p>一打有 <del datetime="2015-12-30T00:00Z" cite="edit.html">二十</del> <ins>十二</ins> 件。</p>
特定时间
<time> 表示日期或时间
【属性】
1、datatime表示确切的时间，遵循格式YYYY-MM-DDThh:mm:ssTZD，表示年-月-天-分割符T-时-分-秒-时区
2、pubdate表示<time>元素中的日期或时间是文档的发布日期
<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<p>我在<time datetime="2008-02-14">情人节</time>有个约会。</p>
<small>Posted <time datetime="2015-12-30T00:00:00UTC+08:00"></time></small>
注音标识
ruby标签定义注音标识，多用于CJK文字，CJK是指中日韩统一表意文字(Chinese、Japanese、Korean)
<ruby> 表示ruby标记
<rt> 表示ruby标记文字
<rp> 表示ruby标记括号
<ruby>
漢 <rt> ㄏㄢˋ </rt>
</ruby>
<ruby>
汉
<rp>(</rp>
<rt>hàn</rt>
<rp>)</rp>
语
<rp>(</rp>
<rt>yǔ</rt>
<rp>)</rp>
</ruby>文字方向
<bdi> 忽略周围文字方向的文字
<bdo> 覆盖两种方向的设置，允许显式设置方向，并覆盖所有其他当前方向
<p>When rendered by a browser, <bdo dir="rtl">these words</bdo> will appear as 'sdroweseht'</p>
代码
<code> 表示计算机代码
<kbd> 定义键盘码
<samp> 定义计算机例子代码
<tt> 定义打字机代码
<var> 定义变量
<p>
<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br />
</p>HTML5结构元素
HTML5引入了大量新的块级元素来帮助提升网页的语义，使页面具有逻辑性结构、容易维护，并且对数据挖掘服务更友好。
概述
结构元素，又称为区块型元素，是用来定义区块内容范围的元素。之前，区块型元素只有<div>一个，HTML5新增了7个语义化结构元素，包括<article>、<aside>、<nav>、<section>、<header>、<footer>、<main>
section
Section元素(<section>)表示文档中的一个区域(或节)，是区块级通用元素。比如，内容中的一个专题组，一般来说会有包含一个标题(heading)。一般通过是否包含一个标题(<h1>-<h6> element)作为子节点，来辨识每一个<section>
注意：如果元素内容可以分为几个部分的话，应该使用<article>而不是<section>；再有，不要把<section>元素作为一个普通的容器来使用，这是本应该是<div>的用法。 一般来说，一个<section>应该出现在文档大纲中
article
<article>元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构。可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。当<article>元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中
<article>元素的作者信息可通过<address>元素提供，但是不适用于嵌套的<article>元素；<article>元素的发布日期和时间可通过<time>元素的pubdate属性表示
注意：对于<article>和<section>来说，是必须要加上标题的
aside
<aside>元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。一般用于表示不直接相关内容的侧边栏，<aside>里面的内容与它所关联的内容相互独立，谁缺了谁都不影响各自文本含义的理解。如一篇文章的广告、相关背景和引述内容等
nav
HTML导航栏(<nav>)描绘一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表
并不是所有的链接都必须使用<nav>元素，它只用来将一些热门的链接放入导航栏，例如<footer>元素就常用来在页面底部包含一个不常用到，没必要加入<nav>的链接列表
一个网页也可能含有多个<nav>元素，例如一个是网站内的导航列表，另一个是本页面内的导航列表
header
<header>元素表示页面头部或区块头部，用于将介绍内容和区块的辅助导航分组到一起，所以它有可能包含区块的标题元素以及其他的介绍内容(目录、logo等)
注意：由于<header>和<footer>元素不是分节内容，所以不会引入新的分节到大纲中
footer
<footer>元素表示最近一个章节内容或者根节点(sectioning root)元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息
注意：<footer>元素内的作者信息应包含在<address>元素中
main
<main>元素放在最后说，是因为<main>不常用，最主要的原因是IE浏览器都不支持
main元素(<main>)呈现了文档<body>或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。这部分内容在文档中应当是独一无二的，不包含任何在一系列文档中重复的内容
<main>标签不能是以下元素的继承，包括<article>、<aside>、<footer>、<header>、或<nav>。 在一个文档中不能出现一个以上的 <main>标签
所以，一个正常的最外层布局应该是下面这样
<header></header>
<main>
<section></section>
<section></section>
<section></section>
</main>
<footer></footer>但现在，一般地，布局如下
<header></header>
<section></section>
<section></section>
<section></section>
<footer></footer>案例说明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>苹果首页</title>
</head>
<body>
<nav>
<ul>
<li><a href="#">Apple</a></li>
<li><a href="#">Mac</a></li>
<li><a href="#">iPad</a></li>
<li><a href="#">iPhone</a></li>
<li><a href="#">Watch</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">技术支持</a></li>
<li><a href="#">搜索</a></li>
<li><a href="#">购物袋</a></li>
</ul>
</nav>
<article>
<section>展示1</section>
<section>展示2</section>
<section>展示3</section>
<section>展示4</section>
<nav>
<ul>
<li>按钮1</li>
<li>按钮2</li>
<li>按钮3</li>
<li>按钮4</li>
</ul>
</nav>
</article>
<aside>
<ul>
<li><a href="#">Watch</a></li>
<li><a href="#">Pencil</a></li>
<li><a href="#">iPad</a></li>
<li><a href="#">MacBook</a></li>
</ul>
</aside>
<footer>
<nav>
<div>选购及了解</div>
<div>商店</div>
<div>应用</div>
<div>账户</div>
<div>关于</div>
</nav>
<section>
<div>其他杂项</div>
</section>
</footer>
</body>
</html>不常用的3个HTML交互元素：details、summary、dialog
HTML5不仅新增了语义型区块级元素及表单类元素，也新增了一些其他的功能性元素，这些元素由于浏览器支持等各种原因，并没有被广泛使用
文档描述
<details>主要用于描述文档或文档某个部分的细节，与<summary>配合使用可以为<details>定义标题。标题是可见的，用户点击标题时，显示出details
注意：这两个标签只有chrome和opera支持
<details>
该标签仅有一个open属性，用来定义details是否可见(默认为不可见状态)
<details>
<summary>Copyright 2015.</summary>
<p>小火柴的蓝色理想</p>
</details>对话框
<dialog>标签用来定义对话框或窗口，且该对话框位于窗口的水平居中位置
<dialog>
该标签只有一个open属性，用来定义对话框是否可见(默认为不可见)
注意：只有chrome和opera支持
<button>显示对话框</button>
<dialog>我是对话框的内容</dialog>
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oDia = document.getElementsByTagName('dialog')[0];
oBtn.onclick = function(){
console.log(oDia.getAttribute('open'))
if(!oDia.getAttribute('open')){
oDia.setAttribute('open','open');
this.innerHTML ='隐藏文本框';
}else{
oDia.removeAttribute('open');
this.innerHTML = '显示文本框';
}
}
</script>HTML标签内容模型
HTML核心的部分莫过于标签(tag)了。标签是用来描述文档中的各自内容基本单元，不同标签表示着不同的含义，标签之间的嵌套表示了内容之间的结构。
HTML标签在HTML5中内容模型拓展到了7类，包括元数据型、区块型、标题型、文档流型、语句型、内嵌型、交互型。但即使是这7个类别也没有完全覆盖所有元素的所有情况，元素可以不属于任何一个类别，被称为穿透的；很多元素可能属于不止一个类别，称为混合的
分类
元数据型(metadata)
设置展示、行为、关联文档或其他内容的元数据的元素
<head>元素包含文档的元素数据，包括<base>、<command>、<link>、<meta>、<noscript>、<script>、<style>和<title>共8个
区块型(sectioning)
定义区块内容范围的元素，包括<article>、<aside>、<nav>、<section>四个元素
标题型(heading)
定义区块内容标题的元素，包括<h1>到<h6>以及<hgroup>
文档流型(flow)
大部分文档<body>内的元素，只有部分元数据式元素不属于流式，它们是<base>和<title>
语句型(phrasing)
文档里的文字、在段落中标记文字的元素等
内嵌型(embedded)
由于HTML本身提供的元素的表达能力有限，允许嵌入内容成为浏览器开发者不得不做的事情，在文档引入另一个资源的元素或者插入文档的另一种语言。嵌入式内容包括<audio>、<canvas>、<embed>、<iframe>、<img>、<math>、<object>、<svg>和<video>九类
注意：该类元素中，<embed>、<iframe>、<object>这三个元素不设置宽高时，默认宽高为300px*150px
<img>(<img> -> image 图像)
<iframe>
<canvas>
音频和视频
交互型(interactive)
专门用于用户交互的元素，包括<a>、<audio>、<button>、<details>、<embed>、<iframe>、<img>、<input>、<keygen>、<label>、<menu>、<object>、<select>、<textarea>、<video>
其中，<details>、<summary>、<command>、<menu>这四个交互元素浏览器的支持性还不太好
657
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
