HTML零散知识

1、代码规范与思路

参考凹凸实验室代码规范：Aotu.io - 前端代码规范

CSS编写顺序的思路

先确定盒子本身是如何布局

position: absolute
float: left/right
display: flex

盒子的特性和可见性

display: block/inline-block/inline/none
visibility/opacity

盒子模型

width/height
box-sizing
margin/border/padding/content
box-shadow/text-shadow

内部的文本文字

font/text

background

background-image/size/position/color

其他

transform/transition/overflow/white-space

2、meta元素

meta元素用于定义元数据：

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

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

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

2.1、meta元素的http-equiv属性

我们会发现，默认创建的html页面都有如下代码：

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

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

2.2、meta元素的name属性

name属性的值非常多，具体的内容可以查看文档：标准元数据名称 - HTML（超文本标记语言） | MDN

我们介绍几个常用的：

robots：爬虫、协作搜寻器，或者 “机器人”，对此页面的处理行为，或者说，应当遵守的规则。
author：文档作者的名字。
Copyright：版权声明；
description：一段简短而精确的、对页面内容的描述。
- 一些浏览器，比如 Firefox 和 Opera，将其用作书签的默认描述。
keywords：与页面内容相关的关键词，使用逗号分隔。某些搜索引擎会进行收录；

3、CSS样式的字符编码

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

那么CSS样式的字符编码会按照什么规则来使用呢？

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

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

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

4、CSS属性 - white-space

white-space用于设置空白处理和换行规则

属性值	说明
normal	合并所有连续的空白，允许单词超屏时自动换行
nowrap	合并所有连续的空白，不允许单词超屏时自动换行
pre	阻止合并所有连续的空白，不允许单词超屏时自动换行
pre-wrap	阻止合并所有连续的空白，允许单词超屏时自动换行
pre-line	合并所有连续的空白（但保留换行），允许单词超屏时自动换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            background: orange;

            /* white-space */
            /* nowrap不换行, 合并: 会合并 */
            /* pre: 不换行, 合并: 不合并 */
            /* pre-wrap: 换行, 合并: 不合并 */
            /* pre-line: 换行, 合并: 合并连续的空白, 但保留换行符 */
            white-space: pre-line;
        }
    </style>
</head>
<body>

    <div class="box">
        我是coderwhy kobe hy_why_coderwhy
        哈哈哈哈哈 呵呵呵呵和 my name is why
    </div>

</body>
</html>

5、CSS属性 - text-overflow

text-overflow通常用来设置文字溢出时的行为

属性值	说明
clip	溢出的内容直接裁剪掉（字符可能会显示不完整）
ellipsis	溢出那行的结尾处用省略号表示

text-overflow生效的前提是overflow不为visible

常见的是将white-space、text-overflow、overflow一起使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Document</title>
    <style>
        .box {
            width: 150px;
            background-color: #f00;

            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>

    <div class="box">
        my name is why, nickname is coderwhy, age is 18
    </div>

</body>
</html>

6、CSS中的函数

在前面我们有使用过很多个CSS函数:

比如rgb/rgba/translate/rotate/scale等;
CSS函数通常可以帮助我们更加灵活的来编写样式的值；

下面我们再学习几个非常好用的CSS函数:

var：使用CSS定义的变量;
calc：计算CSS值, 通常用于计算元素的大小或位置;
blur：毛玻璃(高斯模糊)效果;
gradient：颜色渐变函数；

6.1、var

SS中可以自定义属性

属性名需要以两个减号（--）开始;
属性值则可以是任何有效的CSS值;
规则集定义的选择器, 是自定义属性的可见作用域(只在选择器内部有效)
所以推荐将自定义属性定义在html中，也可以使用 :root 选择器;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Document</title>
    <style>

        :root {
            /* 定义了一个变量(CSS属性) */
            /* 只有后代元素可以使用 */
            --main-color: #f00;
        }

        .box {
            color: var(--main-color);
        }

        .title {
            color: var(--main-color);
        }

    </style>
</head>
<body>

    <div class="box">
        我是box
    </div>

    <h1 class="title">
        我是标题
    </h1>

</body>
</html>

6.2、calc

calc() 函数允许在声明 CSS 属性值时执行一些计算。
计算支持加减乘除的运算；（+ 和 - 运算符的两边必须要有空白字符。）
通常用来设置一些元素的尺寸或者位置；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 100px;
            background-color: orange;
        }

        .item {
            height: 50px;
            display: inline-block;
        }

        .item1 {
            /* width的百分比相对于包含块(父元素) */
            width: calc(100% - 100px);
            background-color: #f00;
        }

        .item2 {
            width: 100px;
            background-color: #0f0;
        }
    </style>
