HTML代码语法格式规范

本页内容
上一节: HTML语义化标签 下一节: HTML_Entity实体

一致、干净、整洁的 HTML 代码使其他人更容易阅读和理解您的代码。以下是一些创建良好 HTML 代码的指南和技巧。

始终声明文档类型

始终将文档类型声明为文档的第一行。HTML 的正确文档类型是:

示例

<!DOCTYPE html>

标签和属性都使用小写元素名称

HTML 允许在元素名称中混合大写和小写字母。但是,我们建议使用小写的元素名称,因为:

  • 混合大写和小写名称看起来很混乱
  • 开发人员通常使用小写名称
  • 小写看起来更干净,阅读速度更快速。
  • 小写更容易写,不用再大小写之前频繁切换。


好的代码风格

<body>
<p>这是一个段落.<a href="https://www.xiaobai.wang/">访问我们的HTML教程</a></p>
</body>


不好的代码风格

<BODY>
<p>这是一个段落.<a HREF="https://www.xiaobai.wang/">访问我们的HTML教程</a>
</p>
</body>

使用双引号包含属性

HTML 允许不带引号,或者使用单引号的属性值。但是建议使用双引号属性值


好的

<table class="table">


不好的

<table class=table>

不用双引号很容易导致XSS比如table刚好是一个URL中的变量时候。很容易被其他恶意用户构造为


XSS攻击

<img class=img onload=alert(1) >


避免XSS攻击

如果我们使用了双引号则能避免很多类似的问题

<img class="img onload=alert(1)" >

始终为图像指定 alt、宽度和高度

始终指定alt图像的属性。如果由于某种原因无法显示图像,则此属性很重要。 此外,始终定义图像的width和 height。这减少了闪烁,因为浏览器可以在加载之前为图像保留设置的空间。


示例

<img src="/favicon.ico" alt="xiaobai.wang logo" style="width:128px;height:128px">


示例

<img src="/favicon.ico">

避免长代码行

使用 HTML 编辑器时,左右滚动来阅读 HTML 代码并不方便。尽量避免太长的代码行。

空行和缩进

  • 不要无故添加空行、空格或缩进。
  • 为了便于阅读,请添加空行来分隔大型或逻辑代码块。
  • 为了可读性,添加两个缩进空格。不要使用制表Tab键。


好的缩进

<ul>
  <li>伦敦</li>
  <li>巴黎</li>
  <li>东京</li>
</ul>


没有缩进的代码阅读和修改都很不友好

<ul>  <li>伦敦</li>  <li>巴黎</li>  <li>东京</li></ul>

每一个页面都一定要有 <title>

<title>元素在 HTML 中是必需的。

页面标题的内容对于搜索引擎优化 (SEO) 非常重要!搜索引擎算法使用页面标题来决定在搜索结果中列出页面时的顺序。

<title>元素:

  • 在浏览器工具栏中定义标题
  • 为页面添加到收藏夹时提供标题
  • 在搜索引擎结果中显示页面的标题

所以,尽量使标题尽可能准确和有意义,切记不要把每个页面的title都设置为同一个,比如网站的名称


示例

<title>HTML教程-小白教程 xiaobai.wang</title>

设置 charset

设置charset很重要,虽然现在大部分浏览器都默认将网页按UTF8解析,不过如果你的网站内容里面有其他编码,比如gbk会导致网页乱码。

示例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>页面标题</title>
</head>

设置viewport

设置viewport能让你的网页在手机平板等设备上更易用,可以前往HTML响应式网页设计了解更多细节。

示例

<meta name="viewport" content="width=device-width, initial-scale=1.0">

HTML 注释

养成经常写注释的习惯能让协助人员和日后你自己更快速的了解代码逻辑。


示例

<!--
  多行注释
  多行注释
-->

多行注释如果缩进两个空格更容易观察。

文件名

使用小写文件名,HTML 文件使用.html或.html文件后缀。CSS 文件使用.css后缀。 JavaScript 使用.js后缀。

上一节: HTML语义化标签 下一节: HTML_Entity实体
此页面最后编辑于2022年8月14日 (星期日) 11:19。