DailyUp

Appearance

代码规范 ​

参考凹凸实验室代码规范：

https://guide.aotu.io/

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

5.background

  • background-image/size/position/color

6.其他

  • transform/transition/overflow/white-space

meta元素 ​

meta元素用于定义元数据：

  • 在之前讲解head的时候说过，head中用于定义元数据；
  • 比如标题title、样式style、link外部资源等；
  • meta用于定义那些不能使用其他定元相关（meta-related）元素定义的任何元数据信息；

meta 元素定义的元数据的类型包括以下几种：

  • 如果设置了 charset 属性，meta 元素是一个字符集声明，告诉文档使用哪种字符编码
css
<meta charset="UTF-8">
  • 如果设置了 http-equiv 属性，meta 元素则是编译指令
  • 如果设置了 name 属性，meta 元素提供的是文档级别（document-level）的元数据，应用于整个页面

meta元素的http-equiv属性 ​

创建的html页面都会有以下代码

html
<meta http-equiv="X-UA-Compatible" content="IE=edge">

它的作用到底是什么呢？网上众说纷纭，我们直接看官方文档的解释：

  • 告知IE浏览器去模仿哪一个浏览器的行为；
  • IE=edge，告知IE8区使用最高有效模式来模仿；

meta元素的name属性 ​

name属性的值非常多，具体的内容可以查看文档：

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta/name

我们介绍几个常用的：

  • robots：爬虫、协作搜寻器，或者 “机器人”，对此页面的处理行为，或者说，应当遵守的规则。
  • author：文档作者的名字
  • Copyright：版权声明
  • description：一段简短而精确的、对页面内容的描述
    • 一些浏览器，比如 Firefox 和 Opera，将其用作书签的默认描述
  • keywords：与页面内容相关的关键词，使用逗号分隔。某些搜索引擎会进行收录
css
<meta name="robots" content="all">
<meta name="author" content="tx">
<meta name="Copyright" content="tx">
<meta name="description" content="王者荣耀开黑必备">
<meta name="keywords" content="王者荣耀,王者荣耀下载,王者荣耀官网">

link图标 ​

Favicon是favorites icon的缩写，亦被称为website icon（站点图标）、page icon（页面图标）；

前面我们已经学习了它的用法：

css
<link rel="icon" href="./favicon.ico">

事实上它还有很多兼容性的写法：

css
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"> // 这是其中一个

CSS样式的字符编码 ​

之前我们有制定过HTML页面的编码，但是并没有制定CSS样式的编码

在样式表中有多种方法去声明字符编码，浏览器会按照以下顺序尝试下边的方法（一旦找到就停止并得出结果）：

  • 1.文件的开头的 Unicode byte-order（字节顺序标记） 字符值
  • 2.由Content-Type：HTTP header 中的 charset 属性给出的值或用于提供样式表的协议中的等效值
  • 3.CSS @规则 @charset
  • 4.使用参考文档定义的字符编码：<link> 元素的 charset 属性
    • 该方法在 HTML5 标准中已废除，无法使用
  • 5.假设文档是 UTF-8

开发中推荐在CSS的开头编写@charset指定编码：

css
@charset: "UTF-8";