一、head标签重点
<head>
<meta charset="utf-8">
<title>第二天课</title>
<!--页面关键字-->
<meta name="keywords" content="护士，教师，空姐">
<!--页面描述-->
<meta name="description" content="各种服饰应有尽有">
<!--页面刷新-->
<meta http-equiv="refresh" content="3;url=https://www.baidu.com/">
</head>
二、字符实体
<——小于
>——大于
——空格
三、常见文本标签
<b>——粗体
<u>——下划线
<i>——斜体
<del>——删除线
<strong>——强调（粗体）
四、锚点标签
<body>
<h3 id="top"></h3>
<a href="#one">第一章</a>
<a href="#two">第二章</a>
<h4 id="one">第一章</h4>
<p style="width: 600px;height: 400px;background-color: blue;"></p>
<h4 id="two">第二章</h4>
<p style="width: 600px;height: 400px;background-color:yellow;"></p>
<a href="#top">返回</a>
</body>
五、表格基础
1、跨行：rowspan
2、跨列：colspan
3、表格标题：<caption>
4、表格头部：<th>
5、行与列：<tr><td>
六、样式选择器
1、ID选择器
<head>
<style>
#one{color:red;}
</style>
</head>
<body>
<label id="one">样例1</label>
</body>
2、Class选择器
<head>
<style>
.one{color:red;}
</style>
</head>
<body>
<label class="one">样例2</label>
</body>
3、标签选择器
<head>
<style>
p{color:red;}
</style>
</head>
<body>
<p>样例3</p>
</body>
七、样式位置
1、外链样式
1）style.css
#one{color:red;}
.one{color:yellow;}
p{color:blue;}
2）index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="./style.css" rel="stylesheet" type="text/css">
</head>
<body>
<input id="one">
<input class="one">
<p></p>
</body>
</html>
2、内置head标签中
<head>
<style>
#one{color:red;}
</style>
</head>
<body>
<label id="one">样例1</label>
</body>
3、关系选择器
<style>
ul li{color:pink;} /*(包含)后代选择器*/
ul>li{color:balck;} /*父子选择器*/
ol+li{color:red;} /*相邻选择器（向下相邻）*/
ol~li{color:blue} /*兄弟选择器(向下的兄弟)*/
</style>
<body>
<ul>
<li>111</li>
<li>222</li>
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
<li>444</li>
<li>555</li>
<li>666</li>
</ul>
</body>
4、选择器优先级
标签内style > ID选择器 > 类选择器 >标签选择器 > 标签原有选择器
待补充……
原文地址：https://www.cnblogs.com/HymanWesteros/p/12222031.html
时间： 2024-08-12 07:07:46