HTML 5 基础教程

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

W3CAPI

2020-06-15 06:59:35

文档目录

我的书签

请登录

HTML5 代码编写规范详解

使用正确的文档类型

DOCTYPE标签是一种标准，标记语言的文档类型声明标签，它的目的是要告诉标记语言解析器，它应该使用什么样的文档类型定义(DTD)来解析文档。在HTML5中不需要定义DTD，浏览器已经默认了DTD，也就是直接以HTML5的标准语法来解析该文档，它应该位于HTML文档的第一行：

<!DOCTYPE html>
<!-- 也可以使用小写来声明 -->
<!doctype html>

使用小写的标签元素名称

HTML5 标签元素名称可以使用大写和小写字母，但是我们推荐使用小写字母：

混合了大小写的源代码风格是非常不好的，让人看起来比较杂乱。
开发人员通常使用小写 (类似 XHTML的编写风格)。
小写风格看起来更加清爽。
小写字母容易识别、编写。

<!-- 不推荐的写法 -->
<SECTION> 
  <p>这是一个段落。</p>
</SECTION>

<!-- 非常杂乱的写法 -->
<Section> 
  <p>这是一个段落。</p>
</SECTION>

<!-- 推荐写法 -->
<section> 
  <p>这是一个段落。</p>
</section>

关闭所有 HTML 元素

在 HTML5 中, 你不一定要关闭所有元素 (例如 <p> 元素)，但我们建议每个元素都要添加关闭标签。

<!-- 不推荐的写法 -->
<section>
  <p>这是一个段落。
  <p>这是一个段落。
</section>

<!-- 推荐写法 -->
<section>
  <p>这是一个段落。</p>
  <p>这是一个段落。</p>
</section>

关闭空的（单标签） HTML 元素

在 HTML5 中，空的（单标签，不是成对出现的） HTML 元素标签也不是必需要关闭的，如下单标签：

不推荐写法
<meta charset="utf-8">
推荐写法
<meta charset="utf-8" />

在 XHTML 和 XML 中斜线 (/) 是必须的。如果我们期望 XML 软件也使用我们的页面，使用这种风格的兼容性是非常好的。

使用小写属性名

HTML5 属性名允许使用大写和小写字母。我们推荐使用小写字母属性名：

同时使用大小写是非常不好的习惯。
开发人员通常使用小写 (类似 XHTML的编写风格)。
小写风格看起来更加清爽。
小写字母容易编写。

不推荐
<div CLASS="menu">
推荐
<div class="menu">

属性值与引号

HTML5 属性值可以不用引号，属性值我们推荐使用引号：

如果属性值含有空格需要使用引号。
混合风格不推荐的，建议统一风格。
属性值使用引号易于阅读。

以下实例属性值包含空格，没有使用引号，所以不能起作用：
<table class=table striped>
以下使用了双引号，是正确的：
<table class="table striped">

图片属性alt

图片通常使用 alt 属性。在图片不能显示时，它能替代图片显示，有利于用户体验和SEO优化。

<img src="html5.png" alt="HTML5" />
定义好图片的尺寸，在加载时可以预留指定空间，减少闪烁
<img src="html5.png" alt="HTML5" style="width:200px;height:200px" />

空格和等号

等号前后可以使用空格。但我们推荐少用空格：

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

避免一行代码过长

使用一般的 HTML 编辑器或者文本工具，左右滚动代码是不方便的。每行代码尽量少于 80 个字符。不过如果我们使用集成开发工具可以不用考虑这个问题。

作者文档