HTML(5) 代码规范
admin2024-08-15 14:25:14HTML教程
HTML(5) 代码规范
HTML 代码约定
很多 Web 开发人员对 HTML 的代码规范知之甚少。
在2000年至2010年，许多Web开发人员从 HTML 转换到 XHTML。
使用 XHTML 开发人员逐渐养成了比较好的 HTML 编写规范。
而针对于 HTML5 ，我们应该形成比较好的代码规范，以下提供了几种规范的建议。
使用正确的文档类型
文档类型声明位于HTML文档的第一行：
<!DOCTYPE html>
如果你想跟其他标签一样使用小写，可以使用以下代码：
<!doctype html>
使用小写元素名
HTML5 元素名可以使用大写和小写字母。
推荐使用小写字母：
混合了大小写的风格是非常糟糕的。
开发人员通常使用小写 (类似 XHTML)。
小写风格看起来更加清爽。
小写字母容易编写。
不推荐:
<SECTION> <p>这是一个段落。
</p></SECTION>
非常糟糕:
<Section> <p>这是一个段落。
</p></SECTION>
推荐:
<section> <p>这是一个段落。
</p></section>
关闭所有 HTML 元素
在 HTML5 中, 你不一定要关闭所有元素 (例如
元素)，但我们建议每个元素都要添加关闭标签。
不推荐:
<section> <p>这是一个段落。
<p>这是一个段落。
</section>
推荐:
<section> <p>这是一个段落。
</p> <p>这是一个段落。
</p>
</section>
关闭空的 HTML 元素
在 HTML5 中, 空的 HTML 元素也不一定要关闭：
我们可以这么写：
<meta
charset="utf-8">
也可以这么写：
<meta charset="utf-8" />
在 XHTML 和 XML 中斜线 (/) 是必须的。
如果你期望 XML 软件使用你的页面，使用这种风格是非常好的。
使用小写属性名
HTML5 属性名允许使用大写和小写字母。
我们推荐使用小写字母属性名:
同时使用大小写是非常不好的习惯。
开发人员通常使用小写 (类似 XHTML)。
小写风格看起来更加清爽。
小写字母容易编写。
不推荐：
<div CLASS="menu">
推荐：
<div
class="menu">
属性值
HTML5 属性值可以不用引号。
属性值我们推荐使用引号:
如果属性值含有空格需要使用引号。
混合风格不推荐的，建议统一风格。
属性值使用引号易于阅读。
以下实例属性值包含空格，没有使用引号，所以不能起作用:
<table class=table striped>
以下使用了双引号，是正确的：
<table
class="table striped">
图片属性
图片通常使用 alt 属性。 在图片不能显示时，它能替代图片显示。
<img src="html5.gif" alt="HTML5">
定义好图片的尺寸，在加载时可以预留指定空间，减少闪烁。
<img
src="html5.gif" alt="HTML5" style="width:128px;height: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>
省略 和 ?
在标准 HTML5 中， 和
标签是可以省略的。
以下 HTML5 文档是正确的:
实例:
<!DOCTYPE html><head> <title>页面标题
</title>
</head>
<h1>这是一个标题
</h1><p>这是一个段落。
</p>
尝试一下 »
不推荐省略 和 标签。
元素是文档的根元素，用于描述页面的语言：
<!DOCTYPE html><html lang="zh">
声明语言是为了方便屏幕阅读器及搜索引擎。
省略 或
在 DOM 和 XML 软件中会崩溃。
省略
在旧版浏览器 (IE9)会发生错误。
省略 ?
在标准 HTML5 中，
标签是可以省略的。
默认情况下，浏览器会将
之前的内容添加到一个默认的
元素上。
实例
<!DOCTYPE html><html><title>页面标题
</title>
<body> <h1>这是一个标题
</h1> <p>这是一个段落。
</p>
</body></html>
尝试一下 »
 |
