八、开发规范及组件化开发思想+meta元素详解和link网站图标和CSS的字符编码补充
Lyk 2022/5/19 HTMLCSS开发规范meta元素link图标
# 1、代码规范
- 参考凹凸实验室代码规范：代码规范参考 (opens new window)
# 2、CSS编写顺序及思路
1、先确定盒子本身是如何布局
- position: absolute
- float: left/right
- display: flex
2、盒子的特性和可见性
- display: block/inline-block/inline/none
- visibility/opacity
3、盒子模型
- width/height
- box-sizing
- margin/border/padding/content
- box-shadow/text-shadow
4、内部的文本文字
- font/text相关属性
- line-height
- color
5、background
- background-image/size/position/color
6、其他
- transform/transition/overflow/white-space/cursor
# 3、组件化开发思路
事实上目前Vue、React、小程序都采用的是组件化开发思路
# 4、meta元素
# 4.1.了解meta元素
meta元素用于定义元数据：
- 在之前学习head的时候说过，head中用于定义元数据；
- 比如标题title、样式style、link外部资源等；
- meta用于定义那些不能使用其他定元相关元素（meta-related）定义的任何元数据信息；
meta 元素定义的元数据的类型包括以下几种：
- 如果设置了 charset 属性，meta 元素是一个字符集声明，告诉文档使用哪种字符编码。
- 如果设置了 http-equiv 属性，meta 元素则是编译指令。
- 如果设置了 name 属性，meta 元素提供的是文档级别（document-level）的元数据，应用于整个页面。
# 4.2.meta元素的http-equiv属性
- 我们会发现，无论是默认创建的html页面还是网上的一些上线的项目大多都有如下代码：
<meta http-equiv="X-UA-Compatible" content="IE-edge" >
1
- 它的作用到底是什么呢？网上众说纷纭，我们直接看官方文档的解释：
- 告知IE浏览器去模仿哪一个浏览器的行为；
- IE=edge，告知IE8区使用最高有效模式来模仿其他浏览器的行为
# 4.3.meta元素的name属性
- name属性的值非常多，具体的内容可以查看文档： meta的name属性查询 (opens new window)
- 我们介绍几个常用的：
- robots：爬虫、协作搜寻器，或者 “机器人”，对此页面的处理行为，或者说，应当遵守的规则。
- author：文档作者的名字。
- Copyright：版权声明；
- description：一段简短而精确的、对页面内容的描述。
- 一些浏览器，比如 Firefox 和 Opera，将其用作书签的默认描述。
- keywords：与页面内容相关的关键词，使用逗号分隔。某些搜索引擎会进行收录；
# 5、link图标
- Favicon是favorites icon的缩写，亦被称为website icon（站点图标）、page icon（页面图标）；
- 前面我们已经学习了它的用法：
<link rel="icon" href="https://pvp.qq.com/favicon.ico"
1
- 事实上它还有很多兼容性的写法：
- 这里有一个疑惑？
- 为什么项目中没有link元素也可以正常显示网站的icon图标呢？
- 因为：下列代码另一个局限就是把favicon关联到了某一个特定的HTML或XHTML文档上。为了避免这一点，favicon.ico文件应置于根目录下，多数浏览器将自动检测并使用它
- 下面的link使用方法表示有另一个可替换的网站供选择：
<link rel="alternate" href="https://pvp.qq.com/m/"
1
# 6、CSS样式的字符编码
之前我们有指定过HTML页面的编码，但是并没有指定CSS样式的编码。
- 那么CSS样式的字符编码会按照什么规则来使用呢？
在样式表中有多种方法去声明字符编码，浏览器会按照以下顺序尝试下边的方法（一旦找到就停止并得出结果）：
- 1.文件的开头的 Unicode byte-order（字节顺序标记） 字符值。
- 2.由Content-Type：HTTP header 中的 charset 属性给出的值或用于提供样式表的协议中的等效值。
- 3.CSS @规则 @charset。
- 4.使用参考文档定义的字符编码：
<link>元素的 charset 属性。- 该方法在 HTML5 标准中已废除，无法使用。
- 5.如果上面都没有找到，浏览器会假设文档是 UTF-8。
开发中推荐在CSS的开头编写@charset指定编码
@charset "UTF-8";
1
