本篇笔记是为整理本人的HTML/CSS学习进度以及后续复习所准备的,在编写上可能还不熟练,如果有看不懂的,可以在本篇文章下面留言!或者前往下面的在线工具进行答疑

在线学习网站:菜鸟教程首页 / 在线编程工具

签到:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
2025.07.28 12:00: "clock in" =000 HTML/CSS复习

2025.06.12 23:00: "clock in" =000 HTML/CSS进阶
2025.05.31 13:05: "clock in" =000 HTML/CSS进阶
2025.05.25 14.54: "clock in" =000 HTML/CSS进阶

2025.04.05 14.54: "clock in" =000 HTML/CSS基础
2025.04.04 15.12: "clock in" =000 HTML/CSS基础
2024.11.05 13.32: "clock in" =000 HTML/CSS基础
2024.11.04 21.08: "clock in" =000 HTML/CSS基础
2024.11.03 00.00: "clock in" =000 HTML/CSS基础
2024.11.02 16.55: "clock in" =000 HTML/CSS基础
2024.11.01 13:52: "clock in" =000 HTML/CSS基础
2024.10.31 00.00: "clock in" =000 HTML/CSS基础

前言:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//全笔记格式说明书:
# |笔记存在一些自定义格式,请详细阅读下面说明,否则可能会产生语法上的理解错误和歧义!!
# |说明01:">"表示此标签为单标签,">>"表示此标签为双标签
# |说明02:"[]"内为备注内容,"()"内为可用属性或表现格式,"{}"内为扩展内容
# |说明03:"(...)"指代的为可用属性,"(...>)"指代的为可用关联单标签,"(...>>)"指代的为可用关联双标签


//VSCODE常用快捷键
# |备注:!+Enter:生成HTML头文件
# |备注:Lorem:随机生成一句英文
# |备注:Ctrl+Shift+/:代码快速注释
# |备注:Ait+w:代码快速添加标签
# |备注:Ait+shift+下箭头键:代码向下复制一行
# |备注:Ait+下箭头键:代码向下移动一行
# |备注:Shift+Ait+F:代码格式化
# |备注:Table+选中代码:代码格式化
# |备注:Ctrl+F:查找
# |备注:Ctrl+H:替换
# |备注:Ctrl+Enter:直接换行
# |备注:Ctrl+Shift+k:删除行
=============================================================================================================

# HTML-------------------------------------------------------------------------------------------------------
//隐含内容解释:
# |"{SEO}"指代是"搜素引擎优化",用以优化网页的流量曝光或者利于爬虫爬取以此提升网站的访问数.
# |"{块元素}block-level":独占一行且禁止嵌套,宽高默认为100%| 可以通过"display"进行更改元素类型.
# |"{行内元素}lnline":不独占一行,宽度由内容撑开,无法设置宽高.
# |"{行内块元素}lnline-block":兼具上方两种元素特性,可设置宽高而不强制换行.
# |"{替换元素}":内容由外部元素决定(如img和video等).
# |"{表单元素}":交互控件(如from和input等),部分默认为行内块.

HTML笔记列表:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
# HTML---------------------------------------------------------------------------------------------------------->
//涵盖HTML5的全部HTML标签: 全部约100个

# 文档结构标签======================================
# <div> :通用布局容器(最高频)//页面区块划分
# <span> :行内容器(最高频)//行内元素包裹
# <body> :文档主体内容 //必备容器
# <header> :页面/区块头部(HTML5) //顶部导航区域
# <footer> :页面/区块底部(HTML5) //版权信息区域
# <nav> :导航链接(HTML5新增)//主导航菜单
# <main> :文档主要内容(HTML5新增)//核心内容区
# <section> :内容区块分组(HTML5) //章节划分
# <article> :独立内容(如博客)(HTML5) //独立内容单元
# <h1>-<h6> :标题(1-6级)//标题层级结构
# <aside> :侧边栏内容(HTML5) //侧边内容区
# <figure> :媒体内容组合(HTML5) //媒体组容器
# <figcaption> :媒体标题(HTML5) //figure的子标题
# <details> :折叠内容块(HTML5) //可展开/折叠模块
# <summary> :details的标题(HTML5) //折叠模块标题
# <!DOCTYPE> :声明文档类型 //单标签(页面首行)
# <html> :根元素 //页面最外层容器
# <head> :文档头部元数据容器 //元信息存放区
# <title> :文档标题 //浏览器标签显示

