提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
HTML 超文本标记语言
文档结构
<!DOCTYPE html> <!-- 文档声明 -->
<html lang="en"> <!-- 语言 -->
<head> <!-- 网站配置信息 -->
<meta charset="UTF-8"> <!-- 解码方式 -->
<title>三味书屋</title> <!-- 网站标题 -->
</head>
<body> <!-- 网站显示内容 -->
<h1>三味书屋欢迎你</h1>
</body>
</html>
head标签
meta文档字符编码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- 设置字符编码为utf-8 -->
<title>我的网页</title>
</head>
<body>
<h1>这是一个网页</h1>
</body>
</html>
meta页面刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个标题</title>
<meta http-equiv="Refresh" content="5" /> <!-- 网页刷新，5秒一次 -->
</head>
<body>
<h1>这句话有七个字</h1>
</body>
</html>
meta关键字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个标题</title>
<!-- 设置关键字，用于搜索引擎收录和关键字收索 -->
<meta name="keywords" content="数学，语文，英语" />
</head>
<body>
<h1>这还是一个栗子</h1>
</body>
</html>
meta设置网站描述信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三味书屋</title>
<!-- 设置网站描述信息，用于在搜索引擎搜索时，显示网页基本描述信息-->
<meta name="description" content="我们这什么书都有">
</head>
<body>
<h1>这是一个三味书屋</h1>
</body>
</html>
meta触屏播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个标题</title>
<!--支持触屏缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<!--不支触屏持缩放-->
<!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">-->
</head>
<body>
<h1 style="width: 1500px;background-color: green;">咕叽咕叽！</h1>
</body>
</html>
link图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三味书屋</title>
<link rel="icon" href="ceshi.PNG">
</head>
<body>
<h1>三味书屋欢迎你</h1>
</body>
</html>
head内部标签总结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三味书屋</title>
<meta name="keywords" content="数学，语文，英语，物理">
<meta name="description" content="三味书屋里面什么书都有">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<link rel="icon" href="/image/chicken.icon">
</head>
<body>
<h1 style="width: 1500px;background-color: green;">三味书屋欢迎你</h1>
</body>
</html>
body标签
h1-h6标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>AAA</h1>
<h2>BBB</h2>
<h3>CCC</h3>
<h4>DDD</h4>
<h5>EEE</h5>
<h6>FFF</h6>
</body>
</html>
br标签:换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>AAA</h1>
<h2>BB<br>CC</h2>
</body>
</html>
hr标签:一行横线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>AAA<hr>BBB</h2>
</body>
</html>
a标签:超链接标签
不加href属性，就是普通文本显示
<a>python</a>
加上href属性，不给href属性赋值
<a href="">python</a>
加上href属性，并且给href属性赋值
<a href="http://www.pythonav.com" target="_self">python</a>
要注意:
跳转对应网址的页面
未访问之前是蓝色的字体颜色
访问之后是紫色的字体颜色
target属性:
_self:在当前标签页打开 href属性值的那个网址
_blank:在新的标签页打开 href属性值的那个网址
要a标签效果，但是不刷新或者跳转页面
<!-- 这两种写法都可以 -->
<a href="#">校花网</a>
<a href="javascript:void(0);">校花网</a>
设置瞄点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 600px;
width: 600px;
background-color: green;
}
.c2{
height: 600px;
width: 600px;
background-color: red;
}
</style>
</head>
<body>
<div id="top">顶部位置</div> <!-- 设置瞄点 -->
<div class="c1"></div>
<div class="c2"></div>
<a href="#top">回到顶部</a> <!-- 回到设置瞄点的位置 -->
</body>
</html>
img标签:图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="ceshi.PNG" alt="图片" title="这是一个图片" width="100" height="100">
</body>
</html>
src属性:图片路径 必须写
alt属性:图片加载失败或者正在加载时提示的内容
title属性:鼠标悬浮时显示的内容,不是img标签独有的
width:设置宽度
height:设置高度
div标签和span标签
div标签和span标签没有任何的修饰效果
标签分类:
块级标签(行外标签):独占一行,h1-h6\p\br\hr\div\ul\li →块级标签能够包含内联标签,和某些块级标签
内联标签(行内标签):不独占一行,img\a\span →只能包含内联标签,不能包含块级标签
关于标签的嵌套:
块级标签能够设置高度宽度，能够嵌套某些块级标签和内敛标签，p不能嵌套块级标签，也不能嵌套p标签
内敛标签不能设置高度宽度，它的高度宽度由内容来决定，只能嵌套内敛标签
p标签:上下有边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>李博伦</p>
</body>
</html>
ul标签和ol标签:列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
李博伦的爱好
<ul type="none">
<li>抽烟</li>
<li>喝酒</li>
<li>烫头</li>
</ul>
c9h的爱好
<ol type="A" start="2">
<li>学习</li>
<li>跑步</li>
<li>吃饭</li>
</ol>
</body>
</html>
type属性：控制列表内容前面的效果的
start属性：是控制有序列表标签的起始值的
dl标签(了解)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<dl>
<dt>吉林省</dt>
<dd>长春</dd>
<dd>四平</dd>
<dt>辽宁省</dt>
<dd>沈阳</dd>
<dd>大连</dd>
</dl>
</body>
</html>
table标签:表格标签(重点)
table 表格 border 表框 width 宽度设置
tr 表示一行
th 表示标题加粗
td 表示一个单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> table 表格标签</title>
</head>
<body>
<table border=1 width="1000px;">
<thead style="background-color: tan;">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>薪水</th>
<th>部门</th>
</tr>
</thead>
<tbody style="background-color: teal;">
<tr>
<td>王文</td>
<td>18</td>
<td>10万</td>
<td>python</td>
</tr>
<tr>
<td>王伟</td>
<td>20</td>
<td>11美元</td>
<td>开发部门</td>
</tr>
<tr>
<td>王致和</td>
<td>22</td>
<td>100万</td>
<td>臭豆腐研发部门</td>
</tr>
</tbody>
<tfoot style="background-color: thistle;">
<tr>
<td>lianxi1</td>
<td>lianxi2</td>
<td>lianxi3</td>
<td>lianxi4</td>
</tr>
</tfoot>
</table>
<hr style="width:20px;height:100px;"/>
</body>
</html>
colspan 横向合并 rowspan 纵向合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> table 表格标签</title>
</head>
<body>
<table border=1 width="1000px;">
<thead style="background-color: tan;">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>薪水</th>
<th>部门</th>
</tr>
</thead>
<tbody style="background-color: teal;">
<tr>
<td colspan=2>123</td>
<td>10万</td>
<td rowspan="3">销售</td>
</tr>
<tr>
<td>王伟</td>
<td>20</td>
<td>11美元</td>
</tr>
<tr>
<td>王致和</td>
<td>22</td>
<td>100万</td>
</tr>
</tbody>
<tfoot style="background-color: thistle;">
<tr>
<td colspan=4>lianxi1</td>
</tr>
</tfoot>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="1">
<thead>
<tr>
<th>名称</th>
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>李博伦</td>
<td>18</td>
<td>coc</td>
</tr>
<tr>
<td rowspan="2">c9h</td> <!-- 合并行 -->
<td colspan="2">国服第一帅</td> <!-- 合并列 -->
</tr>
<tr>
<td>22</td>
<td>看书</td>
</tr>
</tbody>
</table>
</body>
</html>
表格的方向属性
水平方向设置 align : left center right
垂直方向设置 valign: top middle bottom
cellspacing td 与td 之间的间距
cellpadding td 与其中内容之间的间距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>table 表格的方向属性</title>
</head>
<body>
<!--
水平方向设置 align : left center right
垂直方向设置 valign: top middle bottom
cellspacing td 与td 之间的间距
cellpadding td 与其中内容之间的间距
-->
<table border=1 width="1000px;" height="200px;" cellspacing = "10" cellpadding="10">
<tr align="center" valign="top">
<td>王致和</td>
<td>蓝色</td>
<td>踢球</td>
<td>江西</td>
</tr>
<tr align="center" valign="middle"">
<td>王致和</td>
<td>蓝色</td>
<td>踢球</td>
<td>江西</td>
</tr>
<tr align="center" valign="bottom">
<td>王致和</td>
<td>蓝色</td>
<td>踢球</td>
<td>江西</td>
</tr>
</table>
</body>
</html>
iframe 子窗口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> iframe 子窗口</title>
</head>
<body>
<iframe src="" name="isme" width="1000px" height="200px;"></iframe>
<hr />
<a href="http://www.baidu.com" target="isme">点我跳转百度</a>
<a href="3.html" target="isme">点我跳转3.html</a>
<a href="4.html" target="isme">点我跳转4.html</a>
</body>
</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>
<!-- https://www.w3school.com.cn/html/index.asp w3c school 手册 -->
<video src="ceshi.mp4" controls = "controls" style="width:100px;">
抱歉~! 您的浏览器不支持,该扔了
</video>
<audio src="潮汐-她的城市.mp3" controls = "controls">
抱歉~! 您的浏览器不支持,该扔了
</audio>
</body>
</html>
form标签:表单标签
action属性: 指定提交路径,提交到哪里去
form表单作用:form表单标签会将嵌套在form标签里面的输入框的数据全部提交到指定路径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://127.0.0.1:8001">
</form>
</body>
</html>
input标签:输入框
注意：选择框写的时候，尽量将name属性和value属性都写上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" name="username"> <!-- 普通文本输入框 -->
<input type="password" name="password"> <!-- 密文输入框 -->
<input type="submit" value="点击确认"> <!-- 提交按钮（触发form表单提交数据的动作） -->
<input type="reset"> <!-- 重置按钮 清空输入的内容 -->
<input type="button" value="走你"> <!-- 普通按钮（不会触发form表单提交数据的动作） -->
<input type="date"> <!-- 时间日期输入框 -->
<input type="file"> <!-- 文件选择框 -->
<input type="number"> <!-- 纯数字输入框 -->
<!-- 单选框 -->
性别
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="2">女
<!-- 多选框 -->
喜欢的明星
<input type="checkbox" name="hobby" value="1">张三
<input type="checkbox" name="hobby" value="2">李四
<input type="checkbox" name="hobby" value="3">王五
</body>
</html>
placeholder 灰色输入提示
required 必填
readonly 只能读不能改 可以被提交
disabled 只能读不能改 不会被提交
size 设置输入框的大小
maxlength 输入框最多可以输入多少字符
minlength 输入框最少需要输入多少字符
autofocus 自动获取焦点, 整个页面只能有一个
tabindex 设置tab的切换顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>input属性</title>
</head>
<body>
<!--
placeholder 灰色输入提示
required 必填
readonly 只能读不能改 可以被提交
disabled 只能读不能改 不会被提交
size 设置输入框的大小
maxlength 输入框最多可以输入多少字符
minlength 输入框最少需要输入多少字符
autofocus 自动获取焦点, 整个页面只能有一个
tabindex 设置tab的切换顺序
-->
<form action='' method="" >
用户名:<input type="text" name="username" placeholder="请输入用户名" required tabindex=5 />
<br />
密码: <input type="password" name="pwd" tabindex=4 >
<br />
年龄: <input type="text" name="age" value="18" readonly tabindex=3 />
<br />
邮箱: <input type="text" name="email" value="123463922@qq.com" disabled />
<br />
班级: <input type="text" name="classroom" size=100 maxlength = 5 minlength=2 tabindex=2/>
<br />
国籍: <input type="text" name="country" autofocus tabindex=1 />
<br />
<input type="submit">
</form>
</body>
</html>
select标签:下拉框标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单选框 , 复选框 , 下拉框</title>
</head>
<body>
<form action="" method="">
<!-- 单选框 radio 多选一 name名字要一致 checkedc:默认选中 -->
<input type="radio" name="sex" value="m" id="sex1" /> <label for="sex1" >男性</label>
<input type="radio" name="sex" value="w" id="sex2" checked /> <label for="sex2" >女性</label>
<hr />
<!-- 复选框 checkbox 多选多 name名字要一致 -->
<input type="checkbox" name="food" value="banana" checked />香蕉
<input type="checkbox" name="food" value="huanggua" />黄瓜
<input type="checkbox" name="food" value="qiezi" checked />茄子
<input type="checkbox" name="food" value="donggua" />冬瓜
<hr />
<!-- 下拉框 select 多选一 selected 默认选中, disabled 无法选中-->
<select name="city" >
<option value="beijing" >北京人</option>
<option value="xian" selected>西安人</option>
<option value="dalian" >大连人</option>
<option value="fuzhou">福州人</option>
<option value="zhengzhou" disabled >郑州人</option>
</select>
<hr / >
<input type="submit" value="点我" />
</form>
</body>
</html>
注意:这两种写法完全相同
<select name="star" multiple="multiple">
<select name="star" multiple>
textarea标签:多行文本输入框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>
文件上传
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 文件上传 </title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<!-- 文件上传 -->
头像:<input type="file" name="myfile" />
<hr/>
<!-- 大段文本框 -->
<textarea name="info" style="width:100px;height:100px;background-color:tan;" >请填写相关数据</textarea>
<hr/>
<!-- 隐藏的表单框 => 隐藏要修改的数据id -->
<input type="hidden" name="sid" value="13" />
<hr/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
CSS选择器
CSS的引入方式
内嵌样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> /* 可以直接控制相同标签内的属性 */
/* 选择器{css属性名称:属性值;css属性名称:属性值} */
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div>我要给江南寄刀片</div>
</body>
</html>
外部引入
创建一个ceshi.css文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="my.css" type="text/css" rel="stylesheet" /> <!-- href对应的是文件路径 -->
</head>
<body>
<div>刘慈欣yyds</div>
</body>
</html>
行内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 内联样式 -->
<div style="background-color: red;height: 100px;width: 200px;">内马尔和梅西</div>
</body>
</html>
CSS选择器
选择器的优先级和常用选择器
标签选择器 : 指定的是哪一些标签
类选择器 : 指定的是哪一类标签
ID选择器 : 指定的是哪一个标签
选择器的优先级
!important <- 行内样式 <- ID选择器 <- 类选择器 <- 标签选择器
大原则: 泛指的元素优先级低, 特指的元素优先级高 , 越具体优先级就越高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器的优先级</title>
<style>
font
{color:greenyellow;}
.one
{color:blue;}
#two
{color: indigo;}
font
{color:greenyellow!important;}
</style>
</head>
<body>
<font style="color:tan;" class="one" id="two"> 选择器的优先级 </font>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常用选择器</title>
<style>
/* 标签选择器*/
h1
{color:cyan}
/* 类选择器 */
.one
{color:green;}
/* ID选择器 */
#two
{color:red;}
/* 组合选择器 */
h1,h2,h3,h4
{color:goldenrod;}
/* 越具体指定,优先级就越高 */
h1.one
{color:gray;}
h2#two
{color:greenyellow;}
</style>
</head>
<body>
<h1>1号标签111</h1>
<h1 class="one" >1号标签222</h1>
<h2 id = "two">2号标签333</h2>
<a href="" class="one">我是连接</a>
<span id ="two">我是span</span>
<h3>我是h3标签</h3>
</body>
</html>
关系选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 关系选择器 </title>
<style>
/* 多行注释 */
ul li /* 包含选择器/后代选择器 */
{color:darkslateblue;}
ul>li /* 父子选择器 */
{color:yellow;}
ol+li /* 相邻选择器 特指下面一个*/
{color:green;}
ol~li /* 兄弟选择器 特指下面一堆*/
{color:deeppink;}
</style>
</head>
<body>
<ul>
<li>动漫频道</li>
<li>学习频道</li>
<li>直播频道</li>
<li>游戏频道</li>
<ol>
<li>少儿频道</li>
<li>智慧树,大风车</li>
<li>老年人频道</li>
</ol>
<li>授课直播</li>
<li>亚洲捆绑</li>
</ul>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器</title>
<style>
input[name]
{background-color: dodgerblue;}
input[name=username]
{background-color: red;}
input[type=password]
{background-color:yellow;}
input[type=text]
{background-color:green;}
</style>
</head>
<body>
<form action="" method="" >
用户名: <input type="text" name="username" />
<br />
密码: <input type="password" name="nickname">
<br />
性别:<input type="radio" name="sex" value="m"> 男
<input type="radio" name="sex" value="w"> 女
<br />
<input type="submit" value="点我">
</form>
</body>
</html>
伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类选择器</title>
<style>
/* 鼠标悬停的时候触发 */
a:hover
{color:teal;}
/* 列表中第一个元素 */
ul li:first-child
{color:yellow;}
/* 列表中最后一个元素 */
ul li:last-child
{color:green;}
/* 列表中具体某一个元素 */
ul li:nth-child(4)
{color: red;}
/* 偶数个2n / even 奇数个2n-1 / odd n不可换 */
ul li:nth-child(even)
{color:turquoise;}
ul li:nth-child(odd)
{color:violet;}
/* 小练习 */
/* 1.写一个table表格,设置一个背景色 */
table
{background-color:green;}
/* 2.偶数行颜色为蓝色 */
table tr:nth-child(2n)
{background-color: blue;}
table tr td
{}
/* 3.第3 , 6 , 9 3倍行颜色为黄色 */
table tr:nth-child(3n)
{background-color:yellow;}
/* 4.鼠标滑过时,颜色变成红色 */
table tr:hover
{background-color: red;}
</style>
</head>
<body>
<a href="#"> 老男孩教育 </a>
<ul>
<li>猪大肠</li>
<li>孙坚</li>
<li>晓东</li>
<li>文东</li>
<li>王伟</li>
<li>好心</li>
<li>蜂拥</li>
<li>倩倩</li>
<li>石超</li>
<li>帅帅</li>
</ul>
<table border=1 style="width:600px;" cellspacing=0 cellpadding=0 >
<tr>
<td style="background-color: #800000;">111</td><td style="background-color:#0f0;">222</td><td style="background-color:#00f;">333</td><td>444</td>
</tr>
<tr>
<td style="background-color:rgb(100,100,100);">111</td><td>222</td><td>333</td><td>444</td>
</tr>
<tr>
<td style="background-color:rgba(100,100,100,0.7);">111</td><td>222</td><td>333</td><td>444</td>
</tr>
<tr>
<td>111</td><td>222</td><td>333</td><td>444</td>
</tr>
<tr>
<td>111</td><td>222</td><td>333</td><td>444</td>
</tr>
<tr>
<td>111</td><td>222</td><td>333</td><td>444</td>
</tr>
<tr>
<td>111</td><td>222</td><td>333</td><td>444</td>
</tr>
<tr>
<td>111</td><td>222</td><td>333</td><td>444</td>
</tr>
<tr>
<td>111</td><td>222</td><td>333</td><td>444</td>
</tr>
<tr>
<td>111</td><td>222</td><td>333</td><td>444</td>
</tr>
</table>
</body>
</html>
伪对象选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪对象选择器</title>
<style>
.name
{color:goldenrod;}
/* 在内容之前插入 */
.name::before
{
content:"我问:";
color:green;
}
/* 在内容之后插入 */
.name::after
{
content:"肯定对!";
color:magenta;
}
/* 鼠标选中后的样式 */
.name::selection
{
background-color: mediumspringgreen;
color: white;
}
</style>
</head>
<body>
<span class="name">所爱隔山海，山海皆可平</span>
</body>
</html>
1396
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
