HTML
HTML基本骨架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>标签的关系
父子关系（嵌套）
兄弟关系（并列）
注释
<!--注释内容,不会在浏览器显示-->VS Code中，添加/删除注释的快捷键：Ctrl +/
*标题标签*
这是一级标题
这是二级标题
这是三级标题
这是四级标题
这是五级标题
这是六级标题
（标题特点）：1.文字加粗 2.字号逐渐减小 3.独占一行 4. <h1>一般一个网页只用一次
段落标签
<p>这是一段文字</p>(特点)：独占一行；段落之间有间隙
换行与水平线标签
<br>
<!--强制换行标签-->
<hr>
<!--画一条水平线-->文本格式化标签
<strong>（强调）粗体</strong> <b>粗体</b>
<em>（强调）倾斜</em> <i>倾斜</i>
<ins>（强调）下划线</ins> <u>下划线</u>
<del>（强调）删除线</del> <s>删除线</s>优先选择左边标签
图像标签
<img src="./cat.jpg" alt="一只猫" title="这是一只猫" width="100" height="120">
<!--src用来指定图像的位置和名称，是<img>的必须属性-->
<!--alt是图片无法显示的时候显示的文字-->
<!--title是鼠标悬停在图片上时显示的文字-->路径
查找文件时从起点到终点经历的路线。
1.相对路径：从当前文件位置出发查找目标文件
（ / 表示进入某个文件夹里——文件夹名字/）
（ . 表示当前文件所在文件夹——./）
（../表示进入上一级文件夹）
<img src="../image/微信图片_20240323101825.jpg" alt="微信" title="LENOVO">
2.绝对路径：从盘符出发查找目标文件
<img src="D:/mysite/image/微信图片_20240323101825.jpg">
超链接
点击跳转到其他页面
<a href="http://www.baidu.com/">跳转到百度</a>
<!--覆盖原网页-->
<a href="./第一次培训.html" target="_blank">跳转到本地</a>
<!--target="_blank",跳转到新窗口-->
<a href="#">空链接</a>
音频标签
<audio src="../music/伯虎说.mp3" controls loop></audio>
<!--comtrols显示音频；loop循环播放-->视频标签
<video src="../music/伯虎说.mp4" controls loop></video>
列表
作用：布局内容排列整齐的区域
分类：无序列表、有序列表、定义列表
无序列表
-
第一项
-
第二项
<ul>
<li>第一项</li>
<li>第二项</li>
</ul>
<!--ul里只能包裹li标签-->有序列表
-
第一个
-
第二个
<ol>
<li>第一个</li>
<li>第二个</li>
</ol>
<!--ol里只能包裹li标签-->定义列表
<dl>
<dt>列表标题</dt>
<dd>描述内容</dd>
<dd>一律缩进</dd>
</dl>
<!--dl里只能包裹dt和dd-->表格
| 姓名 | 语文 | 数学 |
|---|---|---|
| 张三 | 98 | 100 |
<table border="1"> <!--table表格,border为表格添加边框-->
<tr> <!--行-->
<th> <!--表头-->姓名 </th>
<th>语文</th>
<th>数学</th>
</tr>
<tr>
<td> <!--内容-->张三</td>
<td>98</td>
<td>100</td>
</tr>
</table>表格结构标签
把内容划分区域，让表格结构更清晰，语义更清晰
<table border="1"> <!--table表格,border为表格添加边框-->
<thead>
<tr> <!--行-->
<th> <!--表头-->姓名 </th>
<th>语文</th>
<th>数学</th>
<tr>
</thead>
<tbody>
<tr>
<td> <!--内容-->张三</td>
<td>98</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>全班第一</td>
<td>全校第一</td>
</tr>
</tfoot>
</table>合并单元格
将多个单元格合并为一个，以合并同类信息
注意：不能跨结构合并
<table border="1"> <!--table表格,border为表格添加边框-->
<thead>
<tr> <!--行-->
<th> <!--表头-->姓名 </th>
<th>语文</th>
<th>数学</th>
<tr>
</thead>
<tbody>
<tr>
<td> <!--内容-->张三</td>
<td>100</td>
<td rowspan="2">100</td>
</tr>
<tr>
<td> <!--内容-->李四</td>
<td>98</td>
<!-- <td>100</td> -->
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="2">全校第一</td>
<!-- <td>全校第一</td> -->
</tr>
</tfoot>
</table>表单
收集用户信息
input应用
<form action="">
文本框：<input type="text" placeholder="请输入用户名">
<!--输入什么就显示什么-->
<br>
密码框：<input type="password" placeholder="请输入密码">
<!--输入的内容以 点 形式显示-->
<br>
单选框：
性别：<input type="radio" name="sex" checked>男 <input type="radio" name="sex">女
<!--checked默认选中,name相同类型，保证单选-->
<br>
多选框：
兴趣爱好：<input type="checkbox" checked>敲代码 <input type="checkbox">敲前端代码<input type="checkbox">游戏
<br>
上传文件：<input type="file" multiple>
<!--multiple可上传多文件-->
</form>下拉菜单
<form action="">
城市：
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option selected>河北</option>
</select>
</form>文本域
多行输入文本的表单控件
<form action="">
<!--尺寸受CSS控制-->
<textarea>请输入评论</textarea>
</form>label标签
网页中，某个标签的说明文本，增大点击范围
<form action="">
<input type="radio" id="man"><label for="man">男</label>
<label> <input type="radio" name="sex">女</label>
</form>按钮标签
<form action="">
<!--action发送数据的地址-->
文本框：<input type="text" placeholder="请输入用户名"><!--输入什么就显示什么-->
<br>
密码框：<input type="password" placeholder="请输入密码"><!--输入的内容以 点 形式显示-->
<br>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
</form>在form标签中才能起作用
无语义的布局标签
<div>
独占一行，换行，区域
</div>
<span>
不换行
</span>字符实体
在网页中显示预留字符
空 格<br>小于号<p>大于号CSS
层叠样式表
书写位置：title标签下方添加style双标签，style标签里书写CSS代码
书写规则：
选择器{属性名：属性值；}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color:red;
font-size: 12px;
}
</style>
<!--内部样式-->
<link rel="stylesheet" href="./样式.css"><!--外部样式-->
</head>
<body>
<p>体验css</p>
<div>
独立一行
</div>
<p style="color: green; font-size: 20px;"><!--行内样式-->
新的文字
</p>
</body>
</html>选择器
标签选择器：
使用标签名作为选择器—>选中同名标签设置相同的样式。
类选择器：
查找标签，差异化设置标签的显示效果。
步骤：定义类选择器 . 类名
使用类选择器 标签添加class=“类名”
<style>
.blue{
color: blue;
}
.size{
font-size: 50px;
}
</style>
<body>
<div class="blue size">
独立一行
</div>
</body>Id 选择器：
差异化设置标签显示效果
一般配合JavaScript使用
<style>
#green {
color:green;
}
</style>
<div id="green">div</div>通配符选择器：
查找页面所有标签，设置相同样式
*，不需要调用，浏览器自动查找页面所有标签，设置相同样式
<style>
* {
color:yellow;
}
</style>
<body>
<p>pnak</p>
<div>djfk</div>
</body>画盒子
使用合适的选择器画盒子
| 属性 | 作用 |
|---|---|
| width | 宽度 |
| height | 高度 |
| background-color | 背景色 |
<style>
.blue{
width: 100px;
height: 100px;
background-color: brown;
}
</style>
<body>
<div class="blue">
独立一行
</div>
</body>
文字控制属性
| 描述 | 属性 |
|---|---|
| 字体大小 | font-size |
| 字体粗细 | font-weight |
| 字体倾斜 | font-style |
| 行高 | line-height |
| 字体族 | font-family |
| 字体复合属性 | font |
| 文本缩进 | text-indent |
| 文本对齐 | text-align |
| 修饰线 | text-decoration |
| 颜色 | color |
文字有默认大小为16px；font-size必须有单位
font-weight 400去加粗；700加粗
行高测量方法：从一行文字最顶量到下一行文字的最顶端
数字+px；数字（当前标签font-size值的倍数）
垂直居中技巧：行高度属性值等于盒子高度属性值（只适用于单行文字）
font字号和字体必须书写；
（文字倾斜，文字加粗，字体大小，行高，字体）
对齐方式对内容
修饰线有多种none,underline等
| 颜色表示方法 | 属性值 | 说明 |
|---|---|---|
| 颜色关键字 | 颜色英文单词 | red，green，blue... |
| rgb表示法 | rgb(r,g,b) | r,g,b表示红绿蓝三原色，取值：0-255 |
| rgba表示法 | rgba(r,g,b,a) | a表示透明度，取值：0-1 |
| 十六进制表示法 | #RRGGBB | #000000，#ffcc00，简写：#000，#fc0 |
复合选择器
由两个或多个基础选择器
作用：更准确、更高效的选择目标元素
后代选择器
父选择器 子选择器{CSS属性}
<style>
div span{
color:red;
}
</style>选中所有后代
子代选择器
父选择器 > 子选择器{CSS属性}
<style>
div > span{
color:blue;
}
</style>只选儿子
并集选择器
多组标签相同样式
选择器1，选择器2，...选择器n{CSS属性}
<style>
div,
p,
span{
color:blue;
}
</style>交集选择器
选中同时满足多个条件的元素
选择器1选择器2{CSS属性}
既是选择器1又是选择器2
<style>
p.box{
color:blue;
}
</style>
<!--p标签与类标签同时满足下的元素-->伪类选择器
伪类表示元素状态，选中元素的某个状态设置样式
鼠标悬停状态：选择器：hover{CSS属性}
<style>
a:hover{
color:blue;
}
.box:hover{
color:green;
}
</style>任何标签都可以设置鼠标悬停状态
伪类-超链接（拓展）
| 选择器 | 作用 |
|---|---|
| ：link | 访问前 |
| ：visited | 访问后 |
| ：hover | 鼠标悬停 |
| ：active | 点击时（激活） |
<style>
a:link{
color:red;
}
a:visited{
color:green;
}
a:hover{
color:brown;
}
a:active{
color:blue;
}
</style>CSS特性
继承性：子级默认继承父级的文字控制属性
(自己有样式不继承)
层叠性：
相同属性会覆盖：后面覆盖前面
不同属性会叠加：不同的CSS属性都生效
优先级：权重，多种选择器，匹配规则
公式：通配符<标签<类<id<行内样式<!important
（越接近内容，优先级越高）
！important提权功能，提高到最高，慎用
优先级-叠加计算规则
公式：（每一级间不存在进位）
（行内，id个数，类个数，标签个数）
-
从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较
-
！important权重最高
-
继承权重最低
Emmet写法
代码的简写方式，VScode自动生成
HTML
| 说明 | Emmet |
|---|---|
| 类选择器 | 标签名.类名 |
| id选择器 | 标签名#id名 |
| 同级标签 | div*p |
| 父子级 | div>p |
| 多个相同标签 | span*3 |
| 有内容的标签 | div（内容） |
CSS
大多数简写方式为属性单词首字母
背景属性
| 描述 | 属性 |
|---|---|
| 背景色 | background-color |
| 背景图 | background-image |
| 背景图平铺方式 | background-repeat |
| 背景图位置 | background-position |
| 背景图缩放 | background-size |
| 背景图固定 | background-attachment |
| 背景复合属性 | background |
背景图
网页中使用背景图实现装饰性的图片效果
属性名：background-image(bgi)
属性值：url（背景图URL）
背景图平铺方式
属性名：background-repeat（bgr）
属性值
| 属性值 | 效果 |
|---|---|
| no-repeat | 不平铺 |
| repeat | 平铺（默认效果） |
| repeat-x | 水平方向平铺 |
| repeat-y | 垂直方向平铺 |
背景图位置
属性名：background-position(bgp)
属性值：水平方向位置 垂直方向位置
-
关键字
-
关键字 位置 left 左侧 right 右侧 center 居中 top 顶部 botton 底部
-
-
坐标(数字+px，正负都可以)
关键字取值方法写法，可以颠倒取值顺序
可以只写一个关键字，另一个方向默认为居中；数字只写一个方向表示水平方向，垂直方向为居中
背景图缩放
作用：设置背景图大小
属性名：background-size(bgz)
常用属性值：
-
关键字
-
cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
-
contain:等比例缩放背景图片以完全装入背景区，可能背景部分空白
-
-
百分比：根据盒子尺寸计算图片大小
-
数字+单位（例如：px）
背景图固定
作用：背景不会随着元素的内容滚动
属性名：background-attachment(bga)
属性值：fixed
背景复合属性
属性名：background(bg)
属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（空格隔开各个属性值，不区分顺序）
显示模式
标签（元素） 的显示方式
作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容
-
块级元素
-
独占一行
-
宽度默认是父级的100%
-
添加宽高属性生效
-
-
行内元素
-
一行可以共存多个
-
尺寸由内容撑开
-
加宽高不生效
-
-
行内块元素
-
一行可以共存多个
-
默认尺寸由内容撑开
-
加宽高生效
-
转换显示模式
属性名：display
属性值
| 属性值 | 效果 |
|---|---|
| block | |
| inline-block | |
| inline（不常用） |
结构伪类选择器
作用：根据元素的结构关系查找元素
| 选择器 | 说明 |
|---|---|
| E：first-child | 查找第一个E元素 |
| E:last-child | 查找最后一个E元素 |
| E:nth-child(N) | 查找第N个E元素（第一个E元素N值为1） |
：nth-child(公式)
作用：根据元素的结构关系查找多个元素
| 功能 | 公式 |
|---|---|
| 偶数标签 | 2n |
| 奇数标签 | 2n+1;2n-1 |
| 找到5的倍数的标签 | 5n |
| 找到第5个以后的标签 | n+5 |
| 找到第5个以前的标签 | -n+5 |
伪元素选择器
作用：创建虚拟元素（伪元素），用来摆放装饰性的内容
| 选择器 | 说明 |
|---|---|
| E::before | 在E元素里面最前面添加一个伪元素 |
| E::after | 在E元素里面最后面添加一个伪元素 |
注意：
-
必须设置content:“”*属性，用来设置*伪元素的内容，如果没有内容，则引号留空即可
-
伪元素默认是行内显示模式
-
权重和标签选择器相同
PxCook
-
开发面板（自动智能识别）
-
设计面板（手动测量尺寸和颜色）
扫一扫
717
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