# 元数据与脚本标签==================================
# <meta> :文档元数据(字符集等)//单标签(必备charset)
# <link> :链接外部资源 //单标签(CSS/图标引入)
# <script> :嵌入或引用JavaScript //逻辑核心
# <style> :内嵌CSS样式 //页面样式定义
# <noscript> :脚本不支持时显示内容 //降级方案
# <template> :定义可复用模板(HTML5) //组件模板容器
# <base> :基础URL //单标签(相对路径基准)
# <basefont> :基本字体(已废弃)//单标签(禁用)

# 文本内容标签======================================
# <p> :段落 //文本基础容器
# <a> :超链接 //交互核心(href属性)
# <ul> :无序列表 //导航/条目展示
# <ol> :有序列表 //步骤流程
# <li> :列表项 //列表子元素
# <strong> :重要文本(语义加粗)//关键内容强调
# <em> :强调文本(语义倾斜)//语气强调
# <br> :换行 //单标签(文本换行)
# <hr> :水平分隔线 //单标签(内容分割)
# <b> :视觉加粗 //样式加粗
# <i> :视觉倾斜 //技术术语/图标
# <del> :删除线文本 //修改标记
# <sup> :上标文本 //公式标注
# <sub> :下标文本 //化学式(如H₂O)
# <pre> :预格式化文本 //保留空格/回车
# <code> :计算机代码 //代码片段展示
# <blockquote> :长引用 //文献引用块
# <dl> :定义列表 //术语解释容器
# <dt> :定义项(术语)//dl子元素
# <dd> :定义描述 //dt对应说明
# <mark> :高亮文本(HTML5新增)//关键词标记
# <u> :下划线文本(不推荐)//CSS替代
# <ins> :插入的新内容 //更新内容标记
# <time> :日期/时间(HTML5新增)//时间语义化
# <ruby> :注音文本 //东亚文字注音
# <rt> :注音解释(HTML5新增)//ruby子标签

# 表格标签==========================================
# <table> :表格容器 //数据表格 快捷:table>tr*5>td{文本},合并单元格:colspan,rowspan
# <tr> :表格行 //行容器
# <td> :数据单元格 //基础单元格
# <th> :表头单元格 //标题单元格
# <thead> :表头区域 //标题行容器
# <tbody> :表体区域 //数据行容器
# <caption> :表格标题 //表格描述
# <tfoot> :表尾区域 //汇总行
# <colgroup> :列组 //多列样式控制
# <col> :列属性 //单标签(列样式设置)
# <datagrid> :动态数据表格(非标准)//极少支持
//{CSS内嵌可用值}:
# <border>=: "表格的边框"
# <cellspacing>=: "格与格间距"
# <cellpadding>=: "格与内容间距"
# <colspan>=: "表格水平合并" [保留左边,删除右边](td:2)
# <rowspan>=: "表格垂直合并" [保留上边,删除下边](td:2)
# <valing>=: "top" [td:设置一个单元格宽/高,影响这一整列/行的宽/高]
# 表格:type: 列表符号 | (ol:1,a,A,i,I)(ul:disc默认实心圆,circle空心圆,square小方块,none不显示)

# 媒体与嵌入标签====================================
# <img> :嵌入图像 //单标签(src/alt必备)
# <video> :嵌入视频(HTML5新增)//多媒体播放
# <audio> :嵌入音频(HTML5新增)//音频播放
# <iframe> :内嵌网页 //第三方内容嵌入
# <canvas> :动态绘图(HTML5新增)//JS图形绘制
# <source> :多格式媒体源(HTML5新增)//格式兼容
# <track> :字幕/说明(HTML5新增)//视频字幕
# <embed> :外部插件嵌入(逐步淘汰)//传统插件
# <object> :嵌入外部资源 //PDF/Flash嵌入
# <param> :object参数 //单标签
# <map> :图像地图 //可点击区域定义
# <area> :图像地图区域 //单标签(热区坐标)
//{CSS内嵌可用值}:
# src:图片 |
# ait:图像异常文本 |
# href:链接 | a标签

