P-1(全)web前端HTML5andCSS笔记

1 HTML的相关概念和建站流程

HTML的概念：超文本标记语言
HTML的基本组成
- 结构 html/xhtml w3c(万维网联盟)制定规范
- 样式 css w3c(万维网联盟)制定规范
- 行为 js ECMA(欧洲电脑网商联合会)
xhtml: 可扩展的标记性语言
xhtml和html的区别？？
- xhtml的单标签后面需要加 /
- XHTML的标签必须是小写
- XHTML属性值必须使用双引号

HTML的基本结构

新建带有.html后缀的文件
英文状态下按! 按tab 生成基本结构

<!-- 文档类型声明 -->
<!DOCTYPE html>
<html>
<!-- 头部 --><head><!-- 编码格式 --><meta charset="UTF-8"><!-- 网页的标题 --><title>我的第一个网页啊</title>
</head>
<!-- 主体 --><body>文字/图片/视频
</body></html>

HTML的基本语法

标记/标签/元素：放在尖括号中的第一个单词
双标签/双标记：成对出现的标签
单标签/空标记：单独出现的
属性：跟在标签后面，用空格隔开
- 属性和属性值直接用等号连接
- 属性值必须用引号引起来
- 属性可以是多个，多个之间用空格隔开

HTML的基本标签

文章类的标签
- 标题标签 h1-h6
  - 双标签/加粗且字体较大/h1-h6字体大小逐渐变小/独占一行
- 段落标签 p
  - 双标签/独占一行
  - 随机生成一段文本：lorem回车，要控制多少个字的话，lorem字的个数，如：lorem100
  - 控制换行：文件->首选项->搜索框输入“wrap” 将控制折行的方法切换成 on
- 加粗 b strong
  - 双标签/加粗样式/可以在同一行显示
- 倾斜 i em
  - 双标签/倾斜样式/可以在同一行显示
- 删除线 del
  - 双标签/可以在同一行显示
- 下划线 u
  - 双标签/文字下面有下划线/可以在同一行显示
- 上标 sup 双标签
- 下标 sub 双标签
换行 br 单标签
水平线 hr 单标签
特殊字符
- 空格
- 注册商标 ®
- 版权符号 ©
- 左尖括号 <
- 右尖括号 >
超链接 a
- 双标签/自带颜色/自带的下划线/在同一行显示
```
<a href="https://www.baidu.com" target="">百度一下，你就知道</a>
```
- href: 点击所要跳转的页面的路径
- 窗口的打开方式 target
  - _self 自身窗口打开，默认值
  - _blank 新开窗口去打开
图片 img
```
<img src="" alt="未加载的时候显示" title="鼠标划过显示的文件">
```
- src: 图片路径
  - 绝对路径：直接复制线上的图片地址，粘贴到对应的src的属性值里面
  - 相对路径
    1. 当当前文件和目标文件在同一个目录下面的时候,直接图片名.后缀
    2. 当当前的文件和目标文件的文件夹在同一个目录下面,文件夹名/图片名.后缀，套几个文件夹就进几次
    3. 当当前文件的文件夹和目标文件的文件夹在同一个目录下面，…/文件夹名/图片名.后缀
- alt 图片未加载的时候显示
- title 鼠标划过显示的文字，可以应用到所有的标签

vscode快捷键

注释 ctrl+/ 取消注释 ctrl+/
保存 ctrl+s
撤销 ctrl+z 反撤销 ctrl+y
全选 ctrl+a

2 html基本标签

布局标签
- div 划分网页板块
  - 双标签/不带任何自带样式/独占一行
- span 小文本
  - 双标签/不带任何自带样式/在同一行显示
列表标签
- 无序列表
```
  <ul><li><b>哈哈哈</b></li><li><a href="">嘿嘿嘿嘿</a></li><li>嘻嘻嘻</li></ul>
```
  - 快速生成列表 ul里面10个li ul>li*10
    1. 花括号里面写内容： ul>li*10{哈哈哈$}
    2. $代表从1开始的数字
  - 应用场景：网页的导航/新闻列表/商品列表
- 有序列表
```
 <ol type="a" start="2"><li>嘻嘻嘻1</li><li>嘻嘻嘻2</li><li>嘻嘻嘻3</li></ol>
```
  - type: 排序方式 1/A/a/I/i
  - start: 排序的起始值，必须是数字
- 自定义列表
```
  <dl><dt>图片/名词</dt><dd>图片说明/名词的解释</dd><dd></dd><dd></dd></dl>
```
  - 应用场景：1.上面的图片，下面是文字 2.左边是图片，右边是文字
表格: 主要用在后台系统展示数据，一般不用在前台网页布局
- table 表格
  - 边框 border=“数字” 像素px
  - 宽度 width=“数字” 高 height=“数字”
  - 表格水平位置 align
    1. left 默认值
    2. center 居中
    3. right 居右
  - 单元格之间的间距 cellspacing=“数值” 一般设置0 去掉单元格之间的间距
  - 调整内容到单元格的距离 cellpadding=“数值”
  - 快速生成表格 table>tr10>td8{$} 10行8列的表格
- tr 行
  - 水平对齐方式 align
    1. left 默认值
    2. center 居中
    3. right 居右
  - 垂直对齐方式 valign
    1. middle 居中默认值
    2. top 居上
    3. bottom 居下
- td 列
  - 水平和垂直的对齐方式和tr一样
  - 列合并 colspan
  - 行合并 rowspan
  - 合并的步骤：
    1. 补全表格，有几行几列就生成几行几列的表格
    2. 观察属于行合并还是列合并，哪个不同合并哪个
    3. 确定属性之后，观察合并几个单元格，属性对应的值就是几
    4. 将合并的属性放到合并的起始的单元格
    5. 注释掉多余的单元格
- 表单 form
```
<form action="" method=""></form>
```
  - action: 提交路径
  - method: 提交方式 GET/POST
    - GET一般用来获取数据 POST一般提交信息
    - GET请求安全系数较低
    - get可以传送的数据量较小一般不超过2kb post可以传送的数据量较大理论上不受限制
  - 表单元素单标签/在同一行显示
    - 文本输入框
