文档结构
HTML文档结构一般包括包括标记（Html）、头部（Head）、主体（Body）三部分。
标记< html>：说明该文件是用超文本标记语言来描述的，它是文件的开头，而则表示该文件的结尾，它们是超文本标记语言文件的开始标记和结尾标记。
头部：表示头度部信息的开始和结尾。知头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。
主体：网页中显示的实际内容均包含在这2个正文道标记符之间。正文标记符又称为实体标记。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
语义化标签
使文档结构清晰，有利于浏览器对页面的读取，便于团队开发和维护，更具可读性，遵循W3C标准，减少差异化。但低端浏览器不支持，比如IE8及以下版本，如何让ie8及以下版本支持h5新增标签呢，必须手动引入HTML5shiv. js文件（百度html5shiv下载就可以）。
一般移动端布局就用到header,main,footer.
<header></header>头部
<nav></nav>导航栏
<section></section>区块（有语义化的div）
<main></main>主要区域
<artical></artical>主要内容
<aside></aside>侧边栏
<footer></footer>底部
input标签全部type类型：
原始：button，checkbox，file，hidden，image，password，radio，reset，submit，text（文本字段的默认宽度是 20 个字符）
h5新增：color,date,datetime-local,month,week,time,email,number,range,search(属性
),tel,url
表单：
HTML 表单用于搜集不同类型的用户输入，表单本身是不可见的。
参考网址
<form>
name1：<input type="text" name="firstname">
<br>
name2:<input type="text" name="lastname">
</form>
视频：video
h5新增标签
参考网址
<video src="movie.ogg" controls>
</video>
音频：
h5新增：
参考地址
<audio src="/i/horse.ogg" controls>
</audio>
CSS样式：
内联样式：
在标签中添加属性style，在style里面写样式。
<div style="color:red;"></div>
内部样式：
在里写一个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
height: 50px;
width: 50px;
background-color:aquamarine;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
外部样式：
在在里写一个，引入外部的css文件
<link rel="stylesheet" href="./test.css">
选择器：
#id选择器，.class选择低，element标签选择器，:hover等伪类选择器，[type=“date”]等属性选择器，::after等伪元素选择器。
选择器参考
权重
权重的表达方式如：0，0，0，0；
权重规则：HTML标签(类型选择符)的权重是1，class的权重是10，id的权重是100。
类型选择符的权重为0001
class选择符的权重为0010
id选择符的权重为0100
伪类选择符的权重为0010
包含选择符的权重：为包含选择符的权重之和
内联样式的权重为1000
继承样式的权重为0000
群组集合选择符权重为他本身
注：如果权重相同时，则执行后写的样式；
移动端布局相关：
加了下面这句话
<meta name="viewport" content="width=device-width, initial-scale=1.0">
没加
rem和em
rem(font size of root(html) element)是指相对于根元素 (html)的字体大小（font-size）的单位。Em: 相对于元素本身的字体大小来取值。Rem：相对于根节点的字体大小取值。
vw和vh
ps:百分比单位是相对于父元素的宽高。
vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。
元素所展示的大小（设计图固定大小）=（vw*设计稿宽度）/100
vw = 元素所展示的大小（设计图固定大小）*100/设计稿宽度
媒体查询
@media all and (min-width:320px){
div{
height: 320px;
width: 320px;
background-color:aquamarine;
}
}
@media all and (min-width:375px){
div{
height: 375px;
width: 375px;
background-color:aquamarine;
}
}
*{
padding: 0;margin: 0;
}
媒体查询+rem布局
使用媒体查询更改根节点字体大小，页面中元素的单位用rem表示
<style>
@media all and (min-width:320px){
html{
font-size: 32px;
}
}
@media all and (min-width:375px){
html{
font-size: 37.5px;
}
}
*{
padding: 0;margin: 0;
}
div{
height: 10rem;
width: 10rem;
background-color:aquamarine;
}
</style>
vw单位 + rem单位布局
html{
/* 例：1vw=3.2px，视窗320px的1% */
font-size: 10vw;
}
*{
padding: 0;margin: 0;
}
div{
height: 10rem;
width: 10rem;
background-color:aquamarine;
}
另一种，比较方便计算
html{
/* 1vw=3.2px */
/* 31.25vw=100px: 10vw; */
font-size: 31.25vw;
}
*{
padding: 0;margin: 0;
}
div{
height: 3.2rem;
width: 3.2rem;
/*
1rem=100px;
width: 320px;
width:3.2rem
*/
background-color:aquamarine;
}
rem.js + rem单位布局
（1）在vscode中的扩展安装cssrem插件，文件—》首选项—》设置—》（搜索cssrem，改变rootfontsize为设计图 / 10的数字）
（2）在页面中使用script标签引入rem.js文件（在js文件的18行把数字改为设计图的大小）
（3）在页面中的布局，量出多少值就写多少，然后使用它转换的rem的值。（这样子插件会自动转化成为rem的值）
原理：通过js获取设备的宽度，来计算根节点的字体大小，rem得出来的值就不一样，就到达不同页面能适配
sass + vw单位布局
安装easysass插件。保存的时候回自动编译成.min.css文件。
（1）使用sass的函数：
@function vw($px) {
@return ($px / 设计图的宽度) * 100vw;
}
（2）页面中布局
header {
height: vw(量出来的值);
background: green;
font-size: vw(48);
}
dpr
- 当设计图宽度为750px或者640px时，对应的dpr都为2，对应的设备宽度为375px和320px。
- 1vw=3.75px，100vw=375px。1vw=3.2px，100vw=320px;
- 如果html的font-size为10vw即37.5px。
- 那么设备的宽度为375px时则为10rem。
- 设计图宽度为1080px时，dpr为3，对应设备宽度为320px
/*100vw=375px
?vw=100px
100*100/375=26.6666666vw*/
html{
font-size:26.666666vw
/*即font-size:100px*/
}
p{
/*如果height量出来为100px;则height为1rem，如果量出来是150px，则为1.5rem*/
height:1.5rem;
}
逻辑像素与物理像素
逻辑像素=物理像素/dpr/100rem
如：？=320px/2/100=1.6rem
逻辑像素:写在代码中的值。物理像素：设计图上的值。
sass预编译语言
sass 自称世界上最成熟、最稳定、最强大的专业级CSS扩展语言！
是css的辅佐工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能
1、sass的优点
- 完全兼容 CSS3
- 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
- 通过[函数]进行颜色值与属性值的运算
- 提供[控制指令 (control directives)]等高级功能
- 自定义输出格式
2、sass的语法格式
（1）后缀名为： .scss的文件格式（常用）
（2）后缀名为： .sass的文件格式
3、css的扩展功能
（1）嵌套规则
.box{
header{
height:100px;
width:100px;
}
footer{
width:200px;
height:200px;
color:red;
}
}
编译为：
.box header{
height:100px;
width:100px;
}
.box footer{
width:200px;
height:200px;
color:red;
}
优点：嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理：
（2）父选择器（&）
在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时
.nav {
li{
height:40px;
width:100px;
background:#ccc;
a{
display:block;
width:100%;
height:100%;
}
&:hover{
backgorund:orange;
}
}
}
编译后：
.nav li{
height:40px;
width:100px;
background:#ccc;
}
.nav li a{
display:block;
width:100%;
height:100%;
}
.nav li:hover{
background:orange;
}
（3）属性嵌套
有些 CSS 属性遵循相同的命名空间 ，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
编译后：
.funky {
font-family: fantasy;
font-size: 30em;
font-weight: bold;
}
4、变量
SassScript 最普遍的用法就是变量，变量以美元符号开头，赋值方法与 CSS 属性的写法一样：
$width:200px;
.box {
.box1 {
width: $width;
height: 100px;
border: 1px solid red;
}
}
变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明：
.box {
.box1 {
// 在.box里面定义局部变量，只能由.box里面调用，如果想要其他的元素也可以调用，就给变量后面添加!global
$width: 200px !global;
width: $width;
height: 100px;
border: 1px solid red;
}
.box2 {
width: $width;
height: $width;
border: 1px solid green;
}
}
5、函数指令
Sass 支持自定义函数，并能在任何属性值或 Sass script 中使用：
格式：
@function 函数名(参数){
@return 值;
}
.box{
width:函数名(100px)
}
例如：
- 返回值要带单位的话得*1vw,不能return ($px)vw，这样编译出来是100 vw而不是100vw
- 且变量，无论是参数变量，局部变量等等前面都要加美元符号
- $变量名
//定义函数
@function vw($px) {
@return ($px / 750) * 100vw;
}
//调用函数
.box2 {
height: vw(80);
border: 1px solid green;
}
link和import导入外部样式的区别
差别1：老祖宗的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS。
差别2：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式。
差别3：兼容性的差别。：@import是CSS2.1提出的，所以老的浏览器不支持，@import只在IE5以上的才能识别，而link标签无此问题。
差别4：使用dom控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的.
字体图标
- 使用别人的字体图标
然后登录注册
选择自己需要的字体图标，加入购物车
点击右上角购物车，将图标添加至项目
选择Unicode或者class，并下载到本地
解压并引入到项目中，打开demo示例，查看用法，在HTML文件中引入css文件。
在浏览器打开
1854
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
