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>

常用的命名空间值：

HTML：http://www.w3.org/1999/xhtml。
MathML：http://www.w3.org/1998/Math/MathML。MathML 指数学标记语言，是XML语言的一个子集，用来在 Web 网页，甚至部分软件中显示数学公式。简言之，就是使用特殊的类似 HTML 的标记在网页中显示数学公式。
svg：http://www.w3.org/2000/svg。
xllink：http://www.w3.org/1999/xlink。XLink 是一种通过 W3C推荐标准认证的XML标记语言，用于在 XML 文档中创建超链接，以及提供与这些链接相关联的元数据。
namespace：http://www.w3.org/XML/1998/namespace。？
xmlns：http://www.w3.org/2000/xmlns/。？

页面语言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 源代码中使用字符实体。

HTML 特殊符号编码对照表

原代码	    显示结果	描述
&lt;        <        小于号或显示标记
&gt;	    >        大于号或显示标记
&amp;	    &        可用于显示其它特殊字符
&quot;	    “        引号
&reg;	    ®        已注册
&copy;	    ©        版权
&trade;	    ™        商标
&ensp;               半个空白位
&emsp;               一个空白位
&nbsp;               不断行的空白

代码缩进: 使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）
两个空格：
- 使用两个空格可以一眼就知道是两个空格而不是一个制表符（大部分编辑器默认一个制表符占四个空格的位置）。所以两个空格更容易保持一致性。
- 能和其他语言统一。比如写 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>

最后更新于1年前