HTML规范

2019-03-28 本文已影响0人椰果粒

标签

尽量遵循HTML标准和语义，但不要以失去实用性为代价

自闭合标签，无需闭合（img, input, br, hr）；
可选闭合标签，需要闭合（</li>, </body>）；
尽量减少标签的数量；

class与id的使用

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

  <!-- 错误示范 -->
  <div class="j-hook left contentWraaper"></div>
  <!-- 正确示范 -->
  <div id="j-hook" class="content-wrapper"></div>

属性的顺序

属性应当按照一定的顺序出现，来保证易读性。顺序如下：

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

单双引号

属性的定义，统一使用双引号。示范如下

<!-- 正确示范 -->
<div id="detail" class="red content-wrapper"></div>

嵌套规则

语义嵌套：浏览器会做容错处理，生成的文档树可能互相不太一样；

严格嵌套约束：在所有的浏览器都都不被允许；

语义嵌套约束
- <li>用于<ul>或者<ol>下
- <dt><dd>用于<dl>下
- <thead><tbody><tbody><tr><td>放在<table>下
严格嵌套约束
- 行内元素下只能包含文本和行内元素
- <a>标签里不可以嵌套交互元素，如<a>,<button>,<select>等
布尔值属性

在HTML中，disabled, selected, checked等属性不用设置值

<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
    <option value="1" selected>1</option>
</select>

语义化

通常情况下，每个标签都是有语义的，所谓语义就是有各自的功能和含义；
语义化的HTML结构，有助于机器（搜索引擎）理解；
多人协作时，能够快速理解别的开发者的用途；

脚本引用写在 body 结束标签之前；
尽量保证结构、表现、行为三者分离，并尽量使三者之间没有太多的交互和联系。尽量在文档和模板中只包含结构性的 HTML；而将所有表现代码，移入样式表中；将所有动作行为，JS脚本之中。
尽量不使用行内样式；
在每一个块状元素，列表元素和表格元素后，加上一新空白行，并对其子孙元素进行缩进。内联元素写在一行内，块状元素还有列表和表格要另起一行。
任何时候都要尽量使用最少的标签并保持最小的复杂度，尽量避免多余的父元素。
尽量避免通过 JavaScript 生成的标签，它让内容变得不易查找、编辑，并且降低性能。
重要图片一定要加上alt属性; 给重要的元素和截断的元素加上title;

标签和含义

标签	含义
`<p>`	段落
`<h1>--<h6>`	标题
`<ul>`	无序列表
`<ol>`	有序列表
`<blockquote>`	大段引用
`<cite>`	一般小引用
`<b>`	为样式加粗
`<strong>`	为了强调而加粗
`<i>`	为样式倾斜
`<em>`	为强调内容而倾斜
`<code>`	代码标识
`<abbr>`	缩写

文档类型

HTML的第一行要加一个标准模式的声明，这样确保了浏览器有一致的表现形式

<!DOCTYPE html>

语言

<!-- 中文 -->
<html lang="zh-Hans">

<!-- 简体中文 -->
<html lang="zh-cmn-Hans">

<!-- 繁体中文 -->
<html lang="zh-cmn-Hant">

<!-- English -->
<html lang="en">

字符编码

应以无BOM的utf-8编码作为文件格式
<meta charset="utf-8">必须作为<head>的第一个直接子元素

IE模式兼容

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

SEO优化

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- SEO -->
    <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：最大缩放比例；

<meta name="viewport" content="width=device-width, initial-scale=1.0">

favicon

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

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

<link rel="shortcut icon" href="path/to/favicon.ico">

综上，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">

    <!-- 为移动设备添加 viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- iOS 图标 -->
    <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>

!!! 以上规则仅供参考

HTML规范

猜你喜欢

热点阅读