```
  请输入姓名：<input type="text" placeholder="请输入姓名" value="小白">placeholder：提示信息 value：默认值
```
    - 密码输入框
```
  请输入密码：<input type="password">
```
  - 提交按钮
```
 <input type="submit" value="搜索">value：按钮文本
```
  - 重置按钮
```
  <input type="reset" value="重新">value：按钮文本
```
  - 普通按钮
```
 <input type="button" value="普通按钮">
```

初识css

层叠样式表
样式表
- 内联/行内样式表：加在哪个标签，哪个标签才生效
  - 给标签生成一个style的属性
  - style的属性值为css属性:css属性值;css属性:css属性值;
- 内部样式表
- 外部样式表
css属性
- 宽度 width:数值px必须有单位 0可以不加单位
- 高度 height:数值px必须有单位 0可以不加单位
- 字体颜色 color:英语单词
- 背景色 background-color: 英语单词
层叠

3 css

内联样式表

<div style="width:200px;height:100px;background-color:red;color:blue;"></div>

内部样式表
- 在head标签里面，生成一个style的双标签
- 在style的标签里面写对应的css样式
```
  <style>div {width: 200px;height: 200px;background-color: pink;}
</style>
```

外部样式表

新建一个css文件夹
在css文件夹的下面新建一个.css后缀的文件
在html文件的head标签里面生成一个link单标签

  <link rel="stylesheet" href="css/外部样式表.css" type="text/css">rel: 当前关联的文件类型 stylesheet：样式表href：css文件的路径type：文件类型 默认就是css文件类型

css语法
选择器{
属性:属性值;（声明）
属性:属性值;（声明）
属性:属性值;（声明）
……
}
- 选择器和声明组成
- 每条声明以分号结尾
- 最后一条声明可以省略分号
样式表的权重(优先级)
- 内联>内部
- 内联>外部
- 内部和外部,根据就近原则，离得近的优先显示
样式表的选择
- 内联样式表：css属性较少的时候，还需要考虑优先级的问题
- 内部样式表：写小案例
- 外部样式表：整页开发，结构样式分离
选择器
- 标签选择器
```
  p{color:red;}
```
- id选择器
  - 给标签添加id的属性，值为id名
```
 <div id="box">Lorem ipsum dolo</div>
```
  - #id名选择元素
```
  #box {background-color: pink;}
```
    1. id名不能重复
    2. id只能有一个
- class(类)选择器
  - 给标签添加class的属性，值为class名
```
<div class="box box1">Lorem ipsum </div>
```
  - .class名选择元素
```
  .box {color: red;} .box1 {background-color: royalblue;}
```
    1. class名可以重复
    2. 一个标签可以有多个class名,多个之间用空格隔开
- 通用选择器
```
  *{margin:0; 外边距padding:0; 内填充}
```
- 伪类选择器(状态)
选择器的权重
标签命名
- 英文单词并且语义化
- 驼峰命名
- 短线连接
- 下划线连接

注意

宽高只对独占一行的元素生效

4 选择器

伪类选择器在某种状态下所显示的样式爱恨原则 love hate
- 超链接:link{} 链接未点击之前
- 超链接:visited{} 链接访问之后
- 任何元素:hover{} 鼠标划过该元素
- 超链接:active{} 鼠标按下的状态
后代选择器
选择器选择器{}
- 可以是多个选择器
- 选择器之间可以跨级，但是必须存在后代关系
群组选择器
选择器,选择器{}
选择器的权重
- 内联样式 1000
- id选择器 100
- class选择器/伪类选择器 10
- 标签选择器 1
- 继承样式 0
选择器权重特点
- 权重值越高，优先显示该样式
- 后代选择器的权重由每个选择器的权重值相加
- 群组选择器的权重值为选择器本身的权重值
- 权重值相同的，就近原则
- 继承样式的权重值是最低的

css属性

字体属性
- 字体大小 font-size 一般情况是偶数，并且一般不低于10px
  - 数值+px
  - 数值+em 默认值1em=16px 父元素有字体大小，参考的是父元素的字体大小
  - 数值+rem 默认值 1rem=16px 根元素(html)有字体大小时，参考根元素的字体大小(移动端)
- 字体加粗 font-weight
  - bold 加粗
  - normal 去掉加粗样式
- 字体倾斜 font-style
  - italic 倾斜
  - normal 去掉倾斜样式
- 字体类型 font-family
  - 中文，加引号
  - 英文，一个单词不用引号，多个单词要加引号引起来
  - 多个字体类型用逗号隔开，浏览器会依次检索，有该字体直接显示，找到最后都没有该字体时，显示默认字体
文本属性
- 颜色 color
  - 颜色单词
  - 十六进制 #f1f1f1
  - rgb(0-255,0-255,0-255) rgb(241, 241, 241);
- 文本水平对齐方式 text-align
  - left 左对齐默认值
  - center 居中
  - right 居右
  - justify 两端对齐内容向两边，加大中间的间距
- 行高 line-height
  - 数字：字体大小的倍数
  - 数值+px
  - 应用
    - 多行文本：加行高可以增大行和行之间的距离
    - 单行文本：将行高和元素的高度设置成一样，实现垂直居中
- 文本修饰 text-decoration
  - underline 下划线
  - overline 上划线
  - line-through 删除线
  - none 去掉下划线t:
- 文本缩进 text-indent
  - 数值+px 只对独占一行的元素才生效
  - 可以设置负数
  - 缩进两个词：设置text-indent:2em; 参考当前元素的字体大小
- 字符间距 letter-spacing
  - 数值+px
  - 中文：加大字和字之间的距离英文：加大字母之间的距离
- 单词之间的距离 word-spacing
  - 数值+px
  - 只对英文生效，加大单词和单词之间的距离
列表属性
- 列表符号 list-style-type
  - disc 实心圆
  - squre 方块
  - circle 空心圆
  - none 去掉列表符号

5 css属性

