MyBlog

# HTML5简介

HTML5 是 HTML 文档的最新标准，由万维网联盟（W3C）于 2014 年 10 月完成标准制定。它添加了一些新的语法特征，修改或删除了一些旧的属性元素。

# HTML5代码规范

# 使用正确的文档类型

文档类型声明位于 HTML 文档的第一行：

<!DOCTYPE html>
1

# 可以省略 html 和 body 标签但不推荐

在标准 HTML5 中， <html> 和 <body> 标签是可以省略的，比如下面的写法也是正确的：

<!DOCTYPE html>
<head>
  <title>页面标题</title>
</head>

<h1>我是标题</h1>
<p>我是段落。</p>
1
2
3
4
5
6
7

但是不推荐省略掉，建议还是写成下面这样：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <h1>我是标题</h1>
    <p>我是段落。</p>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11

# 使用小写元素名

HTML5 元素名可以使用大写和小写字母，建议使用小写字母，会显得更加好看一点，千万不要使用大小写混写，那样会显得很不专业。建议的写法如下：

<section>
  <p>我是段落。</p>
</section>
1
2
3

# 关闭所有 HTML 元素

在 HTML5 中, 你不一定要关闭所有元素 (例如 <p> 元素)，但是建议每个元素都要添加关闭标签。比如下面这样写也不会报错：

<section>
  <p>我是段落甲。
  <p>我是段落乙。
</section>
1
2
3
4

建议写成下面这样：

<section>
  <p>我是段落甲。</p>
  <p>我是段落乙。</p>
</section>
1
2
3
4

# 关闭空的 HTML 元素

在 HTML5 中, 空的 HTML 元素也不一定要关闭,我们可以这样写：

<meta charset="utf-8">
1

建议的写法是还是关闭：

<meta charset="utf-8" />
1

# 使用小写属性名

同样的 HTML5 属性名允许使用大写和小写字母。但是我们依然建议使用小写字母：

<div class="test"></div>
1

# 属性值

HTML5 属性值可以不用引号。但是属性值我们推荐使用引号，尤其是属性值有空格的话，一定要使用引号，不然不会起作用，属性的命名如果很长我们建议使用驼峰命名法：

<div class="test changeColor"></div>
1

# 图片属性

图片通常使用 alt 属性。 在图片不能显示时，它能替代图片显示。建议定义好图片的尺寸，在加载时可以预留指定空间，减少闪烁。比如：

<img src="syl.png" alt="HTML5" style="width:520px;height:1314px" />
1

# 空格前后的等号

等号的前后可以使用空格，也可以不使用，推荐少用空格。

<link rel="stylesheet" href="styles.css" />
1

# 避免一行代码过长

使用 HTML 编辑器，一行代码过长时左右滚动代码来查看是不方便的。如果实在太长，建议分为几行来写。

# 空格和缩进

不要无缘无故的添加空行，一般一个模块或一个功能添加一个空行便于区分，缩进使用两个空格，不建议使用 Tab。

# 注释

<!-- 这是注释 -->
1

快捷键为 Ctrl + /。当然我们首先要选中要注释的代码再使用快捷键。

注：编码风格建议统一，不要乱而杂，另外建议大家养成多写注释的习惯，因为时间久了，如果没有注释，可能你自己都不知道自己当初写的是啥。

# HTML5的改变

HTML5 添加了许多新的语法特征，其中包括 <video>、<audio> 和 <canvas> 元素，同时集成了 SVG 内容。这些元素是为了更容易的在网页中添加和处理多媒体和图片内容而添加的。其它新的元素如 <section>、<article>、<header> 和 <nav> 则是为了丰富文档的数据内容。新的属性的添加也是为了同样的目的。同时也有一些属性和元素被移除掉了。一些元素，像 <a>、<cite> 和 <menu> 被修改，重新定义或标准化了。同时 apis 和 DOM 已经成为 HTML5 中的基础部分了。HTML5 还定义了处理非法文档的具体细节，使得所有浏览器和客户端程序能够一致地处理语法错误。

# 新特性和新规则

# 新特性

  • 语义特性：HTML5 新标准中添加了拥有具体含义的 HTML 标签比如：<article>、<footer>、<header>、<nav>、 <section>。
  • 连通性：能够让你和服务器之间通过创新的新技术方法进行通信。
  • 对本地离线存储的更好的支持。
  • 用于媒介回放的 video 和 audio 元素。
  • 用于绘画的 canvas 元素。
  • 性能与集成特性：提供了非常显著的性能优化和更有效的计算机硬件使用。
  • 设备兼容特性：能够处理各种输入和输出设备。
  • CSS3 特性。

