前端学习14:HTML 代码约定

目录

一、HTML代码约定

二、请使用正确的文档类型

三、请使用小写元素名 

 四、关闭所有的HTML元素

五、关闭空的HTML元素 

六、使用小写属性名 

七、属性值加引号 

 八、必需的属性

九、空格和等号

十、避免长代码行。 

十一、空行和缩进 

 十二、省略

十三、元数据 

十四、HTML注释

 十五、样式表

 十六、通过JavaScript 访问HTML元素

十七、使用小写文件名 

十八、文件拓展名


一、HTML代码约定

web开发者常常不确定在HTML中的使用的代码样式和语法。

通过XHTML,开发者不得不编写有效的“格式良好的”代码。

通过HTML5,您必须创建属于自己的最佳实践、样式指南和代码约定。

二、请使用正确的文档类型

请始终在文档的首行声明文档类型:

<!DOCTYPE html>

三、请使用小写元素名 

HTML5允许在元素名中使用混合大小写字母。

我们推荐使用小写元素名:

  • 混合大小写名称并不好
  • 开发者习惯使用小写名(比如在XHTMLA中)
  • 小写起来更纯净
  • 小写更易于书写 

 四、关闭所有的HTML元素

在HTML中,很多元素不用关闭(例如:<b/>),意思就是不用写结束标签

按照格式化规范,我们建议关闭所有HTML元素

五、关闭空的HTML元素 

在HTML5中,关闭空元素是可选的。

允许这样:

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

也可以这样:

 <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 

斜杠(/)在XHTML和XML中是必需的。

如果你期望XML软件来访问您的页面,保持这个习惯是个好主意。

六、使用小写属性名 

HTML允许大小写混合的属性名。

但是建议使用小写属性名,前面已近提到好处,不再赘述

七、属性值加引号 

HTML5允许不加引号的属性值。

推荐属性值加引号:

  • 如果属性值包含值,则必须使用引号
  • 混合样式绝对不好
  • 加引号的值更易阅读 

 八、必需的属性

对图像使用alt属性。当图像无法显示时该属性很重要。(功能是图片无法显示时,提示用户图片信息)。

 定义图像尺寸。这样做会减少闪烁,因为浏览器会在图像加载前为图片预留空间

九、空格和等号

等号两边的空格是合法的,但是精简空格更易阅读。

十、避免长代码行。 

当使用HTML编辑器时,通过左右滚动来阅读HTML代码很不方便。请尽量避免代码超过80个字符。

十一、空行和缩进 

请勿无理由地增加空行。

为了提高可读性,请增加空行来分隔大型或逻辑代码块。

为了提高可读性,请增加两个空格的缩进。请勿使用TAB(键盘缩进键)。

 请勿使用没有必要的空行和缩进。没有必要在短的和相关项目之间使用空行,也没有必要缩进每个元素。

 十二、省略<html>和<body>、<head>

在HTML5标准中,能够省略<html>标签和<body>标签以及<head>标签。

<html>元素是文本的根元素。它是规定页面语言的理想位置。

默认地,浏览器会把<body>之前的所有元素添加到默认的<head>元素。

对于可访问应用程序和搜索引擎,生命语言很重要。

省略<html>或<body> c可令DOM和XML软件崩溃。

省略<body>会在老式浏览器(IE9)中产生错误。 

省略<head>标签,能够降低HTML的复杂性 

十三、元数据 

<title>元素在HTML5中是必需的。请尽可能制作有意义的标题。

为了确保恰当的解释,以及正确的搜索引擎索引,在文档中对语言和字符编码 的定义越早越好。

十四、HTML注释

段注释应该在单行中书写,并在<!--之后增加一个 空格。

长注释,跨越多行,应该通过<!--和-->在独立的行中书写。

章注释更易观察,如果它们被缩进两个空格的话。

 十五、样式表

请使用简单的语法来链接样式表(type属性不是必需的):

<link rel="stylesheet" href="styles.css"> 

断规则可以压缩为一行,就像这样:

p.into{font-family:"Verdana";font-size:18em;} 

长规则应该分为多行:

div {

            background-color: #7fffd4;

            width: 500px;

            height: 600px;

            margin: 0 auto;

            text-align: center;

            padding: 30px;

        }

  •  开括号与选择器位于同一行
  • 在开括号前用一个空格
  • 使用两个字符的缩进
  • 在每个属性与其之间使用冒号加一个空格
  • 在每个逗号或分号之后使用空格
  • 在每个属性值对(包括最后一个)之后使用分号
  • 只在值包含空格时使用引号来包围值
  • 把闭括号放在新的一行,之前不用空格
  • 避免每行超过80个字符

 十六、通过JavaScript 访问HTML元素

使用“不整洁”的HTML样式的后果,是可能会导致JavaScript错误。

请在HTML中使用(与JavaScript)相同的命名约定。

十七、使用小写文件名 

大多数web服务器(Apache、Unix)对文件名的大小写敏感:

不能以chain.png 访问Chain.png

其他web服务器(微软,IIS)对大小写不敏感:

 能以chain.png 或者Chain.png访问Chain.png

如果使用混合大小写,那么您必须保持高度的一致性。

如果您从对大小写不敏感的服务器转到一台对大小写敏感的服务器上,这些错误会破坏网站

为了避免这些问题,规定始终使用小写文件名。

十八、文件拓展名

HTML文件名应该使用拓展名.html(而不是.htm)

CSS文件应该使用拓展名.css

JavaScript文件应该使用拓展名.js 

猜你喜欢

转载自blog.csdn.net/m0_62029216/article/details/130413908