一、语义元素
什么是语义元素？
语义元素清楚地向浏览器和开发者描述其意义。
- 非语义元素的例子：
<div>和<span>- 无法提供关于其内容的信息。
- 语义元素的例子：
<form>、<table>以及<img>- 清晰地定义其内容。
HTML5的新语义元素和框架布局：
| HTML5 | 语义元素 |
|---|---|
| header | 定义文档或节的页眉 |
| nav | 定义导航链接的容器 |
| section | 定义文档中的节 |
| article | 定义独立的自包含文章 |
| aside | 定义内容之外的内容（比如侧栏） |
| footer | 定义文档或节的页脚 |
| details | 定义额外的细节 |
| summary | 定义 details 元素的标题 |
Tip: 由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。
HTML5新语义元素如下所示：
二、 HTML5新元素
| 标签 | 描述 |
|---|---|
<article> |
定义文档内的文章。 |
<aside> |
定义页面内容之外的内容。 |
<bdi> |
定义与其他文本不同的文本方向。 |
<details> |
定义用户可查看或隐藏的额外细节。 |
<dialog> |
定义对话框或窗口。 |
<figcaption> |
定义 <figure> 元素的标题。 |
<figure> |
定义自包含内容，比如图示、图表、照片、代码清单等等。 |
<footer> |
定义文档或节的页脚。 |
<header> |
定义文档或节的页眉。 |
<main> |
定义文档的主内容。 |
<mark> |
定义重要或强调的内容。 |
<menuitem> |
定义用户能够从弹出菜单调用的命令/菜单项目。 |
<meter> |
定义已知范围（尺度）内的标量测量。 |
<nav> |
定义文档内的导航链接。 |
<progress> |
定义任务进度。 |
<rp> |
定义在不支持 ruby 注释的浏览器中显示什么。 |
<rt> |
定义关于字符的解释/发音（用于东亚字体）。 |
<ruby> |
定义 ruby 注释（用于东亚字体）。 |
<section> |
定义文档中的节。 |
<summary> |
定义<details> 元素的可见标题。 |
<time> |
定义日期/时间。 |
<wbr> |
定义可能的折行（line-break）。 |
三、样式指南和代码约定
- 建议使用小写属性名
- 关闭空的属性名
<meta charset="utf-8" />
- 建议关闭所有 HTML 元素.【成对出现】
- 属性值添加引号
- 请始终对图像使用 alt 属性。当图像无法显示时该属性很重要。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
- 请始终定义图像尺寸。这样做会减少闪烁，因为浏览器会在图像加载之前为图像预留空间。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
- 在逗号或分号之后添加空格，是所有书写类型的通用规则。
- 请使用简单的语法来链接样式表（type 属性不是必需的）：
<link rel="stylesheet" href="styles.css">
- 请使用简单的语法来加载外部脚本（type 属性不是必需的）：
<script src="myscript.js">
- 请始终使用小写文件名（如果可以的话）
四、字符实体
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |
  |
|
| 首行缩进 |   |
||
| < | 小于号 | < |
< |
| > | 大于号 | > |
> |
| & | 和号 | & |
& |
| " | 引号 | " |
" |
| ’ | 撇号 | ' (IE不支持) |
' |
| ￠ | 分（cent） | ¢ |
¢ |
| £ | 镑（pound） | £ |
£ |
| ¥ | 元（yen） | ¥ |
¥ |
| € | 欧元（euro） | € |
€ |
| § | 小节 | § |
§ |
| © | 版权（copyright） | © |
© |
| ® | 注册商标 | ® |
® |
| ™ | 商标 | ™ |
™ |
| × | 乘号 | × |
× |
| ÷ | 除号 | ÷ |
÷ |
其他具体详情请跳转w3school
五、统一资源定位符 URL
URL 可以由单词组成，比如 “w3school.com.cn”，或者是因特网协议（IP）地址：192.168.1.253。大多数人在网上冲浪时，会键入网址的域名，因为名称比数字容易记忆。
遵循以下规则：scheme://host.domain:port/path/filename
解释：
- scheme - 定义因特网服务的类型。最常见的类型是 http
- host - 定义域主机（http 的默认主机是 www）
- domain - 定义因特网域名，比如 w3school.com.cn
- :port - 定义主机上的端口号（http 的默认端口号是 80）
- path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
- filename - 定义文档/资源的名称
六、框架
框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
使用框架的坏处：
- 开发人员必须同时跟踪更多的HTML文档
- 很难打印整张页面
框架结构标签（<frameset>）
- 框架结构标签（
<frameset>）定义如何将窗口分割为框架 - 每个 frameset 定义了一系列行或列
- rows/columns 的值规定了每行或每列占据屏幕的面积
基本的注意事项 - 有用的提示：
- 假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 标签中加入：noresize=“noresize”。
- 为不支持框架的浏览器添加 标签。
重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于<body></body>标签内。
6.1 如何利用框架制作导航栏
导航框架包含一个将第二个框架作为目标的链接列表。名为 “contents.html” 的文件包含三个链接。通过锚定的方法制作导航栏。
<html>
<frameset cols="120,*">
<frame src="/demo/html/content.html">
<frame src="/example/html/frame_a.html" name="showframe">
</frameset>
</html>
七、使用插件
浏览器插件是一种扩展浏览器标准功能的小型计算机程序。插件有很多用途：播放音乐、显示地图、验证银行账号，控制输入等等。可使用 <object> 或 <embed> 标签来将插件添加到 HTML 页面。
这些标签定义资源（通常非 HTML 资源）的容器，根据类型，它们即会由浏览器显示，也会由外部插件显示。
最好的方法：
<audio controls="controls" height="100" width="100">
<source src="song.mp3" type="audio/mp3" />
<source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>
上面的例子使用了两个不同的音频格式。HTML5<audio>元素会尝试以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试<embed> 元素。
问题：
- 您必须把音频转换为不同的格式。
<audio>元素无法通过 HTML 4 和 XHTML 验证。<embed>元素无法通过 HTML 4 和 XHTML 验证。<embed>元素无法回退来显示错误消息。
注释：使用 (HTML5) 解决验证问题。
其他方式：
- 使用雅虎播放器
- 使用超链接形式（也就是借助浏览器自带的音乐播放器）
主要运用如下属性：
| 标签 | 描述 |
|---|---|
<audio> |
标签定义声音，比如音乐或其他音频流。 |
<embed> |
标签定义嵌入的内容，比如插件。 |
八、HTML视频
最好的 HTML 解决方法
HTML 5 + <object> + <embed>
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240" />
</object>
</video>
上例中使用了 4 中不同的视频格式。HTML 5
<video>元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到<embed>元素。
其他方法：
- 在 HTML 中显示视频的最简单的方法是使用优酷等视频网站。如果您希望在网页中播放视频，那么您可以把视频上传到优酷等视频网站，然后在您的网页中插入 HTML 代码即可播放视频：
<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf"
width="480" height="400"
type="application/x-shockwave-flash">
</embed>
- 使用超链接