标签：css3 ... 元素 笔记 width html5 设置 选择器 属性
网页简介
一个页面包括结构、表现、行为三个部分。
结构：HTML用于描述页面的结构。
表现：CSS用于控制页面中元素的样式。
行为：JavaScript用于响应用户操作。
第一部分 HTML 5（Hypertext Markup Language）超文本标记语言
1.HTML5新标签
标签 描述
<article> 定义一个文章区域
<aside> 定义页面的侧边栏内容
<audio> 定义音频内容
<bdi> 允许您设置一段文本，使其脱离其父元素的文本方向设置。
<canvas> 定义图形，比如图表和其他图像,标签只是图形容器，您必须使用脚本来绘制图形
<command> 定义命令按钮，比如单选按钮、复选框或按钮
<datalist> 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<details> 用于描述文档或文档某个部分的细节
<dialog> 定义对话框，比如提示框
<embed> 定义嵌入的内容，比如插件。
<figcaption> 定义<figure> 元素的标题
<figure> 规定独立的流内容（图像、图表、照片、代码等等）。
<footer> 定义 section 或 document 的页脚。
<header> 定义了文档的头部区域
<keygen> 规定用于表单的密钥对生成器字段。
<mark> 定义带有记号的文本。请在需要突出显示文本时使用 <em> 标签。
<meter> 定义度量衡。仅用于已知最大和最小值的度量。
<nav> 定义导航链接的部分
<output> 定义不同类型的输出，比如脚本的输出。
<progress> 定义运行中的进度（进程）。
<rp> <rp>标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。
<rt> <rt>标签定义字符（中文注音或字符）的解释或发音。
<ruby> <ruby> 标签定义 ruby 注释（中文注音或字符）。
<section> <section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<source> <source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
<summary> <summary> 标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。
<time> 定义日期或时间，或者两者。
<track> <track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。
<video> <video> 标签定义视频，比如电影片段或其他视频流。
<wbr> 规定在文本中的何处适合添加换行符。
2.网页结构
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title></title>
</head>
<body>
<h1></h1>
</body>
</html>
3.实体语法
&实体的名字;
空格 ' '
> 大于号 '>'
< 小于号 '<'
© 版权符号 '©'
实体参考手册：https://www.w3cschool.cn/htmltags/html-symbols.html
4.meta
主要用于设置网页中的一些元数据，元数据不是给用户看的
charset 指定网页的字符集
name 指定的数据的名称
content 指定的数据的内容
keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用','隔开
<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东">
description 用于指定网站的描述，会显示在搜索引擎的搜索结构中
<meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。">
viewport 讲述meta视口标签和媒体查询相关的内容。
示例：
<meta name="viewport" content="width=device-width, initial-scale=1">
@media screen and (max-width:480px) {
// some style
}
实例：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
可用属性：
width：device-width适用于大多数情况。
initial-scale：一般设为1，为了兼容应同时设置width=device-width。
minimum-scale：最小缩放倍数
maximum-scale：最大缩放倍数
user-scalable：禁止缩放
http-equiv 顾名思义，类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。
<meta http-equiv="参数" content="参数变量值">
主要有以下几种参数：
content-Type(显示字符集的设定)
说明：设定页面使用的字符集。
用法：<meta http-equiv="content-Type" content="text/html; charset=utf-8">
expires
说明：能够用于设定网页的到期时间。一旦网页过时，必须到服务器上从新传输。
用法：＜meta http-equiv="expires" content="Fri, 12 Jan 2001 18:18:18 GMT"＞
注意：必须使用GMT的时间格式。
refresh
说明：自动刷新并指向新页面。
用法：<meta http-equiv="refresh" content="2;URL=http://www.chinayancheng.net">
注意：其中的2是指停留2秒钟后自动刷新到URL网址。
set-cookie
说明：浏览器访问某个页面时会将它存在缓存中，下次再次访问时就可从缓存中读取，以提升速度。但当你愿访问者每次都刷新你广告的图标，或每
次都刷新你的 计数器，就要禁用缓存了。一般HTML文件没有必要禁用缓存，对于ASP等页面，就可使用禁用缓存，由于每次看到的页面都是
在服务器动态生成的，缓存就 失去意义。若是网页过时，那么存盘的cookie将被删除。
用法：<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT； path=/">
注意：必须使用GMT的时间格式。
5.语义化标签
标题标签：h1~h6 一共有六级标题，重要性递减，一般情况下用h1~h3，h4~h6很少用，<h1></h1>
p标签：表示一个段落，<p></p>
hgroup标签：用来为标题分组，可以将一组相关的标题放在同一个group标签中，<hgroup></hgroup>
blockquote标签：表示一个长引用，<blockquote></blockquote>
em标签：用于表示语言语调的一个加重，<em>这里会变成斜体</em>
strong标签：标签强调一个重要的内容，<strong>这里是加粗字体</strong>
q标签：表示一个短引用，<q>它会加引号</q>
6.块和行内元素
块元素：在页面中独占一行的元素<black element>，在网页中一般通过块元素对页面进行布局
h1~h6、p、hgroup、blockquote、div...
行内元素：在页面中不会独占一行的元素<inline element>，主要用来包裹文字
em、strong、q、span、label、a...
一般情况下在块元素中放行内元素，而不在行内元素中方块元素
-块元素中基本上什么都能放
-p元素中不能方任何块元素
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
比如：
标签写在可根元素外部
p元素中嵌套了块元素
根元素中出现了head和body以外的子元素
...
7.结构化语义标签（布局标签）
header 表示网页的头部
main 表示网页的主体部分
footer 表示网页的底部
nav 表示网页中的导航
aside 和主体相关的其他内容（侧边栏）
article 表示一个独立的文章
section 表示一个独立的区块，上边的标签都不能表示时使用section
div 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素
span 行内元素，没有任何语义，一般用于在网页中选中文字
8.列表(list)
有序列表
<ol>
<li></li>
<li></li>
<li></li>
</ol>
无序列表
<ul>
<li></li>
<li></li>
<li></li>
</ul>
定义列表：使用dl标签来创建一个定义列表，使用dt标签来表示定义的内容，使用dd标签来对内容进行解释说明
<dl>
<dt>名词1</dt>
<dd>名词1的定义</dd>
<dt>名词2</dt>
<dd>名词2的定义</dd>
<dd>名词2的定义</dd>
<dd>名词2的定义</dd>
</dl>
列表之间可以相互嵌套
9.超链接
可以让我们从一个页面跳转到另一个页面
使用a标签来定义超链接=
在a标签中可以放除它自身以外的任何元素
属性：
href 指定跳转的目标路径<a href='路径或链接'></a>
-值可以是一个外部网站的地址
-也可以是一个内部页面的地址
target 用来指定超链接打开的位置
可选值：
_self 默认值 在当前页面打开超链接
_blank 在一个新的页面中打开超链接
相对路径：
./ 表示当前文件所在的目录
../ 表示当前文件所在目录的上一级目录
没有写./和../时 默认会在路径前面添加一个./
回到顶部功能
<a href="#">回到顶部</a>
跳转到页面的指定位置——利用id属性
<a href="#id">回到顶部</a>
可阻止超链接的默认跳转事件
<a href="javascript:;">点我</a>
10.图片标签（img 自结束标签）
是一个替换元素，介于块和行内元素之间，具有两种元素的特点
src 指定的是图片的路径
alt 图片的描述，在图片无法加载时显示，搜索引擎会根据alt中的内容来识别图片，没有alt的话就不会被搜索引擎所收录
width 指定图片的宽度 单位是像素px
height 图片的高度
宽高中如果只设置了一个，则另一个会等比例缩放
<img src="图片路径" > 或 <img src="图片路径" />
图片的格式：
jpeg(jpg)
-支持的颜色比较多，不支持透明效果和动图
-一般用来显示照片
gif
-支持的颜色较少，支持简单透明和动图
-适合显示颜色单一的图片和动图
png
-支持的颜色丰富，支持复杂透明，不支持动图
-适合显示颜色丰富，复杂透明图片（专为网页而生）
webp
-Google新推出的专门用来表示网页中的图片格式
-具备上述三种格式的所有优点，而且文件还特别的小
-缺点：兼容性不好
base64
-将图片使用base64进行编码转换为字符
-一般都是一些需要和网页一起加载的图片才会使用base64
11.内联框架（iframe）
用于向当前页面中引入一个其他页面
src用于指定要引入的页面的路径
frameborder 用于指定内联框架的边框 0表示没有边框，其他表示有边框
同样可以设置width和height，宽高互不影响
<iframe src="https://www.taobao.com" width="600" frameborder="0"></iframe>
12.html标签的属性（attribute）
html预定义属性
input 的 checked属性一旦添加，无论是什么，都代表选中，不选中的唯一方法是去掉checked属性
其他的可以不给值的属性也类似（disabled、selected...）
每一个预定义的attribute都会有一个property与之对应
html自定义属性
自定义的attribute没有与之对应的property
自定义的 data-属性 被统一放在了dataset中
html
<div data-myAttribute="111">...</div>
js
element.dataset.myAttribute = "222"
property：js原生对象的直接属性，如let p = {name:'xxx'}
布尔值属性：property的值是布尔值的属性
只有没有设置过property的时候再从无添加attribute的时候才会影响property的值使之变为true，
一旦property受到影响之后（哪怕值没变），无论attribute发生什么变化都不会影响到property的值；
property的值改变并不会影响attribute的值。
非布尔值属性：property的值不是布尔值的属性
property和attribute是同步改变的，即改变任何一个都会影响另一个，但是它们始终相等
element.setAttribute("checked","checked1") //操作标签（html中的）的属性（attribute）
element.checked = "checked2" //操作元素节点（js中的）的属性（property）
所以操作布尔值属性一般用prop('checked',true)方法
操作非布尔值属性一般用attr('title','test')方法
h5的新属性和方法
element.classList.add('c1')
element.classList.remove('c2')
element.classList.toggle('c3')
classList是一个数组，保存了所有的类名，可以通过其上的方法来添加、删除或者切换类
contenteditable的属性
<div contenteditable="true">...</div>
设置标签中的内容可编辑，只有在设置为true的时候才生效
13.canvas
canvas渲染极快有别于html渲染，不会出现代码覆盖后延迟渲染的问题，写canvas代码一定要具有同步思想。
(1)什么是canvas？
<canvas></canvas> 是HTML 5新增的元素，可用于通过使用JavaScript中的脚本来绘制图形、创建动画。
canvas标签必须成对出现。
(2)替换内容
canvas很容易定义一些替换内容。由于ie8及以下不支持canvas，
但在这些浏览器上你应该要给用户展示些替换内容
<canvas>
<span>当浏览器不支持canvas时，显示这些替换内容</span>
</canvas>
(3)canvas标签的两个属性
canvas标签只有两个属性：width和height，默认值分别为300px和150px。
html属性设置width和height时，只影响画布本身而不影响画布内容
css属性设置width和height时，不但会影响画布本身还会使画布中的内容等比例缩放（缩放参照画布html属性width和height）
(4)渲染上下文（画笔）
canvas元素只是创建了一个固定大小的画布，要想在它上面绘制内容，需要找到它的渲染上下文，
而canvas的getContext()方法可以获得canvas的渲染上下文
getContext()只有一个参数，即上下文的格式（2d或者3d)，获取画笔的示例：
//获取画布
let canvas = document.getElementsByTagName('canvas')
//判断是否有画笔（检查支持性）
if(!canvas.getContext) return//没有画笔
//获取画笔
let ctx = canvas.getContext('2d')
(5)canvas绘制矩形
canvas只支持一种元素的图形绘制：矩形。所有其他图形的绘制都至少需要生成一条路径
canvas提供了三种方法绘制矩形：
绘制一个填充矩形（填充色默认为黑色）：画笔.fillRect(x, y, width, height)
绘制一个矩形边框（默认边框为：1px的实心黑色）：画笔.strokeRect(x, y, width, height)
按理渲染的边框应该是1px，但是canvas在渲染边框时，边框的宽度是平均分在偏移位置的两侧。
所以ctx.strokeRect(40, 40, 30, 30)的边框位置渲染在39.5-40.5，但是浏览器不能显示0.5px，
所以实际上是 39-41，即2px边框；而40.5则会渲染在40-41，即1px边框。
清除指定矩形区域，让清除部分完全透明：画笔.clearRect(x, y, width, height)
x和y指定了在canvas画布上绘制的矩形的左上角（相对于原点）的坐标
width和height设置矩形的尺寸。（存在边框的话，边框会在width和height上占据一个边框宽度）
(6)canvas画笔的样式
fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
画笔.fillStyle = color|gradient|pattern;
color 指示绘图笔触颜色的 CSS 颜色值。默认值是 #000000。
gradient 用于填充绘图的渐变对象（线性或放射性）
pattern 用于创建 pattern 笔触的 pattern 对象
number 数值
strokeStyle 设置或返回用于笔触的颜色、渐变或模式
画笔.strokeStyle = color|gradient|pattern;
shadowColor 设置或返回用于阴影的颜色 （参考css的box-shadow）
画笔.shadowColor=color;
shadowBlur 设置或返回用于阴影的模糊级别 （参考css的box-shadow）
画笔.shadowBlur=number;
shadowOffsetX 设置或返回阴影距形状的水平距离 （参考css的box-shadow）
画笔.shadowOffsetX=number;
shadowOffsetY 设置或返回阴影距形状的垂直距离 （参考css的box-shadow）
画笔.shadowOffsetY=number;
lineCap 设置或返回线条的结束端点样式
画笔.lineCap="butt|round|square";
butt 默认。向线条的每个末端添加平直的边缘。
round 向线条的每个末端添加圆形线帽。
square 向线条的每个末端添加正方形线帽。
ps："round" 和 "square" 会使线条略微变长。
lineJoin 设置或返回两条线相交时，所创建的拐角类型
画笔.lineJoin="bevel|round|miter";
bevel 创建斜角。
round 创建圆角。
miter 默认。创建尖角。
lineWidth 设置或返回当前的线条宽度
画笔.lineWidth=number;
number 数值
miterLimit 设置或返回最大斜接长度，
画笔.miterLimit=number;
ps：只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效。
斜接长度指的是在两条线交汇处内角和外角之间的距离。
斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示。
save
用于保存canvas全部状态的方法
保存到栈中的绘制状态有下面部分：
当前状态变换矩阵
当前的剪切区域
当前的虚线列表
以下属性的当前值：
strokeStyle
fillStyle
lineWidth
lineCap
lineJoin...
restore
用于恢复canvas当最近状态的方法，如果没有保存状态，则此方法不做任何改变
(7)绘制路径
创建路径起始点，然后使用画图命令去画出路径，之后把路径封闭，而一旦路径生成，就能通过描边或填充路径区域来渲染图形。
绘制三角形
beginPath()
新建一条路径，生成之后，图形绘制命令被指向到路径上准备生成路径。
生成路径的第一步叫做beginPath()。本质上，路径是由很多子路径构成，这些子路径都是在同一个列表中，
所有的子路径（线、弧等等）构成图形，而每次这个方法调用后，列表清空重置，然后我们就可以重新绘制新的图形。
moveTo(x, y)
将笔触移动到指定的坐标上
当canvas初始化或者beginPath()调用后，通常会使用moveTo函数设置起点
lineTo(x, y)
生成一条从当前位置到指定位置的路径（看不见）
closePath()
闭合路径（lineTo原点）
闭合路径之后图形绘制命令又重新指向上下文中
stroke()
通过线条来绘制路径图形的轮廓
不会自动调用closePath()
fill()
通过填充路径的内容区域生成实心图形
不闭合路径的效果和闭合路径的效果相同
绘制矩形
rect(x, y, width, height)
生成从x,y开始，宽高为width和height的矩形的路径
配合stroke可以达到strokeRect的效果
配合fill可以达到fillRect的效果
该方法执行的时候，moveTo方法会自动设置为0,0
即自动重置笔触坐标为默认值
绘制图形的基本模板
//绘制第一个图形
画笔.save()
...样式
画笔.beginPath()
...绘制路径和图形
画笔.restore()
//绘制第二个图形
画笔.save()
...样式
画笔.beginPath()
...绘制路径和图形
画笔.restore()
路径容器
每次生成路径时，都会登记在其中
样式容器
每次设置样式时，都会登记其中
样式栈
调用save时，将样式容器中的状态压入样式栈
调用restore时，将样式栈的栈顶状态弹出到样式容器中，进行覆盖
(8)绘制曲线
角度与弧度的js表达式：radians = (Math.PI/180)*degrees
canvas绘制圆形
arc(x, y, radius, startAngle, endAngle, anticlockwise)
绘制一个以(x,y)为圆心以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，
按照anticlockwise给定的方向（默认为顺时针）来生成。
true：逆时针
false：顺时针
startAngle和endAngle以x轴顺时针为基准的角度
arcTo(x1, y1, x2, y2, radius)
根据给定的控制点和半径画一段圆弧（将一个给定的半径为radius的圆移入起始点和两个控制点连线所成的夹角中所截得的圆弧）
肯定会从(x1, y1)，但不一定经过(x2, y2)，(x2, y2) 只是控制一个方向
起始点为当前所在点
二次贝塞尔曲线
quadraticCurveTo(cp1x, cp1y, x, y)
绘制二次贝塞尔曲线，(cp1x,cp1y)为一个控制点，(x,y)为结束点
起始点为moveTo时指定的点（当前点）
三次贝塞尔曲线
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
绘制二次贝塞尔曲线，(cp1x,cp1y)为控制点一，(cp2x,cp2y)为控制点二，(x,y)为结束点
起始点为moveTo时指定的点（当前点）
(9)canvas中的变换
translate(x, y)
用来移动canvas的原点到(x, y)
在canvas中translate是累加的
rotate(angle)
顺时针旋转angle
angle：旋转的角度，以弧度为单位；
旋转的中心点始终是canvas的原点
在canvas中rotate是累加的
scale(x, y)
在横轴和纵轴上分别缩放x，y倍；
x，y为缩放因子，必须为正值
>1放大，<1缩小，=1不变
一般用来增减图形在canvas中的向上数目，对形状、位图进行放大或缩小
在canvas中scale是累积的
放大缩小原理：
放大（缩小）使画布的css像素个数变少（多），单个css像素所占据的实际物理尺寸变多（少）
(10)canvas中使用图片
canvas操作图片时，必须等图片加载完成才能操作。
drawImage(image, x, y, width, height)
其中image是 image或者canvas对象，x和y是其在目标canvas中的起始坐标。
width和height用来控制当canvas划画入时应该缩放的大小
createPattern(image,repetition)
在指定的方向上重复指定的元素
image 规定要使用的image或者canvas对象。
repetition可选值：
repeat
repeat-x
repeat-y
no-repeat
(12)canvas中使用渐变
createLinearGradient(x0, y0, x1, y1)
创建线性渐变（用在画布内容上）对象（上面的gradient）
(x0,y0)渐变开始点的坐标
(x1,y1)渐变结束点的坐标
ps：请使用该对象作为 strokeStyle 或 fillStyle 属性的值。
请使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。
createRadialGradient(x0, y0, r0, x1, y1, r1)
创建放射状/环形的渐变（用在画布内容上）
(x0,y0)渐变的开始圆心的坐标
r0 开始圆的半径
(x1,y1)渐变的结束圆心的坐标
r1 结束圆的半径
在两个圆之间进行渐变
ps：请使用该对象作为 strokeStyle 或 fillStyle 属性的值。
请使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。
效果可以参考css该类型的渐变
gradient.addColorStop(position,color)
规定渐变对象中的颜色和停止位置
position 介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
color 在结束位置显示的 CSS 颜色值
(13)绘制文本
canvas提供了两种方法来渲染文本
fillText(text, x, y)
在(x,y)处填充文本text
strokeText(text, x, y)
在(x,y)处绘制文本text边框
文本样式
font = value
语法与css相同
默认字体是10px sans-serif
textAlign = value
基线是文本绘制的起始点的x坐标
文本对齐选项，可选的值包括：
left 默认值，文本左对齐，文本左边靠着x右边
right 文本右对齐，文本右边靠着x左边
center 居中对齐，一半在x左边，一半在x右边
textBaseline = value
描述绘制文本时，当前文本的基线，可选值：
top 文本基线在文本块的顶部
middle 文本基线在文本块的中间
bottom 文本基线在文本块的底部
measureText(text)
返回一个TextMetrics对象，包含text在当前canvas中的尺寸信息（例如文本的宽度）
(14)canvas的像素操作
getImageData(sx, sy, sw, sh)
获得一个起始点为(sx, sy)，宽高为sw和sh的区域的包含画布场景像素数据的ImageData对象，它代表了画布区域的对象数据。
ImageData对象中存储着canvas对象的真实像素数据，它包含以下几个只读属性：
width：图片宽度，单位是像素
height：图片高度，单位是像素
data:Uint8ClampedArray类型的一维数组，包含着RGBA格式的整型数据，范围在0至255之间（包括255）
R: 0 --> 255（黑色到白色）
G: 0 --> 255（黑色到白色）
B: 0 --> 255（黑色到白色）
A: 0 --> 255（透明到不透明）
putImageData(ImageData, dx, dy)
把ImageData中存储的真实像素数据写入到场景中，起始点为(dx,dy)
createImageData(width,height)
创建一个宽高为width和height的ImageData对象
默认创建出来的是透明的
(15)canvas合成
globalAlpha = value
设置或返回canvas中所有图形的透明度（全局透明度）
有效值范围是0.0（透明）到1.0（不透明）
默认为1.0
source:新的图像（源）
destination:已经绘制过的图形（目标）
globalCompositeOperation = value 可选值：
source-over 默认值，源在上面，新的图像层级比较高
source-in 只留下源与目标的重叠部分（源的那一部分）
source-out 只留下源超过目标的部分
source-atop 砍掉源溢出的部分
destination-over 目标在上面，旧的图形层级比较高
destination-in 只留下源与目标重叠的部分（目标的那一部分）
destination-out 只留下目标超过源的部分
destination-atop 砍掉目标溢出的部分
(16)补充
canvas.toDataURL() 将画布导出为图片导出图片
返回Base64编码
画笔.isPointInPath(x,y)
判断当前路径中是否包含检测点(x,y)
此方法只作用于最新画出的canvas图像
14.音、视频
(1)audio和video标签的html属性（attribute）
src 指定音/视频文件路径
controls 是否允许显示音/视频控件，没有值，默认是不显示音/视频控件
autoplay 音/视频是否自动播放，没有值，默认是不会自动播放，大多数浏览器都不会对音乐/视频进行自动播放
loop 音/视频是否循环播放，没有值，默认不会循环播放
示例（显示控件，自动播放，循环播放）：<audio src="音频文件的路径" controls autoplay loop></audio>
muted 视频是否静音
preload 该属性旨在告诉浏览器作者认为达到最佳用户体验的方式是什么，可选值：
none 提示作者认为用户不需要查看该视频，服务器也想要最小化访问流量（即提示浏览器该视频不需要缓存）
metadata 提示尽管作者认为用户不需要查看该视频，不过抓取元数据（比如：长度）还是很合理的，默认值
auto 用户需要这个视频优先加载，即如需要的话，可以下载整个视频，即使用户并不一定会用它
空字符串 代指auto值
1)audio标签的另一种写法
<audio controls>
<source src="路径/文件名.mp3">
<source src="路径/文件名.ogg"><!--上面的不支持时显示这个-->
<embed src="路径/文件名.mp3" type="audio/mp3" width="300" height="100" ><!--上面两都不支持时显示这个-->
对不起，您的浏览器不支持播放音频！<a href="路径/文件名.mp3">点击这里下载</a>
</audio>
2)embed 支持老版本，默认会自动播放
<embed src="音频文件路径" type="播放的文件的类型 audio/mp3 或者 video/mp4 即：大类型（音频还是视频）/小类型（ogg还是mp3）" width="300" height="100" >
3)video标签
引入一个视频文件
使用方式和audio差不多
<video controls>
<source src="路径/文件名.webm">
<source src="路径/文件名.mp4"><!--上面的不支持时显示这个-->
<embed src="路径/文件名.mp4" type="video/mp4" width="300" height="100" ><!--上面两都不支持时显示这个-->
对不起，您的浏览器不支持播放视频！<a href="路径/文件名.mp4">点击这里下载</a>
</video>
video标签的独有属性（attribute）
poster 指定视频播放前的预览图片的url
width 视频控件的宽度
height 视频控件的高度
引入外部视频，如腾讯的视频
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=z0899qgewj7" allowFullScreen="true" width="1000" height="600"></iframe>
浏览器全屏显示元素的api
//W3C
requestFullscreen
//火狐
mozRequestFullScreen
//Chrome等
webkitRequestFullScreen
//IE
msRequestFullscreen
浏览器显示元素取消全屏的api
//W3C
exitFullscreen
//火狐
mozCancelFullScreen
//Chrome等
webkitCancelFullScreen
//IE
msExitFullscreen
使用方式都是： 要在全屏状态下显示的元素.requestFullscreen()
(2)audio和video标签的js属性（property）
currentTime 开始播放到现在所用的时间（可读写）
duration 媒体总时间（只读）
muted 是否静音（可读写，相比于volume优先级更高，但是不会影响volume的值）
volume 0.0-1.0的音量相对值（可读写）
paused 媒体是否暂停（只读）
ended 媒体是否播放完毕（只读）
error 媒体发生错误的时候，返回错误代码（只读）
currentSrc 以字符串形式返回媒体地址（只读）
video标签独有的属性（property）
poster 指定视频播放前的预览图片的url（读写）
width、height 设置视频的尺寸（读写）
videoWidth、videoHeight 视频的实际尺寸（只读）
(3)audio和video标签的js相关函数
play() 媒体播放
pause() 媒体暂停
load() 重新加载媒体 作用：通过source指定媒体文件时，在js中修改source的src后必须执行该函数重新加载媒体
(4)视频和画布相结合
//第一帧加载完成后
video.addEventListener('loadeddata',()=>{
//每个一段时间把视频帧绘制在画布上
setInterval(()=>{
ctx.drawImage(video,10,10,video.videoWidth/2,video.videoHeight/2)
})
})
//一些浏览器不能一上来就自动播放，需要放到进行交互才行
canvas.onclick = ()=> video.play()
15.状态标签
meter 用来显示已知范围的标量值或者分数值
value 必需。规定度量的当前值。
min 值域的最小边界值，如果设置了，它必须比最大值要小；如果没设置，默认为0
max 值域的上限边界值，如果设置了，它必须比最小值要大；如果没设置，默认为1
low 定义了低值区间的上限值，如果设置了，它必须比最小值要大，并且不能超过high和最大值。
high 规定被界定为高的值的范围。
optimum 规定度量的最优值。
form 规定 <meter> 元素所属的一个或多个表单。
progress 用来显示一项任务的完成进度
max 规定需要完成的值，默认为1
value 规定进程的当前值，没有该属性时进度条不会显示进度
16.列表标签、注释标签和标记标签
datalist 包含一组option元素，这些元素表示其表单控件的可选值，它的id必须要和input中的list一致
details 一个UI小部件，用户可以从其中减少附加信息，open属性来控制附加信息的显示与隐藏
summary 用作一个details标签的一个内容摘要
ruby
rt 展示文字注音或字符注释
mark 高亮显示其中的文字
17.表格
table 块元素，宽高默认被内容撑开
th 头部，字体会加粗
thead 头部，总是在表格的顶部
tbody 主体
tfoot 底部，总是在表格的底部
tr 行
td 单元格
colspan 设置占几个单元格宽度
rowspan 设置占几个单元格高度
18.表单验证反馈
validity对象，通过下面的valid可以查看验证是否通过
element.addEventListener('invalid',()=>{
console.log(validate)
})
validate的验证相关属性
valueMissing 输入值为空时返回true
typeMissing 控件值与预期类型不匹配返回true
patternMismatch 输入值不满足pattern正则返回true
tooLong 超过maxLength最大限制返回true
rangeUnderflow 验证的range最小值返回true
rangeOverflow 验证的range最大值返回true
stepMissing 验证range的当前值是否符合min、max及step的规则返回true
customError 不符合自定义验证返回true
element.setCustomValidity('请不要输入敏感词') //会阻止表单提交
第二部分 CSS(Cascading Style Sheets)层叠样式表
1.设置样式的三种方式（优先级依次降低）
内联样式（行内样式）：<p style="color:red;">文字</p>
嵌套样式：放在head内
<style>
p{//注1
color:red;
}
</style>
注1：此处为元素选择器，css选择器的优先级：
优先级0,1,0,0 id选择器(#id)
优先级0,0,1,0 >类选择器(.class) = 伪类选择器(:hover等) = 属性选择器[target[type=...]等]
优先级0,0,0,1 >元素选择器(p等) = 伪元素选择器(::after/::before/::selection等)
优先级0,0,0,0 >通配符选择器(*)
没有优先级 >继承的样式
外联样式：<link rel="stylesheet" href="外部css路径">
优先级：内联样式>嵌套样式>外联样式
同级别的选择器发生样式冲突时，后定义的会覆盖先定义的。
复合选择器中交集选择器的优先级等于使用的选择器的优先级之和。优先级相加不能跨阶级,即再多的优先级为0,0,1,0的选择器的优先级之和都小于优先级为0,1,0,0的选择器
并集选择器是单独计算的。
可以在某一个样式后边添加!important，则此样式会获取到最高优先级，甚至超过内联样式（开发中慎用）
2.伪类选择器
常用伪类：
ul > li:first-child
选择ul下所有子元素中的第一个子元素是li的元素
ul > li:last-child
选择ul下所有子元素中的最后一个子元素是li的元素
ul > li:nth-child(值)
值为n 表示选择ul下的第n个子元素为li的元素
值为2n或even表示选择ul的第偶数个子元素为li的元素
值为2n+1或odd表示选择ul的第奇数个子元素为li的元素
上述三个是根据所有的子元素进行选择
:first-of-type
:last-of-type
:nth-of-type(n)
是根据同类型的子元素进行选择
:not(selector) ul > li:not(:nth-of-type(3))选择ul中的li元素中除第三个li元素以外的元素
是选择除selector选择的元素以外的元素
由于隐私的原因，visited这个伪类只能修改链接的颜色
link和visited是超链接独有的，active和hover其他元素都可以用
所有 CSS 伪类
选择器 例子 例子描述
:first-child p:first-child 选择作为其父的首个子元素的每个 <p> 元素。
:first-of-type p:first-of-type 选择作为其父的首个 <p> 元素的每个 <p> 元素。
:last-child p:last-child 选择作为其父的最后一个子元素的每个 <p> 元素。
:last-of-type p:last-of-type 选择作为其父的最后一个 <p> 元素的每个 <p> 元素。
:nth-child(n) p:nth-child(2) 选择作为其父的第二个子元素的每个 <p> 元素。
:nth-of-type(n) p:nth-of-type(2) 选择作为其父的第二个 <p> 元素的每个 <p> 元素。
:nth-last-child(n) p:nth-last-child(2) 选择作为父的第二个子元素的每个<p>元素，从最后一个子元素计数。
:nth-last-of-type(n) p:nth-last-of-type(2) 选择作为父的第二个<p>元素的每个<p>元素，从最后一个子元素计数
:not(selector) :not(p) 选择每个非 <p> 元素的元素。
:link a:link 选择所有未被访问的链接。
:visited a:visited 选择所有已访问的链接。
:hover a:hover 选择鼠标悬停其上的链接。
:active a:active 选择活动的链接。
:checked input:checked 选择每个被选中的 <input> 元素。
:disabled input:disabled 选择每个被禁用的 <input> 元素。
:focus input:focus 选择获得焦点的 <input> 元素。
:enabled input:enabled 选择每个已启用的 <input> 元素。
:in-range input:in-range 选择具有指定范围内的值的 <input> 元素。
:invalid input:invalid 选择所有具有无效值的 <input> 元素。
:optional input:optional 选择不带 "required" 属性的 <input> 元素。
:out-of-range input:out-of-range 选择值在指定范围之外的 <input> 元素。
:read-only input:read-only 选择指定了 "readonly" 属性的 <input> 元素。
:read-write input:read-write 选择不带 "readonly" 属性的 <input> 元素。
:required input:required 选择指定了 "required" 属性的 <input> 元素。
:valid input:valid 选择所有具有有效值的 <input> 元素。
:empty p:empty 选择没有子元素的每个 <p> 元素。
:lang(language) p:lang(it) 选择每个 lang 属性值以 "it" 开头的 <p> 元素。
:only-of-type p:only-of-type 选择作为其父的唯一 <p> 元素的每个 <p> 元素。
:only-child p:only-child 选择作为其父的唯一子元素的 <p> 元素。
:root root 选择元素的根元素。
:target #news:target 选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
3.伪元素选择器
所有 CSS 伪元素
选择器 例子 例子描述
::after p::after{content:'abc'} 在每个 <p> 元素之后插入内容abc，必须结合content属性来使用
::before p::before{content:'abc'} 在每个 <p> 元素之前插入内容abc，必须结合content属性来使用
q标签添加的引号就是通过上述两个伪元素实现的
::first-letter p::first-letter 选择每个 <p> 元素的首字母。
::first-line p::first-line 选择每个 <p> 元素的首行。
::selection p::selection 选择用户选择的元素部分。
4.复合选择器
交集选择器：
作用：选中同时符合多个条件的元素
语法：选择器1选择器2选择器3...选择器n
注意：如果交集选择器中还有元素选择器，则必须选择元素选择器开头
并集选择器（选择器分组）
作用：同时选择多个选择器对应的元素
语法：选择器1,选择器2,选择器3,...,选择器n
5.关系选择器
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，一个元素的父元素也是他的祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素
子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素
后代元素选择器
作用：选择指定元素内的指定后代元素
语法：祖先 后代
兄弟元素选择器
选择下一个兄弟：前一个 + 后一个
选择下边所有兄弟： 兄 ~ 弟
当鼠标引入元素1时设置元素2的样式(父选子 兄选弟)
(1)元素1是元素2的祖先元素 --- 使用后代选择器
元素1:hover 元素2{...}
(2)元素1是在元素2前边的相邻兄弟元素
元素1:hover + 元素2{...}
拓展：鼠标移入元素1时设置元素1后边的所有兄弟元素
元素1:hover ~ 兄弟元素(选择器)
6.属性选择器
[属性名] 选择含有指定属性的元素
[属性名=值] 选择含有指定属性为指定值的元素
[属性名^=值] 选择指定属性的值以指定值开头的元素
[属性名$=值] 选择指定属性的值以指定值结尾的元素
[属性名*=值] 选择指定属性的值中含有指定值的元素
7.样式的继承
我们为一个元素设置的样式同时也会应用到它的后代元素上。
继承发生在祖先和后代之间。
利用继承可以将通用的样式设置到祖先元素上，这样只需要设置一次即可让所有的元素都具有该样式。
注意：背景相关的，布局相关的等样式就不会被继承。
8.长度单位
px
百分比
em是相对于当前元素的字体大小来设置的 10em = 10*fontSize
rem是相对于根元素(<html></html>)大小来设置的 10rem = 10*root-fontSize
9.颜色单位
rgb值 红 绿 蓝 都是0~255 或 0%~100%
rgba(红,绿,蓝,opacity 0~1)
HSL值 -- 一般不用
H色相(0~360)：颜色
S饱和度(最不饱和-灰0%-100%最饱和-正常)
L亮度(最暗-黑0%~100%最亮-正常)
background:hsl(30,0%,10%);
HSLA值 A 透明度 -- 一般不用
10.layout
网页的最底层被称为文档流。
元素主要有两个状态：在文档流中和不在文档流中（脱离文档流）。
元素在文档流中的特点：
块元素
-在页面中独占一行
-默认宽度是父元素的宽度
-默认高度是被内容撑开
行内元素
-只占自身的大小
-在页面中自左向右水平排列，如果一行之中放不下会换到第二行继续自左向右排列
-默认宽高都是被内容撑开
11.盒子模型（框模型 box model）
CSS将页面中的所有的元素都设置为了一个矩形的盒子。
每一个盒子都由以下几部分组成：
内容(content)
边框(border)
内边距(padding)
外边距(margin)
盒子模型有两种形式：标准盒模型和IE盒子模型(怪异盒模型)
两种盒子模型可以利用box-sizing属性进行自行选择：
标准盒子模型：box-sizing:content-box;
怪异盒子模型：box-sizing:border-box;
两种盒子模型的区别：
标准盒子模型会被设置的padding撑开
怪异盒子模型相当于将盒子的大小固定好，再将内容装入盒子，盒子的大小并不会被padding所撑开
边框
border:边框大小 边框类型 边框颜色;
边框类型：solid实线（默认）、dashed虚线、dotted点状虚线、double双线
border-width:上 右 下 左;
border-width:上 左右 下;
border-width:上下 左右;
border-width:上下左右;
border-style:上 右 下 左;||上 左右 下;||上下 左右;||上下左右;
对于盒子来说只有content、border、padding是可见的，所以盒子大小 = content + padding + border
默认情况下，设置左和上外边距会移动盒子自身，但是设置下和右会移动其他元素
外边距会影响盒子实际占用空间。
12.布局（块元素）
(1)水平布局
一个元素在父元素中，水平布局必须满足以下等式：
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 父元素内容区的宽度
如果不满足，则会优先调整值为auto的属性以使等式成立，没有为auto的值则会调整margin-right的值。
width的值默认为auto，margin-left、margin-right的值默认为0。
上面属性中可以使用auto是属性只有width、margin-left、margin-right。
如果上述三个属性同时设置为auto，则margin-left、margin-right的值为0，width的值为100%；
如果width固定，margin-left、margin-right为auto，则margin-left = margin-right，内容水平居中；
如果width为auto，并且margin-left、margin-right中一个位auto一个位固定值，则设为auto的那一个外边距会被设置为0，width会调整到最大。
(2)垂直布局
overflow用于处理父元素中溢出的子元素
可选值：
visible 默认值，子元素会从父元素中溢出，在父元素外部的位置显示
hidden 溢出的内容会被裁剪不会显示
scroll 生成两个滚动条，通过滚动条来查看完整内容
auto 根据需要生成滚动条
还有 overflow-x和overflow-y
13.外边距的折叠
垂直方向的相邻的外边距会发生折叠（重叠）现象
兄弟元素
-相邻的兄弟元素的垂直外边距会取两者之间的最大值
-特殊情况：
相邻的兄弟元素的垂直外边距一正一负则取两者的和
相邻的兄弟元素的垂直外边距都是负值则取两者的中绝对值较大的
父子元素
-父子元素相邻外边距，子元素的值会传递给父元素（上外边距）
-父子外边距的折叠会影响到页面的布局，必须进行处理
可以通过让父子元素的外边距不相邻来解决，如设置border-top、在子元素上方加一点内容、设置padding-top、
利用伪元素before或after在子元素添加一点东西如：子元素::before{content:'';display:table;}。
14.行内元素的盒模型
不支持设置宽高
可以设置padding，垂直方向上的padding不会影响页面布局
可以设置border，垂直方向的border不会影响页面布局
可以设置margin，垂直方向的margin不会影响页面布局
display 用来设置元素显示的类型
可选值：
inline 将元素设置为行内元素
block 将元素设置为块元素
inline-block 将元素设置为行内块元素
行内块元素既可以设置宽度和高度，又不会独占一行
table 将一个元素设置为一个表格
none 隐藏元素，且不占位
visibility 设置元素的显示状态
可选值：
visible 默认值，元素在页面中正常显示
hidden 隐藏元素，但依然占据页面的位置
15.浏览器默认样式
通常情况下，浏览器都会为元素设置一些默认样式。
默认样式会影响到页面布局，通常情况下编写网页必须去除掉浏览器的默认样式（PC端页面）。
用*{margin:0;padding:0;...}可以去除大部分默认样式。
css文件夹中的文件：
reset.css 直接去除浏览器的默认样式
normalize.css 对默认样式进行统一
使用时在style要做为第一个的样式。
16.轮廓、阴影和圆角
outline 用于设置元素的轮廓线，用法和border相同，轮廓不会影响到可见宽的大小，一般用于鼠标移入是显示轮廓的效果。
outline:1px solid red;
box-shadow 用于设置元素的阴影，默认情况下阴影在元素的正下方，与元素重合。
box-shadow:水平偏移量px 垂直偏移量px 阴影的模糊半径px 阴影大小px 阴影颜色rgba(0,0,0,0.4);
box-shadow:h-shadow v-shadow blur spread color inset;
值 说明
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset 可选。从外层的阴影（开始时）改变阴影内侧阴影
border-radius 设置元素的四个角的弧度
border-radius:圆角半径大小px; 或者 border-radius:椭圆水平半径大小px / 椭圆垂直半径大小px;
border-radius:左上和右下px 右上和左下px; 或者
border-radius:左上px 右上和左下px 右下px; 或者
border-radius:左上px 右上px 右下px 左下px;
border-top-left-radius:水平方向圆角半径大小px 垂直方向圆角半径大小px; /*椭圆*/
17.浮动
float 可选值
-none 默认值，元素不浮动
-left 元素向左浮动
-right 元素向右浮动
注意:元素设置浮动以后，水平布局的等式不需要强制满足；
元素设置浮动以后，会完全从文档流中脱离，不会占用文档流的位置，同时元素的一些特点也会发生变化；
浮动元素默认不会移出父元素；
浮动元素向左或向右移动时，不会超过它前边的元素（结构上的前边）；
如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移；
浮动元素不会超过他前边的兄弟元素；
浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围。
元素脱离文档流后的特点：
块元素不会独占一行；
脱离文档流后，块元素和行内元素都会变成行内块元素（既可以设置宽度和高度，又不会独占一行的元素）。
18.高度塌陷和BFC
高度塌陷问题：
父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，
而子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失，
父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱。
BFC（Block Formatting Context）块级格式化环境
-BFC是CSS中的一个隐含的属性，可以为一个元素开启BFC，开启后该元素会变成一个独立的布局区域。
-元素开启BFC的一些特点：
开启BFC的元素不会被浮动元素所覆盖；
开启BFC的子元素的外边距和父元素的外边距不会重叠；
开启BFC的元素可以包裹浮动的子元素。
-可以通过一些特殊方式来开启BFC：
(1)设置元素浮动；
(2)将元素设置为行内块元素；
(3)将元素的overflow设置为非visible的值，如：overflow:hidden；
...
clear 清除浮动元素对当前元素所产生的影响。
可选值：
left 清除左侧浮动元素对当前元素的影响
right 清除右侧浮动元素对当前元素的影响
both 清除两侧中影响最大的那侧的影响
原因：设置clear后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响。
清除高度塌陷的最终方案：伪元素after
浮动元素::after{
content:'';
display:block;/*或者table*/
clear:both;
}
clearfix 既可以解决高度塌陷和外边距折叠问题，写法如下：
.clearfix::before,
.clearfix::after{
content:'';
display:table;
clear:both;
}
19.定位
使用position属性来设置定位
可选值：
static 默认值，元素是静止的没有开启定位
relative 开启相对定位
absolute 开启绝对定位
fixed 开启固定定位
sticky 开启粘滞定位
相对定位的特点：
-元素开启相对定位后，如果不数组偏移量，则不会发送任何变化；
-元素的相对定位是参照于元素在文档流中的位置进行定位的；
-相对定位会提升元素的层级；
-相对定位不会让元素脱离文档流；
-相对定位不会改变元素的性质，块还是块，行内还是行内。
偏移量（offset）：
-top 定位元素和原来位置上边的距离
-bottom ...
-left ...
-right ...
top越大越往下
bottom越大越往上
left越大越往右
right越大越往左
绝对定位的特点：
-开启绝对定位后如果不识字偏移量元素的位置不会发生变化；
-开启绝对定位后元素会脱离文档流；
-绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开；
-绝对定位会使元素提升一个层级；
-绝对定位元素是相对于其包含块来定位的；
包含块：
正常情况下，包含块是离当前元素最近的祖先块元素
开启绝对定位元素的包含块是离它最近的开启相对定位的祖先元素，
如果所有的祖先元素都没有开启相对定位，则根元素就是它的包含块。
html元素是初始包含块
固定定位的特点：
-固定定位也是一种绝对定位，与绝对定位的唯一不同就是它是根据浏览器的视口
进行定位，位置不会随滚动条滚动而改变。
粘滞定位的特点：
-和相对定位的唯一不同点就是粘滞定位可以在元素到达某个位置时将其固定
绝对定位时， 让元素垂直水平居中：
left:0;right:0;top:0;bottom:0;margin:auto;
20.元素的层级
对于开启了定位的元素，可以通过z-index属性来指定元素的层级
z-index:10; 值越大层级越高。
如果元素的层级相同，则优先显示下面（结构上）的元素
祖先元素的层级再高也不会盖住后代元素。
21.字体族
/*@font-face可以将服务器中的字体直接提供给用户去使用
问题：
1.加载速度
2.版权
3.字体格式
*/
@font-face{
/*指定字体名字*/
font-family:'myFont;
src:url(/*服务器中字体的路径*/) format(/*指定字体文件的类型一般浏览器可以识别可不写*/);
}
font:字体大小/行高 字体族;
行高可以省略不写 - 倍数
font:50px/2 monospace;
22.图标字体 iconfont
通过@font-face引入图标字体库
font awesome 使用步骤：--图标比较少，大部分都是粗线条
下载：https://fontawesome.com/v5.15/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
解压
将css和webfonts移动到项目中 这两个文件夹必须在同一级目录下
将all.css引入当网页中
使用图标字体：
-直接通过类名来使用图标字体 <i class="fas fa-bell"></i>
第一个类必须是fas或fab(只有这两个是免费的) 第二个根据需要来
-通过伪元素来设置图标字体
元素::before{
/*设置字体编码*/
content:'\f1b0';
/*设置字体的样式
要用fas的
font-family: 'Font Awesome 5 Free';
font-weight: 900;
要用fab的
font-family: 'Font Awesome 5 Brands'
*/
font-family: 'Font Awesome 5 Free',monospace;
font-weight: 900;
}
-通过实体的方式去使用（实体的父元素必须设置class="fab或fas"）
<div class="fab">&#x图标编码;</div>
使用阿里的图标字体库 使用方法相似 但是第一个类为iconfont
https://www.iconfont.cn/
23.文本的水平和垂直对齐
text-align 设置水平对齐
left 默认 左对齐
center 居中对齐
right 右对齐
justify 两端对齐
vertical-align 设置垂直对齐
baseline 默认值，基线对齐
middle 将子元素的中线和x对齐
top 顶部对齐
bottom 底部对齐
关于图片的显示位置与父元素底部有缝隙的问题，可以设置垂直对齐方式来解决，只要不是baseline就OK
25.其他的文本样式
text-decoration 设置文本修饰
underline 下划线
none是 什么都没有
line-through 删除线
overline 上划线
text-decoration:underline red（可选，设置文本修饰符的颜色）;
white-space 网页如何处理空白
normal 正常
nowrap 不自动换行
pre 保留
text-overflow：
ellipsis 当文本被裁剪时，在文本可见区域的末尾显示省略号
clip 默认，正常裁剪
26.背景
background-color
background-image
background-repeat
background-position
background-size
background-origin
background-clip
background-attachment
background可以设置所有背景相关的属性，并且没有顺序要求
bg-size不能直接写：bg-position/bg-size
bg-origin必须在bg-clip前边
27.表格的样式
border-spacing 指定单元格边框之间的距离
border-collapse 设置单元格边框合并
如果表格中没有写tbody，浏览器会自动加上tbody，所以tr不是table的子元素
td中text-align和vertical-align都生效
display:table-cell
把该元素设置为单元格，在其中vertical-align生效，但是text-align对子元素不生效
28.表单
input的属性
autocomplete 是否提示自动补全 默认为on，设置为off关闭
type 设置输入的类型
text、email、password、number、color、date...
disable 禁用，且数据不会提交
readonly 只读，但是数据可以提交
29.过渡 - transition
transition-property：指定要执行过渡的属性，多个属性间用逗号隔开，设置所有属性可以用all，值是可以计算的属性都行
transition-duration：指定过渡效果执行时间，单位ms和s
transition-timing-function：过渡的时序函数
ease：默认值，先加速，再减速
linear：匀速
ease-in：慢开始，加速运动
ease-out：减速运动，慢结束
ease-in-out：先加速，后减速
cubic-bezier() 指定时序函数
https://cubic-bezier.com
steps() 分步执行过渡效果
steps(3, end) 3表示过渡分为几步，
第二个参数默认是end，表示在时间结束时执行过渡，start表示在时间开始时执行过渡
transition-delay：过渡效果延迟，等待一段时间后执行，单位s和ms
transition：唯一的要求是延迟时间在过渡时间之后
多个属性transition: property1 func1 time1 delay1,property2 func2 time2 delay2,...
30.动画 - animation
和过渡类似，不同的是过渡需要某个属性发生变化时才会触发，动画可以自动触发动态效果
设置动画必须先要设置一个关键帧，关键帧设置了动画执行的每一个步骤，使用@keyframes test{}可以定义一个名为test的关键帧
三种写法
第一种：
@keyframes test{ //可以搭配steps
/*动画开始的状态*/
from{ ... }
/*动画结束的状态*/
to{ ... }
}
第二种：
@keyframes test{
0% { ... }
...
100% { ... }
}
第三种：
@keyframes test{
from{ ... }
10% { ... }
...
90% { ... }
to { ... }
}
animation-name：指定要使用的关键帧
animation-duration：动画执行时间
animation-timing-function：动画的时序函数，和过渡的相同
animation-iteration-count：动画执行的次数，1,2,3....infinite
animation-direction：指定动画的方向，可选值
normal 默认值，是from 到 to ，每次都是这样 正
reverse 从to 到 from，每次都是这样 反
alternate 从from到to运行，重复执行时，会按正、反、正、反...执行
animation-play-state：设置动画的执行状态，可选值
running 默认值，动画执行
paused 动画暂停
animation-fill-mode：动画的填充模式，可选值
none 默认值，动画执行完毕原始回到初始位置
forwards 动画执行完毕后元素会停止在动画结束的位置
backwards 动画延时(delay)等待时，元素会处于开始位置
both 结合了forwards和backwards
31.变形 - transform
transform-origin设置基点位置，默认为中心，类似于background-position
变形不会影响页面的布局
(1)平移 - translate 相对自身而言
translateX() 设置x轴方向平移 translateX(100px) 或 translateX(50%) //该元素宽度的50%
translateY() 设置y轴方向平移
translateZ() 设置z轴方向平移
translate(x,y) 设置x轴和y轴方向平移
利用平移居中
position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
注意：
z轴平移是调整元素和人眼之间的距离，值越大，元素里离人就越近，
属于立体效果（近大远小）。默认情况下网页是不支持透视的的，
如果需要看见效果，必须要设置网页的视距，可以通过perspective设置视距
html{ //给html元素（即网页）设置视距
perspective:800px;
}
同时，还必须给需要展示近大远小效果的元素的父元素设置
transform-style: preserve-3d;/*设置3d变形效果*/
否则近大远小效果不会生效
(2)旋转 - rotate()
rotateX() 沿着x旋转
rotateY()
rotateZ()
rotate(z)
transform: translateZ(400px) rotate(45deg) rotateY(45deg);
和
transform:rotate(45deg) rotateY(45deg) translateZ(400px);
效果不同
(3)缩放 - scale （本质是拉伸或压缩轴）
scaleX() 水平方向缩放
scaleY() 垂直方向缩放
scaleZ() Z轴方向缩放
scale() 双方向方向缩放
32.flex - 弹性盒、伸缩盒
-是css中定义的一种布局手段，它主要用来代替浮动来完成页面布局。
-flex可以使元素具有弹性，让元素可以跟随页面大小的改变而改变。
-弹性容器：
要使用弹性盒，必须先将一个元素设置为弹性容器
通过display来设置弹性容器：
display:flex; //设置为块级弹性容器，会独占一行
display:inline-flex; //设置为行内弹性容器，不会独占一行
flex-direction 指定弹性容器中弹性元素的排列方向，可选值：
row 默认值，弹性元素在容器中水平排列（主轴：从左向右，辅轴：自上向下）
row-reverse 弹性元素在容器中反向水平排列（主轴：从右向左，辅轴：自上向下）
column 弹性元素在容器中纵向排列（主轴：自上向下，辅轴：从左向右）
column-reverse 弹性元素在容器中反向纵向排列（主轴：自下向上，辅轴：从左向右）
主轴
弹性元素排列的方向，从起边指向终边，有左->右、右->左、上->下、下->上四个方向
辅轴
与主轴垂直的方向，从起边指向终边，只有上->下和左->右两个方向
flex-wrap 设置弹性元素是否在弹性容器中自动换行，可选值：
nowrap 默认值，元素不会自动换行
wrap 元素沿着辅轴的方向自动换行
wrap-reverse 元素沿着辅轴的反方向自动换行
上面两个属性的简写属性
flex-flow:row wrap;
justify-content 如何分配主轴上的空白空间（主轴上的元素如何对齐），可选值：
flex-start 默认值，元素靠着主轴起边的一边排列
flex-end 元素靠着主轴终边的一边排列
center 元素在主轴上居中排列
space-around 空白平均分配到元素沿着主轴方向的前后侧，空白不折叠
space-evenly 空白平均分配将元素沿着主轴分开
space-between 空白沿着主轴平均分配到元素之间，使元素间隔相同的距离，只有一个元素时，空白放在元素沿着主轴方向之后
align-content 辅轴上的空白空间分布，可选值同上，只不过主轴->辅轴
align-items 元素在辅轴上如何对齐，元素间的关系，可选值：
stretch 默认值，将元素的长度设置为相同的值
flex-start 元素不会拉伸，沿着辅轴起边对齐
flex-end 元素不会拉伸，沿着辅轴终边对齐
center 沿着辅轴居中对齐
元素水平、垂直居中对齐
justify-content:center;
align-items:center;
-弹性元素
弹性元素的子元素是弹性元素（弹性项）
一个元素可以同时是弹性容器和弹性元素
flex-grow 指定弹性元素的伸展的系数
当父元素有多余的空间时，按子元素的flex-grow值的比例分配多余空间给子元素，
默认值是0，即不伸展。
值越大，伸展的越多。
flex-shrink 指定弹性元素的收缩系数
当父元素中的空间不足以容纳所有的子元素时，按子元素的flex-shrink值的比例收缩子元素，
默认值是1。
值为0的时候不收缩。
缩减多少根据 缩减系数 和 元素的大小 来计算的，两者越大则缩减的越大
align-self 覆盖弹性元素上的align-items，使其单独使用设置的对齐方式
flex-basis 设置弹性元素在主轴上的基础长度，
如果主轴是横向的该值指定的就是元素的宽度，如果主轴是纵向的该值指定的就是元素的高度。
默认值是auto，表示参考元素自身的宽高，如果传递了一个具体的数值，则以该值为准。
flex: grow shrink basis;可选值：
initial 默认值，<=> "0 1 auto" 弹性元素可减不可增
auto <=> "1 1 auto" 弹性元素可增可减
none <=> "0 0 auto" 弹性元素没有弹性
order 决定弹性元素的排列顺序，值越小越靠近主轴的起边。
33.css中的新单位
vw - viewport width
表示的是视口宽度
100vw = 一个视口的宽度
vw永远是相对视口计算的
移动端的网页设计图一般都是750px 或者 1125px --> 375的倍数
也就是 100vw = 750px 或 100vw = 1125px
vw和px的适配
html{
font-size:13.333333333333vw; //100px
}
.box{
width:0.4rem; //0.4 * 100px = 40px
}
34.响应式布局和媒体查询
网页可以根据不同到设备或窗口大小呈现不同的效果；
使用响应式布局，可以使一个网页适用于所有设备；
响应式布局的关键是媒体查询；
通过媒体查询，可以为不同的设备，或设备不同状态来分别设置样式。
使用媒体查询：
语法：@media 查询规则{样式...}
媒体类型：
all 所有设备
print 打印设备
screen 带屏幕的设备
speech 屏幕阅读器
正常使用：
@media screen{样式...}
可以使用","连接多个媒体类型，这样他们之间就是一个或的关系：
@media all,print{样式...}
可以在媒体类型前添加一个only，表示只有，主要是为了兼容老版本的浏览器
只有在带屏幕的设备时生效：
@media only screen{样式...}
可以在媒体类型前添加一个not，表示除了
除了带屏幕的设备其他的都生效：
@media not screen{样式...}
媒体特性：
width 视口的宽度
height 视口的高度
min-width 视口的最小宽度（视口大于指定宽度时生效）
max-width 视口的最大宽度（视口小于指定宽度时生效）
只有视口宽度是500px的时生效：
@media (width:500px){样式...}
视口大于500px时生效
@media (min-width:500px){样式...}
视口小于500px时生效
@media (max-width:500px){样式...}
样式切换的分界点，我们称其为断点，也就是网页的样式会在这个点发生变化
常用的断点
小于768 超小屏幕 max-width = 768px
大于768 小型屏幕 min-width = 768px
大于992 中型屏幕 min-width = 992px
大于1200 大型屏幕 min-width = 1200px
视口大于500px且小于700px时生效
@media (min-width:500px) and (max-width:500px){样式...}
视口大于500px或小于700px时生效
@media (min-width:500px), (max-width:500px){样式...}
只有在带屏幕的设备且视口大于500px且小于700px时生效
@media only screen and (min-width:500px) and (max-width:500px){样式...}
补充说明：
css中也原生支持变量和计算，但是兼容性差，普通CSS属性不同，CSS变量是区分大小写的。
css中定义变量：
--变量名:值;
CSS中使用变量：
属性:var(--变量名);
CSS中修改变量：
CSS中计算函数： 属性:calc(表达式);
ps:
var(--main-color, #333);
上面的代码中，#333是一个备用值。当自定义属性值无效或未指定(unset)时，如果这时也没有指定备用值，那么被继承的属性值将会被使用。
和普通CSS属性一样，CSS变量是可继承的。
通过JavaScript代码访问CSS变量。
假设在你的CSS文件中，有一个叫做--left-pos的变量，作用在.sidebar选择器中，值为100px：
.sidebar {
--left-pos: 100px;
}
那么，通过JavaScript获取--left-pos值，会像下面这样：
// 缓存你即将操纵的元素
const sidebarElement = document.querySelector('.sidebar');
// 缓存sidebarElement的样式于cssStyles中
const cssStyles = getComputedStyle(sidebarElement);
// 获取 --left-pos CSS变量的值
const cssVal = String(cssStyles.getPropertyValue('--left-pos')).trim();
// 将CSS 变量的值打印到控制台: 100px
console.log(cssVal);
如果想通过JavaScript设置CSS变量的值，你可以像这样：
sidebarElement.style.setProperty('--left-pos', '200px');
上面的代码将sidebar元素中--left-pos变量的值设置为200px。
css中的像素不是物理像素，一个css像素最终由几个物理像素显示，
默认情况下，在pc端 一个css像素 = 一个物理像素
视口（viewport）
就是屏幕中用来显示网页的区域
可以通过查看视口大小，来观察css像素和物理像素的比值
默认情况下，移动端的网页的视口宽度一般都会设置为980像素（css像素），
但是移动端的浏览器会自动对网页缩放以完整显示网页。
<meta name="viewport" content="width=视口宽度">
完美视口：最佳像素比的视口大小
将网页的视口设置为完美视口：
<meta name="viewport" content="width=device-width, initial-scale=1">
网页中的字体大小不能比12px小 ，如果设置了一个小于12px的则会自动设置为12px。
第三部分 less
1.less语法
是一门CSS的预处理语言，是CSS的增强版，通过less可以用更少的代码来实现更强大的样式。
less的特点：
支持变量，但是兼容性更好，支持mixin
语法和CSS大致相同，但是添加了许多对css的扩展
less必须先转换为CSS才能被浏览器识别
less中定义变量：
@变量名:值;
注意：
变量可以定义在任意位置，但是一般在作用域最上边；
重复定义变量时，后定义的值会覆盖先定义的值；
下级作用域可以使用上级作用域的任意变量，但是下级作用域重复定义变量时，改的只是变量在本级作用域的值；
下级作用域定义的变量，上级作用域可以重复定义，且不会影响下级作用域变量的值。
less中使用变量，三种：
直接使用
属性:@变量名;
把变量的值作为类名使用
@{变量名}{...}
把变量的值作为字符串使用 -- 引号必须写
background:url("@{变量名}...");
less中使用同级作用域下另一个属性的值：
width:100px;
//设置height的值为width的值
height:$width;
& 代表所在作用域的那个选择器
给box添加伪类：
.box{
//定义伪类hover & === .box
&:hover{
background: blue;
}
}
对当前选择器扩展指定选择器的样式 (选择器分组):
.box5:extend(.box4){ //引用.box4的样式给.box5
background-color:red;
}
对应的css
.box4,.box5{...}
.box5{background-color:red;}
与上面不同的另一种
.box6{
//直接引用指定选择器的样式，复制过来
.box4();
}
对应的css
.box6{ .box4中的所有样式 }
创建一个mixin混合函数，专门用来给别人用的，自己不能使用
定义一个不带参数的
.box7(){
transform: rotate(45deg);
}
支持重载
.box7(@pram1,@pram2){
background: @pram1;
outline: @pram2;
}
定义带默认值的函数
.box7(@pram1:red,@pram2){
background: @pram1;
outline: @pram2;
}
调用
.box6{
.box7();//<=> .box7; 调用不带参数的那个
//调用带参数的那个，第一种调用方式，顺序必须对
.box7(green,10px solid black);
//第二种调用方式，顺序可打乱
.box7(@pram2:10px solid black,@pram1:green);
//调用带默认值的函数，@pram1可以传也可以不传
.box7(yellow,10px solid black);
//或.box7(10px solid black);
}
PS：
后面调用的得到的相同属性会覆盖前面调用的，
所以上面最终呈现在页面中的样式是.box7(yellow,10px solid black);的
在less中，所有的数值都可以直接进行运算 + - * / 都支持
例如：
width:100px+10px;// <=> 100+10px <=> 100px+10 主要运算一方有单位就可以
width:100px-10px;
width:100px*10px;
width:(100px/10px); // 小括号必须要，否则/不会执行
@import "xxx.less"; //引入xxx.less的全部样式
2.less中的库函数
函数手册：https://www.runoob.com/manual/lessguide/functions/
3.less中解决移动端适配问题
//设计图的宽度
@total-width:750;
//1px = 1vw * @rate
//@rate:(100/@total-width)vw;
html{
font-size: (100/@total-width)*100vw;//100px -> 1rem = 100px
}
/*一般宽度要做媒体查询，背景图可以设置为固定的视口大小，且重复*/
标签：css3,
...,
元素,
笔记,
width,
html5,
设置,
选择器,
属性
From： https://www.cnblogs.com/serendipity-echo/p/17161642.html