层叠
- 通过不同的选择器选择同一个标签的时候，设置了相同的属性，但是设置了不同的属性值，根据选择器的权重值，权重值高的优先显示，如果没有冲突的样式，正常显示
大小写转换 text-transform
- 首字母全部大写 capitalize
- 全部小写 lowercase
- 全部大写 uppercase
- 默认值 none
复合写法 font
- font: 字体加粗字体倾斜字体大小/行高字体类型
```
font: bold italic 20px/40px "宋体";
```
  - 字体加粗字体倾斜为可选
  - 字体大小/行高字体类型必选，并且必须是该格式
列表属性
- list-style-type:disc/square/circle/none
- list-style:none 去掉列表符号
边框属性
- 边框大小 border-width
  - 数值+px
- 边框样式 border-style
  - 实线 solid
  - 虚线 dashed
  - 点状线 dotted
  - 双实线 double
- 边框颜色 border-color
  - 默认情况下，边框颜色和字体颜色一样
  - 颜色单词/rgb()/十六进制
- 边框的复合写法 border: 边框大小边框样式边框颜色;顺序不固定
- 单方向边框 border-方向(top/right/bottom/left/none(去掉边框)):边框大小边框样式边框颜色;
- 边框实现三角形
```
  向右的三角div {height: 0;width: 0;border-top: 20px solid transparent;border-right: 20px solid transparent;border-bottom: 20px solid transparent;border-left: 20px solid red;}
```
背景属性
- 背景颜色 background-color
- 背景图 background-image:url()
- 背景图是否重复 background-repeat
  - repeat 重复
  - repeat-x 在x轴重复
  - repeat-y 在y轴重复
  - no-repeat 不重复
- 背景图的位置 background-position: x轴 y轴;
  - 数值+px 向右和向下为正数,反之,可以设置负数
  - 关键字
    1. 水平方向:left/center/right
    2. 垂直方向:top/center/bottom
  - 只设置一个值的情况下,第二个值默认为居中
- 复合写法 background: 背景颜色背景图背景图是否重复背景图的位置; 顺序不固定
  - 展开的写法写到复合写法的后面,不然会被复合写法覆盖掉

浮动

应用场景:让纵向排列的元素横向排列
float
- none 默认值
- left 左浮动
- right 右浮动
浮动的特点
- 从父元素的边缘开始挨个排列
- 浮动元素会脱离文档流,浮动元素会遮挡后面的兄弟元素,但是不会遮挡文字
- 浮动元素的宽度如果超出父元素的宽,后面的元素会掉到浮动设置的位置
- 浮动元素会影响后面的兄弟,但是不会影响到前面的兄弟

两种图片的使用的条件

img插入的图片占位, 图片作为网页的内容
背景图不占位, 修饰性的图片用背景图插入

切图方法

矩形工具(一次只能切一个)
- 选中需要的图片 ctrl+c
- ctrl+n 弹框中按回车
- ctrl+v 粘贴图片
- 菜单项文件->导出->快速导出为png格式
切片工具(可以切多个)
- 选中多个需要的图片
- 菜单项文件->导出->存储为web所用格式
- 弹框中根据需求修改图片格式,完成点击存储
- 存储的时候文件资源器的,图像选择所有用户切片
- 在对应的文件下面会生成images的文件夹

6 盒模型

内容区(content) 显示文字/图片/视频等的区域，宽高确定内容区
内填充(padding)
- padding值的设置
  - 一个值 padding:10px 四周
  - 两个值 padding:10px 20px; 上下左右
  - 三个值 padding: 10px 20px 30px; 上左右下
  - 四个值 padding: 10px 20px 30px 40px; 上右下左
  - 单方向 padding-方向(left/right/top/bottom): 数值+px;
- padding值的特点
  - 会撑大盒子,如果不想被撑大的话，要在原来宽高的基础上，减去对应方向的padding值
  - padding值不能设置负数
  - 背景图/色可以在padding区域显示
  - 可以用来调整内容区到盒子边缘的位置
边框(border) 边框也会撑大盒子，设计图从边框里面开始量取
外边距(margin)
- margin值的设置和padding值是一样的
- margin值的特点
  - margin值不会撑大盒子，但是会影响到旁边的元素
  - margin可以设置负数
  - 背景图和背景色不在margin区域显示
  - 调整自己和别的元素之间的距离
  - margin:auto; auto: 浏览器会根据当前窗口的宽，减去元素的宽，将剩余的空间进行一个自动的平均分配，实现左右的居中，垂直是不生效的
- margin的bug
  - margin的传递：给元素的第一个子元素添加上边距的时候，边距会错误加在父元素的身上
    1. 使用padding
    2. 给父元素添加边框
    3. 给父元素或者是该元素添加浮动
    4. 给父元素添加overflow:hidden(溢出隐藏)
  - margin的重叠：给上面的元素设置下边距，给下面的元素设置了上边距，边距会产生重叠，并且以两个值的最大值显示，左右的间距是不会出现重叠的
    1. 只给一个盒子添加外边距

去掉标签自带的行高

设置line-height(行高)和font-size(字体大小)值为一样

7

img自带的3px的底部留白

vertical-align:垂直方向对齐方式 (只对图片生效)
- baseline 基线默认值
- bottom 底线可以解决bug
- middle 中线可以解决bug
- top 顶线可以解决bug
- 应用
  - 解决图片底部三像素的留白
  - 调整小图标和文字对齐的方式

元素类型

内联元素(inline) span b strong i em a sub sup img
- 宽高不生效，由内容决定
- 在同一行显示
- 盒模型属性padding的左右生效，上下显示不准确;margin的左右显示准确，上下不准确
块级元素(block) h1-h6 div p ul li dl dt dd ol form table
- 宽高生效
- 独占一行
- 盒模型属性都生效
- 一般作为容器去包裹其他元素,p标签一般不包裹块级元素，也不包裹自己
行内块元素(inline-block) input (img)
- 在同一行显示
- 宽高生效
- 盒模型属性都生效
元素类型转换 display
- block 块
- inline 内联
- inline-block 内联块
- none 隐藏隐藏之后不占位
  - visibility: hidden; 隐藏元素隐藏之后会占位
解决横向排列的元素之间的空格
- 将标签代码写到同一行
- 添加浮动
- 给元素添加一个父元素，设置font-size:0;然后单独设置该元素的字体大小
内联元素添加浮动之后，会转换成块级元素

溢出属性

