HTML 5 基础教程

HTML是超文本标记语言，是一种专门用来制作网页的语言，而HTML5就是它的第五个版本，2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成，该标准针对当前互联网的飞速发展制定了更加标准的网页语言规范及适用功能，同时也给我们开发者带来了更多的开发选择，学习它是每个前端开发者必修的课程。

W3CAPI

2020-06-15 06:59:35

文档目录

我的书签

请登录

HTML5 代码编写规范详解二

空行和缩进

不要无缘无故添加空行。
为每个逻辑功能块添加空行，这样更易于阅读。
缩进使用两个空格，不建议使用 TAB。
比较短的代码间不要使用不必要的空行和缩进。

不必要的空行和缩进示例：
<body>

  <h1>在线教程</h1>

  <h2>HTML</h2>

  <p>
    W3CAPI 社区宗旨与口号，人人可以免费学开发，人人可以免费做分享。
    W3CAPI 社区宗旨与口号，人人可以免费学开发，人人可以免费做分享。
    W3CAPI 社区宗旨与口号，人人可以免费学开发，人人可以免费做分享。
  </p>

</body>

推荐写法示例：
<body>

<h1>在线教程</h1>

<h2>HTML</h2>
<p>W3CAPI 社区宗旨与口号，人人可以免费学开发，人人可以免费做分享。
W3CAPI 社区宗旨与口号，人人可以免费学开发，人人可以免费做分享。
W3CAPI 社区宗旨与口号，人人可以免费学开发，人人可以免费做分享。</p>

</body>

表格规范写法实例：
<table>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Description of A</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Description of B</td>
  </tr>
</table>

列表规范写法实例：
<ol>
  <li>London</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ol>

是否省略 <html> 和 <body>?

在标准 HTML5 中， <html> 和 <body> 标签是可以省略的。以下 HTML5 文档的写法是正确的：

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

<h1>这是一个标题</h1>
<p>这是一个段落。</p>

不推荐省略 <html> 和 <body> 标签。<html> 元素是文档的根元素，用于描述页面的语言：

<!DOCTYPE html>
<html lang="zh">

声明语言是为了方便屏幕阅读器及搜索引擎。
省略 <html> 或 <body> 在 DOM 和 XML 软件中会崩溃。
省略 <body> 在旧版浏览器（IE9及以下版本）会发生错误。

是否可以省略 <head>?

在标准 HTML5 中， <head>标签是可以省略的。默认情况下，浏览器会将 <body> 之前的内容添加到一个默认的 <head> 元素上。现在省略 head 标签还不推荐使用：

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

<body>
  <h1>这是一个标题</h1>
  <p>这是一个段落。</p>
</body>

</html>

元数据标签

HTML5 中 <title> 元素是必须的，标题名描述了页面的主题：

<title>在线教程 | 菜鸟教程</title>

标题和语言可以让搜索引擎很快了解你页面的主题：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>在线教程 | 菜鸟教程</title>
</head>

HTML 注释

注释可以写在  中：

<!-- 这是注释 -->

比较长的注释内容可以在  中分行写：

<!-- 
  这是一个较长评论。 这是 一个较长评论。这是一个较长评论。
  这是 一个较长评论 这是一个较长评论。 这是 一个较长评论。
-->

长评论第一个字符缩进两个空格，更易于阅读。

作者文档