1. 文件
文件格式
- 字符编码 字符编码必须是UTF-8无BOM格式
- VS Code →
文件
›首选项
›设置
›文件
›Encoding
›utf8
- VS Code →
- 行尾序列 必须设置为Unix (LF)?
- VS Code →
文件
›首选项
›设置
›文件
›Eol
›\n
- VS Code →
文件名称
文件的名称必须使用英文单词,特殊情况下可使用汉语拼音缩写。
- 字母 必须全部小写
- e.g.
sidebar.html
- e.g.
- 单词 必须分开并且使用
-
连接- e.g.
social-media-widget.html
- e.g.
▲ 目录
2. 文档设置
本节展示了完整的HTML文件中所需的主要元素。
- 文档描述 必须指定并且应该是HTML5的
- e.g.
<!DOCTYPE html>
- e.g.
- 语言 必须定义并且包含在
html
标签中- e.g.
<html lang="en">
- e.g.
- 字符编码 必须指定,并且尽可能在前面定义
- e.g.
<meta charset="utf-8">
- e.g.
- Viewport 必须包含
- e.g.
<meta name="viewport" content="width=device-width, user-scalable=no">
- e.g.
- 兼容IE设定 必须包含
- e.g.
<meta http-equiv="X-UA-Compatible" content="ie=edge">
- e.g.
- title 必须包含
- e.g.
<title>Document</title>
- e.g.
- Head and body 必须包含标签
- e.g.
<head></head><body></body>
- e.g.
▲ 目录
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
▲ 文档设置
3. 注释
本节介绍如何格式化和使用注释。
- 单行注释 必须独占一行,内部的文字必须被空格包围
- e.g.
<!-- This is a comment -->
- e.g.
- 多行注释 必须在他们自己的行上开始和结束,文字不得缩进
- i.e.
<!--
↵
Line number one
↵
Line number two
↵
-->
- i.e.
- 闭合标签的注释 应该包括类或ID符号和名称
- e.g.
</div><!-- #main-wrapper -->
- e.g.
- 敏感信息 禁止出现在注释中
- e.g.
<!-- 此信息发送至 user@domain.com -->
- e.g.
▲ 目录
1. 单行注释
单行注释必须独占一行,内部的文字必须被空格包围。
✖ 错误
<!--
This is a comment
-->
↳ 错误,因为 <!--
, This is a comment
和 -->
应该在一行内。
<!--This is a comment-->
↳ 错误,因为 This is a comment
的前后没有被空格包围。
✔ 正确
<!-- This is a comment -->
2. 多行注释
多行注释必须在他们自己的行上开始和结束,文字不得缩进
✖ 错误
<!-- This is a comment
that spans multiple lines
-->
↳ 错误, 因为 <!--
和 This is a comment
在一行上。
<!--
This is a comment
that spans multiple lines
-->
↳ 错误, 因为 This is a comment
和 that spans multiple lines
存在缩进。
✔ 正确
<!--
This is a comment
that spans multiple lines
-->
3. 闭合标签的注释
闭合标签的注释应该包括类或ID符号和名称。
✖ 错误
<div id="main-wrapper">
...
</div><!-- main-wrapper -->
↳ 错误, 因为缺少 #
前缀。
<div id="main-wrapper">
...
</div><!-- .main-wrapper -->
↳ 错误, 因为 main-wrapper
前缀为 .
而不是 #
.
✔ 正确
<div id="main-wrapper">
...
</div><!-- #main-wrapper -->
4. 敏感信息
敏感信息禁止出现在注释中。
✖ 错误
<!-- Some infos come from cookie -->
↳ 错误, 因为这里显示了一些信息是从 cookie
中来的.
▲ 注释
4. 格式化
本节概述了与空格和文本相关的各种常规格式规则。
- 行缩进 必须使用四个空格缩进
- i.e.
<ul>
↵
····
<li>
- i.e.
- 直接子元素
html
,body
,style
和script
的直接子元素禁止缩进- i.e.
<body>
↵
<h1></h1>
↵
</body>
,<head>
↵
····
...
</head>
- i.e.
- 块级、列表和表格元素 必须新开一行,并且他们的子元素必须包含在里面
- i.e.
<div>
↵
·wei
<h1>
,<table>
↵
····
<th>
- i.e.
- 尾空格 禁止出现在闭合标签后
- i.e. 不要
<p></p>
·
·
↵
- i.e. 不要
- 标签和属性名称 必须全为小写,并且单词之间用短横线连接(kebab-case)
- e.g.
<a href="" title="">
,<link rel="stylesheet" href="">
- e.g.
▲ 目录
1. 行缩进
行缩进必须使用四个空格缩进。
✖ 错误
<ul>
<li>Item number one</li>
<li>Item number two</li>
</ul>
↳ 错误, 因为 <li>
使用tab而不是使用空格缩进。
✔ 正确
<ul>
<li>Item number one</li>
<li>Item number two</li>
</ul>
2. 直接子元素
html
, body
, style
和 script
的直接子元素禁止缩进。
✖ 错误
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome</title>
<meta charset="utf-8">
<style>
#main-wrapper {
width: 960px;
}
</style>
<script>
function show_alert() {
...
}
</script>
</head>
<body>
<div id="main-wrapper">
<h1>Welcome</h1>
<p>This is a skeleton document.</p>
</div>
</body>
</html>
↳ 错误, 因为 <head>
, <body>
和 <div>
使用了缩进;
↳ 错误, 因为 <style>
和 <script>
包含的内容使用了缩进。
✔ 正确
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome</title>
<meta charset="utf-8">
<style>
#main-wrapper {
width: 960px;
}
</style>
<script>
function show_alert() {
...
}
</script>
</head>
<body>
<div id="main-wrapper">
<h1>Welcome</h1>
<p>This is a skeleton document.</p>
</div>
</body>
</html>
3. 块级、列表和表格元素
块级、列表和表格元素必须新开一行,并且他们的子元素必须包含在里面。
✖ 错误
<div><p>This is a paragraph.</p></div>
<ul><li>Item one</li><li>Item two</li></ul>
<table><tr><th>Header</th></tr><tr><td>Content</td></tr></table>
↳ 错误, 因为 <div>
, <ul>
, <table>
和 <tr>
没有独占一行;
↳ 错误, 因为 <p>
, <li>
, <tr>
和 <td>
没有使用缩进。
✔ 正确
<div>
<p>This is a paragraph.</p>
</div>
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
<table>
<tr>
<th>Header</th>
</tr>
<tr>
<td>Content</td>
</tr>
</table>
4. 尾空格
尾空格禁止出现在闭合标签后。
✖ 错误
<p>This is a paragraph.</p>
↳ 错误, 因为在 </p>
包含其他空格。
✔ 正确
<p>This is a paragraph.</p>
5. 标签和属性名称
标签和属性名称必须全为小写,并且单词之间用短横线连接(kebab-case)。
✖ 错误
<div ID="mainWrapper" class="DESKTOP">
<P>This is a paragraph</P>
</div>
↳ 错误, 因为 ID
, mainWrapper
, DESKTOP
和 <P>
没有使用小写。
✔ Correct
<div id="main-wrapper" class="desktop">
<p>This is a paragraph</p>
</div>
▲ 格式化
5. 元素和属性
本节介绍如何使用元素和属性。
- 自闭合元素 禁止闭合
- e.g.
<br>
,<link rel="stylesheet" href="">
- e.g.
- 可闭合元素 必须闭合
- e.g.
<ul><li></li></ul>
- e.g.
- 属性值 必须使用双引号包裹
- e.g.
<a href="" title="">Link</a>
- e.g.
- 属性布尔值 禁止包含其他值
- e.g.
<input type="text" name="" autofocus>
- e.g.
- 类型和语言属性 必须在
script
标签中省略- e.g.
<script src=""></script>
- e.g.
- 类型属性 必须在
link
和style
标签中省略- e.g.
<style src=""></script>
- e.g.
- 协议 应该被省略
- e.g.
<link href="//style.css" rel="stylesheet">
- e.g.
▲ 目录
1. 自闭合元素
自闭合元素禁止闭合。
✖ 错误
<link href="theme.css" rel="stylesheet" />
<br />
↳ 错误, 因为 <link>
和 <br>
包含 /
符号.
✔ Correct
<link href="theme.css" rel="stylesheet">
<br>
2. 可闭合元素
可闭合元素必须闭合。
✖ 错误
<!DOCTYPE html>
<html lang="en">
<div id="main-wrapper">
<h1>Welcome</h1>
<p>This is a skeleton document.
</div>
</html>
↳ 错误, 因为缺少 <head></head>
, <body></body>
元素和 </p>
闭合标签。
✔ 正确
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome</title>
</head>
<body>
<div id="main-wrapper">
<h1>Welcome</h1>
<p>This is a skeleton document.</p>
</div>
</body>
</html>
3. 属性值
属性值必须使用双引号包裹。
✖ 错误
<form action=processor.html class='application'>
...
</form>
↳ 错误, 因为 processor.html
和 application
没有用双引号包裹。
✔ 正确
<form action="processor.html" class="application">
...
</form>
4. 属性布尔值
属性布尔值禁止包含其他值。
~ 可以
<input type="text" name="first_name" autofocus="autofocus">
↳ 可以, 但是 autofocus
不需要作为 autofocus
属性的值。
✔ 正确
<input type="text" name="first_name" autofocus>
5. 类型和语言属性
类型和语言属性必须在 script
标签中省略。
✖ 错误
<script src="//script.js" type="text/javascript"></script>
↳ 错误, 因为包含了 type
属性.
✔ 正确
<script src="//script.js"></script>
6. 类型属性
类型属性必须在 link
和 style
标签中省略。
✖ 错误
<link rel="stylesheet" href="//style.css" type="text/css">
↳ 错误, 因为包含了 type
属性.
✔ 正确
<link rel="stylesheet" href="//style.css">
7. 协议
协议应该被省略。
~ 可以
<link rel="stylesheet" href="http://domain.com/style.css">
↳ 可以, 但是 http://domain.com
可替换为 //
.
✔ 正确
<link rel="stylesheet" href="//style.css">
▲ 元素和属性
6. 最佳实践
- link和script标签位置 必须放置正确
- e.g.
<head>...<title>Document</title><link rel="stylesheet" href="style.css"></head>
- e.g.
- 遵循HTML标签的嵌套规则
- i.e. 正确
<ul><li></li></ul>
, 错误<ul><p></p></ul>
- i.e. 正确
- 表单字段标签label 必须对应相应的input标签
- e.g.
<label for="pwd"></label><input name="pwd" type="text">
- e.g.
- 表单的name属性值 必须用下划线连接两个单词
- e.g.
<input type="text" name="first_name">
- e.g.
- 字符实体 禁止使用
- i.e. 正确
—
, 错误—
- i.e. 正确
- alt属性 禁止为空
- i.e. 正确
<img href="img.jpg" alt="img">
, 错误<img href="img.jpg">
- i.e. 正确
- 结构、表现、行为三者分离
- HTML只关注内容(只表现为结构)
- SEO优化
- 语义化
▲ 目录
1. link和script标签位置
引入css文件的<link>
标签放在</title>
与</head>
标签之间一般的引入js文件的<script>
标签放在</body>
标签之前,特殊的例如模块加载器(异步加载模块等)放在<link>
标签之前
(Why?)
✖ 错误
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="index.js"></script>
</head>
<body>
...
</body>
</html>
↳ 错误, 因为 <script>
标签放置在头部。
✔ 正确
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
...
<script src="index.js"></script>
</body>
</html>
2. 遵循HTML标签的嵌套规则
基本的HTML标签嵌套规则:
<ul>
/<li>
,<ol>
/<li>
和<dl>
/<dt>``<dd>
是拥有父子级关系的标签,<ul>
,<ol>
,<dl>
只可以嵌套他们对应的子元素,而<li>
,<dd>
可以嵌套其他任意元素,<dt>
禁止嵌套块级元素。<h1~6>
,<pre>
和<dt>
禁止嵌套块级元素。<button>
标签不可以嵌套交互性元素(<a>
,<input>
,<select>
,<textarea>
等)。- 一般情况下行内元素不能嵌套块元素。
✖ 错误
<ul>
<li>Item one</li>
<li>Item two</li>
<ul>
<li>Sub-item one</li>
<li>Sub-item two</li>
</ul>
</ul>
↳ 错误, 因为 <ul>
不可以直接嵌套 <ul>
✔ Correct
<ul>
<li>Item one</li>
<li>Item two</li>
<li>
<ul>
<li>Sub-item one</li>
<li>Sub-item two</li>
</ul>
</li>
</ul>
3. 表单字段标签label
表单字段标签label必须对应相应的input标签。
✖ 错误
<input type="radio" name="gender" id="male" value="male">
<input type="radio" name="gender" id="female" value="female">
↳ 错误, 因为缺少 <label>
标签。
✔ 正确
<input type="radio" name="gender" id="male" value="male"> <label for="male">Male</label>
<input type="radio" name="gender" id="female" value="female"> <label for="female">Female</label>
4. 表单的name属性值
表单的name属性值必须用下划线连接两个单词。
✖ 错误
<input type="text" name="emailaddress">
<input type="text" name="email-address">
↳ 错误, 因为 emailaddress
和 email-address
没有使用下划线连接。
✔ 正确
<input type="text" name="email_address">
5. 字符实体
字符实体禁止使用。
✖ 错误
€
↳ 错误, 因为使用了 €
字符实体.
✔ 正确
€
6. alt属性
alt属性禁止为空。
✖ 错误
<img href="img.jpg">
↳ 错误, 因为缺少了 alt
属性.
✔ 正确
<img href="img.jpg" alt="img">
7. 结构、表现、行为三者分离
尽量在文档和模板中只包含结构性的 HTML;而将所有表现代码,移入样式表中;将所有动作行为,移入脚本之中。
在此之外,为使得它们之间的联系尽可能的小,在文档和模板中也尽量少地引入样式和脚本文件。
建议:
- 不使用行内样式
- e.g.
<div style="..."></div>
- e.g.
- 不在元素上使用
style
属性- e.g.
<hr style="border-top: 5px solid black">
- e.g.
- 不使用行内脚本
- e.g.
<script>alert('no good')</script>
- e.g.
- 不使用表象元素
- e.g.
<b>, <u>, <center>, <font>, <b>
- e.g.
- 不使用表象类名
- e.g.
red, left, center
- e.g.
8. HTML只关注内容(只表现为结构)
HTML所构建的文档应该只包含当前页面的结构,增强代码的可读性和可维护性。
- HTML只显示展示内容信息
- 不要引入一些特定的 HTML 结构来解决一些视觉设计问题
- 不要将
<img>
元素当做专门用来做视觉设计的元素 - 样式上的问题应该使用
css
解决 - 一些表现型的元素可通过伪元素来解决,从而减少不必要的DOM节点
9. SEO优化
在构建html页面的时候适当考虑SEO的优化。
- 必须包含
<title>
标签,<title>
标签的内容不宜过长 - 设置关于本网页的
description
同时注意不要堆砌关键词- e.g.
<meta name="description" content="description">
- e.g.
- 合理使用
<h1~6>
标签 <img>
标签的alt
属性禁止为空- e.g.
<img href="img.jpg" alt="img">
- e.g.
- 对于网页中非常重要的链接采用
title
属性说明,有助于帮助搜索引擎找到网页的重点URL。- e.g.
<a href="https://www.domain.com" title="title">
- e.g.
HTML标签权重分值排列
内部链接文字:10分
标题title:10分
域名:7分
H1,H2字号标题:5分
每段首句:5分
路径或文件名:4分
相似度(关键词堆积):4分
每句开头:1.5分
加粗或斜体:1分
文本用法(内容):1分
title属性:1分 (注意不是 <title>
, 是 title
属性)
alt标记:0.5分
Meta描述(Description属性):0.5分
10. 语义化
我们一直都在说语义化编程,语义化编程,但是在代码中很少有人完全使用正确的元素。
语义化是指:根据元素其被创造出来时的初始意义来使用它。
意思就是用正确的标签干正确的事,而不是只有 div
和 span
。
那么要做到语义化,首先是熟悉各标签的含义:
常用的标签有
a、b、br、button、caption、div、dd、dl、dt、em、form、h1~6、hr、i、iframe、img、input、label、ul、li、ol、option、p、select、span、strong、sub、sup、table、thead、tbody、tr、th、td、tfoot、textarea
html5新增的常用标签有
article、aside、audio、canvas、figcaption、figure、footer、header、nav、progress、section、source、time、video
选取合适的标签来构建表现的文档,不仅有利于增强代码的可读性,而且通常这些标签会带有一定的结构格式,即使没有引入css样式,也会以一种特定的结构呈现,同时也有利于SEO的优化。