书写HTML的规范

落日映苍穹つ 2023-06-15 13:27 98阅读 0赞

**html与css肯定是前端开发的入门第一课，相信大部分朋友都已经感觉自己很熟悉我们的这俩个好朋友了。但是大家是否了解其规范呢？今天我们一起看看Html的开发规范。**

### 文章目录 ###

*   *   *   *  1.1通用约定
             *   *   *  标签
                     *  Class 与 ID
                     *  属性顺序
                     *  引号
                     *  嵌套
                     *  语义嵌套约束
                     *  严格嵌套约束
                     *  布尔值属性
             *  1.2语义化
             *   *   *  常见标签语义
                     *  示例
             *  1.3HEAD
             *   *   *  文档类型
                     *  语言属性
                     *  字符编码
                     *  IE兼容模式
                     *  SEO优化
                     *  viewport
                     *  iOS图标
                     *  favicon
                     *  完整的HEAD模板

#### 1.1通用约定 ####

###### 标签 ######

*  自闭合（self-closing）标签，无需闭合 ( 例如： img input br hr 等 )；
 *  可选的闭合标签（closing tag），需闭合 ( 例如：
 *  或 )；
 *  尽量减少标签数量；

<img class="avatar" src="xxx" alt="xxx">
    <input type="text" name="title">
    
    <ul>
      <li>Style</li>
      <li>Guide</li>
    </ul>
    
    
    <span class="avatar">
      <img src="...">
    </span>

###### Class 与 ID ######

*  class 应以功能或内容命名，不以表现形式命名；
 *  class 与 id 单词字母小写，多个单词组成时，采用中划线-分隔；
 *  使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class；

<div class="j-hook left contentWrapper"></div>
    
    
    <div id="j-hook" class="sidebar content-wrapper"></div>

###### 属性顺序 ######

HTML 属性应该按照特定的顺序出现以保证易读性。

*  id
 *  class
 *  name
 *  data-xxx
 *  src, for, type, href
 *  title, alt
 *  aria-xxx, role

###### 引号 ######

属性的定义，统一使用双引号：

<span id='j-hook' class=text>Google</span>
    
    
    <span id="j-hook" class="text">Google</span>

###### 嵌套 ######

a 不允许嵌套 div这种约束属于语义嵌套约束，与之区别的约束还有严格嵌套约束，比如a 不允许嵌套 a。

严格嵌套约束在所有的浏览器下都不被允许；而语义嵌套约束，浏览器大多会容错处理，生成的文档树可能相互不太一样。

###### 语义嵌套约束 ######

*  <li> 用于 <ul> 或 <ol> 下；
 *  <dd>, <dt> 用于 <dl> 下；
 *  <thead>, <tbody>, <tfoot>, <tr>, <td> 用于 <table> 下；

###### 严格嵌套约束 ######

*  inline-Level 元素，仅可以包含文本或其它 inline-Level 元素;
 *  <a>里不可以嵌套交互式元素<a>、<button>、==<select>==等;
 *  <p>里不可以嵌套块级元素<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、==<form>==等。

###### 布尔值属性 ######

HTML5 规范中 disabled、checked、selected 等属性不用设置值。

#### 1.2语义化 ####

没有 CSS 的 HTML 是一个语义系统而不是 UI 系统。

通常情况下，每个标签都是有语义的，所谓语义就是你的衣服分为外套， 裤子，裙子，内裤等，各自有对应的功能和含义。所以你总不能把内裤套在脖子上吧。-- 一丝

此外语义化的 HTML 结构，有助于机器（搜索引擎）理解，另一方面多人协作时，能迅速了解开发者意图。

###### 常见标签语义 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly93dWRpOTguYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]

###### 示例 ######

将你构建的页面当作一本书，将标签的语义对应的其功能和含义；

*  书的名称：<h1>
 *  书的每个章节标题: <h2>
 *  章节内的文章标题: <h3>
 *  小标题/副标题: <h4> <h5> <h6>
 *  章节的段落: <p>

#### 1.3HEAD ####

###### 文档类型 ######

为每个 HTML 页面的第一行添加标准模式（standard mode）的声明， 这样能够确保在每个浏览器中拥有一致的表现。

<!DOCTYPE html>

###### 语言属性 ######

为什么使用 lang=“zh-cmn-Hans” 而不是我们通常写的 lang=“zh-CN” 呢? 请参考知乎上的讨论: [网页头部的声明应该是用 lang=“zh” 还是 lang=“zh-cn”？][lang_zh_ _ lang_zh-cn]

<html lang="zh-Hans">
    
    
    <html lang="zh-cmn-Hans">
    
    
    <html lang="zh-cmn-Hant">
    
    
    <html lang="en">

###### 字符编码 ######

*  以无 BOM 的 utf-8 编码作为文件格式;
 *  指定字符编码的 meta 必须是 head 的第一个直接子元素；

###### IE兼容模式 ######

优先使用最新版本的IE 和 Chrome 内核

###### SEO优化 ######

<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        
        <title>Style Guide</title>
        <meta name="keywords" content="your keywords">
        <meta name="description" content="your description">
        <meta name="author" content="author,email address">
    </head>

###### viewport ######

*  viewport: 一般指的是浏览器窗口内容区的大小，不包含工具条、选项卡等内容；
 *  width: 浏览器宽度，输出设备中的页面可见区域宽度；
 *  device-width: 设备分辨率宽度，输出设备的屏幕可见宽度；
 *  initial-scale: 初始缩放比例；
 *  maximum-scale: 最大缩放比例；

为移动端设备优化，设置可见区域的宽度和初始缩放比例。

###### iOS图标 ######

*  apple-touch-icon 图片自动处理成圆角和高光等效果;
 *  apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图;

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">
    
    
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-72x72-precomposed.png" sizes="72x72">
    
    
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-114x114-precomposed.png" sizes="114x114">
    
    
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-144x144-precomposed.png" sizes="144x144">

###### favicon ######

在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证 favicon 可访问，避免404，必须遵循以下两种方法之一：

*  在 Web Server 根目录放置 favicon.ico 文件；
 *  使用 link 指定 favicon；

###### 完整的HEAD模板 ######

<!DOCTYPE html>
    <html lang="zh-cmn-Hans">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Style Guide</title>
        <meta name="description" content="不超过150个字符">
        <meta name="keywords" content="">
        <meta name="author" content="name, email@gmail.com">
    
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
        
        <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">
    
        <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
        <link rel="shortcut icon" href="path/to/favicon.ico">
    </head>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly93dWRpOTguYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191122172637646.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly93dWRpOTguYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70
[lang_zh_ _ lang_zh-cn]: https://www.zhihu.com/question/20797118