HTML的代码书写有哪些规范

来源：动视网责编：小采时间：2020-11-27 15:26:55

HTML的代码书写有哪些规范

HTML的代码书写有哪些规范:这次给大家带来HTML的代码书写有哪些规范，书写HTML的代码的注意事项有哪些，下面就是实战案例，一起来看一下。通用约定标签自闭合（self-closing）标签，无需闭合 ( 例如： img input br hr 等 )；可选的闭合标签（closing tag），需闭合 ( 例

推荐度：

点击下载本文 文档为doc格式

导读HTML的代码书写有哪些规范:这次给大家带来HTML的代码书写有哪些规范，书写HTML的代码的注意事项有哪些，下面就是实战案例，一起来看一下。通用约定标签自闭合（self-closing）标签，无需闭合 ( 例如： img input br hr 等 )；可选的闭合标签（closing tag），需闭合 ( 例

这次给大家带来HTML的代码书写有哪些规范，书写HTML的代码的注意事项有哪些，下面就是实战案例，一起来看一下。

通用约定
标签

自闭合（self-closing）标签，无需闭合 ( 例如： img input br hr 等 )；
可选的闭合标签（closing tag），需闭合 ( 例如：</li> 或 </body>)；
尽量减少标签数量；

<img src="images/google.png" alt="Google"> 
<input type="text" name="title"> 
<ul> 
 <li>Style</li> 
 <li>Guide</li> 
</ul> 
<!-- Not recommended --> 
<span class="avatar"> 
 <img src="..."> 
</span> 
<!-- Recommended --> 
<img class="avatar" src="...">

Class 与 ID

class 应以功能或内容命名，不以表现形式命名；
class 与 id 单词字母小写，多个单词组成时，采用中划线-分隔；
使用唯一的 id 作为 Javascript hook，同时避免创建无样式信息的 class；

<!-- Not recommended --> 
<div class="j-hook left contentWrapper"></div> 
<!-- Recommended --> 
<div id="j-hook" class="sidebar content-wrapper"></div>

属性顺序

HTML 属性应该按照特定的顺序出现以保证易读性。

id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role

<a id="..." class="..." data-modal="toggle" href="###"></a> 
 
<input class="form-control" type="text"> 
 
<img src="..." alt="...">

引号

属性的定义，统一使用双引号。

相信看了这些案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

HTML的代码书写有哪些规范

推荐度：

点击下载本文 文档为doc格式

标签：标准代码写法

热门焦点

HTML的代码书写有哪些规范

HTML的代码书写有哪些规范

HTML的代码书写有哪些规范

最新推荐

猜你喜欢

热门推荐