HTML代码规范

Intellijc_

已于 2023-02-12 16:52:31 修改

阅读量303

点赞数 1

文章标签： html 代码规范 javascript Powered by 金山文档

于 2023-02-12 16:49:56 首次发布

原文链接：https://www.cnblogs.com/xikui/p/16191318.html

版权

刚开始学习html,搬运一下HTML 代码规范

注意事项:

尽可能少的使用无语义的标签div和span；

在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；

不要使用纯样式标签，如：b、font、u等，改用css设置。

需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；

使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；

表单域要用fieldset标签包起来，并用legend标签说明表单的用途；

每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

以下是具体的规范细节

DOCTYPE 声明

一个 DOCTYPE 必须包含以下部分，并严格按照顺序出现：

一个 ASCII 字符串 “<!DOCTYPE>” ，大小写不敏感

一个或多个空白字符

一个 ASCII 字符串” html ”，大小写不敏感

一个可选的历史遗留的 DOCTYPE 字符串（DOCTYPE legacy string），或者一个可选的已过时但被允许的 DOCTYPE 字符串（obsolete permitted DOCTYPE string）字符串

一个或多个空白字符

一个编码为 U+003E 的字符 “>”

HTML 文件必须加上 DOCTYPE 声明，并统一使用 HTML5 的文档声明：

<!DOCTYPE html>

页面语言LANG

Lang属性的取值应该遵循互联网工程任务组–IETF（The Internet Engineering Task Force）制定的关于语言标签的文档

BCP 47 - Tags for Identifying Languages

推荐使用属性值 cmn-Hans-CN（简体, 中国大陆），但是考虑浏览器和操作系统的兼容性，目前仍然使用 zh-CN 属性值

<htmllang="zh-CN">

CHARSET

因为 ISO-8859 中字符集大小是有限的，且在多语言环境中不兼容，所以 Unicode 联盟开发了 Unicode 标准。

Unicode 标准覆盖了（几乎）所有的字符、标点符号和符号。

Unicode 使文本的处理、存储和运输，独立于平台和语言。

HTML-5 中默认的字符编码是 UTF-8

一般情况下统一使用 “UTF-8” 编码

<metacharset="UTF-8">

请尽量统一写成标准的 “UTF-8”，不要写成 “utf-8” 或 “utf8” 或 “UTF8”。根据 IETF对UTF-8的定义，其编码标准的写法是 “UTF-8”；而 UTF8 或 utf8 的写法只是出现在某些编程系统中，如 .NET framework 的类 System.Text.Encoding 中的一个属性名就叫 UTF8。

元素及标签闭合

HTML元素共有以下5种：

空元素：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr

原始文本元素：script、style

RCDATA元素：textarea、title

外来元素：来自MathML命名空间和SVG命名空间的元素。

常规元素：其他HTML允许的元素都称为常规元素。

元素标签的闭合应遵循以下原则：

Tags are used to delimit the start and end of elements in the markup. Raw text, escapable raw text, and normal elements have a start tag to indicate where they begin, and an end tag to indicate where they end. The start and end tags of certain normal elements can be omitted, as described below in the section on optional tags. Those that cannot be omitted must not be omitted. Void elements only have a start tag; end tags must not be specified for void elements. Foreign elements must either have a start tag and an end tag, or a start tag that is marked as self-closing, in which case they must not have an end tag.

原始文本元素、RCDATA元素以及常规元素都有一个开始标签来表示开始，一个结束标签来表示结束。

某些元素的开始和结束标签是可以省略的，如果规定标签不能被省略，那么就绝对不能省略它。

空元素只有一个开始标签，且不能为空元素设置结束标签。

外来元素可以有一个开始标签和配对的结束标签，或者只有一个自闭合的开始标签，且后者情况下该元素不能有结束标签。

团队约定

为了能让浏览器更好的解析代码以及能让代码具有更好的可读性，有如下约定：

所有具有开始标签和结束标签的元素都要写上起止标签，某些允许省略开始标签或和束标签的元素亦都要写上。

空元素标签都不加 “/” 字符

推荐：

<div><h1>我是h1标题</h1><p>我是一段文字，我有始有终，浏览器能正确解析</p></div>
	
<br>

不推荐：

<div><h1>我是h1标题</h1><p>我是一段文字，我有始无终，浏览器亦能正确解析
</div><br/>

更多关于元素及标签关闭：#Elements

书写风格

HTML代码大小写

HTML标签名、类名、标签属性和大部分属性值统一用小写

推荐：

<divclass="demo"></div>

不推荐：

<divclass="DEMO"></div>
	
<DIVCLASS="DEMO"></DIV>

HTML文本、CDATA、JavaScript、meta标签某些属性等内容可大小写混合

<!-- 优先使用 IE 最新版本和 Chrome Frame --><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/><!-- HTML文本内容 --><h1>I AM WHAT I AM </h1><!-- JavaScript 内容 --><scripttype="text/javascript">var demoName = 'demoName'; ... </script>
	
