html&css笔记（更新版）

最新推荐文章于 2024-07-18 17:34:14 发布

oh97

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量138

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/m0_59727332/article/details/121078686

版权

HTML

超文本标记语言

常见标签

html
head
meta
title
body
strong / b 加粗
h1~h6 标题
p 段落标签
br 换行标签
hr 分界线
a 描点标签
- href
- target
  - self在当前窗口打开
  - blank 新窗口打开
img 图片标签
u / ins 下划线
i / em 倾斜
s / del 删除线

有语义标签

header 网页头部

nav 网页导航

footer 网页底部

aside 网页侧边栏

section 网页区块

artticle 网页文章

无语义标签

div span

表格

table
- thead 表头
  - tr
    - th / caption
- tbody 主题
  - tr
    - td
- tfoot 底部
  - tr
    - td
- rowsapn 跨行合并（上下
- colspan 跨列合并（左右

表单

from
input
- 属性
- text 文本框
- password 密码框
- radio 单选框
- checkbox 多选框
- file 文件选择框
- multiple 文件多选
- submit 提交
- reset 重置
- value 键值
- name
- placebolder 默认提示值
- required 填写不能为空
button
- submit 提交
- reset 重置
select 下拉菜单
- selected 下拉菜单默认选中（属性
- option 下拉子级
label 可以用来包裹 input 使点击范围扩大（常用于复选框/单选框

文本域

textarea
- cols 文本域可见宽度
- rows 可见行数

列表

ul 无序列表
- li
ol 有序列表
- li
dl 自定义列表
- dt dd

媒体标签

audio (音频) / video （视频）
- controls 显示播放控件
- autoplay 自动播放
- loop 循环播放
- muted 静音播放（仅谷歌

seo

SEO 三大属性
- title 网页标题标签
- description 网页描述标签
- keywords 网页关键词标签

引入ico 图标

 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

相对路径 vs 绝对路径

字符实体

&nbsp;

<   &it;
>   &gt;
&   &amp;
''  &quot;
`   &apos

css3

css(cascading style sheets) 层叠样式表

标签选择器

标签选择器标签名{css}
类选择器 .类名{css}
id选择器 #id名{css}
通配选择器 *{css}
后代选择器选择器空格选择器{css}
子代选择器选择器 > 选择器 {css}
并集选择器选择器，选择器{css}
交集选择器选择器选择器{css}
hover 伪类选择器：hover{css}
属性选择器 [属性 = “属性值”]{css}
结构伪类选择器
- ：first-child{css} 第一个子元素
- ：last-child{css} 最后一个元素
- ：nth-child（n）{css} 第n个元素
- ：nth-last-chlid（n）{css} 倒数第n个元素
  - n的注意值范围：
    1. n为数字 0.1.2.3…
    2. 偶数 2n / even
    3. 奇数 2n+1 /2n-1 odd
    4. -n+5 找到前五个
    5. n+5 从第五个开始找到最后
：nth-of-type（n）：先通过该类型找到符合一堆元素，然后在这堆元素中找第n个
优先级公式：继承<通配<标签<类<id<行内<！important
复合选择器权重叠加计算行内 id 类标签按个数计算个数值越往前权重越大

链接伪类选择器

a:link{css} 为访问的状态
a:visited{css} 访问之后状态
a:hover{css} 悬停
a:active{css} 鼠标按下

字体

font-weight :normal 正常

bold加粗

100-900
font-style：normal 正常

italic倾斜
font-size：字体大小
font-family：字体1，字体2…
- 常见字体无衬线字体（例如黑体
- 衬线字体（例如宋体
- 等宽字体（例如consolas
line-height：数字 +px 行高
简写： font：style weight size/line-height family （注：没有style，weight可不写

文本

text-indet：2em 首行缩进
- 1em 等于当前font-size字体大小
text-align：left左对齐

center居中

right右对齐
text-decoration：underline 下划线

none 无装饰线

overline上划线

linethrough删除线
white-space：nowrap 不换行

wrap换行
text-overflow：ellipsis 超出文字省略号显示
text-shadow:h-shadow v-shadow blur color 水平偏移垂直偏移模糊度颜色
vertical-align：baseline（默认基线对齐方式

top 顶部

middle 中间

bottom 底部对齐

颜色/背景

opacity：取值0-1； `元素整体透明度
颜色表示
1. 关键字 red black blue…
2. 红禄蓝 reb
3. reba
4. 十六进制 #fffff
background-color：颜色
background-imge：url（图片路径）
background-repeat：{repeat平铺

no-repeat不平铺

repeat-x x轴平铺
repeat-y y轴平铺 }
background-position：x轴，y轴 / px / % / right left center
background-size：宽，高 / px / % / contain /cover
background-linear-gradient（方位名词，颜色，颜色）渐变需要加浏览器私有前缀
- background-image;linear-gradient(direction，color1，color2，color3…) 颜色渐变写法1 direction 用角度值指定渐变的方向（或角度）
简写 background：color imge repeat position /size