overflow(overflow-x/overflow-y)
- visible 默认值显示
- hidden 溢出隐藏
- scroll 显示滚动条
- auto 内容没有溢出正常显示，溢出显示滚动条
- 单行文本溢出显示省略号
  - 设置宽度
  - 设置不换行 white-space:nowrap
  - 设置溢出隐藏 overflow:hidden
  - 设置文本溢出显示省略号 text-overflow:ellipsis

8 css属性的继承

给元素设置样式之后，该元素的后代都会具有该样式
可以继承
- 字体类：font-size(字体大小)font-weight(字体加粗) font-style(字体倾斜)font-family(字体类型)
- 文本类：color(文本颜色) text-indent(缩进) line-height(行高) letter-spacing(字符间距) word-spacing(单词之间的距离) text-align(文本对齐方式)
- 列表属性：list-style
不可继承
- text-decoration(文本修饰) width height float padding margin border

定位 position

static 默认值
relative 相对定位
- 参考物：自己本身
- 移动距离：left/right/bottom/top:数值+px
- 特点
  - 移动之后依然占位
  - 定位元素的层级要比普通元素的层级要高
aboslute 绝对定位
- 参考物(包含块)：有定位属性(除static属性之外)的祖先元素,设置绝对定位的元素，会一层一层向上找有定位属性的祖先元素，谁有定位属性，就参考谁去移动，如果找到body也没有找到有定位属性的祖先元素的话，就参考body，也就相当于浏览器的窗口
- 移动距离：left/right/bottom/top:数值+px
- 特点
  - 脱离文档流，会遮挡后面元素的文字
  - 给元素设置绝对定位后，margin:auto会失效
  - 给内联元素添加定位后，内联元素会变成块级元素
  - 给元素不设置宽，自适应宽度的时候，加了绝对定位，自适应会失效，需要重置元素的宽width:100%
- 应用场景
  - 元素水平垂直居中1
```
    <div class="box1"><div class="box2"></div></div>
```
```
  .box1 {width: 600px;height: 400px;background-color: pink;margin: 0 auto;position: relative;}.box2 {width: 200px;height: 200px;background-color: cornflowerblue;position: absolute;/* left: 150px; *//* top: 100px; */left: 50%; 当前参考元素的宽度的50%margin-left: -100px; 向左拉取当前盒子宽度的一半top: 50%;margin-top: -100px;向上拉取当前盒子高度的一半
}
```
  - 元素水平垂直居中2
```
 .box2 {width: 200px;height: 200px;background-color: cornflowerblue;position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;
}
```

设置边框圆角

border-radius:数值+px;

9 定位

absolute 绝对定位

应用场景

元素的水平垂直居中

有重叠效果

 <div><img src="img/1.webp" alt=""><ul><li class="first"></li><li></li><li></li><li></li><li></li><li></li></ul>
</div>

  div {width: 800px; 设置宽高和图片一样的宽高height: 300px;border: 10px solid black;position: relative;}ul {/* width: 400px;height: 25px; */background-color: blueviolet;position: absolute; 参考div去定位bottom: 30px;right: 50px;}

二级菜单
1. 二级菜单添加绝对定位属性

定位元素的层级关系 z-index
- auto 默认值
- 数值数值越大，层级越高，在最上面显示，可以为负数

宽高自适应

宽度自适应,参考父元素
- 宽度不设置
- 设置百分比
- 最大宽度(max-width)和最小宽度(min-width)
高度自适应
- auto 自动根据内容撑开
- 高度不设置根据内容撑开
- 百分比参考父元素
- 最小高度(min-height)和最大高度(max-height)
- 一屏页面(盒子的宽高和当前浏览器的宽高一样)的实现方式
```
  html,body{height:100%;}div{height:100%;width:100%; (可设，可不设)}
```

圆形

border-radius:50%/100%;

10 定位

固定定位 position:fixed;
- 参考物浏览器窗口
- 移动距离 left/right/bottom/top
- 特点
  - 不会跟随滚动条进行滚动
  - 脱离文档流
  - margin: auto;失效
  - 宽度自适应会失效，需要重新设置宽度
- 应用场景
  - 侧边栏/回到顶部/头部导航/广告
粘性定位 position:sticky;
- 参考物浏览器窗口
- 移动距离 top
- 特点
  - 未达到top值之前，普通元素，达到top值之后类似于固定定位

锚点

实现在同一个页面不同板块之间的跳转
利用a标签的href属性和id名(必须是id名)进行联系

  <a href="#box">跳转</a><div id="box"></div>

高度塌陷

产生条件
- 父元素不设置高度，想要子元素撑开
- 子元素浮动
解决方法
- 给高度塌陷的父元素添加overflow:hidden;(触发BFC)
  - 弊端：会把溢出父元素的内容隐藏掉
- 给浮动元素的下方添加一个块级元素(一般添加的是div),给块级元素设置clear属性
  - clear:left/right/both; 清除浮动元素对后面的元素带来的影响
  - clear只对块级元素生效
  - 弊端：代码中会出现很多空的标签，造成代码冗余
- 万能清除法，给高度塌陷的父元素，通过伪元素选择器的方法添加元素
```
  高度塌陷的父元素::after{content:"";clear:both;display:block;}
```

伪元素

给父元素添加最后一个孩子,内联元素
元素::after{
content: “”;必须
}
给父元素添加第一个孩子内联元素
元素::before{
content:"";必须
}
选中第一个字符
元素::first-letter{
css属性：css属性值;
}
选中第一行
元素::first-line{
css属性：css属性值;
}

引入外部样式表

@import url()

  <style>@import url(路径);</style>

区别
- @import只能引入css文件，link不只可以引入css文件
- @import的css文件会在结构加载完成之后，才开始加载，link是结构和样式同时加载
- @import只能在ie5以上支持，link都支持

11 表格和表单的新增

表格的新增
- 标题标签 caption
  - caption-side:top(默认)/bottom 标题的位置
```
  <table><caption>标题</caption></table>
```
- 列标题 th
```
  <tr><th>姓名</th><th>性别</th><th>年纪</th></tr>
```
- 行分组
  - 表头可选thead
  - 表体可以有多个tbody
  - 表尾可选tfoot
