HTML代码规范
DOCTYPE 声明
<!DOCTYPE 根元素 可用性 "注册//组织//类型 标签 定义//语言" "URL">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
DOCTYPE(document type)文档类型的简写,用来说明你用的 XHTML 或者 HTML 是什么版本。
其中 DTD 叫文档类型定义,里面包含了文档的规则,浏览器就根据你定义的 DTD 来解释你页面的标识,并展现出来。要建立符合标准的网页,DOCTYPE 声明是必不可少的关键组成部分;除非你的 XHTML 确定了一个正确的 DOCTYPE,否则你的标识和 css 都不会生效。
XHTML 1.0 提供了三种DTD声明可供选择:有过度的(Transitional)、严格的(strict)、框架的(frameset)。
HTML5 由以下语句声明:
<!DOCTYPE html>
单击 DOCTYPE:文档类型与浏览器模式,了解更多 DOCTYPE 信息。
命名空间namespace
<html xmlns="http://www.w3.org/1999/xhtml">
xmlns 是 XHTML namespace 的缩写,称为命名空间。它在 XHTML 中是必要的,而在 HTML 中则是可选的。
XHTML 是 HTML 向 XML 过渡的标识语言,它需要符合 XML 文档规则,因此也需要定义名字空间。又因为 XHTML1.0 不能自定义标识,所以它的名字空间都相同,就是"http://www.w3.org/1999/xhtml"。
xmlns 属性可以在文档中定义一个或多个可供选择的命名空间,可以放置在文档内任何元素的开始标签中。
xmlns 提供避免元素命名冲突的方法。因为 XML 中的元素名称是由开发者定义的,当两个不同的文档使用相同的元素名时,就会发生命名冲突。
如果需要使用符合 XML 规范的 XHTML 文档,则应该在文档中的 <html>
标签中至少使用一个 xmlns 属性,以指定整个文档所使用的主要命名空间:
<html xmlns="http://www.w3.org/1999/xhtml">
如果需要在一个 div 元素中显示一串数学公式,则可以为该 div 元素定义一个数学命名空间。比如这样:
<div xmlns="http://www.w3.org/1999/Math/MathMl">x3/x</div>
如果您不希望在每次显示除法公式时都在 div 元素中定义 xmlns 属性,那么更好的办法是在文档的开头处定义具有前缀的命名空间:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:math="http://www.w3.org/1999/Math/MathMl">
然后,您就可以在 div 中使用该前缀了,就像这样:
<math:div>x3/X<div>
常用的命名空间值:
MathML:http://www.w3.org/1998/Math/MathML。MathML 指数学标记语言,是XML语言的一个子集,用来在 Web 网页,甚至部分软件中显示数学公式。简言之,就是使用特殊的类似 HTML 的标记在网页中显示数学公式。
xllink:http://www.w3.org/1999/xlink。XLink 是一种通过 W3C推荐标准 认证的XML标记语言,用于在 XML 文档中创建超链接,以及提供与这些链接相关联的元数据。
namespace:http://www.w3.org/XML/1998/namespace。?
页面语言LANG
Lang 属性的取值应该遵循互联网工程任务组–IETF(The Internet Engineering Task Force)制定的关于语言标签的文档。推荐使用属性值 cmn-Hans-CN(简体, 中国大陆),但是考虑浏览器和操作系统的兼容性,目前仍然使用 zh-CN
属性值
<html lang="zh-CN">
定义语言编码CHARSET
<meta charset="UTF-8">
为了被浏览器正确解释和通过 W3C 代码校验,所有的 HTML 文档都必须声明它们所使用的编码语言。
HTML5 默认的字符编码是 UTF-8
。
注意:请尽量统一写成标准的 UTF-8
,不要写成 utf8、UTF8
。根据 IETF 定义,其编码标准的写法是 UTF-8
,而 UTF8、utf8
的写法只是出现在某些编程系统中。
HTML标签闭合
HTML元素共有以下5种:
- 空元素:
area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
- 原始文本元素:
script、style
- RCDATA元素:
textarea、title
- 外来元素:来自 MathML 命名空间和 SVG 命名空间的元素。
- 常规元素:其他 HTML 允许的元素都称为常规元素。
为了能让浏览器更好的解析代码以及能让代码具有更好的可读性,有如下约定:
- 所有具有开始标签和结束标签的元素都要写上起止标签,某些允许省略开始标签或和束标签的元素亦都要写上。
- 空元素标签都不加 “/” 字符
HTML代码风格
HTML 标签名、类名、标签属性和大部分属性值统一用小写;
HTML 文本、CDATA、JavaScript、meta 标签某些属性等内容可大小写混合;
不需要为 CSS、JS 指定类型属性,HTML5 中默认已包含;
元素属性值使用双引号语法。
给所有属性赋一个值:XHTML 规定所有属性都必须有一个值,没有值的就重复本身。
<input type="checkbox" name="name" value="abcd" checked> <!--标准写法--> <input type="checkbox" name="name" value="abcd" checked="checked" />
- 图片添加有意义的 alt 属性;
- 在 form 表单中增加 lable,以增加用户友好度;
- 元素属性顺序:
class
id
name
data-*
src
,for
,type
,href
,value
,max-length
,max
,min
,pattern
placeholder
,title
,alt
aria-*
,role
required
,readonly
,disabled
特殊字符引用: HTML 中不能使用小于号 “<” 和大于号 “>” 特殊字符,浏览器会将它们作为标签解析,若要正确显示,在 HTML 源代码中使用字符实体。
原代码 显示结果 描述 < < 小于号或显示标记 > > 大于号或显示标记 & & 可用于显示其它特殊字符 " “ 引号 ® ® 已注册 © © 版权 ™ ™ 商标   半个空白位   一个空白位 不断行的空白
代码缩进: 使用四个空格进行代码缩进,使得各编辑器表现一致(各编辑器有相关配置)
两个空格:
- 使用两个空格可以一眼就知道是两个空格而不是一个制表符(大部分编辑器默认一个制表符占四个空格的位置)。所以两个空格更容易保持一致性。
- 能和其他语言统一。比如写 JSON、Python、YAML 时就不用切换习惯了
四个空格:更具有层次感,便于观察代码的逻辑结构。
代码嵌套: 元素嵌套规范,每个块状元素独立一行,内联元素可选。段落元素与标题元素只能嵌套内联元素。减少标签数量,需要尽量避免多余的父节点。
列表中的条目必须总是放置于
<ul>
、<ol>
或<dl>
中,永远不要用一组<div>
或<p>
来表示。注释规范
单行注释:一般用于简单的描述,如某些状态描述、属性描述等。注释位于要注释代码的上面,单独占一行
模块注释:一般用于描述模块的名称以及模块开始与结束的位置。
HTML模板示例
HTML5 标准模版:
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML5标准模版</title>
</head>
<body></body>
</html>
移动端 HTML5 模版:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!--优先使用IE最新版本和Chrome-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--移动设备上屏幕显示区域的设置-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no, viewport-fit=cover">
<!--主要是针对苹果手机将数字自动识别为号码-->
<meta name="format-detection" content="telephone=no">
<!--启用全屏模式,伪装app,离线应用。-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!--隐藏状态栏/设置状态栏颜色-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器-->
<meta name="HandheldFriendly" content="True">
<!-- 微软的老式浏览器 告诉浏览器页面为某个宽度特殊优化-->
<meta name="MobileOptimized" content="width">
<!--指定适合自己网站的渲染内核名称-->
<meta name="renderer" content="webkit" />
<title></title>
</head>
<body></body>
</html>
PC 端 HTML5 模版:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="author,email address">
<meta name="robots" content="index,follow">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="renderer" content="ie-stand">
<title>PC端HTML模版</title>
</head>
<body></body>
</html>