</head>
<body>

    <div class="box">
        <div class="item item1"></div>
        <div class="item item2"></div>
    </div>

</body>
</html>

6.3、blur

◼ blur() 函数将高斯模糊应用于输出图片或者元素;

blur(radius)
radius, 模糊的半径, 用于定义高斯函数的偏差值, 偏差值越大, 图片越模糊;

通常会和两个属性一起使用：

filter: 将模糊或颜色偏移等图形效果应用于元素;
backdrop-filter: 为元素后面的区域添加模糊或者其他效果;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Document</title>
    <style>
        /* img {
          filter: blur(5px);
        } */

        .box {
            display: inline-block;
            position: relative;
            /* filter: blur(5px); */
        }

        .cover {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
        }
    </style>
</head>
<body>

    <!-- filter -->
    <!-- <img src="../images/kobe01.jpg" alt=""> -->

    <div class="box">
        <img alt="" src="../images/kobe01.jpg">
        <div class="cover"></div>
    </div>


</body>
</html>

6.4、CSS函数 – gradient

<gradient> 是一种<image>CSS数据类型的子类型，用于表现两种或多种颜色的过渡转变。

CSS的<image>数据类型描述的是2D图形；
比如background-image、list-style-image、border-image、content等；
<image>常见的方式是通过url来引入一个图片资源；
它也可以通过CSS的<gradient> 函数来设置颜色的渐变；

<gradient>常见的函数实现有下面几种：

属性值	说明
linear-gradient()	创建一个表示两种或多种颜色线性渐变的图片；
radial-gradient()	创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成；
repeating-linear-gradient()	创建一个由重复线性渐变组成的<image>；
repeating-radial-gradient()	创建一个重复的原点触发渐变组成的<image>；

linear-gradient的使用

linear-gradient：创建一个表示两种或多种颜色线性渐变的图片；

radial-gradient：创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 100px;

            /* background-color: orange; */
            /* background-image: linear-gradient(red, blue); */
            /* 改变方向 */
            /* background-image: linear-gradient(to right, red, blue); */
            /* background-image: linear-gradient(to right top, red, blue); */
            /* background-image: linear-gradient(-45deg, red, blue); */
            /* background-image: linear-gradient(to right, red, blue 40px, orange 60%, purple 100%); */


            /* radial-gradient */
            /* background-image: radial-gradient(red, blue); */
            background-image: radial-gradient(at 0% 50%, red, blue);
        }
    </style>
</head>
<body>

    <div class="box"></div>

</body>
</html>

7、浏览器前缀

有时候可能会看到有些CSS属性名前面带有：-o-、-xv-、-ms-、mso-、-moz-、-webkit-

官方文档专业术语叫做：vendor-specific extensions（供应商特定扩展）

为什么需要浏览器前缀了？

CSS属性刚开始并没有成为标准，浏览器为了防止后续会修改名字给新的属性添加了浏览器前缀；

上述前缀叫做浏览器私有前缀，只有对应的浏览器才能解析使用

-o-、-xv-：Opera等
-ms-、mso-：IE等
-moz-：Firefox等
-webkit-：Safari、Chrome等

8、媒体查询

媒体查询是一种提供给开发者针对不同设备需求进行定制化开发的一个接口。
你可以根据设备的类型（比如屏幕设备、打印机设备）或者特定的特性（比如屏幕的宽度）来修改你的页面。

媒体查询的使用方式主要有三种：

方式一：通过@media和@import使用不同的CSS规则（常用）；

方式二：使用media属性为<style>, <link>, <source>和其他HTML元素指定特定的媒体类型；