# 表单标签==========================================
# <form> :表单容器 //数据提交核心
# <input> :输入控件(文本/密码等)//交互核心
# <button> :可点击按钮 //表单操作
# <label> :表单控件标签 //焦点绑定
# <textarea> :多行文本输入 //长文本输入
# <select> :下拉选择框 //选项容器
# <option> :下拉选项 //select子项
# <datalist> :输入提示列表(HTML5新增)//输入建议
# <fieldset> :表单分组 //区块包裹
# <legend> :fieldset标题 //分组标题
# <optgroup> :选项分组 //选项分类
# <progress> :任务进度条(HTML5新增)//进度显示
# <meter> :标量值测量(HTML5新增)//数值范围
# <output> :计算结果输出(HTML5新增)//动态结果
# <keygen> :加密密钥生成(已废弃)//禁用
//{CSS内嵌可用值}:
# 表单:type=: 表单按钮| (button按钮/submit提交按钮/value登录/name自定义文本/reset清空内容)
# 表单:type=: 表单类型| (text文本框/password表单类型/)
# 表单:action=:向何处发送表单数据
# 表单:method=:表单数据 | (get/从服务器获取数据,post/向服务器发送数据)
# 表单:name=:数据名称
# 表单:value=:输入框默认输入值
# 表单:maxlength=: 输入框最大可输入长度
# 表单:target:网页打开方式 | (_self默认/_blank新窗口)

# 交互与脚本标签====================================
# <a> :超链接(已在文本类列出)//重复项
# <dialog> :对话框(HTML5新增)//模态弹窗
# <menu> :菜单列表//功能菜单
# <command> :命令按钮(已废弃)//禁用
# <noscript> :脚本不支持显示(已在元数据列出)

# 其他标签==========================================
# <abbr> :缩写(如“HTML”)//title属性提示
# <address> :联系信息 //作者/公司信息
# <cite> :作品引用 //文献来源
# <q> :短引用 //自动加引号
# <bdo> :文本方向控制 //dir="rtl"设置
# <var> :变量名 //代码变量标识
# <wbr> :可选换行点(HTML5新增)//响应式断字

CSS笔记列表:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

# CSS----------------------------------------------------------------------------------------------------------
//涵盖CSS3的全部CSS标签以及可用属性值

# |说明:"ttt"处为CSS自定义文本,常用于属性或变量的自定义命名

# 选择器与优先级​​=========================================
# *{} :通配选择器
# #id{}: ID选择器
# .ttt{};Class选择器 //class=ttt
# div{} :元素选择器
# .ttt,.zzz{}:合并选择器 /*(id="ttt",class="zzz"),减少重复代码/优先级:选择符的权重之和*/
# ttt zzz{}: 后代选择器 /*对ttt中的zzz产生Css效果:权重:选择符的权重之和*/
# ttt>zzz{}:子代选择器 /*仅对ttt中的或下一级的zzz产生Css,非ttt下的或更下一级的无效果:权重:选择符的权重之和*/
# ttt+zzz{}: 相邻兄弟选择器 /*仅对ttt下的zzz和向下相邻的yyy产生css*/
# ttt~zzz{} 通用兄弟选择器 /*对ttt之后的zzz产生css,用于多个x元素,用~隔开*/
# !important: /*优先级10000(最高)*/
# :hover: 鼠标悬停|伪类选择器
# [attr=value]: 属性选择器(精确匹配属性值)
# :nth-child(n): 第n个子元素(CSS3)
# ::before: 元素前插入内容(伪元素)
# :not(selector): 排除选择器(CSS3)
# :root: 根元素选择器(CSS3)