显示隐藏

display：block / inline / inline-block
- 块级可以设置宽高独占一行
- 行内不可以设置宽高与行内元素共战一行
- 行内块可以设置宽高，一行可以显示多个
overflow：visible 默认值溢出可见
hidden 溢出隐藏
scroll 无论是否溢出显示滚动条
auto 根据是否溢出，显示滚动条

visibility ：hidden 隐藏占页面位置
display ：none；隐藏不占位置
display：block；显示隐藏元素

盒子模型/边框

margin 外边距上右下左 0 0 0 0
padding内边距上右下左 0 0 0 0
border边框 solid 实线 dashed 虚线
box-sizing：box-border；自动去除边距冗余尺寸，内减
box-shadow:h-shadow v-shadow blur color 水平偏移垂直偏移模糊度颜色
border-radius： 0px 0 px 0px 0px 圆角按照左上右下的顺序书写
border-collapse：collapse ；边框合并（表格）
border: 1px solid rgb(87, 206, 36)边框
border: 1px solid rgb(87, 206, 36) ;transparent；边框透明

鼠标形状

cursor： default 默认值 箭头
         pointer 小手 
         text        工字型 
         move        十字光标`

伪元素

::before 在父元素前面添加一个伪元素
::after 在父级后面添加一个伪元素
注意：

必须设置 content：‘’‘’，属性才能生效
伪元素默认是行内元素

浮动

float ：left 左浮动
right右浮动
清除浮动的影响
（1）给父级添加宽高属性
（2）给父元素最后添加一个空标签并且设置 clear：both
（3）伪元素清除选择器::after { content:’’’’,
display:block,
clear:both;}
(4)双伪元素清除选择器::before,选择器::after{
content:’’’’,
display:block} 选择器::after{clear:both;}
(5) overflow:hidden;
层级关系：标准流 < 浮动 < 定位
定位不同的层级默认一样高
浏览器以写在最后的定位先展示如果需要修改层级关系 z-index：数字；

BFC

Block Formatting Context 块级格式上下文
1. 创建BFC的方法：
  （1）html就是bfc盒子
  （2）行内块元素是bfc盒子
  （3）浮动元素是bfc盒子
  （4）overflow属性取值不为 visible

bfc特点
（1）解决mardin的塌陷
（2）默认包裹住内部元素（清除浮动）

定位

相对定位

position：relative；相对定位（占页面位置）

绝对定位

position：absolute；绝对定位（祖先没定位相对浏览器/祖先元素有定位，相对祖先元素移动，不占位置）
子绝父相

固定定位

position：fixed；固定定位
（1）不占位置（脱离标准文档流）
（2）相对浏览器可视区域移动
（3）需要配合方位名词实现移动

静态定位

position:static ,静态定位，默认值，就是标准文档流

定位居中

水平居中{
left：50%，//占父盒子一半
transform：translateX（-50%），//让盒子往自身水平方向的一半的距离移动
}
垂直居中

top:50%,
transform：translateY（-50%），//让盒子往自身的垂直方向一半的距离移动
水平垂直居中

top:50%,
left：50%，
transform：translate（-50% -50%) //水平垂直都居中

动画

过渡

transition：过渡属性时长（数字+s）

transition：all 2s ；所有属性都过渡

缩放

transform:scale(缩放倍数) 1< 放大 <1 缩小

transform:scale(2) ;放大

移动

transform:translate(0 0) 移动

transform:translateX/Y（0） x或者y 移动

旋转

transform：rotate（旋转角度/deg）旋转
transform：rotate（360deg）；

指定旋转方位

transform-orgin：x y ; / 方向名词（指定旋转角度位置）

空间移动

transform：translate3d（x ，y ，z）； x,y,z轴的移动位置
transform：translate3dX()
transform：translate3dY()
transform：translate3dZ()

透视

z轴移动需要配合父级添加透视属性 perspextive：一般取值800-1200px

空间轴旋转：

rotate：rotateZ(值deg)
rotate：rotateX(值deg)
rotate：rotateY(值deg)

3D呈现

transform-style：preserve-3d；
给父级元素添加；

空间缩放

transform：scale3d（）；

动画的实现步骤：animation

定义动画
（1）@keyframes 动画名称 {
from{},
to{} }

（2）@keyframes 动画名称 {
0%{}，
50%{},
100%{}}

2. 使用动画

animation：动画名称，动画时长；

3. 动画属性

animation：动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕状态；

速度曲线： linear 匀速动画 steps（）分部动画；
infinite 一直重复数字+s 动画延迟时间数字重复次数

alternate 反向动画
执行完毕状态： backwards 默认值动画悬停在最初状态 forwards 停留在结束的状态

flex布局

是一种浏览器提倡的布局模型，布局更简单，灵活
避免浮动脱标的问题

设置放置：给父元素添加 display：flex ，
组成部分：弹性容器，弹性盒子，主轴（main axis），侧轴/交叉轴（cross axis）

主轴

justify-content：center；在主轴方向居中
justify-content：space-between; 间距在盒子之间
justify-content:space-evenly; 所有子级盒子间距相等
justify-content：space-around；间距在子级盒子两侧

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BwSQyV5G-1635745621024)(…/…/AppData/Roaming/Typora/typora-user-images/image-20211031215256199.png)]

侧轴

align-items：center; 居中
align-items:stretch; 默认值，拉伸，子级没有高度默认继承父级高度
align-items：space-between；间距在盒子之间
align-items：space-around; 间距在盒子两侧
align-self:center;单独设置居中效果，在子级添加

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-etmr8HCY-1635745621026)(…/…/AppData/Roaming/Typora/typora-user-images/image-20211031215428985.png)]

伸缩比

属性flex：值数组（几份）只占用父级盒子剩余的尺寸

例如 flex：1；占用父级剩余尺寸1份
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xFeKSVU8-1635745621027)(…/…/AppData/Roaming/Typora/typora-user-images/image-20211031215617410.png)]

修改排列方式

flex-direction：column；列，垂直布局修改主轴的方向，
注意（主轴修改后，侧轴也会随之变化，垂直变水平，所对应的属性也会改变）

flex-wrap：wrap ；多行排列
nowrap 默认值，不换行

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A2f0OULl-1635745621029)(…/…/AppData/Roaming/Typora/typora-user-images/image-20211031215133703.png)]

grid布局

响应式布局

媒体查询：
检测到不同的视口，设置不同的css样式

基本语法：
@media（媒体特性）{
选择器{css样式}
}

媒体特性常用写法：
max-width 最大视口宽从大到小书写规范
min-width 最小视口宽从小到大书写规范

外链式css 引入

移动适配

rem：目前多数企业再用
vh/vw；未来趋势解决方案

视口标签

视口
- 布局视口
- 理想视口
- 视觉视口
meta 视口标签
```
  <meta name="viewport" content="width=device-width,user-scalable=no,maxmum-scale=1.0,minmum-scale=1.0 initial-scale=1.0">
  