方式三：使用Window.matchMedia() 和MediaQueryList.addListener() 方法来测试和监控媒体状态；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Document</title>
    <style>
        /* @import是可以和媒体查询结合来使用 */
        @import url(./css/body_bgc.css) (max-width: 800px);
    </style>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Document</title>
    
    <link href="./css/body_bgc.css" media="screen and (max-width: 800px)" rel="stylesheet">
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Document</title>
    <style>

        @media (max-width: 800px) {
            body {
                background-color: orange;
            }
        }

        @media screen {

        }

    </style>
</head>
<body>

</body>
</html>

8.1、媒体类型（Media types）

在使用媒体查询时，你必须指定要使用的媒体类型。

媒体类型是可选的，并且会（隐式地）应用 all 类型。

常见的媒体类型值如下：

属性值	说明
all	适用于所有设备。
print	适用于在打印预览模式下在屏幕上查看的分页材料和文档。
screen	主要用于屏幕。
speech	主要用于语音合成器。

被废弃的媒体类型：

CSS2.1 和 Media Queries 3 定义了一些额外的媒体类型(tty, tv, projection, handheld, braille, embossed, 以及 aural)；
但是他们在Media Queries 4 中已经被废弃，并且不应该被使用；
aural类型被替换为具有相似效果的speech。

8.2、媒体特性（Media features）

媒体特性（Media features）描述了浏览器、输出设备，或是预览环境的具体特征；

通常会将媒体特性描述为一个表达式；
每条媒体特性表达式都必须用括号括起来；

8.3、逻辑操作符（logical operators）

媒体查询的表达式最终会获得一个Boolean值，也就是真（true）或者假（false）。

如果结果为真（true），那么就会生效；
如果结果为假（false），那么就不会生效；

如果有多个条件，我们可以通过逻辑操作符联合复杂的媒体查询：

and：and 操作符用于将多个媒体查询规则组合成单条媒体查询
not：not运算符用于否定媒体查询，如果不满足这个条件则返回true，否则返回false。
only：only运算符仅在整个查询匹配时才用于应用样式。
(逗号)：逗号用于将多个媒体查询合并为一个规则。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Document</title>
    <style>

        @media (min-width: 500px) and (max-width: 800px) {
            body {
                background-color: orange;
            }
        }

    </style>
</head>
<body>

</body>
</html>

8.4、根据宽度设置css设置样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Document</title>
    <style>
        /*
          320~375之间 font-size: 15px;
          375~414之间 font-size: 18px;
          414~480之间 font-size: 21px;
          大于480px font-size: 24px
        */
        /* @media (min-width: 320px) and (max-width: 375px) {
          .box { font-size: 15px; }
        }
        @media (min-width: 375px) and (max-width: 414px) {
          .box { font-size: 18px; }
        }
        @media (min-width: 414px) and (max-width: 480px) {
          .box { font-size: 21px; }
        }
        @media (min-width: 480px) {
          .box { font-size: 24px; }
        } */

        /* CSS层叠性 */
        @media (min-width: 320px) {
            .box {
                font-size: 15px;
            }
        }

        @media (min-width: 375px) {
            .box {
                font-size: 18px;
            }
        }

        @media (min-width: 414px) {
            .box {
                font-size: 21px;
            }
        }

        @media (min-width: 480px) {
            .box {
                font-size: 24px;
            }
        }

    </style>
</head>
<body>

    <div class="box">
        我是box
    </div>

</body>
</html>

9、CSS中的单位

前面编写的CSS中，我们经常会使用px来表示一个长度（大小），比如font-size设置为18px，width设置为100px。
px是一个长度（length）单位，事实上CSS中还有非常多的长度单位。

整体可以分成两类：

绝对长度单位（Absolute length units）；
相对长度单位（Relative length units）；

绝对单位：

它们与其他任何东西都没有关系，通常被认为总是相同的大小。
这些值中的大多数在用于打印时比用于屏幕输
惟一一个您经常使用的值，就是px(像素)。

相对长度单位

相对长度单位相对于其他一些东西；
比如父元素的字体大小，或者视图端口的大小；
使用相对单位的好处是，经过一些仔细的规划，您可以使文本或其他元素的大小与页面上的其他内容相对应；

单位	说明
em	在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width
ex	字符“x”的高度
ch	数字“0”的宽度
rem	根元素的字体大小
lh	元素的line-height
vw	视窗宽度的1%
vh	视窗高度的1%