本节我们列出了使用 html 5 过程中总结出来的良好的实践
使用正确的文档类型
文档类型声明位于 html 文档的第一行
<!DOCTYPE?html>
如果习惯了全小写，可以使用下面的 代码
<!doctype?html>
使用小写元素名
HTML5 元素名可以使用大写和小写字母
但我们推荐全部都使用小写
混合了大小写的风格是非常糟糕的
开发人员通常使用小写
小写风格看起来更加清爽
小写字母容易编写
不推荐<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 元素也不一定要 关闭
但我们推荐 关闭 空的 HTML 元素
可以这么写
< Meta ?charset="utf-8">
也可以这么写:
< Meta ?charset="utf-8"?/>
在 XHTML 和 XML 中斜线 (/) 是必须的
如果想要 XML 软件使用我们的 页面 ，使用这种风格是非常好的
使用小写 属性 名
HTML5 属性 名允许使用大写和小写字母
我们推荐使用小写字母 属性 名
同时使用大小写是非常不好的习惯
开发人员通常使用小写
小写风格看起来更加清爽
小写字母容易编写
不推荐<div?CLASS="menu">推荐
<div?class="menu">
属性 值
HTML5 属性 值可以不用引号
但我们推荐对于 属性 值需要用双引号引起来
如果 属性 值含有空格需要使用引号
混合风格不推荐的，建议统一风格
属性 值使用引号易于阅读
下面的范例 属性 值包含空格，没有使用引号，所以不能起作用
<table?class=table?striped>
下面的则使用了双引号，是正确的
<table?class="table?striped">
图片属性
图片 要 添加 ?alt? 属性 ，在 图片 不能 显示 时，它能替代 图片 显示
<img?src="html5.gif"??alt="HTML5"??style="width:128px;">
定义好 图片 的尺寸，在加载时可以预留指定空间，减少闪烁
<img?src="html5.gif"?alt="HTML5"??style="width:128px;">
空格和等号
等号前后可以使用空格
<link?rel?=?"stylesheet"?href?=?"styles.css">
但我们推荐少用空格
<link?rel="stylesheet"?href="styles.css">
避免一行 代码 过长
使用 HTML 编辑器，左右滚动 代码 是不方便的
每行 代码 尽量少于 80 个字符
空行和缩进
不要无缘无故 添加 空行
为每个逻辑 功能 块 添加 空行，这样更易于阅读
缩进使用两个空格，不建议使用 TAB
比较短的 代码 间不要使用不必要的空行和缩进
不必要的空行和缩进
<body>??<h1>简单编程</h1>??<h2>HTML</h2>
???<p>????简单编程，简单编程????简单编程，简单编程???简单编程，简单编程????
简单编程，简单编程??</p></body>
推荐
<body><h1>简单编程</h1><h2></h2>
<p>简单编程，简单编程。简单编程，简单编程。简单编程，简单编程。简单编程，简单编程</p></body>
表格
<table>
????<tr>
????????<th>Name</th>
????????<th>Description</th>
????</tr>
????<tr>
????????<td>A</td>
????????<td>Description?of?A</td>
????</tr>
????<tr>
????????<td>B</td>
????????<td>Description?of?B</td>
????</tr>
</table>
列表
<ol>
????<li>London</li>
????<li>Paris</li>
????<li>Tokyo</li>
</ol>
<body><h1>简单编程</h1><h2></h2> <p>简单编程，简单编程。简单编程，简单编程。简单编程，简单编程。简单编程，简单编程</p></body>
表格
<table>
????<tr>
????????<th>Name</th>
????????<th>Description</th>
????</tr>
????<tr>
????????<td>A</td>
????????<td>Description?of?A</td>
????</tr>
????<tr>
????????<td>B</td>
????????<td>Description?of?B</td>
????</tr>
</table>
列表
<ol>
????<li>London</li>
????<li>Paris</li>
????<li>Tokyo</li>
</ol>
<ol> ????<li>London</li> ????<li>Paris</li> ????<li>Tokyo</li> </ol>
省略 <html> 和 <body> ?
在标准 HTML5 中 <html> 和 <body> 标签 是可以省略的
以下 HTML5 文档是正确的
<!DOCTYPE?html> <head> ????<title> 页面 标题 </title> </head> <h1>这是 一个 标题 </h1> <p>这是 一个 段落</p>
不推荐省略 <html> 和 <body> 标签
<html> 元素是文档的根元素，用于描述 页面 的语言
<!DOCTYPE?html> <html?lang="zh">
声明语言是为了方便屏幕阅读器及 搜索 引擎
省略 <html> 或 <body> 在 DOM 和 XML 软件中会崩溃
省略 <body> 在旧版浏览器 (IE9) 会发生 错误
省略 ?
HTML5 中， <head> 标签 是可以省略的
默 认情况下，浏览器会将 <body> 之前的 内容 添加 到 一个 默 认的 <head> 元素上
<!DOCTYPE?html> <html> <title> 页面 标题 </title> <body> ????<h1>这是 一个 标题 </h1> ????<p>这是 一个 段落</p> </body> </html>
元数据
HTML5 中 <title> 元素是必须的， 标题 名描述了 页面 的 主题
<title>简单编程</title>
标题 和语言可以让 搜索 引擎很快了解 页面 的 主题
<!DOCTYPE?html> <html?lang="zh"> <head> ????< Meta ?charset="UTF-8"> ????<title>简单编程</title> </head>
HTML 注释
注释可以写在?<!--?和?-->?中
<!--?这是注释?-->
比较长的 评论 可以在?<!--?和?-->?中分行写
<!--???这是 一个 较长 评论 。?这是 ?? 一个 较长 评论 。这是 一个 较长 评论 。??这是 ?? 一个 较长 评论 ?这是 一个 较长 评论 。?这是 ?? 一个 较长 评论 。-->
长 评论 第 一个 字符缩进两个空格，更易于阅读
样式表
样式表使用简洁的语法格式，HTML5 中，type 属性 不是必须的
<link?rel="stylesheet"?href="styles.css">
短的规则可以写成一行
p.into?{font-family:?Verdana;?font-size:?16em;}
长的规则可以写成多行:
body?{
????background-color:?lightgrey;
????font-family:?"Arial?Black",Helvetica,sans-serif;
????font-size:?16em;
????color:?black;
}
将左花括号与选择器放在同一行
左花括号与选择器间 添加 一个 空格
使用两个空格来缩进
冒号与 属性 值之间 添加 已空格
逗号和符号之后使用 一个 空格
每个 属性 与值结尾都要使用分号
只有 属性 值包含空格时才使用引号
右花括号放在新的一行
每行最多 80 个字符在逗号和冒号后 添加 空格是常用的 一个 规则
在 HTML 中载入 JavaScript
使用简洁的语法来载入外部的脚本 文件 ，在 HTML5 中 type 属性 不是必须的
<script?src="myscript.js"></script>使用 JavaScript 访问 HTML 元素
一个 糟糕的 HTML 格式可能会导致 JavaScript 执行 错误
下面的两个 JavaScript 语句会 输出 不同结果
var?obj?=?getElementById("Demo");var?obj?=?getElementById("demo");HTML 中 JavaScript 尽量使用相同的命名规则
使用小写 文件 名
大多 Web 服务器 (Apache,Unix) 对大小写敏感
london.jpg 不能通过 London.jpg 访问
其他 Web 服务器 (Microsoft,IIS) 对大小写不敏感
london.jpg 可以通过 London.jpg 或 london.jpg 访问
你必须保持统一的风格，我们建议统一使用小写的 文件 名
文件 扩展名
HTML 文件 后缀可以是?.html?(或?.htm?)
CSS 文件 后缀是?.css
JavaScript 文件 后缀是?.js
.htm 和 .html 的区别
.htm 和 .html 的扩展名 文件 本质上是没有区别的
浏览器和 Web 服务器都会把它们当作 HTML 文件 来处理
区别在于：
.htm 应用在早期 DOS 系统，系统现在或者只能有三个字符
在 Unix 系统中后缀没有特别限制，一般用?.html
技术上区别
如果 一个 URL 没有指定 文件 名， 服务器会返回 默 认的 文件 名
通常 默 认 文件 名为 index.html,index.htm,default.html,和 default.htm
如果服务器只配置了 "index.html" 作为 默 认 文件 ，那么必须将 文件 命名为 "index.html",而不是 "index.htm"
但是，通常服务器可以设置多个 默 认 文件 ，你可以根据需要设置 默 认 文件 名
不管怎样，HTML 完整的后缀是 ".html"
HTML5 Canvas 描边和填充 ? ?HTML5 历史记录API声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did92390