HTML 基础
常用的元素
工具与规范
实例练习
前言
浏览器对于 HTML 有很大的容错性,甚至元素缺少结束标签都能正常显示,比如以下的代码。
$$warning
在日常开发中这种写法应该是严格禁止的。
$$
<ul>
<li>苹果
<li>西瓜
</ul>
$$demo
<ul> <li>苹果 <li>西瓜 </ul>
$$
可以,很多时候我们应该遵守一套严格的代码格式规范。
比如,尽管 HTML 不规定缩进的空格数,使用几个空格都行。但我们还是应该制定一个标准, 4个(或两个)空格作为缩进。这样可以使得我们的代码规格统一,增加可读性。
特别是在团队当中,多人协作开发一个项目时,更应该统一代码的格式。
代码规范
以下的代码规范是经常参阅多个前端团队(谷歌、Adobe、百度等)公开的代码规范后总结出来的,建议按照以下代码规范约束自己的代码。
缩进 4 个空格
使用 4 个空格作为缩进,不要使用制表符。
<!-- 不推荐 -->
<div>
<p>你好</p>
</div>
<!-- 推荐 -->
<div>
<p>你好</p>
</div>
小写命名
所有元素名、属性都以小写字母命名,如果是多个单词组合则用连字符 -
连接。
<!-- 不推荐 -->
<CustomElement>自定义标签</CustomElement>
<!-- 推荐 -->
<custom-element>自定义标签</custom-element>
双引号
始终使用双引号包裹属性值,而不是单引号或不使用引号。
<!-- 不推荐 -->
<input type="text" name=title />
<input type="text" name='title' />
<!-- 推荐 -->
<input type="text" name="title" />
空元素闭合
所有的空元素都必须闭合。
<!-- 不推荐 -->
<input type="text">
<!-- 推荐 -->
<input type="text" />
不省略闭合
尽管在 HTML 中可以省略部分元素的闭合标签,但还是不推荐省略。
<!-- 不推荐 -->
<ul>
<li>苹果
<li>西瓜
</ul>
<!-- 推荐 -->
<ul>
<li>苹果</li>
<li>西瓜</li>
</ul>
单行长度 120 字符以内
每行的代码最大长度为 120 个字符,在起始标签、结束标签、属性名处换行。
属性顺序
元素的属性尽量按照以下顺序排列。
class
id
,name
data-*
src
,for
,type
,href
,value
title
,alt
role
,aria-*
布尔属性省略值
元素上存在布尔属性则值为 true
,否则为 false
,不允许设置值。
<!-- 不推荐 -->
<input type="text" disabled="true" />
<!-- 推荐 -->
<input type="text" disabled />
标注文件类型
明确使用 HTML5 的文档类型,即在文档首行添加 <!DOCTYPE html>
。
<!-- 推荐 -->
<!DOCTYPE html>
语义化的元素
使用有着明确语义的元素,而不是一些通用的元素。
<!-- 不推荐 -->
<div>
这是一篇文章。。。
</div>
<!-- 推荐 -->
<article>
这是一篇文章。。。
</article>
声明字符编码
显式声明当前页面文件所用的字符编码可以避免出现乱码,推荐代码文件使用应用率最高的 utf-8
编码。
<!-- 推荐 -->
<head>
<meta charset="utf-8">
</head>
语言属性
设置 html
元素的 lang
属性有助于帮助浏览器识别当前文档的主体语言,帮助翻译工具或阅读工具工作。
<!-- 推荐 -->
<html lang="en">
<!-- ... -->
</html>