上一节:

  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.jc2182.com/)时,服务器返回默认文件名。常见的默认文件名是index.html,index.htm,default.html和default.htm。如果您的服务器仅配置了“index.html”作为默认文件名,则您的文件必须命名为“index.html”,而不是“index.htm”。但是,可以使用多个默认文件名配置服务器,通常可以根据需要设置多个默认文件名,Web服务器通常会按照顺序从设置的多个里面找,直到找到一个为止。无论如何,HTML文件的完整扩展名是.html,并且没有理由不应该使用它。
上一节: