HTML5 样式指南
-
HTML编码约定
Web开发人员经常不确定要在HTML中使用的编码风格和语法。 从2000年到2010年,许多Web开发人员从HTML转换为XHTML。 使用XHTML,开发人员被迫编写有效且“格式良好”的代码。 在代码验证方面,HTML5有点宽容。 -
面向未来
对样式的一致使用使其他人更容易理解您的HTML。 将来,XML阅读器等程序可能需要阅读您的HTML。 使用格式良好的“接近XHTML”语法是聪明的选择。始终保持您的代码整洁,干净和良好的形式。
-
使用正确的文档类型
始终将文档类型声明为文档中的第一行:<!DOCTYPE html>
<!doctype html>
-
使用小写元素名称
HTML5允许在元素名称中混合使用大写和小写字母。我们建议使用小写元素名称,因为:- 混合使用大写和小写的名称很糟糕
- 开发人员通常使用小写名称(如在XHTML中)
- 小写看起来更干净
- 小写更容易编写
<SECTION> <p>这是一个段落</p> </SECTION>
<Section> <p>这是一个段落</p> </SECTION>
<section> <p>这是一个段落</p> </section>
-
关闭所有HTML元素
在HTML5中,您不必关闭所有元素(例如<p>元素)。我们建议关闭所有HTML元素。 坏的示范:<section> <p>这是一个段落。 <p>这是一个段落。 </section>
<section> <p>这是一个段落。</p> <p>这是一个段落。</p> </section>
-
关闭空HTML元素
在HTML5中,关闭空元素是可选的。 允许使用:<meta charset="utf-8">
<meta charset="utf-8" />
-
使用小写属性名称
HTML5允许在属性名称中混合使用大写和小写字母。我们建议使用小写属性名称,因为:- 混合使用大写和小写的名称很糟糕
- 开发人员通常使用小写名称(如在XHTML中)
- 小写看起来更干净
- 小写更容易编写
<div CLASS="menu">
<div class="menu">
-
属性值用引号
HTML5允许没有引号的属性值。我们建议属性值使用引号,因为:- 混合大写和小写值是不好的
- 引用的值更容易阅读
- 如果值包含空格,则必须使用引号
<table class=table striped>
<table class=striped>
<table class="striped">
-
图像属性
始终将alt属性添加到图像。当由于某种原因无法显示图像时,此属性很重要。此外,始终定义图像宽度和高度。它减少了闪烁,因为浏览器可以在加载前为图像保留空间。 坏的示范:<img src="html5.gif">
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
-
空格和等号
HTML5允许等号周围有空格。但无空格更容易阅读,并将实体更好地组合在一起。 坏的示范:<link rel = "stylesheet" href = "styles.css">
<link rel="stylesheet" href="styles.css">
-
空行和缩进
使用HTML编辑器时,向右和向左滚动以阅读HTML代码是不方便的。尽量避免使用长度超过80个字符的代码行。 -
避免长代码行
为了便于阅读,请添加空行以分隔大型或逻辑代码块。为了便于阅读,请添加两个缩进空格。不要使用Tab键。不要使用不必要的空行和缩进。没有必要缩进每个元素: 不必要的空行<body> <h1>著名的城市</h1> <h2>上海</h2> <p> 上海的介绍 </p> </body>
<body> <h1>著名的城市</h1> <h2>上海</h2> <p> 上海的介绍 </p> </body>
-
不省略<html>和<body>
在HTML5中,可以省略<html>标签和<body>标签。以下代码将验证为HTML5:<!DOCTYPE html> <head> <title>页面标题</title> </head> <h1>段落标题</h1> <p>这是一个段落</p>
<!DOCTYPE html> <html lang="zh">
声明语言对于辅助功能应用程序(屏幕阅读器)和搜索引擎非常重要。 省略<html>或<body>可能导致DOM和XML软件崩溃。 省略<body>可能会在旧浏览器中产生错误(IE9)。
-
-
元数据
<title>是HTML5中必需的元素。使标题尽可能有意义 为了确保正确的解释和正确的搜索引擎索引,语言和字符编码应尽早在文档中定义:<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>HTML5教程</title> </head>
-
-
HTML注释
简短的评论应写在一行,如下所示:<!-- 这是注释 -->
<!-- 这是长注释! 这是长注释! -->
-
样式表
使用简单的语法链接到样式表(不需要type属性):<link rel="stylesheet" href="styles.css">
p.intro {font-family: Verdana; font-size: 16em;}
body { background-color: lightgrey; font-family: "Arial Black", Helvetica, sans-serif; font-size: 16em; color: black; }
- 将左大括号放在与选择器相同的线上
- 在左大括号前使用一个空格
- 使用两个缩进空格
- 在每个属性 - 值对之后使用分号,包括最后一个
- 如果值包含空格,则仅在值周围使用引号
- 将结束括号放在一个新行上,不带前导空格
- 避免超过80个字符的行
-
在HTML中加载JavaScript
使用简单的语法加载外部脚本(不需要type属性):<script src="myscript.js">
var obj = getElementById("Demo") var obj = getElementById("demo")
-
文件相关
小写文件名
某些Web服务器(Apache,Unix)对文件名区分大小写:“london.jpg”无法作为“London.jpg”访问。其他Web服务器(Microsoft,IIS)不区分大小写:“london.jpg”可以作为“London.jpg”或“london.jpg”访问。如果你使用大小写混合,你必须非常一致。如果从不区分大小写的区域移动到区分大小写的服务器,即使很小的错误也会破坏您的网络!要避免这些问题,请始终使用小写文件名。文件扩展名
HTML文件应具有.html或.htm扩展名。CSS文件应具有.css扩展名。JavaScript文件应具有.js扩展名。.htm和.html之间的差异
.htm和.html扩展名之间没有区别。两者都将被任何Web浏览器或Web服务器视为HTML。 差异是文化的: .htm迎合的早期DOS系统,系统将扩展限制为3个字符。 .html使用在没有这个限制的Unix操作系统。技术差异
当URL未指定文件名(如https://www.cainiaoya.com/)时,服务器返回默认文件名。常见的默认文件名是index.html,index.htm,default.html和default.htm。如果您的服务器仅配置了“index.html”作为默认文件名,则您的文件必须命名为“index.html”,而不是“index.htm”。但是,可以使用多个默认文件名配置服务器,通常可以根据需要设置多个默认文件名,Web服务器通常会按照顺序从设置的多个里面找,直到找到一个为止。无论如何,HTML文件的完整扩展名是.html,并且没有理由不应该使用它。