# 盒模型与布局​=========================================
# width: 宽 |px
# height: 高 |px
# left: 0px 方向对齐 |/*???可用属性为:"left","reight","..."*/
# margin: 外边框 |上右下左 0 0 0 0 px
# padding: 内边框 |上右下左 0 0 0 0 px
# size:水平宽度 |px
# border-radius: 圆角 |px //1:相同;2:左上+右下,右上+左下;3:左上,右上+左下,右下;4:左上,右上,右下,左下
# float: 浮动 | (left 左浮动|right 右浮动|none 无浮动)
# clear: both: 清除浮动|
# overflow: hidden:清除浮动|
# align :对齐方式 | (左 left|右 right|水平居中 center|上 top|下 bottom|垂直居中 middle)
# display:盒元素 | (block 块级|inline 行内|flex 弹性|grid 网格)
# flex : 弹性布局简写(grow shrink basis,CSS3)
# box-sizing:盒子模型 | (content-box 标准盒模型|border-box 边框盒模型)
# resize : 元素缩放(none|both|horizontal|vertical,CSS3)
# box-shadow: 阴影|(水平偏移 h-shadow|垂直偏移 v-shadow|模糊 blur|扩展 spread|颜色 color|内阴影 inset)//0px 0px 0px #ffffff
# grid-template-columns : 网格列定义(CSS3:repeat(3, 1fr))
# justify-content : 主轴对齐(center/space-between,Flex/Grid 通用)
# align-items : 交叉轴对齐(stretch/center)

# ​背景与边框​​===========================================
# background-color: 背景颜色 | #ff0000ff
# background-image: 背景图片 |(url() 图片路径|linear-gradient() 线性渐变)
# background-attachment : 背景固定(固定 fixed|滚动 scroll)
# background-size: 背景图片大小 | (cover 有损比例填充|contain 无损比例填充|auto 默认)
# background-repeat: 背景填充 | repeat默认值/repeat-x水平平铺/repeat-y垂直平铺/no-repeat不平铺}
# background-clip : 背景绘制区域(border-box/padding-box/content-box,CSS3)
# background-position: 图片定位 | left ???/center ???/right ???/x(px)y(px)/x%y%}
# linear-gradient() : 线性渐变背景(CSS3:to right, #ff0000, #0000ff
# radial-gradient() : 径向渐变背景(CSS3)
# border-color: 边框颜色 | #ff0000ff
# border-collapse: 边框折叠样式| collapse
# border: 边框样式| (width 宽|样式 style|颜色 color)
# transparent //在border里面添加以隐藏边框
# background-cover:(背景图片放大,完全覆盖背景区域,可能无法显示在背景定位区域中)(等比放大)//400px
# background-contain:(把图像放大至最大尺寸,使其高度宽度完全适应内容区域,可能铺不满盒子)//400px

# 列表与定位​​===========================================
# list-style-type:列表列标签样式(disc:实心圆 circle:空心圆 square:实心正方体 none:无)
# list-style-image:url(img.jpg图片路径) //将图片设置为列表符合样式
# list-style-position: 列表符定位 (outside 外面,inside 里面)| //设置列表项标记的放置位置
# list-style:简写 | (none去除列表符号)
# position: 定位 | static(默认)/relative(相对)/absolute(绝对)/fixed(固定)(绝对和固定会脱离文档流)

# ​文本与字体​​===========================================
# color: 颜色 | #ff0000ff //可选值:red/#ffffff/rgb(255,255,255)/rgba(0,0,0,.0)} /*"rgba"中".0"为不透明度*/
# font-size: 字体大小 |(px、rem)
# font-weight: 字体粗细 | bold粗(700)/bolder更粗/lighter更细/100-900细到粗(400默认)}
# font-style: 字体样式| normal默认/italic斜体
# font-family: 字体 |("Arial", sans-serif)
# text-align: 字体对齐 |(左 left|右 right|水平居中 center|上 top|下 bottom|垂直居中 middle)
# vertical-align: 垂直对齐|???
# text-shadow: 阴影 | (水平偏移 x|垂直偏移 y|模糊 blur|颜色 color)
# line-height: 行高对齐 |(行高倍数或固定值)
# white-space: ... | (nowrap 不换行|pre 保留空格)
# text-overflow : 文本溢出处理(clip/ellipsis,需配合 overflow: hidden)
# word-wrap : 单词换行(break-word,CSS3)
# @font-face : 自定义字体(CSS3,支持 .woff 格式)
# text-decoration: 文本修饰| underline下划线/overline上划线/line-through删除线
# text-indent:文本缩进
# text-transform: capitalize; 对英文句子所有单词首字母大写
# text-transform: lowercase; 对英文句子所有单词首字母小写
# text-transform:uppercase;对英文句子所有单词字母大写ita
# text-transform:none; 不添加任何效果}