- 列分组 colgroup
  - span: 几列为一组
```
 <colgroup><col span="1" class="first"><col span="2" class="second"><col span="1" class="third"></colgroup>
```
- 单元格之间的距离：border-spacing：数值+px 一般设置0。加在表格身上
- 合并边框 border-collapse:collapse; 加在表格身上
- 表格固定 table-layout:auto(自动)/fixed(固定) 加在表格身上
  - 设置表格为fixed提高浏览器加载速度
- 垂直对齐方式 vertical-align: baseline/top/bottom/middle 可以在单元格中生效

表单的新增

单选框 name的属性必须有，且值必须一样才能够互斥，checked 默认选中 disabled 禁止选中
```
<input type="radio" name="sex" checked>男<input type="radio" name="sex">女
```

多选框 checked 默认选中 disabled 禁止选中

  <input type="checkbox" checked disabled>M416<input type="checkbox">AKM

下拉列表 selected:默认选中

  <select name="height" id=""><option value="1">175</option><option value="2" selected>176</option></select>

多行文本域
- 禁止用户缩放：给textarea 添加 resize:none;
```
  <textarea name="" id=""></textarea>
```
文件上传
```
  <input type="file">
```

扩大表单选中范围 label

for的属性值指向选择元素的id名

  <label for="man"><input type="radio" name="sex"  id="man">男  </label>

表单字段集 fieldset

字段集标题 legend

  <fieldset><legend>标题</legend><input type="text"></fieldset>

去掉表单元素获取焦点时候的边框

outline:none;

BFC

块级格式化上下文(独立渲染的区域)
触发条件
- float的值为left/right
- position的值为absolute/fixed
- display的值inline-block/table-caption/table-cell/flex(弹性盒)/inline-flex
- overflow的值为hidden/scroll/auto
特性
- 在BFC的区域，浮动元素的高度也会计算在内（解决高度塌陷）
- BFC的区域不会与浮动盒子重叠（两栏布局）

计算属性

width: calc(100% - 300px) 计算符号两边一定要有空格

过渡 ie9及以下不支持

需要过渡的属性：transition-property：css属性
过渡持续时间：transition-duration：数值+s/数值+ms 1s=1000ms
过渡延迟时间：transition-delay:数值+s/数值+ms 1s=1000ms
过渡执行效果：transition-timing-function：linear(匀速)
复合写法：transition:需要过渡的属性过渡持续时间过渡延迟时间过渡执行效果;（顺序不固定，出现一个时间或者两个时间的话，默认第一个时间为执行时间）
- transition: all 1s; 过渡所有的属性，过渡时间为1s

透明

background-color:rgba(0-255,0-255,0-255,0-1)
- 0表示完全透明 1表示不透明值越小越透明

12 浏览器内核(浏览器的解析代码机制)

ie浏览器 Trident内核 -ms-
火狐浏览器 Gecko内核 -moz-
欧鹏浏览器 Blank内核 -o-

谷歌浏览器 Webkit内核 -webkit-

过渡的兼容写法

  /* 标准写法 */transition: all 1s;/* 火狐*/-moz-transition: all 1s;-webkit-transition: all 1s;

渐变 ie9及以下不支持

线性渐变：background-image/background:linear-gradient(渐变方向,颜色1,颜色2……)
- 方向 设置方向一定要加 to
  - to bottom; 向下
```
  background-image: linear-gradient(to bottom, red, yellow, blue, green);
```
  - to top; 向上
  - to left 向左
  - to right 向右
  - to right top 右上角
  - to right bottom 右下角
  - to left top 左上角
  - to left bottom 左下角
  - 数值+deg
```
  background-image: linear-gradient(45deg, red, yellow, blue, green);
```

重复性的线性渐变 background-image/background: repeating-linear-gradient(渐变方向,颜色1,颜色2……)

 .box2 {/* 0-10px 红色纯色 10px-50px 红色到蓝色的过渡 50px之后是蓝色纯色*/background-image: repeating-linear-gradient(red 10px, blue 50px);font-size: 50px;line-height: 50px;}

径向渐变 background-image/background:radial-gradient(方向,颜色值1,颜色值2……)
- 方向：和背景图的位置取值一样，设置方向一定要加浏览器前缀，否则不生效
```
  background-image: -webkit-radial-gradient(left top, red, yellow);
```
重复性的径向渐变 background-image: repeating-radial-gradient(方向, 颜色值1,颜色值2……);
```
  background-image: repeating-radial-gradient(blue, red 20px);
```

2d变形 transform:位移|旋转|缩放|倾斜

位移
- transform:translateX(数值+px) 向右和向下为正数
- transform:translateY(数值+px) 向右和向下为正数
- 两个方向同时位移
```
transform: translateX(100px) translateY(-100px);
transform: translate(100px,-100px);
```
- 写一个值代表的是x轴的位移
```
 transform: translate(100px);
```
- 移动之后，原来的位置依旧存在
- 利用位移实现水平垂直居中
  - 优点：不论大盒子和小盒子的宽高如何变化，都能够识别到宽高的百分比
```
  .box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); 百分数参考的是当前盒子的宽高        }
```
旋转
- x轴的旋转 transform:rotateX(数值+deg)
- y轴的旋转 transform:rotateY(数值+deg)
- z轴的旋转 transform:rotateZ(数值+deg) 顺时针是正数，逆时针是负数
- 只写一个值：
  transform: rotate(-600deg); 代表的是z轴的旋转
- 位移和旋转同时存在
```
 表示先位移后旋转transform: translateX(300px) rotateZ(90deg);先旋转，坐标轴会跟着变化，位移会根据新的坐标轴去移动transform: rotateZ(90deg) translateX(300px);
```
缩放
- x轴的缩放 transform:scaleX(数值) 1：正常 0-1之间是缩小 >1是放大
- y轴的缩放 transform:scaleY(数值) 1：正常 0-1之间是缩小 >1是放大
- 两个方向都有
```
  div{transform: scaleX(0.4) scaleY(2);transform: scale(0.4, 2);transform: scale(2);}
```
倾斜
- x轴的倾斜 transform:skewX(数值deg)
- y轴的倾斜 transform:skewY(数值deg)
- xy轴的倾斜
```
div{transform: skew(40deg, 50deg);
}
```
- 一个值代表的只是x轴的倾斜
变形原点：transform-origin:水平垂直
- 水平：left/center/right 垂直：top/center/bottom
- 数值+px
- 百分比

