HTML 格式规范
虽然 HTML 是一种容错弹性很大的标记语言，就算格式或语法写错还是可以显示 ( 但结果可能会不如预期 )，但在撰写语法上仍然要遵照一些格式规范，才能确保产生出正确的显示结果，未来也才能更有效无误的串接其他程序语言，这篇文章会介绍 HTML 应该注意的一些格式规范。
快速导览：
必须要有 <DOCTYPE>
<!DOCTYPE html> 会放在所有 HTML 的开头，主要定义 HTML 的类型（ doctype )，意思是告诉浏览器这份文件是 HTML5 的规范，只要是网页都需会放入。
<!DOCTYPE html>
<html>
<head>
<title>OXXO.STUDIO</title>
</head>
<body>
<p>我是內容</p>
</body>
</html>
必须要有 <html>、<head>、<body>
<html>、<head>和<body>三个标签是网页 HTML 的基本架构，任何一个网页都必须要包含这三个元素 ( 虽然缺少后可能还能正常显示，但往往在功能与架构上就会出错 )。
好的范例：
<!DOCTYPE html> <html> <head> <title>OXXO.STUDIO</title> </head> <body> <h1>OXXO.STUDIO</h1> <p>hello world<p> </body> </html>不好的范例：
<!DOCTYPE html> <h1>OXXO.STUDIO</h1> <p>hello world<p>
HTML 副档名使用 .html
过去在 HTML 尚未完全普及前，可使用 .htm 的副档名，但只要是 HTML 文件，一律存档为 .html 格式 ( 虽然 .htm 也支援，但相对来说比较不好 )
文件名称使用小写字母
虽然在 HTML 存档时可以用大小写命名，例如 Apple.html 和 apple.html，但不同的浏览器会有不同的读取规则，有些浏览器会区分档名的大小写，有些浏览器则会认为是同一个文件，因此建议文件名称一律使用小写字母，并且避免特殊字元或中文字 ( 因这些文字也会被转换成字母和数字 )。
替网页加上语系与编码规则
编辑网页 HTML 完成后，可以在 html 标签里加上 lang 属性标记语系，新增 meta 标签标记编码规则，如此一来可以提供搜索引擎和浏览器更多信息 ( 有些浏览器甚至会因为语系进行自动切换 )。
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
注意结尾标签
HTML 里大多数的元素都具有开头标签和结尾标签，因此撰写 HTML 时，除了空元素 ( 例如图片 <img> )，其他元素必须都要加上结尾标签 ( 虽然在某些情况下也可以正常显示，但往往会造成整体 HTML 架构错乱 )。
好的范例：
<h1>OXXO.STUDIO</h1> <p>hello world<p>不好的范例：
<h1>OXXO.STUDIO <p>hello world
标签和属性使用小写字母
HTML 所有元素都是由“标签”组成，标签里的字母 ( 包含属性名称 ) 一率使用“小写”字母 ( 虽然大小写混用还是可以正常运作，但通常任何一个常写程序开发者都不会这样做，这么做也会造成整体程序码不容易阅读，且容易出错 )。
好的范例：
<h1>OXXO.STUDIO</h1> <p>hello world<p> <a href="https://steam.oxxostudio.tw">steam.oxxostudio.tw</a>不好的范例：
<H1>OXXO.STUDIO</H1> <P>hello world<p> <a HREF="https://steam.oxxostudio.tw">steam.oxxostudio.tw</a>
属性的值加上引号
撰写 HTML 元素属性的“值”，一律需要加上“引号”( 建议双引号 )，否则除了会读取不到属性的值，更会发生值与属性混淆的状况。
好的范例：
<p class="content">hello world<p>不好的范例：
<p class=content>hello world<p>
等号前后不要有空白
因为 HTML 元素的属性使用“空白”分隔，因此在撰写属性和值的时候，等号前后不要加上空白。
好的范例：
<p class="content" style="color:red;">hello world<p>不好的范例：
<p class = "content" style = "color:red;">hello world<p>
加上换行与缩排
通常 HTML 都会是“巢状元素”的结构，将不同“层级”元素“分行”以及加上“缩排” ( 通常是一个 tab 或两个空白 )，可以让整个 HTML 更加容易阅读理解 ( 详细参考：HTML 缩排与注解 )。
好的范例：
<body> <p class="content" style="color:red;">hello world<p> <ul> <li>清單 1</li> <li>清單 2</li> </ul> </body>不好的范例：
<body> <p class="content" style="color:red;">hello world<p> <ul><li>清單 1</li><li>清單 2</li></ul> </body>
使用空格、换行和特殊符号需要注意
虽然在 HTML 直接打入内容也可以呈现 ( 在不加上任何标签的状况下 )，不过由于 HTML 是“标记语言”，并非“纯文字”，因此无法正常显示一些常见的字元 ( 例如“连续”空格、<標籤>或换行 )，如果要使用，则必须使用对应的标记语言，以下方的程序为例，使用 ( Non-Breaking Space ) 表示空白，以 < 表示 <，> 表示 >， <br/> 表示换行，就能正常显示内容。
<p>無法連續空白：空白開始 空白結束</p>
<p>連續空白：空白開始 空白結束</p>
<p>無法出現標籤：<span></span></p>
<p>出現標籤：<span></p>
<p>不能換行
不能換行
</p>
<p>
可以換行
<br/>
可以換行
<p>
空元素后方的斜线
HTML 的空元素没有结尾标签，因此在原本的标签后方，不论加上斜线或不加斜线都是允许且常见的语法，需要注意的是，如果一份 HTML 里所有空元素的结尾都有斜线，那么就都加上斜线，如果没有斜线就不要加斜线，尽可能不要混用不同的写法，例如下面两种写法都是被允许的。
没有斜线
<img src="https://steam.oxxostudio.tw/demo.jpg">有斜线
<img src="https://steam.oxxostudio.tw/demo.jpg" />
小结
由于 HTML 的容错弹性很大，所以就更需仰赖用户自己的撰写习惯，一个具有优良规范的网站，不仅在程序架构的理解上都更为简便，也更容易与其他的服务与应用搭配。
微信扫码关注
抖音扫码关注