＜前端小白＞ 前端网页知识点总结
HTML
标签
1. 标题标签 h1到h6
2. 段落标签 p
3. 换行 br 水平线 hr
4. 加粗 strong 倾斜 em 下划线 ins 删除 del
5. 图像标签
img src-图像的位置 alt- 图片加载失败显示的文字 替换文本
title--- 鼠标放到图片上显示的文字 提示文本
width 宽 heigh 高
6.路径 ./ 或者 ../
7.超链接
a herf --点击后就会跳转的地址
target = “_blank” 点击后会打开一个新的网页
8.音频标签
audio src --音频的位置
controls 显示音频控制面板
loop循环播放
autoplay 自动播放 浏览器设置调
9.视频
video src 位置
loop autoplay muted静音播放
10. 无序列表
ul嵌套li 
11. 有序列表
ol嵌套li
12. 表格 感觉没啥迪奥用 不写了
13. 输入框
input type=“ text文本框 password密码 radio单选框 checkbox多选框 file上传文件”
加上 placeholder 使提示的文本
单选框外边加上label 这个让它成为label的子类 扩大其点击范围
14.单选框的单选属性 name 弄相同的 只能选一个 checked使默认选中
15.多文件上传 加 mutiple
16.多选框 checkbox
17.下拉菜单 selection嵌套option selected默认显示
18. 文本域 textarea
19.label 标签 某个标签的说明文本 增大点击范围
20. 按钮 button
submit 把数据提交到后台
resert 重置 一般用于注册
button 普通标签
按钮应该放在 form action 中 form表单空间 action 提交地址
21。标签布局 div span
div 独占一行
span 不换行
22. 字符实体 小于号 <；
大于号 >；
空格  ；
23. 以下是CSS内容
写法 style标签
link + rel（类型） + herf(路径)
24. 类选择器 . 类名{}
然后在标签名后边加 class=“类名”
25. id选择器 #类名{}
标签后边加id = “id名" 和类选择器差不多 和js搭配使用
26. 通配符选择器 对于所有标签进行同一个操作 *{ }
用于清除格式
27.画盒子 宽 width
高height
背景色 background-color
28.字体 大小 font-size
粗细 font-weight 一般400细 700粗
倾斜 font-style normal italic
行高文字之间 line-height 让文本垂直居中 就让行高值等于盒子的高度的值 只适用单行文字
字体样式： font-family
字体复合样式： font ： 是否倾斜 是否加粗 字体间行高(必写) 字体(必写)
29. 文本缩进 text-indent 加 数字px em（字号大小）
30. 文本对齐 text-align 左对齐 默认 left
水平居中 center
右对齐 right
31. 图片对齐 图片放在父级标签中 进行text-align
32.修饰线 text-decoration 无none
下划线 underline
删除线 line-through
顶划线 over-line
33.文字颜色 color + 颜色 或 调色板 rgb（红绿蓝） rgba(红绿蓝 ，透明度) 或 十六进制
34. 复合选择器
后代选择器 选择器1 然后空格 选择器2 父代 空格 子代
相当于选择使用选择器1的标签里边的使用选择器2的标签 对他进行操作
子代选择器 选择器1>选择器2 父代 > 子代
并集 和 交集懒得写了
伪类选择器 表示元素状态
选择器：hover{CSS属性} 这个是对于超链接啥的设置的鼠标悬停状态
这个会变色 只是截图接不出来
伪类超链接 ： 按顺序写 LVHA
:link 访问前
:visited 访问后
: hover 悬停
:active 点击时
35.CSS的特性
继承性： 对于父代的所有操作会影响子代
层叠性： 相同的属性往后写的话会进行覆盖 不同的属性会增加
优先级 能选择的范围越大优先级就会越低 懒得写
36. 背景属性 背景色： background-color 前边提到过
背景图 ： background-img
平铺方式： 默认是平铺的 repeat
取消平铺： background-repeat: no-repeat
根据水平 垂直方向平铺 background-repeat: repeat-x;
background-repeat: repeat-y;
背景图的位置： 见下图
背景图的缩放 ： bckground-size
cover 全屏 但是图片可能会覆盖不全
contain 宽高有一个存在相等的 就会停止
背景图的固定： 就是上下滚动鼠标图不动 然后文字会随鼠标上下滚动
background-attachment: fixed;
背景图的复合属性：就空格隔开就行 对于缩放要前边加上 /
37. 块级元素 行内元素 行内块元素
块级元素：
-
独占一行，前后会自动换行
-
默认宽度和父元素相同 （是父元素宽度的100%）
-
可以包含其他块级元素和行内元素
-
可以设置宽度(width)、高度(height)、内外边距(margin/padding)
-
常见的
<div>, <p>, <h1>-<h6>, <ul>, <ol>, <li>,
行内元素
-
不会独占一行，与其他行内元素排在同一行
-
默认宽度由内容决定
-
设置宽度(width)、高度(height)无效
-
水平方向的内外边距有效，垂直方向的外边距无效
-
只能包含文本和其他行内元素
-
常见的
<span>, <a>, <strong>, <em>, <img>, <input>, <label>, <br>
行内块元素
-
结合了块级和行内元素的特性
-
不独占一行，与其他元素排在同一行
-
可以设置宽度(width)、高度(height)、内外边距(margin/padding)
-
默认宽度由内容决定
-
常见的：
<img>, <input>, <button>, <select>, <textarea>
转换： diplay： 块级 block 行内块 inline-block 行内： inline
38. 结构伪类选择器 就是对一个父级里边的多个相同的子级标签单独拿出来操作
子级：:first-child :last-child :nth-child(5)第五个
39.伪元素选择器： before after 不知道有damn用？？
40.盒子模型： 内容区域 用width height
内边距 padding -left -right -bottom -top 多值顺时针转动
外边距 margin -left -right -bottom -top 多值顺时针转动
边框线 border 粗细 样式solid dashed dotted 颜色
41.清除默认样式
对于边距和无序列表
42.元素溢出： 控制溢出元素的显示方式
overflow ： 隐藏hidden
scroll 无论溢出不溢出都有滚动条 水平加垂直
auto 没有水平的
43.合并现象： 对于两个同级标签 当同时在垂直方向时 两者之间的相交的margin取较大的
44.塌陷问题： 子级加上了外边距导致父级往下移动了
解决： 1 子级不加margin 父级加内边距
2 父级加 overflow：hidden
3 父级 加边框
45。行内元素的垂直位置 line-height 和28文字那点一样
46. 圆角效果 头像啥的用
border-radious 也是顺时针转
头像 ： 正方形 前提 然后 值写 50%
胶囊 ： 高度写成盒子高度的一半
先写到这里 2025.5.18 过几天学完学透彻再来再来