利用外部样式表写过渡属性存在的问题及解决

问题：利用外部样式表写过渡属性可能会在页面初始的时候就有过渡效果
解决：给整个结构也就是html的标签下面添加

过渡属性对 display:none到display:block是不生效的

13 动画 ie9及以下不支持

定义动画

  @keyframes 动画名{关键帧 划分时间from{} 0%to{} 100%}5s@keyframes 动画名{0%{} 020%{} 1s40%{} 2s60%{} 3s80%{}100%{}}兼容写法@-moz-keyframes longer{}@-webkit-keyframes longer{}

使用动画
- animation-name: 动画名
- animation-duration: 动画执行的时间 s/ms
- animation-delay: 动画的延迟时间 s/ms
- animation-iteration-count: 动画执行的次数数值/infinite（无限循环）
- animation-timing-funcition: 动画的执行效果 linear(匀速)
- 复合写法 animation: 动画名动画执行的时间动画的延迟时间动画执行的次数动画的执行效果; animation: longer 1s infinite linear;
  - 兼容写法 -webkit-animation
- animation-direction: 动画的播放方向；noraml(正向)/reverse(反向)/alternate(交替运行)
- animation-fill-mode:动画停止的关键帧(要限制次数才可以停止)；backwards(第一帧)/forwords(最后一帧)如果设置了动画执行的方向为反向，关键帧起始和结尾也会变
- animation-play-state:动画是否停止播放 running(播放)/paused(暂停)
```
  div:hover {animation-play-state: paused;}
```

3d变形 transform

位移
- z轴的位移 transform:translateZ(数值+px)
- 三个轴都位移 transform:translate3d(x轴,y轴,z轴)
旋转
- x轴的旋转 transform:rotateX(数值+deg)
- y轴的旋转 transform:rotateY(数值+deg)
- 三个轴都旋转 transform:rotate3d(a,b,c,数值+deg) 0或者1 0表示不旋转 1表示旋转
缩放
- z轴缩放 transform:scaleZ(数值) 0不显示 1正常 0-1缩小 >1放大
- 三个轴都缩放 transform:scale3d(x轴,y轴,z轴缩放)
景深：persepctive:数值+px 近大远小
形成3d空间 transform-style:flat(2d平面)/preserve-3d(3d空间)属性加在变形元素的父元素身上
背部隐藏：backface-visibility: hidden;

透明度

使用透明度可以实现元素从无到有的过程

第一种 rgba()

  div {width: 200px;height: 200px;background-color: rgba(165, 42, 42, 1); 透明度从1transition: all 1s;}   div:hover {background-color: rgba(165, 42, 42, 0);过渡到0}

第二种 opacity

 div {width: 200px;height: 200px;background-color: brown;opacity: 1; 透明度从1transition: all 1s;}    div:hover {opacity: 0;  过渡到0 }

区别：rbga不会模糊到里面的文字，opacity会影响里面的文字

14 css3新增的选择器