<!-- CDATA 内容 --><scripttype="text/javascript"><![CDATA[ ... ]]></script>

类型属性

不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含

推荐：

<linkrel="stylesheet"href="" ><scriptsrc=""></script>

不推荐：

<linkrel="stylesheet"type="text/css"href="" ><scripttype="text/javascript"src="" ></script>

元素属性

元素属性值使用双引号语法

元素属性值可以写上的都写上

推荐：

<inputtype="text">
	
<inputtype="radio"name="name"checked="checked" >

不推荐：

<inputtype=text>	
<inputtype='text'>
	
<inputtype="radio"name="name"checked >

更多关于元素属性：#Attributes

特殊字符引用

In certain cases described in other sections, text may be mixed with character references. These can be used to escape characters that couldn’t otherwise legally be included in text.

文本可以和字符引用混合出现。这种方法可以用来转义在文本中不能合法出现的字符。

在 HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中使用字符实体

推荐：

<ahref="#">more&gt;&gt;</a>

不推荐：

<ahref="#">more>></a>

更多关于符号引用：#Character references

代码缩进

统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）

<divclass="jdc"><ahref="#"></a></div>

纯数字输入框

使用 type="tel" 而不是 type="number"

<inputtype="tel">

代码嵌套

元素嵌套规范，每个块状元素独立一行，内联元素可选

推荐：

<div><h1></h1><p></p></div>	
<p><span></span><span></span></p>

不推荐：

<div><h1></h1><p></p></div>	
<p><span></span><span></span></p>

段落元素与标题元素只能嵌套内联元素

推荐：

<h1><span></span></h1><p><span></span><span></span></p>

不推荐：

<h1><div></div></h1><p><div></div><div></div></p>

HTML 注释规范

遵循标准

HTML注释规范写法应该遵循以下标准：