# ​变换与动画(CSS3)​​​====================================
# transform: 元素变换 | (rotate(45deg) 旋转|scale(1.2) 缩放|translateX(50px) 移动)
# transition: 过渡效果 | (属性 property|时长 duration|缓动函数 timing-function)(如all 0.3s ease))
# animation: 动画效果 | name duration timing delay count(动画名 时长 缓动 延迟 次数)
# animation: ttt 0(s) linear 0(s) infinite normal}|/*name(设置动画的名称:ttt);duration(设置动画的持续时间:?(s));timing-function(设置动画的速率:ease逐渐变慢,linear匀速,ease-in加速,ease-out减速,ease-in-out先加速后减速);delay(设置动画开始时间:0(s));iteration-count(设置动画的循环次数,infinite为无限次循环);direction(设置动画播放的方向:normal向前播放,alternate第偶次向前播放第奇数次相反方向播放);animation-play-state(设置动画的播放状态:running代表播放,paused代表停止播放)*/
# animation: hover{animation-play-state:paused}}/*设置鼠标划过ttt元素产生的动画效果*/
# ttt:hover{animation-play-state:paused}} /*设置鼠标划过ttt元素产生的动画效果*/
# opacity: 不透明度 | 0~1(透明度,如0.5
# filter: 滤镜| blur(5px)(模糊)/grayscale(100%)(灰度)
@keyframes : 关键帧定义(动画)(如 from {opacity:0} to {opacity:1})from{样式}to{样式}} //from为动画的开始,to为动画的结束
# flex-grow: 0 |/*权重占比:默认为0,即如果存在剩余空间,也不放大.如果只有一个子元素设置,那么按扩展因子转化的百分比对其分配剩余空间。0.1即10%,1即100%,超出按100%*/

# ​弹性与网格布局(css3)​================================
# flex-direction: 布局方式 | row(行排列)/column(列排列)
# justify-content: 空间布局 | center(居中)/space-between(两端对齐)
# align-items:对齐方式 | stretch(拉伸)/center(居中)
# grid-template-columns: 定义网格列宽| repeat(3, 1fr)(重复列)/minmax(100px, auto)(最小最大值)
# gap: 列宽间距 |(网格或弹性项间距)

# ​响应式与单位​​========================================
# @media: 媒体条件 |(如max-width: 600px
# vw/vh: 视窗比例单位 |(1vw = 1% 视窗宽度)
# calc(): 动态计算 |(如calc(100% - 60px))
3 rem : 根字体相对单位(适配不同设备)
# calc() : 动态计算(如 width: calc(100% - 60px))
# hsla() : HSL 带透明度(hsla(120,100%,50%,0.3),CSS3)
# rgba() : RGB 带透明度(rgba(255,0,0,0.5),CSS3)
# @media screen and (max-width:768(px)) {.ttt{样式}} |手机适配/*设备为手机时(768px)使用的样式*/
# @media screen and (min-width:768(px)) and (max-width:996(px)) {.ttt{样式}}|平板适配 /*设备为平板时(768px+996px)使用的样式*/
# @media screen and (min-width:996(px)) {.ttt{样式}}|电脑适配 /*设备为电脑时(768px+996px)使用的样式*/

# ​其他关键属性​​========================================
# overflow: 溢出处理(滚动条) | visible(默认)/hidden(溢出隐藏)/scroll(溢出滚动)/auto(自动)/inherit;
# cursor: 鼠标光标状态 | pointer(手形)/wait(等待)
# z-index: 层叠顺序 |(层叠顺序,如999
# currentColor : 继承当前文字颜色
# clip-path : 裁剪路径(CSS3:circle(50%)/polygon())
# will-change : 性能优化(预声明变化属性)
# scroll-snap-type : 滚动捕捉(CSS3:y mandatory)

# CSS----------------------------------------------------------------------------------------------------------

HTML/CSS模块(待更新…):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|//项目目录:-------------------------------------------------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
|
|
|//End-------------------------------------------------------------------------------------------------------

# //---------------------------------------------------------------------------------------------------------
|项目"我的第一个网页"|环境"HTML>"|引用"HEX.CSS"|练习内容"Var,Couse,Let"



|//End-------------------------------------------------------------------------------------------------------