上一节:

  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" />
    但是，结束斜杠（/）在XHTML和XML中是必需的。如果您希望XML软件访问您的页面，最好保持结束斜杠！

  • 使用小写属性名称

    HTML5允许在属性名称中混合使用大写和小写字母。我们建议使用小写属性名称，因为：
    • 混合使用大写和小写的名称很糟糕
    • 开发人员通常使用小写名称（如在XHTML中）
    • 小写看起来更干净
    • 小写更容易编写
    坏的示范： 
    <div CLASS="menu">
    b>好的示范： 
    <div class="menu">

  • 属性值用引号

    HTML5允许没有引号的属性值。我们建议属性值使用引号，因为：
    • 混合大写和小写值是不好的
    • 引用的值更容易阅读
    • 如果值包含空格，则必须使用引号
    糟糕的示范(这根本不起作用，因为包含空格)： 
    <table class=table striped>
    b>坏的示范： 
    <table class=striped>
    b>好的示范： 
    <table class="striped">

  • 图像属性

    始终将alt属性添加到图像。当由于某种原因无法显示图像时，此属性很重要。此外，始终定义图像宽度和高度。它减少了闪烁，因为浏览器可以在加载前为图像保留空间。 坏的示范： 
    <img src="html5.gif">
    b>好的示范： 
    <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>
    但是，我们不建议省略<html>和<body>标记。 <html>元件是文档根。它是指定页面语言的推荐位置： 
    <!DOCTYPE html>
       <html lang="zh">
    声明语言对于辅助功能应用程序（屏幕阅读器）和搜索引擎非常重要。 省略<html>或<body>可能导致DOM和XML软件崩溃。 省略<body>可能会在旧浏览器中产生错误（IE9）。

  • 不省略<head>

    在HTML5中，也可以省略<head>标记。 默认情况下，浏览器会将<body>之前的所有元素添加到<head>元素中。 您可以通过省略<head>标记来降低HTML的复杂性： 
    <!DOCTYPE html>
       <html>
       <title>页面标题</title>

       <body>
         <h1>着是段落标题</h1>
         <p>这是一个段落。</p>
       </body>

       </html>
    但是，我们不建议省略<head>。
    Web团队其他开发人员不熟悉省略标记。他需要时间来确定。

  • 元数据

    <title>是HTML5中必需的元素。使标题尽可能有意义 为了确保正确的解释和正确的搜索引擎索引，语言和字符编码应尽早在文档中定义： 
    <!DOCTYPE html>
       <html lang="zh">
       <head>
         <meta charset="UTF-8">
         <title>HTML5教程</title>
       </head>

  • 设置视口

    HTML5引入了一种方法，让Web设计人员通过<meta>标记控制视口 。 视口是用户在网页上的可见区域。它随设备而变化，在手机上比在电脑屏幕上小。 您应该<meta>在所有网页中包含以下视口元素： 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    一个<meta>视口元素对如何控制网页的尺寸和缩放浏览器的说明。 width = device-width部分将页面宽度设置为遵循设备的屏幕宽度（具体取决于设备）。 initial-scale = 1.0部分设置浏览器首次加载页面时的初始缩放级别。

  • 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">
    使用“不整洁”HTML样式的结果可能导致JavaScript错误。 这两个JavaScript语句将产生不同的结果： 
    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，并且没有理由不应该使用它。
上一节: