江小鱼

# HTML(5) 和 CSS（3）语言核心

静态图片

# HTML 语义

  • 什么叫HTML

超文本标记语言（HyperText Markup Language）是一种用于创建网页的标准标记语言

静态图片

  • HTML4常用标签汇总：
基本文档：html、head、body...
基本标签：h1-h6、p、br、hr
文本格式化：strong、b、em、i、small、del、sub、sup...
链接：a、link
图片：img、map、area
区块：div、span
三大列表：ul li、 ol li、 dl dt dd
表格：table、caption、th、tr、td、thead、tbody、tfoot
框架：iframe
表单：form、input、select、option、textarea、button、label
1
2
3
4
5
6
7
8
9
10
  • HTML5常用标签汇总：
图形新元素：canvas
新多媒体元素：audio、video、source、embed、track
新表单元素：deatalist、keygen、output
新的语义和结构元素：article、aside、bdi、command、details、dialog、summary、
                figrue、figcaption、footer、header、mark、meter、nav、
                progress、ruby、rt、rp、section、time、wbr
1
2
3
4
5
6
  • 什么叫语义化

指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化），便于开发者阅读，维护 和写出更优雅代码的同时，让浏览器爬虫和辅助技术更好的解析。

说人话就是：用正确的标签做正确的事情。

静态图片

  • 语义化的好处：

利于SEO优化（也就是搜索引擎的抓取，搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重）

在样式丢失的时候，可以比较好的呈现结构

更好的支持各种终端，比如无障碍阅读，有声小说等

利于团队维护和开发，W3C定义了一个标准，团队中都遵循这个标准，那么代码的差异就会缩小，在开发和维护的时候可以提高效率。

  • 布局规范：

table 是用来放表格数据的，不是用来布局的

使用 margin 的规则：通常情况下， margin 都是天价在元素的 bottom 和 right, 有时候也可以是 top 或 left。 无论如何，尽量避免同时在 bottom 和 top, 或者 right 和 left 添加 margin, 用 last-of-type 选择器来去掉最后一个子元素的 margin;

# HTML 扩展

静态图片

  • DOCTYPE文档声明：
  • 声明帮助浏览器正确地显示网页；
  • 定义这个文档的类型，浏览器会先识别这句话，会按照这个类型去解析这个文档；
  • 一般高版本兼容低版本，所以在工作中我们默认写高版本就可以了(html5文档声明)；
  • 文档声明不区分大小写；
  • 文档声明必须放在第一行(因为浏览器是从上到下解析的)；
  • 必须写文档声明，如果不写就会发生怪异事件；
  • 文档声明不是一个标签，它只是一个声明；
HTML5
<!DOCTYPE html>
1
2
  • meta 元信息 （高能预警）

meta标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。 它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

// 申明编码
<meta charset="UTF-8" />

// 页面关键词
<meta name="keywords" content="" />

//页面描述
<meta name="description" content=" " />

// 视口-移动设备
<meta name="viewport" content="width=device-width, initial-scale=1" />

// 定义网页作者
<meta name="author" content="author name" />

// 优先使用IE最新版本和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

// 页面重定向和刷新
<meta http-equiv="refresh" content="0;url=" />

// 禁止浏览器从本地计算机的缓存中访问页面内容：这样设定，访问者将无法脱机浏览
<meta http-equiv="Pragma" content="no-cache">

// 转码申明：用百度打开网页可能会对其进行转码（比如贴广告），避免转码可添加如下meta。
<meta http-equiv="Cache-Control" content="no-siteapp" />

// 启用 WebApp 全屏模式
<meta name="apple-mobile-web-app-capable" content="yes" />

// 隐藏状态栏/设置状态栏颜色：只有在开启WebApp全屏模式时才生效。
// content 的值为 default | black | black-translucent
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>

// 添加到主屏后的标题
<meta name="apple-mobile-web-app-title" content="标题" />

// 忽略数字自动识别为电话号码
<meta content="telephone=no" name="format-detection" />

// 忽略识别邮箱
<meta content="email=no" name="format-detection" />

// uc强制竖屏
<meta name="screen-orientation" content="portrait" />

// UC强制全屏
<meta name="full-screen" content="yes">

// UC应用模式
<meta name="browsermode" content="application">

// QQ强制竖屏
<meta name="x5-orientation" content="portrait">

// QQ强制全屏
<meta name="x5-fullscreen" content="true">

// QQ应用模式
<meta name="x5-page-mode" content="app">

// 浏览器内核控制
<meta name="renderer" content="webkit|ie-comp|ie-stand">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

看完上面大概是这个表情：

静态图片

  • SVG 可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用来定义用于网络的基于矢量的图形；
  • SVG 使用 XML 格式定义图形；
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失；
  • SVG 是万维网联盟的标准；
  • SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体；
  • 与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
  • SVG 图像可通过文本编辑器来创建和修改
  • SVG 图像可被搜索、索引、脚本化或压缩
  • SVG 是可伸缩的
  • SVG 图像可在任何的分辨率下被高质量地打印
  • SVG 可在图像质量不下降的情况下被放大
<svg height="210" width="300">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:red;stroke:black;stroke-width:5;fill-rule:evenodd;" />
</svg>
1
2
3
4

# CSS绘制属性

  • linear-gradient() 线性渐变

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片

background: linear-gradient(color-stop1, color-stop2, …)
background: linear-gradient(#e66465, #9198e5);
background: linear-gradient(direction, color-stop1, color-stop2, …)
/* 从右下到左上、从蓝色渐变到红色 */
background: linear-gradient(to left top, blue, red);
background: linear-gradient(angle, color-stop1, color-stop2);
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
background: linear-gradient(0deg, blue, green 40%, red);
1
2
3
4
5
6
7
8

颜色A - B渐变

width: 200px;
height: 200px;
margin: 20px;
background: linear-gradient(red, green);
1
2
3
4

静态图片

颜色A - B渐变 带一个方位

width: 200px;
height: 200px;
margin: 20px;
background: linear-gradient(to left, red, green);
1
2
3
4

静态图片

颜色A - B渐变 带多个方位

width: 200px;
height: 200px;
margin: 20px;
background: linear-gradient(to left top, red, green, blue);
1
2
3
4

静态图片

颜色A - B渐变 带角度

width: 200px;
height: 200px;
margin: 20px;
background: linear-gradient(45deg, red, green);
1
2
3
4

静态图片

  • radial-gradient() 函数创建了一个图片，其由一个从原点辐射开的在两个或者多个颜色之前的渐变组成

径向渐变：默认的形状是椭圆，至少得有两个颜色值。 形状：ellipse 椭圆（默认），circle（圆）

（用的比较少，如果很复杂的话基本就是直接上图。）

background: radial-gradient(#e66465, #9198e5);
background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);
background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%);
background: radial-gradient(ellipse at top, #e66465, transparent),
            radial-gradient(ellipse at bottom, #4d9f0c, transparent);
1
2
3
4
5
  • background-size 背景尺寸
  • 检索或设置对象的背景图像的尺寸大小。
  • 该属性提供2个参数值(特性值cover和contain除外)。
  • 如果提供两个，第一个用于定义背景图像的宽度，第二个用于定义背景图像的高度。
  • 如果只提供一个，该值将用于定义背景图像的宽度，第2个值默认为auto，即高度为auto，此时背景图以提供的宽度作为参照来进行等比缩放。

取值情况：

  • length：用长度值指定背景图像大小。不允许负值。
  • percentage：用百分比指定背景图像大小。不允许负值。
  • auto： 背景图像的真实大小。
  • cover： 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。（宽高都会缩放，覆盖容器）
  • contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
  • background-origin

设置或检索对象的背景图像计算 background-position 时的参考原点(位置)

取值情况：

  • border-box： 从border区域（含border）开始显示背景图像
  • content-box： 从content区域开始显示背景图像
  • padding-box： 从padding区域（含padding）开始显示背景图像

border-box

静态图片

content-box

静态图片

padding-box

静态图片

  • background-clip 指定对象的背景图像向外裁剪的区域

取值情况：

  • padding-box： 从padding区域（不含padding）开始向外裁剪背景。
  • border-box： 从border区域（不含border）开始向外裁剪背景。
  • content-box： 从content区域开始向外裁剪背景。
  • text： 从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果
  • border-radius 圆角
  • 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。 顺时针转
  • 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
  • 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
  • 一个值： 四个圆角值相同

其实老是记不住，3个和2个的情况，，😔
助记：第一个值永远是左上角，第二个永远是右上角 其他的就是取对角

左上角 = 右下角 右上角 = 左下角

静态图片

  • box-shadow 盒子阴影
  • 营造层次感(立体感)
  • 充当没有宽度的边框
  • 特殊效果

取值情况：

  • none： 无阴影
  • length ①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
  • length ②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
  • length ③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
  • length ④： 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
  • color： 设置对象的阴影的颜色
  • inset： 设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
 X轴偏移量 必须写 可以为 0  水平方向 正直越大 右  负值越大  左
 Y轴偏移量 必须写 可以为 0  水平方向 正直越大 右  负值越大  左
1
2
3

静态图片

  • text-shadow 文字阴影

设置或检索对象中文本的文字是否有阴影及模糊效果

  • none： 无阴影
  • length ①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
  • length ②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
  • length ③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
  • color ： 设置对象的阴影的颜色
  • clip-path 路径裁剪

属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏

静态图片

/* 圆形circle（半径at圆心坐标） */
.circle{
  width: 100px;
  height: 100px;
  background: #0cc;
  -webkit-clip-path: circle(50% at 50% 50%);
}
1
2
3
4
5
6
7

静态图片

/* 椭圆形ellipse（长、短轴半径at圆心坐标） */
.ellipse{
  width: 100px;
  height: 100px;
  background:#aaa;
  -webkit-clip-path: ellipse(25% 50% at 50% 50%);
}
1
2
3
4
5
6
7

静态图片

/* 内置矩形inset (上右下左的边距round上右下左圆角) */
.inset{
  width: 100px;
  height: 100px;
  background: #99f;
  -webkit-clip-path: inset(10px 20px 30px 10px round 20px 5px 50px 0);
}
1
2
3
4
5
6
7

静态图片

/* 正三角形 */
.triangle{
  width: 100px;
  height: 87px;
  background: #c00;
  -webkit-clip-path: polygon(0% 100%, 50%  0%, 100% 100%);
}
1
2
3
4
5
6
7

静态图片

/* 正方形 */
.square{
  width: 100px;
  height: 100px;
  background: #069;
  -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
}
1
2
3
4
5
6
7

# CSS机制At-rule

At-rule 这是个什么鬼

/* 常规规则 */
@charset
@import
@namespace

/* 嵌套规则 */
@document
@font-face 😕 😒
@keyframes  😆 😃
@media
@page
@supports
1
2
3
4
5
6
7
8
9
10
11
12
@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}
1
2
3
4
5
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
1
2
3
4
5
6
7
8

# CSS 变量 var 的使用

CSS变量的语法和用法

  • CSS中原生的变量定义语法是：变量名前面要加两根连词线 --*
  • 变量使用语法是：var()函数用于读取变量 var(--*) 其中 *表示我们的变量名称
  • var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值； 第二个参数不处理内部的逗号或空格，都视作参数的一部分
  • 变量名大小写敏感，--header-color和 --Header-Color是两个不同变量
  • 在CSS变量中，不能包含$，[，^，(，%等字符，普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合，但是可以是中文，日文或者韩文
body {
  --深蓝: #369;
  background-color: var(--深蓝);
}

:root {
  --1: #369;
}
body {
  background-color: var(--1);
}
1
2
3
4
5
6
7
8
9
10
11
/* 全局变量 */
:root {
  --color: blue;
}
.box {
  color: var(--color)
}

/* 局部变量 */
.box {
  /* 定义 */
  --color: red;
  /* 调用 */
  color: var(--color);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* var() 函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。 */
/* 第二个参数不处理内部的逗号或空格，都视作参数的一部分 */
color: var(--foo, #7F583F);
var(--font-stack, "Roboto", "Helvetica");
var(--pad, 10px 15px 20px);
1
2
3
4
5
  • CSS变量的拼接
  • 如果变量值是一个字符串，可以与其他字符串拼接
  • 如果变量值是数值，不能与数值单位直接连用
  • 如果变量值带有单位，就不能写成字符串
/* 字符串 */
--bar: 'hello';
--foo: var(--bar)' world';

/* 变量值是数值 */
foo {
  --gap: 20;
  margin-top: var(--gap)px;  /* 无效 */  
}

/* 上面代码中，数值与单位直接写在一起，这是无效的。必须使用calc() 函数，将它们连接， */
foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);
}

/* 变量值带有单位 */
.foo {
  --foo: '20px';
  font-size: var(--foo);  /* 无效 */
}

.foo {
  --foo: 20px;
  font-size: var(--foo);  /* 有效 */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
  • CSS变量的兼容性处理

对于不支持 CSS 变量的浏览器，可以采用下面的写法

/* 用属性值得无效声明 */
a {
  color: #7F583F;
  color: var(--primary);
}

/* 也可以使用@support命令进行检测 */
@supports ( (--a: 0)) {
  /* supported */
}
@supports ( not (--a: 0)) {
  /* not supported */
}
1
2
3
4
5
6
7
8
9
10
11
12
13

静态图片

结束！！！

← CSS选择器世界 →