```
- viewport 视口标签
- width=device-width 宽度等于设备宽
- user-scalable=no 禁止缩放
- initial-scale=1.0 初始缩放比例
- minimum-scale=1.0 最小缩放比
- minimum-scale=1.0 最大缩放比

分辨率

物理分辨率：是生产屏幕时就固定的，它是不可被更改的
逻辑分辨率：由软件（驱动）决定

rem

1rem = 1html根字号大小

rem适配----媒体查询
写法：@media（媒体特性）{
选择器{css}
}
例如 @media(width:375px){
html{font-size：37.5px；
}}

使用需要使用js 设置对应的窗口变化设置字体大小
或者直接使用淘宝的 rem适配js文件
直接根据设计图转为对应的rem单位即可

vh/vw

vh = 1/100视口高度
vw= 1/100视口宽度

使用简单，不用设置js
直接在vscode 使用即可

less

less语法

less 是一个预处理器，后缀名 .less
浏览器不识别less ，网页需要引入对应的css文件

less嵌套写法生成后代选择器
写法；父级/选择器{
css
子级{
css
&：hour{css}

}
}
&指当前选择器

less 变量

定义： @变量名：值；

使用 css属性：@变量名

例@co：pink；
color：@co

less 导入

@import“文件路径”
如果导入的是less文件可以省略后缀

less导出

less单独导出
//out:路径（第一行添加）
禁止导出
//out：false

@media(width:375px){
html{font-size：37.5px；
}}

使用需要使用js 设置对应的窗口变化设置字体大小
或者直接使用淘宝的 rem适配js文件
直接根据设计图转为对应的rem单位即可