HTML规范

阳光穿透心脏的1/2处 2021-07-04 22:21 451阅读 0赞

### 规范 ###

具体规则：

1.  html5 使用简单的 `doctype` 来启动标准模式
2.  无特殊说明，字符编码采用 `utf-8`
3.  根据html5规范，鼓励作者指定lang属性，来指出页面的语言，这样做会有助于语言合成工具来确定怎样发音，以及翻译工具决定使用的规则等
4.  无特殊需要，可通过 `edge mode` 来通知 IE 使用最新的兼容模式
5.  引入css和js时，无需指定type，因为`text/css` `text/javascript`为默认值
6.  css在`head`引入，js除基础库等基础文件外在`body`结束标签之前引入
7.  缩进使用两个空格
8.  标签名称和标签属性统一使用小写

建议的脚手架如下:

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <meta lang="zh">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="renderer" content="webkit">
        <meta name="description" content="">
        <meta name="keyword" content="">
        <title>标题</title>
        <link rel="stylesheet" href="example.css">
      </head>
      <body>
          <script src="example.js"></script>
      </body>
    </html>

另外属性还需注意:

1.  属性使用双引号
2.  Boolean属性不需要声明取值属性，如：`<input type="checkbox" value="1" checked>`
3.  建议自定义属性以`data-`为前缀，便于阅读
4.  属性应该按照特定的顺序出现以保证易读性，而且一致的属性顺序可能提升 1.5% 的 gzip 压缩率，顺序建议：class id name data-\* 其他，如：`<a class="" id="" data-name="" href="#">Link</a>`
5.  不要在自动闭合标签最后使用斜线，如：`<br> <hr>`
6.  多媒体退化，img标签使用alt属性，audio、video等在标签内部提供该浏览器不支持的文字说明，如：`<video> Your browser does not support the vidio tag. </video>`
7.  html代码一般不会经过预处理，为了安全，尽量不要出现任何敏感信息的注释

--------------------

## CSS小问题集合 ##

### CSS 有哪些属性是可被后代继承的？ ###

*  可继承的:`font-size`,`font-weight`,`line-height`,`color`,`cursor`等
 *  不可继承的一般是会改变盒子模型的:`display`,`margin`、`border`、`padding`、`height`等

### 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？ ###

*  行内: `input`,`span`,`a`,`img`以及`display:inline`的元素
 *  块级: `p`,`div`,`header`,`footer`,`aside`,`article`,`ul`以及`display:block`这些
 *  void: `br`,`hr`

### CSS 优先级 ###

> 优先级就是分配给指定的CSS声明的一个权重，它由 匹配的选择器中的 每一种选择器类型的 数值 决定。

*  每个选择器都有权值，权值越大越优先
    
    > id选择器 1000
    > 
    > class类选择器，属性选择器，伪类 100
    > 
    > 类型（Tag）选择器，伪元素 10
 *  **权重相同**的声明按照出现**顺序**排优先级
 *  继承的样式优先级低于自身指定样式
 *  标签内联样式 > 页面内样式 > 外部样式
 *  **!important** 覆盖一切其他样式，优先级最高

### link 与 @import ###

*  link 是XHTML标签，除了加载 CSS 外，还可以定义 RSS 等其他事务；
    
    @import 属于 CSS 范畴，只能加载 CSS。
 *  link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载。
 *  link 无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏览器不支持。
 *  link 支持使用 JavaScript 控制 DOM 去改变样式；而 @import 不支持。