现在省略 head 标签还不推荐使用。 |
元数据
HTML5 中
元素是必须的，标题名描述了页面的主题:</p>
<span class="highLT"><</span><span class="highELE">title</span><span class="highGT">></span>菜鸟教程<span class="highLT"><</span><span class="highELE">/title</span><span class="highGT">></span>
<p>标题和语言可以让搜索引擎很快了解你页面的主题:</p>
<span class="highLT"><</span><span class="highELE">!DOCTYPE</span> <span class="highATT">html</span><span class="highGT">></span><br><span class="highLT"><</span><span class="highELE">html</span>
<span class="highATT">lang=</span><span class="highVAL">"zh"</span><span class="highGT">></span><br><span class="highLT"><</span><span class="highELE">head</span><span class="highGT">></span><br> <span class="highLT"><</span><span class="highELE">meta</span> <span class="highATT">charset=</span><span class="highVAL">"UTF-8"</span><span class="highGT">></span><br> <span class="highLT"><</span><span class="highELE">title</span><span class="highGT">></span>菜鸟教程<span class="highLT"><</span><span class="highELE">/title</span><span class="highGT">></span><br><span class="highLT"><</span><span class="highELE">/head</span><span class="highGT">></span>
<hr>
<h2>HTML 注释</h2>
<p>注释可以写在 <span class="marked"><!--</span> 和 <span class="marked">--></span> 中:</p>
<span class="highCOM"><!-- 这是注释 --></span>
<p>比较长的注释可以在 <span class="marked"><!--</span> 和 <span class="marked">--></span> 中分行写：</p>
<span class="highCOM"><!-- <br> 这是一个较长注释。 这是
一个较长注释。这是一个较长注释。<br> 这是
一个较长注释 这是一个较长注释。 这是
一个较长注释。<br>--></span>
<p>长注释第一个字符缩进两个空格，更易于阅读。</p>
<hr>
<h2>样式表</h2>
<p>样式表使用简洁的语法格式 ( type 属性不是必须的):</p>
<span class="highLT"><</span><span class="highELE">link</span> <span class="highATT">rel=</span><span class="highVAL">"stylesheet"</span> <span class="highATT">href=</span><span class="highVAL">"styles.css"</span><span class="highGT">></span>
<p>短的规则可以写成一行:</p>
<span class="highELE">p.into </span>{<span class="highATT">font-family:</span><span class="highVAL"> Verdana;</span> <span class="highATT">font-size:</span><span class="highVAL"> 16em;</span>}
<p>长的规则可以写成多行:</p>
<span class="highELE">body </span>{<br> <span class="highATT">background-color:</span><span class="highVAL"> lightgrey;</span><br> <span class="highATT">font-family:</span><span class="highVAL"> "Arial
Black", Helvetica, sans-serif;</span><br> <span class="highATT">font-size:</span><span class="highVAL"> 16em;</span><br> <span class="highATT">color:</span><span class="highVAL">
black;</span><br>}
将左花括号与选择器放在同一行。
左花括号与选择器间添加一个空格。
使用两个空格来缩进。
冒号与属性值之间添加一个空格。
逗号和符号之后使用一个空格。
每个属性与值结尾都要使用分号。
只有属性值包含空格时才使用引号。
右花括号放在新的一行。
每行最多 80 个字符。
<table class="lamp"><tbody><tr>
<th style="width:34px">
<img decoding="async" src="https://www.runoob.com/images/lamp.jpg" alt="Note" style="height:32px;width:32px"></th>
<td>
在逗号和冒号后添加空格是常用的一个规则。</td>
</tr></tbody></table>
<hr>
<h2>在 HTML 中载入 JavaScript</h2>
<p>使用简洁的语法来载入外部的脚本文件 ( type 属性不是必须的 ):</p>
<span class="highLT"><</span><span class="highELE">script</span> <span class="highATT">src=</span><span class="highVAL">"myscript.js"</span><span class="highGT">></span>
<hr>
<h2>使用 JavaScript 访问 HTML 元素</h2>
<p>一个糟糕的 HTML 格式可能会导致 JavaScript 执行错误。</p>
<p>以下两个 JavaScript 语句会输出不同结果:</p>
<h3>实例</h3>
<span class="highELE">var</span> obj =
getElementById(<span class="highVAL">"Demo"</span>)<br><br><span class="highELE">var</span> obj = getElementById(<span class="highVAL">"demo"</span>)
<br>
尝试一下 »
<p>HTML 中 JavaScript 尽量使用相同的命名规则。</p>
<p>访问 JavaScript 代码规范。</p>
<hr>
<h2>使用小写文件名</h2>
<p>
大多 Web 服务器 (Apache, Unix) 对大小写敏感：
london.jpg 不能通过 London.jpg 访问。
</p><p>
其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感：
london.jpg 可以通过 London.jpg 或 london.jpg 访问。
</p><p>
你必须保持统一的风格，我们建议统一使用小写的文件名。</p>
<hr>
<h2>文件扩展名</h2>
<p>HTML 文件后缀可以是 <strong>.html</strong> (或 <strong>.htm</strong>)。</p>
<p>CSS 文件后缀是 <strong>.css</strong> 。</p>
<p>JavaScript 文件后缀是 <strong>.js</strong> 。</p>
<hr>
<h2>.htm 和 .html 的区别</h2>
<p> .htm 和 .html 的扩展名文件本质上是没有区别的。浏览器和 Web 服务器都会把它们当作 HTML 文件来处理。</p>
<p>区别在于：</p>
<p>.htm 应用在早期 DOS 系统，系统现在或者只能有三个字符。</p>
<p>在 Unix 系统中后缀没有特别限制，一般用 .html。</p>
<h2>技术上区别</h2>
<p>如果一个 URL 没有指定文件名 (如 http://www.runoob.com/css/),
服务器会返回默认的文件名。通常默认文件名为 index.html,
index.htm, default.html, 和 default.htm。</p>
<p>如果服务器只配置了 "index.html" 作为默认文件，你必须将文件命名为 "index.html", 而不是 "index.htm"。</p>
<p>但是，通常服务器可以设置多个默认文件，你可以根据需要设置默认文件名。</p>
<p>不管怎样，HTML 完整的后缀是 ".html"。</p> <!-- 其他扩展 -->
</div>
<footer class="entry-meta">
<p id="tag-wrap" class="tag-wrap">
<i class="fa fa-tags"></i> 标签： </p>
<div class="clear"></div>
</footer>
<div class="authorbio">
<ul class="spostinfo">
<li><strong>声明：</strong>本站内容均来自互联网，如果侵犯了您的权益请与我们联系，我们将在24小时内删除。</li>
<li><strong>本文地址：</strong><a href="http://www.humeup.cn/HTML/1847.html" title="">http://www.humeup.cn/HTML/1847.html</a></li>
</ul>
</div>
</div>
</div>
<div class="article">
<div class="article-container">
<div class="post-navigation">
<div class="post-previous"><span class="prev">上一篇</span><a href="/HTML/1846.html">HTML 多媒体
(html视频)</a></div>
<div class="post-next"><span class="next">下一篇</span><a href="/HTML/1848.html">HTML5 测验</a></div>
</div>
</div>
</div>
<div class="article">
<div class="article-container">
<div class="relates">
<div class="title">
<h3>相关文章</h3>
</div>
<div id="related-img">
<ul id="related">
</ul>
<div class="clear"> </div>
</div>
</div>
</div>
</div>
</div>
<aside class="sidebar" id="sidebar">
<dl class="function" id="side-adimg">
<dt class="function_t">广告</dt>
<dd class="function_c">
<a href="https://t.aliyun.com/U/oTpGxp" target="_blank"><img src="/static/v1/pc/images/aliyun.jpg" alt="【阿里云】云服务器u1-实例2核4G 80G，新人专享渠道特惠价只要199元！特惠热卖中。 点击【 https://t.aliyun.com/U/oTpGxp 】立即购买"></a>
</dd>
</dl>
<dl class="function" id="side-tui-article-item">
<dt class="function_t">热门阅读</dt>
<dd class="function_c">
<div>
<article><a href="/douyin/2470.html" class="image"><img src="https://www.runoob.com/images/lamp.jpg" alt="瞄准小学生，品牌靠几十元单品月入5千万！"></a>
<h3><a href="/douyin/2470.html">瞄准小学生，品牌靠几十元单品月入5千万！</a></h3>
</article>
<article><a href="/douyin/2450.html" class="image"><img src="https://www.runoob.com/images/lamp.jpg" alt="抖音爆款脚本拆解.pdf(抖音脚本模板)"></a>
<h3><a href="/douyin/2450.html">抖音爆款脚本拆解.pdf(抖音脚本模板)</a></h3>
</article>
<article><a href="/douyin/2449.html" class="image"><img src="https://www.runoob.com/images/lamp.jpg" alt="抖音完整运营玩法.ppt！(抖音企业运营方案ppt)"></a>
<h3><a href="/douyin/2449.html">抖音完整运营玩法.ppt！(抖音企业运营方案ppt)</a></h3>
</article>
<article><a href="/douyin/2448.html" class="image"><img src="https://www.runoob.com/images/lamp.jpg" alt="抖音起号指南.pdf"></a>
<h3><a href="/douyin/2448.html">抖音起号指南.pdf</a></h3>
</article>
</div>
</dd>
</dl>
<dl class="function" id="side-adimg">
<dt class="function_t">广告</dt>
<dd class="function_c">
<a href="https://www.aliyun.com/daily-act/ecs/activity_selection?userCode=vgt859tn" target="_blank"><img src="/static/v1/pc/images/aliyun2.jpg" alt="【阿里云】云服务器u1-实例2核4G 80G，新人专享渠道特惠价只要199元！特惠热卖中。 点击【 https://t.aliyun.com/U/oTpGxp 】立即购买"></a>
</dd>
</dl>
<dl class="function" id="divTags">
<dt class="function_t">标签列表</dt>
<dd class="function_c">
<ul>
<li><a href="/index.php?s=tag&name=win10">WIN10</a></li>
<li><a href="/tag/2024nianjuminyibaojiaofeibiaozhunshiduoshao.html">2024年居民医保缴费标准是多少</a></li>
<li><a href="/index.php?s=tag&name=mysql">mysql</a></li>
<li><a href="/tag/xiaohongshu.html">小红书</a></li>
<li><a href="/tag/steam.html">Steam</a></li>
<li><a href="/tag/heishenhuawukongguanwang.html">黑神话悟空官网</a></li>
<li><a href="/tag/heishenhua:wukong.html">黑神话:悟空</a></li>
<li><a href="/index.php?s=tag&name=win12">WIN12</a></li>
<li><a href="/tag/2024nianjuminyibaojiaofeibiaozhun.html">2024年居民医保缴费标准</a></li>
<li><a href="/tag/fuzhoushidianzishangwu.html">福州市电子商务</a></li>
<li><a href="/index.php?s=tag&name=win7">WIN7</a></li>
<li><a href="/index.php?s=tag&name=win8">WIN8</a></li>
<li><a href="/tag/fuzhoushishangwuju.html">福州市商务局</a></li>
<li><a href="/tag/xiaohongshuyinliu.html">小红书引流</a></li>
<li><a href="/index.php?s=tag&name=shujuku">数据库</a></li>
</ul>
</dd>
</dl>
<dl class="function" id="divLinkage">
<dt class="function_t">友情链接</dt>
<dd class="function_c">
<ul>
<li><a href="http://gas.humeup.cn?ref=www.humeup.cn" target="_blank">今日油价</a></li><li><a href="http://www.zmbug.com?ref=www.humeup.cn" target="_blank">黄金在线</a></li> </ul>
</dd>
</dl>
</aside></main>
<footer class="footer-box">
<div class="footer-bottom">
<div class="container">
<div class="row">
<div class="col-md-12 align-center">
<p> <span><a href="/jsjc/" title="技术教程">技术教程</a></span><span><a href="/baike/" title="知识百科">知识百科</a></span><span><a href="/gonglue/" title="游戏攻略">游戏攻略</a></span><span><a href="/yuanma/" title="源码模版">源码模版</a></span><span><a href="/news/" title="今日资讯">今日资讯</a></span><span><a href="/jianzhan/" title="建站教程">建站教程</a></span><span><a href="/wlyy/" title="网络运营">网络运营</a></span> <p>Copyright © <span>2024 © 汇美优普</span><span><a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备09041570号 </a></span> <span><a href="/sitemap.xml" target="_blank">XML地图</a></span> </p>
</div>
</div>
</div>
</div>
</footer>
<div id="topcontrol" title="返回顶部"><i class="fa fa-angle-up"></i></div>
<div id="mask" style="display: none;"></div>
<script src="/static/v1/pc/js/main.js"></script>
<script src="/static/v1/pc/js/navigation.js"></script>
<script src="/static/v1/pc/js/side.js"></script>
<script src="/static/v1/pc/js/qrcode.min.js"></script>
<div style='display:none'>
</div>
</body>
</html>
