第一天
一、计算机基础知识：
硬件：控制器、运算器、输入设备、输出设备、存储（内存（读写快 存储空间小）、硬盘（读写慢、存储空间大）
软件：系统软件：windows、linux、mac
应用软件：微信、QQ、b站……
b/s：b:browser 浏览器 跨平台、无需安装、不用更新
c/s：c：client 客户端 不跨平台、安装、更新（大型专业应用、对安全要求比较高的——导弹系统）
server：服务器
浏览器：网页显示、运行的平台。如：谷歌浏览器、ie浏览器、火狐浏览器……
自学：jquery库、bootstrap、angular、angulars、VUE、react、webpack、node.js
网站：因特网上根据一定的规则，用html等制作的用于展示特定内容相关的网页集合
网页：构成网站的基本元素，包括文字、图片、音频、视频、超链接（打开网页能看见的），网页背后是前端程序员写的代码，分为结构（html）、表现（css）、行为（javascript）
html：超文本标记语言（超：超链接 从一个页面跳转到另一个网页） ---- 结构
将文本后缀txt改为html，就可以将文本交给浏览器
改内容：1、将html改回txt
2、打开txt将内容拉过去
html标签（标记语言）可修改内容形式
二、html基础语法：
【1】双标签：<起始标签>标签体</结束标签>
（大小写不敏感——建议小写）
单标签：<input/>（<input>）
改变属性
图2
<strong> --- 加粗
<marquee> --- 流动
html标签：可以相互嵌套
图1
【2】 属性：给标签添加附加信息
查属性：MDN
属性名=”属性值“
disabled=”disabled“（disabled）
Loop=“1” ---- 控制循环
bgcolor="pink" --- 颜色
<!-- 注释快捷键：ctrl+/ -->
【3】html骨架:
<html>
<head>
<title>你们…… </title>
</head>
<body>
<marquee loop="1" bgcolor="pink">我要…… </marquee>
</body>
</html>
图3
开发工具：Vscode、submite、webstrom、dw、hbuilder
Vscord:
Shift+!
<!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>
【4】标签：
（1）标题标签<h>：1 --- 一级标签
<!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>
<!-- h1~h6 逐级递减 独占一行 -->
<h1>我是一个标题</h1>
<h2>我是一个标题</h2>
</body>
</html>
图4
（2）段落标签<p>：
<!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>
<!-- <p> --- 段落标签 -->
<p>中新网西宁7月20日电 (潘雨洁 薛蒂)“今年，浙江省受邀作为青洽会的主宾省，这是浙青两省友谊的再度见证，两省友谊由来已久、历久弥新。”20日，浙江省副省长张雁云表示。
7月20日，第24届中国青海绿色发展投资贸易洽谈会(简称：青洽会)在青海省西宁市开幕。当日下午，本届青洽会主宾省浙江省展馆开馆仪式举行。浙江省、青海省相关部门负责人及两地企业家代表出席仪式。
</p>
<p>张雁云在致辞中介绍，浙江省自2010年8月与青海省海西古族藏族自治州建立对口支援关系。13年来，浙江省先后派出5批、206名援青干部人才；安排25.71亿元援青资金；实现援青项目394个，涵盖
城乡基础设施建设、产业发展、生态保护、民族团结等方面。“自2021年以来，累计下达119个援青项目，目前完工和基本完工65个。”他说。
</p>
</body>
</html>
图5
（3）文本格式化标签：
<!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>
<p>中新网西宁7月20日电 (潘雨洁 薛蒂)“今年，浙江省受邀作为青洽会的主宾省，这是浙青两省友谊的再度见证，两省友谊由来已久、历久弥新。”20日，浙江省副省长张雁云表示。
<strong >7月20日</strong>，第24届中国青海绿色发展投资贸易洽谈会(简称：青洽会)在青海省西宁市开幕。当日下午，本届青洽会主宾省浙江省展馆开馆仪式举行。浙江省、青海省相关部门负责人及两地企业家代表出席仪式。
<!-- <strong> /<b>--- 加粗 -->
</p>
<p><em>张雁云</em>在致辞中介绍，浙江省自2010年8月与青海省海西古族藏族自治州建立对口支援关系。13年来，浙江省先后派出5批、206名援青干部人才；安排25.71亿元援青资金；实现援青项目394个，涵盖
<!-- <em>/<i> --- 斜体-->
<del>城乡基础设施建设</del>、产业发展、生态保护、民族团结等方面。“自2021年以来，累计下达119个援青项目，目前完工和基本完工65个。”他说。
<!-- <del>/<s> --- 删除线 -->
x<sub>2</sub>
x<sup>2</sup>
<!-- sub --- 上标，sup --- 下标 -->
</p>
原价：<ins>999</ins>
<!-- <ins>/<u> --- 下划线 -->
</body>
</html>
图6
（4）换行标签及水平线标签：
<!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>
<!-- <br /> --- 换行 -->
<h1>乌克兰</h1>
<hr />
<!-- <hr /> --- 水平线 -->
“世界已经开始厌倦了，很多国家已经开始厌倦了，”<br />卢拉对记者表示。“因此，和平时刻即
将降临。必须确保存在一些国家能够与俄罗斯和乌克兰进行对话。”
在此次欧拉峰会上，欧盟领导人试图说服拉共体领导人签署严厉谴责俄罗斯的声明，但由于
尼加拉瓜、委内瑞拉和古巴等国的坚持，这一企图并未实现，声明甚至没有提及俄罗斯。彭
博社称，官员们表示，在此次峰会上，卢拉不愿接受任何针对俄罗斯的强硬措辞。一位高级
外交官称，卢拉担心“惹恼”俄罗斯。然而，法国总统马克龙却称赞卢拉“能够搭建桥梁”。此
外，法新社提到，巴西总统卢拉谴责俄乌冲突是全球外交的失败，而非俄罗斯单方面的侵略，
这代表着拉共体许多人的看法。
据美国《政治》网站报道，在欧拉峰会召开前，双方就一直在争论是否要在峰会公报中提及俄
乌冲突。在18日晚公布的最终声明中，原先16页的内容被缩减至9页，全文并未提及俄罗斯，
在涉及俄乌冲突的部分则写道：“我们对正在进行中的俄乌冲突表示深切关注”。
</body>
</html>
图7
单标签：<br>换行、<hr>水平线
（5）图片标签：
<!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>
<!-- src --- 指向图片地址d的 / alt --- 图片地址发生错误时，用来对图片进行提示的 / title --- 鼠标悬停时，显示的文字 / align --- 设置图片与文字的对齐方式的-->
<img src="./灰太狼.jpg" alt="我一定会回来的" title="红红" width="400px" border="2px" align="center">
<!-- src 指向它的地址 高度：height="600px" / 宽度：width="800px" ；高度和宽度只需要设置一个，另外一个对于生成-->
</body>
</html>
图8
（6）路径：
相对路径：
../---返回上一级
./---当前级
/
图片1
（7）视频标签：
<!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>
<video src="./video.mp4"controls="controls" loop="loop" autoplay="autoplay" muted></video>
<!-- controls:控键 loop:循环 autoplay:自动 muted:静音-->
</body>
</html>
图9
（8）音频标签：
<!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>
<audio src="./music.mp3"controls="controls" loop="loop" >
<!-- controls:控键 loop:循环 -->
</body>
</html>
图10
（9）超链接标签<a>：
<!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>
<!-- target:控制链接打开方式 -->
<a href="./cat.gif" target="_blank">点击我进行跳转</a>
<a href="https://www.baidu.com" target="_blank">去百度</a>
</body>
</html>
图11
（10）锚链接标签<a>：
<!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>
<a href="#one">去h1那里</a>
<!-- <p> --- 段落标签 -->
<p>中新网西宁7月20日电 (潘雨洁 薛蒂)“今年，浙江省受邀作为青洽会的主宾省，这是浙青两省友谊的再度见证，两省友谊由来已久、历久弥新。”20日，浙江省副省长张雁云表示。
7月20日，第24届中国青海绿色发展投资贸易洽谈会(简称：青洽会)在青海省西宁市开幕。当日下午，本届青洽会主宾省浙江省展馆开馆仪式举行。浙江省、青海省相关部门负责人及两地企业家代表出席仪式。
</p>
<!-- id:身份证号码 一个元素只能有一个id；同一个网页内，id不能相同-->
<h1 id="one">市场变化不大</h1>
<p>张雁云在致辞中介绍，浙江省自2010年8月与青海省海西古族藏族自治州建立对口支援关系。13年来，浙江省先后派出5批、206名援青干部人才；安排25.71亿元援青资金；实现援青项目394个，涵盖
城乡基础设施建设、产业发展、生态保护、民族团结等方面。“自2021年以来，累计下达119个援青项目，目前完工和基本完工65个。”他说。
</p>
</body>
</html>
图12
（11）特殊字符：
图13
<!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>
<p><</p>
</body>
</html>
图14
（12）有序列表标签<ol>：
<!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>
最喜欢的食物：
<ol type="1">
<li>麻辣烫</li>
<a href="#">去百度</a>
<img src="./cat.gif" alt="">
<!-- li里可以嵌套 -->
<li>螺蛳粉</li>
<li>火锅</li>
</ol>
</body>
</html>
图15
（13）无序列表标签<ul>：
<!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>
喜欢的明星：
<ul type="square">
<li>鹿晗</li>
<li>黄子韬</li>
<li>张艺兴</li>
</ul>
</body>
</html>
图16
（14）自定义列表标签<dl>：
<!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>
<dl>
<dt>线下门店</dt>
<dd>web之家</dd>
<dd>服务网点</dd>
<!-- 其余在css -->
</dl>
</body>
</html>
图17
（15）框架：
<!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>
第一页面
<iframe src="https://www.taobao.com" frameborder="0" width="400px" height="200px"></iframe>
<!-- iframe：嵌套,可嵌套多个页面 0：表示没有边框 -->
</body>
</html>
图18
用超链接：
<!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>
第一页面
<a href="https://www.taobao.com" target="nn">点击进入淘宝</a>
<iframe name="nn" frameborder="0" width="400px" height="200px"></iframe></iframe>
</body>
</html>
图19
（16）表单：
<!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>
<!-- 所有表单包含在from里 所有表单必须有name属性 value:固定(可写可不写） disabled：不能点击-->
<form action="#">
用户名：<input type="text" name="usename" value="ab" disabled autocomplete="off" placeholder="请输入用户名">
密码：<input type="password" name="one" value="123456">
<!-- value 将其提交上去（必须写） autocomplete 记录登录用户 placeholder 提示词 name:分组-->
<!-- 所有单选、多选必须有value值 -->
<br>
<input type="radio" name="r1" value="女" checked>女
<input type="radio" name="r1" value="男">男
<!-- radio：单选 checked 默认选择-->
<br>
爱好:
<input type="checkbox" name="love" value="sing">爱唱歌
<input type="checkbox" name="love" value="dance">爱跳舞
<input type="checkbox" name="love" value="玩游戏" >爱玩游戏
<select name="xiala" id="">
<option value="西安">西安</option>
<option value="成都" selected>成都</option>
<option value="南京">南京</option>
</select>
<textarea name="jianjie" id="" cols="30" rows="10" maxlength="20"></textarea>
<!-- cols ：行 rows :列 maxlength :最大长度-->
<br>
<input type="file" name="wenjian" id="" multiple>
<!-- <input type="button">一个普通按钮 multiple 可多选文件-->
<input type="submit" value="tijiao">
<input type="reset">
<!-- reset 重置 -->
<!-- submit 也是提交 -->
<input type="hidden" name="hid">
<!-- hidden 隐藏域 -->
<button disabled>提交</button>
</form>
</body>
</html>
图20
<input type="" value="" id="">
图21
补：
表单划分：<fieldset>
分组的标题：<legend>主要信息</legend>
（17）label标签：
<!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>
<form action="#">
<!-- 1、 -->
<label for="sing">爱唱歌</label><input type="checkbox" name="love" id="sing">
<!-- 2 -->
<label> 爱跳舞<input type="checkbox" name="love" id=""></label>
</form>
</body>
</html>
图22
第二天
（1）表格标签：
<!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>
<table border="1px" cellspacing="0" width="800xp" height="300xp">
<!-- caption 标题 cellspacing：单元格与单元格之间的间距 width:设置宽度 height：设置高度，但thead、tfoot不改变 只是高度的底线-->
<caption>学生信息</caption>
<!-- align 水平方向 ；valign 垂直方向 -->
<thead height="200px" align="center" valign="middle">
<!-- tr\tbody\tfoot属性一样，但不能设置宽度-->
<!-- r=rows -->
<tr>
<!-- th 可以设置width -->
<th >姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody height="200px" align="center" valign="middle">
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>团员</td>
</tr>
</tbody>
<tfoot align="center" valign="middle">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计：1人</td>
</tr>
</tfoot>
</table>
</body>
</html>
图23
（2）单元格合并：
<!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>
<table border="1px" cellspacing="0" width="800xp" height="500xp">
<tr>
<!-- rowspan 跨行 并且删除下一个表格 -->
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<!-- colspan 跨列 -->
<td colspan="3"></td>
<td></td>
</tr>
</table>
</body>
</html>
图24
(3）无语义标签：
<!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>
<!-- 有语义：p、h1、a…… -->
<div>我是一个盒子</div>
<div>我是一个盒子</div>
<div>我是一个盒子<a href="#">阿巴</a></div>
<!-- div（分区）特点： 独占一行，可嵌套 -->
<!-- 独占一行：h -->
<span>我是一个小容器</span>
<span>我是一个小容器</span>
<span>我是一个小容器</span>
<!-- span特点： 一行多个 // 用于给少的东西加样式-->
</body>
</html>
图25
(4）元素显示模式：
<!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>
<!--元素显示模式：
块元素:独占一行，宽、高、内外边距可以设置 div、h1~h6 li
行内元素:一行多个，宽、高、内外边距设置无效 span、a
行内块元素：可以一行多个，也可以设置宽、高、内外边距 img -->
<div>我是块元素</div>
<span>我是行内元素</span>
<span>我是行内元素</span>
<span>我是行内元素</span>
<br>
<a href="#">去百度</a>
<a href="#">去百度</a>
<a href="#">去百度</a>
<br>
<img src="./大楼.jpg">
<img src="./大楼.jpg">
</body>
</html>
图26
(5)H5新标签：
<!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>
<nav>
</nav>
<header>//头部
</header>
<article>
<section>
</section>
</article>
<footer>//尾部
</footer>
<details>
<summary></summary>
</details>
</body>
</html>
（6）全局属性：
<!DOCTYPE html>
<html lang="en">
<!-- lang 也是全局属性 -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- id：同一个网页的id值不能重复，一个元素只能有一个id名 除了body、html、head、script、style-->
<div id="box1"></div>
<a href="#" id="a1"></a>
<!-- class:分类 配合层叠样式表 一个网页中可以有多个类名相同的元素，一个元素可以有多个类名-->
<div class="box1 box2"></div>
<div class="box1 box3"></div>
<a href="#" id="a1 a2"></a>
<!-- title ：鼠标悬停时，提示词 -->
<img src="./大楼.jpg" alt="哈哈哈" title="哇哦">
<div title="哈哈哈">h盒子</div>
<a href="#" title="小飞侠">上天</a>
<!-- tabindex：正数 负数 0 -->
<!-- 有些可以获取焦点，有些不行,如：div,所有写属性 -->
<form action="#">
<input type="text" name="ux" id="">
</form>
<a href="#">dicdncd</a>
<div title="盒子" tabindex="1">盒子</div>
<div title="盒子" tabindex="2">盒子</div>
<!--spellcheck：拼写检查 true/false -->
<form>
<input type="text" spellcheck="true">
</form>
<!-- accesskey：设置快捷键的属性 特殊：谷歌浏览器里要配合alt键，才能完成 -->
<form action="#">
<input type="text" name="user" id="">
<button accesskey="1">提交</button>
</form>
<!-- autocapitalize 启动大小写-->
<!-- contenteditable：设置元素中内容是否可以更改 true/false-->
<div contenteditable="true">我不能编辑</div>
<!-- dir 从左到右/从右到左-->
<div dir="rtl">我不能编辑</div>
<!-- hidden -->
<div hidden>我不能编辑</div>
<a href="#" hidden>ghjg</a>
</body>
</html>
三、css：层叠样式表
（1）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>
div{
width: 300px;
height: 400px;
background-color: aqua;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
（2）行内样式表：
<!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>
<div style="width: 300px; height: 400px; background-color: aqua;"></div>
</body>
</html>
（3）内部样式表：
<!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>
div {
width: 300px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
同行内样式表一样没有与html完全分离，建议使用外部样式
(4）外部样式表：
外部样式.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>
<link rel="stylesheet" href="./外部样式.css">
<!-- 利用link标签引入css -->
</head>
<body>
<div>
</div>
</body>
</html>
外部样式.css：
div {
width: 300px;
height: 200px;
background-color: pink;
}
（6）基础选择器：
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>
<link rel="stylesheet" href="./11.1-基础选择器.css"
</head>
<body>
<div>我是一个盒子</div>
<p>我是一段文字</p>
<h1>我是标题</h1>
<div>我</div>
<div id="box1">我是不能编辑的盒子</div>
<div class="box1">我是不能编辑的盒子</div>
</body>
</html>
css：
/* 标签选择器：选中当前页面中所有符合标签 */
h1{
color: brown;
}
/* id选择器 #id */
#box1{
color: aqua;
}
/* 类选择器 .类名*/
.box1{
background-color: pink;
}
/* 通配符选择器 选中所有的元素 */
*{
font-size: 20px;
}
图27
(7）包含选择器：
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>
<link rel="stylesheet" href="./12.1包含选择器.css">
</head>
<body>
<ul >
<li>我是一个人</li>
<li>我是一个人</li>
<li>我是一个人</li>
<li>我是一个人</li>
<div>
<li>我是子辈</li>
<li>我是子辈</li>
</div>
</ul>
</body>
</html>
css：
/* 子代选择器 只选中亲生儿子*/
ul>li {
background-color: brown;
}
/* 后代选择器 css样式表存在层叠性，后边的会将前边的覆盖掉*/
/* 样式表存在层叠性，后面的会将前面的覆盖掉 */
ul div li {
background-color: blue;
}
图28
(8)逗号选择器：
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>
<link rel="stylesheet" href="./13.1-逗号选择器.css">
</head>
<body>
<div>我是1</div>
<p>我是2</p>
<h1>我是3</h1>
</body>
</html>
css：
/* 复合选择器 */
div,
p,
h1 {
background-color: aqua;
}
图29
（9）属性选择器：
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>
<link rel="stylesheet" href="./14.1-属性选择器.css">
</head>
<body>
<form action="#">
<input type="text" >
<input type="password" >
<input type="email" name="email">
<input type="number">
</form>
</body>
</html>
css：
input[type="text"] {
background-color: blue;
}
input[type="password"] {
background-color: aqua;
}
input[name] {
background-color: brown;
}
/* *type的属性值里包含e的input元素 *：包含 */
input[type*="e"] {
background-color: blueviolet;
}
/* ^:以什么开头 */
input[type^="p"] {
background-color: chartreuse;
}
/* $:以什么结尾 */
input[type$="l"] {
background-color: crimson;
}
图30
（10）伪类选择器：
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>
<!-- 伪类选择器：元素在不同状态下的样式 -->
<link rel="stylesheet" href="./15.1-伪类选择器.css">
</head>
<body>
<a href="#">点击去百度</a>
<div>我是一个人</div>
</body>
</html>
css：
/* 顺序：link、visited、hover、active */
/* :link 未访问的来凝结样式 */
a:link{
color: aqua;
}
/* 访问之后的样式 */
a:visited{
color: blue;
}
/* 鼠标悬停时的样式 */
/* +：表示下一个
~：表示之后所有的兄弟元素
如果是嵌套关系用空格 */
a:hover+div{
color: brown;
}
/* 获取焦点时的样式 */
a:focus{
color: blueviolet;
}
/* 用户点击之后按住鼠标 */
a:active {
color: pink;
}
(11)结构伪类选择器：
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>
<link rel="stylesheet" href="./16.1-结构伪类选择器.css">
</head>
<body>
<ul>
<li>我是1</li>
<li>我是2</li>
<li>我是3</li>
<li>我是4</li>
<li>我是5</li>
</ul>
</body>
</html>
css：
ul li:nth-child(4){
background-color: pink;
}
ul li:last-child{
background-color: brown;
}
ul li:first-child{
background-color: aqua;
}
ul li:nth-child(2n+1){
background-color: blue;
}
ul li:nth-child(2n){
background-color: blueviolet;
}
图31
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>
<link rel="stylesheet" href="./16.2-结构伪类选择器.css">
</head>
<body>
<div class="father">
<p>你好</p>
<div class="son">我是1</div>
<div class="son">我是1</div>
<div class="son">我是1</div>
</div>
</body>
</html>
css：
/* 先找.father，然后对所有的子元素进行排序，找到对应序号的子元素 */
.father .son:nth-child(2) {
background-color: aqua;
}
/* 先找.father，在找.father里的.son，然后对.son进行排序 */
.father .son:nth-of-type(2) {
background-color: pink;
}
伪元素选择器：
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>
<link rel="stylesheet" href="./17.1-伪元素选择器.css">
</head>
<body>
<p>灰太狼</p>
<form>
<input type="text" placeholder="请输入">
</form>
<div>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque rem nemo unde amet dolor ratione, laborum voluptate dolorem est reiciendis cupiditate in, iusto quas alias quae doloremque saepe vel fugiat?
</div>
</body>
</html>
css：
/* 必须有属性content写内容 */
p::before{
content: "#";
color: aqua;
}
p::after{
content: "xyy";
color: aquamarine;
}
input::placeholder{
color: burlywood;
}
div::selection{
color: brown;
}
图32
扫一扫
1530
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