属性选择器权重和class选择器一样为10 方括号前面可以加标签名，限制名可以是自定义属性
- [属性名=“属性值”] 属性名和属性值匹配
- [属性名^="值元素
- [属性名]{} 属性"] 属性值以某个值开头
- [属性名$=“值”] 属性值以某个值结尾
- [属性名*=“值”] 属性名中包含某个值
伪类选择器权重值和class选择器一样为10 0010
- 结构性的伪类
  - child系列
    1. 父元素子元素:first-child{} 父元素中的第一个孩子必须和该子元素匹配
    2. 父元素子元素:last-child{} 父元素中的最后一个孩子必须和该子元素匹配
    3. 父元素子元素:nth-child(n){} 父元素中的第几个孩子必须和该子元素匹配 n可以替换成even(偶数)odd(奇数) 也可以是表达式 2n等 n是自然是从0开始
    4. 父元素子元素:only-child{} 父元素中只能有该子元素一个孩子
  - type系列
    1. 父元素子元素:first-of-type{} 这么多子元素中的第一个
    2. 父元素子元素:last-of-type{} 这么多子元素中的最后一个
    3. 父元素子元素:nth-of-type(n){} 这么多子元素的第几个子元素
    4. 父元素子元素:nth-last-of-type(n){} 这么多子元素中倒数第几个元素
- 目标伪类 (一般结合锚点使用）元素:target{} 点击跳转到该板块之后样式才生效
```
  <a href="#box">点击跳到HTML板块</a><div id="box">HTML板块</div>
```
```
 #box:target {background-color: brown;color: chartreuse;font-size: 40px;}
```
- 状态伪类
  - 可编辑表单元素:enabled{} eg: input:enabled{}
  - 不可编辑表单元素:disabled{} eg: input:disabled{}
  - 获取焦点表单元素:focus{} eg: input:focus{}
  - 选中单选/多选::checked{} eg: input:checked+span{}
  - 高亮状态元素::selection{} eg: div::selection{background-color:blue;color:red}
- 动态伪类(link/visited/hover/active)
层级选择器
- 后代选择器选择器选择器{}
- 子代选择器选择器>选择器只能选择的孩子
- 相邻的后面兄弟选择器+选择器{}
- 相邻的后面的兄弟们选择器~选择器{}

H5新增的语法及标签 ie8及以下不生效

新增标签特点：语义化
- 头部 header
- 导航 nav
- 板块 section
- 侧边栏 aside
- 主要内容区域 main
- 有图文 figure ficaption
```
  <figure><img src=""><figcaption>图片说明</figcaption></figure>
```
- footer 底部
- article 文章
- mark 标记内联
- time 时间标签内联
新增的语法
- 文档声明DOCTYPE可以小写
- 单标签不写结尾标签
- 可以省略的结尾标签 li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th
- 可以省略的标签 html、head、body、colgroup、tbody

多媒体标签

音频

 <audio src="zy/梦然-少年.mp3" controls autoplay muted loop></audio>兼容写法 浏览器从上到下解析支持那种格式就播放哪个
<video width="800" height=""><source src="myvideo.mp4" type="video/mp4"></source><source src="myvideo.ogg" type="video/ogg"></source><source src="myvideo.webm" type="video/webm"></source>
</video>controls: 控件autoplay: 自动播放 谷歌和火狐不支持muted: 静音 静音之后火狐支持自动播放loop: 循环

视频

   <video src="zy/zyx.mp4" controls autoplay loop poster="zy/7.jpg"></video>属性同音频autoplay: 静音之后谷歌和火狐都支持自动播放poster: 视频没有播放之前显示的图片 兼容写法  浏览器从上到下解析支持那种格式就播放哪个<audio controls><source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg"></audio>

15 怪异盒模型

标准盒模型：box-sizing:content-box
- 盒子宽度 = 内容区的width+padding的左右+border的左右+margin的左右
怪异盒模型：box-sizing:border-box ie8以下不支持
- 盒子宽度 = 内容区的width + margin的左右

弹性盒布局(flex)

父元素
- 形成弹性盒 display:flex;
- 主轴对齐方式 justify-content
  - flex-start 默认值主轴起点
  - flex-end 主轴终点
  - center 主轴中心
  - space-between 两端对齐
  - space-around 中间空隙是两边的2倍
  - space-evenly 平均分配
- 交叉轴 align-items
  - stretch 默认值拉伸 (主轴是横向的话，看到该效果需要去掉子元素的高度，子元素的高会拉伸到和父元素一样高，主轴是纵向的话，看到该效果需要去掉子元素的度，子元素的宽会拉伸到和父元素一样宽)
  - flex-start 交叉轴的起点
  - flex-end 交叉轴的终点
  - center 交叉轴的中心
- 主轴的方向 flex-direction
  - row 默认值横向从左向右
  - row-reverse 横向从右向左
  - column 纵向从上到下
  - column-reverse 纵向从下到上
- 换行 flex-wrap
  - nowrap 默认值不换行
  - wrap 换行
- 多行之间的对齐方式 align-content
  - stretch 拉伸
  - flex-start 整个盒子的起始
  - flex-end 整个盒子的终点
  - center 主轴中心
  - space-between 多行内容两端对齐
  - space-around 多行内容中间空隙是两边的2倍
  - space-evenly 多行内容平均分配
子元素
- 子项在交叉轴的对齐方式 align-self 重写父元素中交叉轴对齐方式(align-items)
  - stretch 拉伸
  - flex-start 交叉轴的起点
  - flex-end 交叉轴的终点
  - center 交叉轴的中心
- 排列顺序 order
  - 数值值越大，越在后面排，可以为负数
- 放大比例 flex-grow
  - 0 不放大
  - 数值
- 压缩 flex-shrink
  - 1 默认值压缩
  - 0 不压缩
  - 滚动导航的实现
    1. 设置子项不压缩 flex-shrink:0;
    2. 给父元素设置溢出显示滚动条 overflow-x:auto;
- 子项的宽度 flex-basic:数值+px
- 复合属性 flex:flex-grow(0) flex-shrink(1) flex-basic(auto);
  - flex:1; 子项占满整个剩余控件

利用弹性盒对盒子进行水平垂直居中

  父元素{display:flex;justify-content:center;align-items:center;}

css3新增的属性

盒子阴影 box-shadow: x轴偏移 y轴偏移阴影模糊大小阴影大小阴影颜色阴影位置
- eg: box-shadow: 10px 10px 20px 10px green inset;
文字阴影 text-shadow:x轴偏移 y轴偏移阴影模糊大小阴影颜色
- eg: text-shadow: 10px 10px 10px blue;
圆角 border-radius:
- 一个值四周
- 两个值对角
- 三个值左上对角右下
- 四个值顺时针
背景图的大小 background-size: 宽度高度
- 百分比可能会变形
- 像素
- 关键字
  1. cover 背景图会不断放大直到充满整个盒子，可能会出现裁切的情况
  2. contain 背景图会不断的放大碰到边缘后就停止放大，可能会出现留白

背景图的固定

background-attachment:srcoll/fixed(固定) 背景图不会随滚动条滚动

元素类型

置换元素：浏览器会根据标签以及标签内的属性值来显示不同的内容
input的type类型
img的src
textarea的内容在变
select中的option内容会变
非置换元素:除了置换元素
为啥img或者input有的标签可以设置宽高？？因为标签属于置换元素

字体图标的使用

普通字体图标的使用
- 搜索对应的图片，点击加入购物车
- 完成后点击添加至项目
- 下载项目到本地站点，解压文件，不要删除任何文件
- 在使用图标的文件地方用link引入iconfont.css文件
```
  <link rel="stylesheet" href="download/font_2135748_v7l4jintarp/iconfont.css">
```
- 使用，必须加 iconfont的名字，其次添加所需图片的class名
```
  <span class="iconfont icon-jipiao">哈哈哈</span>
```

彩色图标的使用

引入js文件

  <script src="download/font_2135748_v7l4jintarp/iconfont.js"></script>

添加通用样式

  .icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}

使用只需要改id名就行

 <svg class="icon" aria-hidden="true"><use xlink:href="#icon-tubiaov-daochushangchuan-"></use></svg>

16 响应式布局

概念：根据不同的分辨率，显示不同的样式
主要修改的样式
- 元素的隐藏与显示
- 宽度
- 浮动排列
- 文本对齐方式
- 字体大小
优点：适配性好
缺点：
- 增大工作量
- 出现大量的隐藏元素，导致代码量冗余
- 一般用在小网站

媒体查询

  @media 设备类型 and (媒体特性){}

设备类型
- all 所有的设备
- screen 显示器/笔记本/移动端设备
- print 打印机
媒体特性
- min-width(比最小值大)/max-width(比最大值小)
- 媒体特性的值后面不要加分号
- 多个媒体特性之间用and连接
- and两侧必须有空格

    <style>/* @media 设备类型 and 媒体特性{} *//* 设备宽度>1000 body显示红色 */ @media screen and (min-width:1000px) {body {background-color: red;}}/* 设备宽度500-1000 body显示蓝色 */@media screen and (min-width:500px) and (max-width:999px) {body {background-color: blue;}}/* 设备宽度<500 body显示粉色 */@media screen and (max-width: 499px) {body {background-color: pink;}}</style>

17 移动端准备工作

meta标签

  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

+ 视口 viewport- 布局视口：css所作用的区域，默认是980px;- 可视视口：所看到的区域- 完美视口/理想视口：将布局视口的宽和可视视口的宽设置为一样 width=device-width
+ 参数- width = device-width：宽度等于当前设备的宽度- initial-scale： 初始的缩放比例（默认设置为1.0）- minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）- maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）- user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

设备参数
- 屏幕尺寸：对角线的长度
- 分辨率：宽度或者高度容纳像素的个数
- PPI: 每英寸显示的像素点的个数
- 物理像素: ps量取的值
- 逻辑像素：css设置的值
- 逻辑像素比(dpr) = 物理像素/逻辑像素
  pc端ps量取多少值就设置多少的值，移动端，因为iphone4的出现，出现了视网膜高清屏，1个css像素对应的就不是1个物理像素，物理像素和逻辑像素就产生了不对等的情况
  - 320设计图 dpr=1
  - 750/640设计图 dpr=2
  - 1080/>750 dpr=3
单位
- 百分比
- em/rem
  - em: 字体大小参考父元素的字体大小
  - rem: 参考根元素(html)的字体大小
    1. 一般将根元素的字体大小设置为100px html{font-size:100px}
- vw(设备宽度)/vh(设备高度)
  1vw = 设备宽度的1% vh等同
  10vw = 设备宽度的10% vh等同
  100vw = 设备宽度的100% vh等同
根元素单位转换
- 设计图宽度750/设备宽度 375px
  1rem = 100px
  100vw = 375px
  1rem = ??vw 1rem = 26.667vw
- 设计图宽度640/设备宽度 320px
  1rem = 100px
  100vw = 320px
  1rem = ?? vw 1rem = 31.25vw

移动端布局

百分比布局(流式布局)
rem布局(等比缩放布局)
- 观察设计图大小，确定dpr,在ps图像-》图像大小，修改图像所对应的宽度(根据量取的值/dpr)
- 设置HTML标签的font-size:26.667vw或者24.154vw。
  - 100vw = 设备分辨率 ( 设计图 / dpr ) 414
  - 1vw = 414px / 100 = 4.14px
  - 100px = 100/1vw(4.14px) = 24.154vw
- 在设计图里正常测量，测量出来的结果是以px单位结尾的，我们写代码的时候要把这个px换算成rem，此时px和rem的比例就是1rem:100px
  height:0.9rem;
混合布局(百分比+rem)

18 CSS Sprite

雪碧图的本质：将项目中所有的小图进行整合，整合为一张大图，然后使用背景图片和background-position属性来进行定位，进而显示出整张大图里某一个小的区域。

雪碧图的优势：介绍服务器端硬盘的寻址压力，减少HTTP请求次数；繁忙的网站有必要使用，但不繁忙的网站完全没有必要。

劣势：

1. 使用麻烦
1. 维护起来不能改变原有图片的位置。

使用注意事项：

1.确定装载图片的容器，并为其设置宽高（图标的宽高）。
2.为装载图片的容器设置background-image属性。
3.测量要使用的图标在雪碧中的相对位置。
4.为装载容器设置background-position属性，属性值就为刚刚量取的相对位置（该值都为负值，没有特性情况）。

P-1(全)web前端HTML5andCSS笔记相关推荐

web前端开发笔记46-71，78-83 2022/11/04
web前端开发笔记一.标签群组通配等选择器(TAG) 1.标签选择器 2.群组选择器(不同标签) 3.通配选择器(一锅端) 二.层次选择器 - 后代():M N - 父子:M > N - 兄弟 ...
Web前端开发笔记——第二章 HTML语言第四节超链接标签
目录前言一.超链接标签 (一)链接其它子网页 (二)链接其它站点 (三)虚拟超链接二.从当前页面链接到指定位置三.链接的访问情况四.在新窗口中打开链接例题结语前言本节介绍超链接标签即 ...
Web前端JavaScript笔记（4）节点
如何获取元素节点的属性: 在Web前端JavaScript笔记(3)对象中,介绍了访问行间属性的方法,除此之外,系统还提供了三个方法访问元素的属性: 1. setAttribute: 2. getAt ...
web前端学习笔记（最新）
web前端学习笔记大家好,我是链表哥,新的学期,新的学习,我会为您展示我的学习进程. 一:什么是WEB前端? 所谓的Web前端指的是用户所能接触到的,并服务于用户的前沿端口,经我们程序员编辑修饰后展 ...
入门响应式Web？看懂这篇文章就够了！——Web前端系列学习笔记
文章目录视口基础知识视口概念视口基本属性 meta 标签视口应用实例媒体查询基础知识媒体查询概念 demo1-媒体查询 demo1效果百分比布局百分比布局概述 demo2-百分比布局 ...
【web前端教程笔记】
前端教程笔记这里写目录标题 **前端教程笔记** 笔记1 1.什么是HTML,CSS? 2.如何去写代码?写到哪里? 笔记2 1.VSCode编辑器 2.如何安装插件?安装什么插件? 3.学习编辑器 ...
Web前端学习笔记（1）
文章目录一.第一部分 1.1内容一 Web前端导入二.第二部分 2.1内容一 HTML和CSS的定义三.第三部分 3.1内容一宇宙第一编译器Vs Code 3.2内容二快捷键的使用四.第四 ...
Web前端开发笔记——第一章 Web前端概论
目录前言一.Web系统 (一)Web系统的定义 (二)前端和后端二.网站和网页 (一)网站的开发历程 (二)网页的组成元素三.浏览器四.前端技术 (一)超文本标记语言(HTML) (二)层叠 ...
web前端学习笔记（初识HTML）
目录 1.简介 2.Html的历史: 3.常用的工具 4.网页的基本信息: 5.网页的标签: 6.安装我们的idea 7.配置idea 8.特殊符号: 9.链接标签: 10.锚链接: 11.功能性链接 ...