Comments must start with the four character sequence U+003C LESS-THAN SIGN, U+0021 EXCLAMATION MARK, U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS ( ” (U+003E) character, nor start with a U+002D HYPHEN-MINUS character (-) followed by a “>” (U+003E) character, nor contain two consecutive U+002D HYPHEN-MINUS characters (–), nor end with a U+002D HYPHEN-MINUS character (-). Finally, the comment must be ended by the three character sequence U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN (–>).

必须以4个有序字符开始：编码为 U+003C LESS-THAN SIGN 的小于号, 编码为 U+0021 EXCLAMATION MARK 的感叹号, 编码为 U+002D HYPHEN-MINUS 横线, 编码为 U+002D HYPHEN-MINUS横线，即 “<!–”

在此之后是注释内容，注释的内容有以下限制：不能以单个 “>” (U+003E) 字符开始不能以由 “-“（U+002D HYPHEN-MINUS）和 ”>” (U+003E) 组合的字符开始，即 “->”不能包含两个连续的 U+002D HYPHEN-MINUS 字符，即 “–”不能以一个 U+002D HYPHEN-MINUS 字符结束，即 “-”

必须以3个有序字符结束：U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN，即 “–>”

标准写法：

<!--Comment Text-->

错误的写法：

<!-->The Wrong Comment Text--><!--->The Wrong Comment Text--><!--The--Wrong--Comment Text--><!--The Wrong Comment Text--->

参考 www.w3.org #Comments

团队约定

单行注释

一般用于简单的描述，如某些状态描述、属性描述等

注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行

推荐：

<!-- Comment Text --><div>...</div>

不推荐：

<div>...</div><!-- Comment Text --><div><!-- Comment Text -->
    ...
</div>

模块注释

一般用于描述模块的名称以及模块开始与结束的位置

注释内容前后各一个空格字符， 表示模块开始， 表示模块结束，模块与模块之间相隔一行

推荐写法：

<!-- S Comment Text A --><divclass="mod_a">
    ...
</div><!-- E Comment Text A --><!-- S Comment Text B --><divclass="mod_b">
    ...
</div><!-- E Comment Text B -->

不推荐写法：

<!-- S Comment Text A --><divclass="mod_a">
    ...
</div><!-- E Comment Text A --><!-- S Comment Text B --><divclass="mod_b">
    ...
</div><!-- E Comment Text B -->

嵌套模块注释

当模块注释内再出现模块注释的时候，为了突出主要模块，嵌套模块不再使用

<!-- S Comment Text --><!-- E Comment Text -->

而改用

<!-- /Comment Text -->

注释写在模块结尾标签底部，单独一行。

<!-- S Comment Text A --><divclass="mod_a">
        
    <divclass="mod_b">
        ...
    </div>
    <!-- /mod_b -->
        
    <divclass="mod_c">
        ...
    </div>
    <!-- /mod_c --></div><!-- E Comment Text A -->

HTML 文件模版

HTML模版指的是团队使用的初始化 HTML 文件，里面会根据不同平台而采用不一样的设置，一般主要不同的设置就是 mata 标签的设置，以下是 PC 和移动端的 HTML 模版。

HTML5标准模版

<!DOCTYPE html><htmllang="zh-CN"><head><metacharset="UTF-8"><title>HTML5标准模版</title></head><body></body></html>

移动端

<!DOCTYPE html><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" ><metaname="format-detection"content="telephone=no" ><title>移动端HTML模版</title><!-- S DNS预解析 --><linkrel="dns-prefetch"href=""><!-- E DNS预解析 --><!-- S 线上样式页面片，开发请直接取消注释引用 --><!-- #include virtual="" --><!-- E 线上样式页面片 --><!-- S 本地调试，根据开发模式选择调试方式，请开发删除 --><linkrel="stylesheet"href="css/index.css" ><!-- /本地调试方式 --><linkrel="stylesheet"href="http://srcPath/index.css" ><!-- /开发机调试方式 --><!-- E 本地调试 --></head><body></body></html>

PC端

<!DOCTYPE html><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="keywords"content="your keywords"><metaname="description"content="your description"><metaname="author"content="author,email address"><metaname="robots"content="index,follow"><metahttp-equiv="X-UA-Compatible"content="IE=Edge,chrome=1"><metaname="renderer"content="ie-stand"><title>PC端HTML模版</title><!-- S DNS预解析 --><linkrel="dns-prefetch"href=""><!-- E DNS预解析 --><!-- S 线上样式页面片，开发请直接取消注释引用 --><!-- #include virtual="" --><!-- E 线上样式页面片 --><!-- S 本地调试，根据开发模式选择调试方式，请开发删除 --><linkrel="stylesheet"href="css/index.css" ><!-- /本地调试方式 --><linkrel="stylesheet"href="http://srcPath/index.css" ><!-- /开发机调试方式 --><!-- E 本地调试 --></head><body></body></html>

HTML WebApp Meta

Viewport Meta Tag

通用类设置

<meta name="viewport" content="width=device-width, initial-scale=1.0, 
maximum-scale=1.0, user-scalable=no">

width – viewport的宽度

height – viewport的高度

initial-scale – 初始的缩放比例

minimum-scale – 允许用户缩放到的最小比例

maximum-scale – 允许用户缩放到的最大比例

user-scalable – 是否允许用户缩放

Safari on iOS viewport

默认宽度是 980px，范围从 200px 到 10000px

initial-scale 缩放比例范围值是从 >0 到 10 之间

minimum-scale 默认值是 0.25

maximum-scale 默认值是 5

user-scalable – 默认值是 yes，设置 no 还可以在文本框输入文本的时候阻止页面滚动

Apple-Specific Meta Tag Keys

apple-mobile-web-app-capable

设置 WebApp 是否进入全屏模式，该设置需要添加到主屏幕才生效

<meta name="apple-mobile-web-app-capable" content="yes">

content设置 yes 进入全屏模式

默认会启动 Safari 应用，使用 Safari 应用浏览

通过检测 window.navigator.standalone 的 Boolean 值可以判断 web 应用是否处于全屏模式

apple-mobile-web-app-status-bar-style

为 webapp 设置状态栏样式

<meta name="apple-mobile-web-app-status-bar-style" content="black">

此 meta 设置只在全屏模式生效

默认值是 default

content=”black”，状态栏背景黑色，网页内容在状态栏下面

content=”black-translucent”，状态栏半透明，背景黑色，网页内容占满全屏

该设置在 iOS6 和 iOS7 表现还可以，但到了 iOS8 后会出现各种问题，而且在 iOS9 中并没有生效。参阅：iOS 8: web app status bar position and resizing problems

format-detection

自动识别页面中有可能是电话格式的数字

<meta name="format-detection" content="telephone=no">

iOS中的 Safari 会默认识别与电话格式相似的数字并生成一个可以拉起电话应用并将该数字作为电话号码拨打的链接。定义 telephone=no 可以屏蔽该

Intellijc_

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML代码规范

html代码规范,代码要求
复制链接

扫一扫

HTML代码规范

刚开始学习html,搬运一下HTML 代码规范

注意事项:

以下是具体的规范细节

DOCTYPE 声明

页面语言LANG

CHARSET

更多关于

元素及标签闭合

团队约定

书写风格

HTML代码大小写

类型属性

元素属性

特殊字符引用

代码缩进

纯数字输入框

代码嵌套

HTML 注释规范

遵循标准

团队约定

单行注释

模块注释

嵌套模块注释

HTML 文件模版

HTML5标准模版

移动端

PC端

HTML WebApp Meta

Viewport Meta Tag

通用类设置

Safari on iOS viewport

Apple-Specific Meta Tag Keys

apple-mobile-web-app-capable

apple-mobile-web-app-status-bar-style

format-detection

“相关推荐”对你有帮助么？