# 新规则

  • 新特性应该基于 HTML、CSS、DOM、JavaScript。
  • 减少对外部插件的需求，比如 Flash。
  • HTML5 应该独立于设备
  • 更多取代脚本的标记
  • 更优秀的错误处理

# 新增的结构元素

HTML5 定义了一组新的语义化标记来描述元素的内容，可以简化 HTML 页面设计，并且使用浏览器搜索网页时，也可以利用这些元素。

首先我们来看一个普通的页面的布局方式：

此处输入图片的描述

以上是很常见的 div+css 布局模式，通过 class 名称来区分不同的结构，包括头部、导航、文章内容、右边栏，还有底部模块。

而 HTML5 新标签带来的新的布局则是下面这种情况：

此处输入图片的描述

代码如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>my page</title>
  </head>
  <body>
    <header>header</header>
    <nav>nav</nav>
    <article>
      <section>section</section>
    </article>
    <aside>aside</aside>
    <footer>footer</footer>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

注：上面的代码没有 CSS 样式，只是展示 HTML 结构。拥有具体含义的标签，使得代码有很直观的感受，搜索器也能很容易地抓取合适的信息。

# section 标签----主体中区域

<section> 表示文档中的一个区域（或节）。比如章节、页眉、页脚或文档中的其他部分，一般来说会包含一个标题。

例子：

<body>
  <section>
    <h1>section是什么？</h1>
    <p>一个新章节</p>
  </section>
</body>
1
2
3
4
5
6

注：不要把 <section> 元素作为一个普通的 div 容器来使用。一般来说，一个 <section> 应该出现在文档大纲中。

# article 标签

<article> 标签定义独立的内容。常常使用在论坛帖子，报纸文章，博客条目，用户评论等独立的内容项目之中。article 可以嵌套，内层的 article 对外层的 article 标签有隶属关系。

例子：

<body>
  <article>
    <h1>实验楼是什么</h1>
    <p>一个在线学习的网站</p>
  </article>
</body>
1
2
3
4
5
6

<nav> 标签定义导航链接的部分：描绘一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表。

例子：

<body>
  <nav>
    <ul>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </nav>
</body>
1
2
3
4
5
6
7
8
9

注：并不是所有的链接都必须使用 <nav> 标签，它只用来将一些热门的链接放入导航栏。一个网页也可能含有多个 <nav> 标签,例如一个是网站内的导航列表,另一个是本页面内的导航列表。

# header 标签---页眉

<header> 标签定义文档的页眉，通常是一些引导和导航信息。它不局限于写在网页头部，也可以写在网页内容里面。

通常 header 标签至少包含一个标题标记（h1-h6），还可以包括 hgroup 标签，还可以包括表格内容、标识、搜索表单、nav 导航等。

例子：

<body>
  <header>
    <h1>网站标题</h1>
    <h2>网站副标题</h2>
  </header>
</body>
1
2
3
4
5
6

# main标签----主体

页面主体部分

<footer> 标签定义 section 或 document 的页脚，包含了与页面、文章或是部分内容有关的信息，比如说文章的作者或者日期。 它和 header 标签使用基本一样，可以在一个页面中多次使用，如果在一个区段的后面加入了 footer 标签，那么它就相当于该区段的页脚了。

例子：

<body>
  <footer>
    <span>Copyright @2013-2019 实验楼在线教育</span>
  </footer>
</body>
1
2
3
4
5

# aside 标签

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

例子：

<body>
  <aside>
    <h1>实验楼简介</h1>
    <p>一个在线学习的网站</p>
  </aside>
</body>
1
2
3
4
5
6

# 废除的元素

HTML5 中废除了一些纯表现的元素、只有部分浏览器支持的元素、一些会对可用性产生负面影响的元素。

# 纯表现元素

纯表现元素指的是可以用 CSS 代替的元素。例如：basefont、big、center、font、s、strike、tt、u这些元素，他们的功能都是纯粹为页面展示服务的，html5 提倡把页面展示性功能放在 CSS 样式表中统一处理，所以将这些元素废除，用 CSS 样式进行替代。

# 对可用性产生负面影响的元素

对于 frameset 元素、frame 元素与 noframes 元素，由于 frame 框架对网页可用性存在负面影响，在 html5 中已不支持 frame 框架，只支持 iframe 框架，html5 中同时将 frameset、frame 和 noframes 这三个元素废除。

# 只有部分浏览器支持的元素

对于 applet、bgsound、blink、marquee 等元素，由于只有部分浏览器支持，特别是 bgsound 元素以及 marquee 元素，只被 IE 支持，所以在 html5 中被废除。其中 applet 元素可由 embed 元素或 object 元素替代，bgsound 元素可由 audio 元素替代，marquee 可以由 javascript 编程的方式替代。

← HTML5表单 →