（转）史上最详细的前端HTML、CSS笔记_尚硅谷前端笔记-CSDN博客

本文知识点根据b站尚硅谷前端教学视频编写，包括html与css的知识点，文章知识结合视频更有助于消化哦~~

一、HTML

全称：HyperText Markup Language（超文本标记语言）。

超文本：暂且简单理解为 “超级的文本”，和普通文本比，内容更丰富。

标记：文本要变成超文本，就需要用到各种标记符号。

语言：每一个标记的写法、读音、使用规则，组成了一个标记语言。

（一）HTML标签

1.标签 又称元素，是HTML的基本组成单位。

2.标签分为：双标签 与 单标签 （绝大多数都是双标签）。

3.标签名不区分大小写，但推荐小写，因为小写更规范。

双标签：

<标签名>标签体</标签名>

单标签：

<标签名/>
<!--/ 可以省略-->

4.标签之间的关系：并列、嵌套

<marquee>
	DJ说：我来学前端了
	<input>
</marquee>
<input>

（二）HTML标签属性

1。用于给标签提供 附加信息。

2.可以写在：起始标签 或 单标签中，形式如下：

<标签名 属性名="属性值" 属性名="属性值"></标签名>

<marquee loop=“1” bgcolor=“orange”>DJ说，加油吧！</marquee>
<input type=“password”>

3.有些特殊的属性没有属性名只有属性值

<input disabled>

4.注意

不同的标签，有不同的属性；也有一些通用属性（在任何标签内都能写，后面会详细总结）。
属性名、属性值不能乱写，都是W3C规定好的。
属性名、属性值，都不区分大小写，但推荐小写。
双引号，也可以写成单引号，甚至不写都行，但还是推荐写双引号。
标签中不要出现同名属性，否则后写的会失效，例如：

<input type="text" type="password">

（三）HTML基本结构

想要呈现在网页中的内容写在 body 标签中。
head 标签中的内容不会出现在网页中。
head 标签中的 title 标签可以指定网页的标题。

<html>
    <head>
        <title>...</title>
    </head>
    <body>
        content
    </body>
</html>

such as:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DJ</title>
</head>
<body>
加油哦
</body>
</html>

（四）HTMl注释

注释的内容会被浏览器忽略，不会呈现在页面中
注释是对源代码的说明
语法

<!--我是注释-->

注释不能嵌套

（五）设置编码

设置字符编码

<head>
    <meta charset="UTF-8">
</head>

（六）设置语言

<html lang="en">
</html>

好处：

让浏览器显示对应的翻译提示。
有利于搜索引擎优化。

（七）HTML基础

1.开发者文档

W3C官网：www.w3c.org

W3School：https://www.w3school.com.cn/

MDN：https://developer.mozilla.org/zh-CN/

2.排版标签

标签名	标签含义	单/双标签
h1~h6	标题	双
p	段落	双
div	没有什么含义、用于整体布局（类似于包装袋）	双

注意事项：

h1 最好写一个， h2~h6 能适当多写。
h1~h6 不能互相嵌套，例如： h1 标签中最好不要写 h2 标签了。
p 标签很特殊！它里面不能有： h1~h6 、 p 、 div 标签（暂时先这样记，后面会说规律）。

such as：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>DJ</title>
</head>
<body>
<h1>
    不到长城非好汉
</h1>
<h2>
    一到长城...
</h2>
<div>
    <p>
        第一段
    </p>
    <p>
        第二段
    </p>
</div>
</body>
</html>

3.块级元素和行内元素

块级元素：独占一行（排版标签都是块级元素）
行内元素：不独占一行，input

使用规则：

块级元素 中能写 行内元素 和 块级元素（简单记：块级元素中几乎什么都能写）。
行内元素 中能写 行内元素，但不能写 块级元素。
一些特殊的规则：

h1~h6 不能互相嵌套。
p 中不要写块级元素。

such as

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块级元素和行内元素</title>
</head>
<body>
<h1>
    ZZ
</h1>
<div>
    <p>
        第一段
    </p>
    <p>
        第二段
    </p>
    <label>
        <input type="text">
        <input type="password">
    </label>
</div>
</body>
</html>

常用文本标签

用于包裹：词汇、短语等。
通常写在排版标签里面。
排版标签更宏观（大段的文字），文本标签更微观（词汇、短语）。
文本标签通常都是行内元素。

标签名	标签语义	单/双标签
em	要着重阅读的内容	双
strong	十分重要的内容（语气强于em）	双
span	没有语义，用于包裹词语	双

div是大包装袋，span是小包装袋

such as

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用的文本标签</title>
</head>
<body>
<p>
    <em>我爱DJ</em>
    <strong>我非常爱DJ</strong>
    <span>账号</span>
    <input type="text">
    <span>密码</span>
    <input type="password">
</p>
</body>
</html>

4.图片标签

（1）基本使用

标签名	标签语义	常用属性	单/双标签
img	图片	src ：图片路径（又称：图片地址）—— 图片的具体位置 alt ：图片描述 width ：图片宽度，单位是像素，例如： 200px 或 200 height ：图片高度，单位是像素，例如： 200px 或	单

总结：

①像素（ px ）是一种单位，学到 CSS 时，我们会详细讲解。

②尽量不同时修改图片的宽和高，可能会造成比例失调。

③暂且认为 img 是行内元素（学到 CSS 时，会认识一个新的元素分类，目前咱们只知道：块、行内）。

④alt 属性的作用：

搜索引擎通过 alt 属性，得知图片的内容。—— 最主要的作用。
当图片无法展示时候，有些浏览器会呈现 alt 属性的值。
盲人阅读器会朗读 alt 属性的值。

（2）路径的分类

①相对路径

在这里插入图片描述

注意：相对路径中的 ./ 可以省略不写。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>
<!--同级相对路径-->
<!--<img src="./kunkun.jpg" alt="小坤坤">-->
<!--下一级路径-->
<!--<img src="./a/kunkun.jpg" alt="也是小坤坤">-->
<!--上一级路径-->
<img src="../kunkun.jpg" alt="上一级的小kk">
</body>
</html>

②绝对路径

5.超链接

主要作用：从当前页面进行跳转

①跳转到指定页面、②跳转到指定文件（也可触发下载）、③跳转到锚点位置、④唤起指定

应用。

标签名	标签语义	常用属性	单/双标签
a	超链接	href ：指定要跳转到的具体目标。 target ：控制跳转时如何打开页面，常用值如下: _self ：在本窗口打开。 _blank ：在新窗口打开。 id ：元素的唯一标识，可用于设置锚点。 name ：元素的名字，写在 a 标签中，也能设置锚点。	双

（1）跳转到页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
<!--跳转到其他网页-->
<a href="https://www.baidu.com" target="_blank">去百度</a>
<!--跳转到本地网页-->
<a href="./图片标签.html" target="_self">坤坤</a>
</body>
</html>

（2）跳转到文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
<!--跳转到文件-->
<a href="./kunkun.jpg">小黑子</a>
<!--浏览器不能打开的文件会自动触发下载-->
<a href="./golang.zip">golang资料</a>
<!-- 强制触发下载 -->
<a href="./resource/小电影.mp4" download="电影片段.mp4">下载电影</a>
</body>
</html>

？？？？（下载电影没看懂）

（3）跳转到锚点

第一步：设置锚地

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚点</title>
</head>
<body>
<div>
    <a href="#test1">去锚点1</a>
</div>
<!--第一种方式：a标签配合id属性-->
<a id="test1">锚点1</a>

<!--第二种方式：其他标签配合id属性-->
<h2 id=“test2”>锚点2</h2>

<a href=“#test2”>去锚点2</a>
</body>
</html>

第二步：跳转锚点

<!-- 跳转到test1锚点-->
<a href="#test1">去test1锚点</a>
<!-- 跳到本页面顶部 -->
<a href="#">回到顶部</a>
<!-- 跳转到其他页面锚点 -->
<a href="demo.html#test1">去demo.html页面的test1锚点</a>
<!-- 刷新本页面 -->
<a href="">刷新本页面</a>
<!-- 执行一段js,如果还不知道执行什么，可以留空，javascript:; -->
<a href="javascript:alert(1);">点我弹窗</a>

（4）唤起指定应用

通过a标签可以唤起设备指定应用

<!-- 唤起设备拨号 -->
<a href="tel:10010">电话联系</a>
<!-- 唤起设备发送邮件 -->
<a href="mailto:10010@qq.com">邮件联系</a>
<!-- 唤起设备发送短信 -->
<a href="sms:10086">短信联系</a>

6.列表

（1）有序列表

（2）无序列表

（3）嵌套列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<!--有序列表-->
<h2>把大象放进冰箱需要几步</h2>
<ol>
    <li>把冰箱门打开</li>
    <li>把大象放进去</li>
    <li>把冰箱门关上</li>
</ol>

<!--无序列表-->
<h2>我想去的几个城市</h2>
<ul>
<li>茂名</li>
<li>深圳</li>
<li>上海</li>
<li>北京</li>
</ul>

<!--列表嵌套-->
<h2>我想去的几个城市</h2>
<ul>
<li>成都</li>
<li>
<span>上海</span>
<ul>
<li>外滩</li>
<li>杜莎夫人蜡像馆</li>
<li>
<a href=“https://www.opg.cn/”>东方明珠</a>
</li>
<li>迪士尼乐园</li>
</ul>
</li>
<li>西安</li>
<li>武汉</li>
</ul>
</body>
</html>

（4）自定义列表

概念：所谓自定义列表，就是一个包含术语名称以及术语描述的列表。
一个 dl 就是一个自定义列表，一个 dt 就是一个术语名称，一个 dd 就是术语描述（可以有多个）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义列表</title>
</head>
<body>
<h2>如何高效学习？</h2>
<dl>
    <dt>做好笔记</dt>
    <dd>笔记是我们以后复习的一个抓手</dd>
    <dd>笔记可以是电子版，也可以是纸质版</dd>
    <dt>菜就多练</dt>
    <dd>只有多练才能进步</dd>
    <dt>别怕出错</dt>
    <dd>错很正常，改正并记住，就是经验</dd>
</dl>
</body>
</html>

7.表格

（1）基本结构

一个完整的表格由：表格标题，表格头部，表格主体，表格脚注，四部分组成

在这里插入图片描述

表格涉及到的标签

table : 表格

caption : 表格标题

thead : 表格头部

tbody : 表格主体

tfoot : 表格脚注

tr : 每一行

th、td : 每一个单元格，表格头部中使用th, 表格主体、表格脚注中使用 : td

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table border="1">
    <caption>学生信息</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>民族</th>
            <th>政治面貌</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小宝贝</td>
            <td>男</td>
            <td>21</td>
            <td>汉</td>
            <td>共青团员</td>
        </tr>
        <tr>
            <td>DJ</td>
            <td>男</td>
            <td>21</td>
            <td>汉</td>
            <td>共青团员</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>共计：4人</td>
        </tr>
    </tfoot>
</table>
</body>
</html>

（2）常用属性

注意点：

①<table>元素的 border 属性可以控制表格边框，但 border 值的大小，并不控制单元格边框的宽度，只能控制表格最外侧边框的宽度，这个问题如何解决？—— 后期靠 CSS 控制。

②默认情况下，每列的宽度，得看这一列单元格最长的那个文字。

③给某个 th 或 td 设置了宽度之后，他们所在的那一列的宽度就确定了。

④给某个 th 或 td 设置了高度之后，他们所在的那一行的高度就确定了。

（3）跨行跨列

rowspan:指定要跨的行数

colspan: 指定要跨的列数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格练习</title>
</head>
<body>
<table border="1" cellspacing="0">
    <thead>
    <tr>
        <th>项目</th>
        <th colspan="5">上课</th>
        <th colspan="2">活动与休息</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>星期</td>
        <td>星期一</td>
        <td>星期二</td>
        <td>星期三</td>
        <td>星期四</td>
        <td>星期五</td>
        <td>星期六</td>
        <td>星期日</td>
    </tr>
    <tr>
        <td rowspan="4">上午</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>英语</td>
        <td>物理</td>
        <td>数学竞赛</td>
        <td rowspan="4">休息</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>语文</td>
        <td>化学</td>
        <td>物理</td>
        <td>英语</td>
        <td>篮球比赛</td>
    </tr>
    <tr>
        <td>化学</td>
        <td>语文</td>
        <td>体育</td>
        <td>历史</td>
        <td>地理</td>
        <td>每周一考</td>
    </tr>
    <tr>
        <td>体育</td>
        <td>化学</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>社会实践</td>
    </tr>
    <tr>
        <td rowspan="2">下午</td>
        <td>语文</td>
        <td>英语</td>
        <td>数学</td>
        <td>物理</td>
        <td>数学</td>
        <td>英语角</td>
        <td rowspan="2">休息</td>
    </tr>
    <tr>
        <td>化学</td>
        <td>物理</td>
        <td>地理</td>
        <td>生物</td>
        <td>体育</td>
        <td>自由运动</td>
    </tr>
    </tbody>
</table>
</body>
</html>

在这里插入图片描述

8.常用标签补充

标签名	标签含义	单/双标签
br	换行	单
hr	分隔	单
pre	按原文显示（一般用于在网页中嵌入代码）	双

9.表单

（1）基本结构

概念：一个包含交互的区域，用于手机用户的数据

标签名	标签语义	常用属性	单/双标签
form	表单	action : 用于指定表单的提交地址（需要与后端人员沟通确定）。 target : 用于控制表单提交后，如何打开页面，常用值有：_self : 在本窗口打开，__blank : 在新窗口打开。 method : 用于控制表单的提交方式	双
input	输入框	type : 设置输入框的类型，目前用到的值是text , 表示普通文本。 name : 用于指定提交数据的名字	单
button	按钮	点击事件	双

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<form action="https://www.baidu.com/s" target="_blank" method="get">
    <label>
        <input type="text" name="wd">
    </label>
    <button>去百度搜索</button>
</form>
</body>
</html>

（2）常用表单控件

①文本输入框

<input type="text">

常用属性：

name : 数据的名称

value : 输入框的默认输入值

maxlength : 输入框最大可输入长度

②密码输入框

<input type="password">

常用属性：

name : 数据的名称

value : 输入框的默认输入值(无意义)

maxlength : 输入框最大可输入长度

③单选框

<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male">男

name : 数据的名称，要实现单选效果，多个radio的name属性要保持一致

value : 提交的数据值

④复选框

<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头

name : 数据的名称

value : 提交的数据

checked : 让该复选框默认选中

⑤隐藏域

<input type="hidden" name="tag" value="100">

用户不可见的一个输入区域，作用是：提交表单的时候，携带一些固定的数据

name : 指定数据的名称

value : 指定真正提交的数据

⑥提交按钮

<input type="submit" value="点我提交表单">
<!--或者-->
<button>点我提交表单</button>

button标签type属性的默认值是submit

button不要指定name属性

input标签编写的按钮，使用value属性指定按钮名字

⑦重置按钮

<input type="reset" value="点我重置">
<!--或者-->
<button type="reset">点我重置</button>

button不要指定name属性

input标签编写的按钮，使用value属性指定按钮的文字

⑧普通按钮

<input type="button" value="普通按钮">
<!--或者-->
<button type="button">普通按钮</button>

普通按钮的type为button，若不写type的值为submit会引起表单的提交

⑨文本域

<textarea name="msg" rows="22" cols="3">我是文本域</textarea>

rows：指定默认显示的行数，会影响文本域的高度

cols：指定默认显示的列数，会影响文本域的宽度

不能写type属性，与普通文本输入框一致

⑩下拉框

<select name="from">
	<option value="黑">黑龙江</option>
    <option value="辽">辽宁</option>
    <option value="吉">吉林</option>
    <option value="粤" selected>广东</option>
</select>

name : 指定数据的名称

option : option标签设置value属性，如果没有value属性，提交的数据是option中间的文字，如果设置了value属性，提交的数据就是value的值

selected : 表示默认选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<form action="https://www.jd.com/search" target="_self" method="get">
    <label>
        账户:
        <input type="text" name="number" value="DJ">
    </label>
    <br>
    <label>
        密码:
        <input type="password" name="password">
    </label>
    <br>

<!--单选框-->
    <label>性别: </label>
    <label>
        <input type="radio" name="sex" value="female" checked>
    </label>女
    <label>
        <input type="radio" name="sex" value="male">
    </label>男
    <br>
<!--多选框-->
    <label>爱好: </label>
    <label>
        <input type="checkbox" name="hobby" value="smoke" checked>抽烟
        <input type="checkbox" name="hobby" value="drink">喝酒
        <input type="checkbox" name="hobby" value="perm">烫头
    </label>
    <br>
    <!--文本输入框-->
    <label>其他: </label>
    <label>
        <textarea name="其他" cols="22" rows="10"></textarea>
    </label>
    <br>
    
    <!--下拉选择框-->
    <label>籍贯: </label>
    <label>
        <select name="from">
            <option value="黑">黑龙江</option>
            <option value="辽">辽宁</option>
            <option value="吉">吉林</option>
            <option value="粤" selected>广东</option>
        </select>
    </label>
    <br>
    
    <!--隐藏域-->
    <input type="hidden" name="DJ" value="zz">


    <!--提交表单按钮-->
    <button>确认</button>
    <!--重置按钮-->
    <button type="reset">重置</button>
    <!--普通按钮-->
    <button type="button">监测账户是否被注册</button>
</form>
</body>
</html>

（3）禁用表单控件

给表单控件的标签设置 disabled 既可禁用表单控件。

input 、 textarea 、 button 、 select 、 option 都可以设置 disabled 属性

（4）label标签

label 标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。

两种与 label 关联方式如下：

①让 label 标签的 for 属性的值等于表单控件的 id 。

<!--文本输入框-->
<label for="other">其他: </label>
<label>
    <textarea id="other" name="其他" cols="22" rows="10"></textarea>
</label>

②把表单控件套在 label 标签的里面。

    <label>
        账户:
        <input type="text" name="number" value="DJ">
    </label>

账户和text进行绑定

5. fieldset与 legend的使用（了解）

fieldset 可以为表单控件分组、 legend 标签是分组的标题。

such as

<fieldset>
    <legend>主要信息</legend>
    <label for="zhanghu">账户：</label>
    <input id="zhanghu" type="text" name="account" maxlength="10"><br>
    <label>
        密码：
        <input id="mima" type="password" name="pwd" maxlength="6">
    </label>
    <br>
    性别：
    <input type="radio" name="gender" value="male" id="nan">
    <label for="nan">男</label>
    <label>
        <input type="radio" name="gender" value="female" id="nv">女
    </label>
</fieldset>

框架标签

标签名	功能和语义	属性	单/双标签
iframe	在网页中嵌入其他文件	name：框架的名字，可以与target属性配合 width：框架的宽度 height：框架的高度 frameborder：是否显示边框，值：0或者1	双

iframe 标签的实际应用：

在网页中嵌入的广告
与超链接或表单的target配合，展示不同的内容

HTML实体

在 HTML 中我们可以用一种特殊的形式的内容，来表示某个符号，这种特殊形式的内容，就是 HTML 实

体。比如小于号 < 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须

在 HTML 源码中插入字符实体。

字符实体由三部分组成：一个 & 和 一个实体名称（或者一个 # 和 一个实体编号），最后加上一
个分号 ; 。

常见的字符实体：

HTMl全局属性

meta元信息

配置字符编码
```
<meta charset="utf-8">
```
- 1

针对IE浏览器的兼容性配置

<meta http-equiv="X-UA-Compatible" content="IE=edge">

针对移动端的配置

<meta name="viewport" content="width=device-wodth, initial-scale=1.0">

配置网页关键字

<meta name="keywords" content="单词1, 单词2...">

配置网页描述信息

<meta name="description" content="描述">

针对索引爬虫配置
```
<meta name="robots" content="值">
```
- 1
配置网页作者
```
<meta name="author" content="DJ">
```
- 1

配置网页生成工具

<meta name="generator" content="WebStrom">

配置定义网页版权信息

<meta name="copyright" content="DJ版权所有">

配置网页自动刷新

<meta http-equiv="refresh" content="3;url=http://www.xdj666.top">

形式的内容，就是 HTML 实

体。比如小于号 < 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须

在 HTML 源码中插入字符实体。

字符实体由三部分组成：一个 & 和 一个实体名称（或者一个 # 和 一个实体编号），最后加上一
个分号 ; 。

常见的字符实体：

[外链图片转存中…(img-mLuT8VLp-1722357901598)]

HTMl全局属性

[外链图片转存中…(img-xNYJRmWo-1722357901599)]

meta元信息

配置字符编码
```
<meta charset="utf-8">
```
- 1

针对IE浏览器的兼容性配置

<meta http-equiv="X-UA-Compatible" content="IE=edge">

针对移动端的配置

<meta name="viewport" content="width=device-wodth, initial-scale=1.0">

配置网页关键字

<meta name="keywords" content="单词1, 单词2...">

配置网页描述信息

<meta name="description" content="描述">

针对索引爬虫配置
```
<meta name="robots" content="值">
```
- 1
[外链图片转存中…(img-pwzwvqek-1722357901599)]
配置网页作者
```
<meta name="author" content="DJ">
```
- 1

配置网页生成工具

<meta name="generator" content="WebStrom">

配置定义网页版权信息

<meta name="copyright" content="DJ版权所有">

配置网页自动刷新

<meta http-equiv="refresh" content="3;url=http://www.xdj666.top">

CSS基础

CSS : 层叠样式表

CSS 也是一种标记语言，用于给 HTML 结构设置样式，例如：文字大小、颜色、元素宽高等等。

CSS编写的位置

行内样式

写在标签的 style 属性中，（又称：内联样式）。

语法

<h1 style="color: aqua; font-size: 80px">DJ来学前端啦</h1>

注意点：

style 属性的值不能随便写，写要符合 CSS 语法规范，是名:值; 的形式。
行内样式表，只能控制当前标签的样式，对其他标签无效。

存在的问题：

书写繁琐、样式不能复用、并且没有体现出：结构与样式分离 的思想，不推荐大量使用，只

有对当前元素添加简单样式时，才偶尔使用。

内部样式

写在 html 页面内部，将所有的 CSS 代码提取出来，单独放在

注意：

中。

此种写法：样式可以复用、代码结构清晰。

存在的问题：

并没有实现：结构与样式完全分离。
多个 HTML 页面无法复用样式。

外部样式

写在单独的 .css 文件中，随后在 HTML 文件中引入使用。

语法：

新建一个扩展名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。

```
h1{
color: red;
font-size: 40px;
}
```
- 1
- 2
- 3
- 4
在html文件中引用

<link rel="stylesheet" href="./xxx.css">

注意点：

标签要写在标签中。
标签属性说明：

href ：引入的文档来自于哪里。

rel ：( relation ：关系）说明引入的文档与当前文档之间的关系。

外部样式的优势：样式可以复用、结构清晰、可触发浏览器的缓存机制，提高访问速度，实现了结构与样式的完全分离。
实际开发中，几乎都使用外部样式，这是最推荐的使用方式！

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部样式</title>
    <link rel="stylesheet" href="./外部样式.css">
</head>
<body>
<h1>DJ加油学前端</h1>
<img src="./kunkun.jpg" alt="图片无法加载">
</body>
</html>

css文件:

h1 {
    color: orange;
    font-size: 80px;
}
img {
    width: 200px;
}

样式表的优先级

优先级规则：行内样式 > 内部样式 = 外部样式
- 内部样式、外部样式，这二者的优先级相同，且：后面的会覆盖前面的（简记：“后来
  
  者居上”）。
- 同一个样式表中，优先级也和编写顺序有关，且：后面的会覆盖前面的（简记：“后来
  
  者居上”）。

CSS语法规范

CSS 语法规范由两部分构成：

选择器：找到要添加样式的元素。
声明块：设置具体的样式（声明块是由一个或多个声明组成的），声明的格式为：属性名: 属性值;

备注1：最后一个声明后的分号理论上能省略，但最好还是写上。

备注2：选择器与声明块之间，属性名与属性值之间，均有一个空格，理论上能省略，但最好还是写上。

注释的写法：

/* 给h1元素添加样式 */
h1 {
    /* 设置文字颜色为红色 */
    color: red;
    /* 设置文字大小为40px */
    font-size: 40px
}

CSS代码风格

展开风格 : 开发时推荐，便于维护和调试。
```
h1 {
    color: red;
    font-size: 40px;
}
```
- 1
- 2
- 3
- 4
紧凑风格 : 项目上线时推荐，可减小文件体积。
```
h1{color:red;font-size:40px;}
```
- 1

项目上线时，我们会通过工具将【展开风格】的代码，变成【紧凑风格】，这样可以减小文

件体积，节约网络流量，同时也能让用户打开网页时速度更快。

CSS选择器

CSS选择器有两大类：基本选择器、复合选择器

基本选择器

有四种：

通配选择器
元素选择器
类选择器
id选择器

通配选择器

作用：可以选中所有的 HTML 元素。

语法：

```
* {
	属性名: 属性值;
}
```
- 1
- 2
- 3
such as:

/* 选中所有元素 */
* {
    color: orange;
    font-size: 40px;
}

元素选择器

作用：为页面中 某种元素 统一设置样式。

语法：

```
标签名 {
	属性名: 属性值;
}
```
- 1
- 2
- 3
such as:

/* 选中所有h1元素 */
h1 {
    color: orange;
    font-size: 40px;
}
/* 选中所有p元素 */
p {
    color: blue;
    font-size: 60px;
}

备注：元素选择器无法实现差异化设置，例如上面的代码中，所有的 p 元素效果都一样。

类选择器

作用：根据元素的 class 值，来选中某些元素。

语法：

```
.类名 {
	属性名: 属性值;
}
```
- 1
- 2
- 3
such as :

/* 选中所有class值为speak的元素 */
.speak {
	color: red;
}
/* 选中所有class值为answer的元素 */
.answer {
	color: blue;
}

attention :

元素的 class 属性值不带 . ，但 CSS 的类选择器要带 . 。
class 值，是我们自定义的，按照标准：不要使用纯数字、不要使用中文、尽量使用英文与数字的组合，若由多个单词组成，使用 - 做连接，例如： left-menu ，且命名要有意义，做到 “见名知意”。
一个元素不能写多个 class 属性，下面是错误示例：
一个元素的 class 属性，能写多个值，要用空格隔开，例如：

<!-- 该写法正确，class属性，能写多个值 -->
<h1 class="speak big">你好啊</h1>

ID选择器

作用：根据元素的 id 属性值，来精准的选中某个元素。

语法：

```
#id值 {
	属性名: 属性值;
}
```
- 1
- 2
- 3
such as :

/* 选中id值为earthy的那个元素 */
#earthy {
    color: red;
    font-size: 60px;
}

注意：
- id 属性值：尽量由字母、数字、下划线****( _ )、短杠( - **)**组成，最好以字母开头、不要包含空格、区分大小写。
- 一个元素只能拥有一个 id 属性，多个元素的 id 属性值不能相同。
- 一个元素可以同时拥有 id 和 class 属性。

CSS复合选择器

主要有四种：

交集选择器
并集选择器
后代选择器
子元素选择器

复合选择器建立在基本选择器之上，由多个基础选择器，通过不同的方式组合而成。
复合选择器可以在复杂结构中，快速而准确的选中元素。

交集选择器

同时符合多个条件的元素

交集有并且的含义（通俗理解：即**…又…** 的意思），例如：年轻且长得帅。

语法：选择器1选择器2选择器3…选择器n {}

such as :

/* 选中：类名为beauty的p元素，为此种写法用的非常多！！！！ */
p.beauty {
	color: blue;
}
/* 选中：类名包含rich和beauty的元素 */
.rich.beauty {
	color: green;
}

注意：

有标签名，标签名必须写在前面。
id 选择器、通配选择器，理论上可以作为交集的条件，但实际应用中几乎不用 —— 因为没有意义。
交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是 p 元素又是 span 元素。
用的最多的交集选择器是：元素选择器配合类名选择器，例如： p.beauty 。

并集选择器

作用：选中多个选择器对应的元素，又称：分组选择器。

所谓并集就是或者的含义（通俗理解：要么**…要么…** 的意思），例如：给我转10万块钱

或者我报警。

语法：语法：选择器1, 选择器2, 选择器3, … 选择器n {}

such as :

<!--或者的意思-->
<style>
    #zz,
    .dj,
    .xxx {
        color: pink;
}
</style>

注意：

并集选择器，我们一般竖着写。
任何形式的选择器，都可以作为并集选择器的一部分。
并集选择器，通常用于集体声明，可以缩小样式表体积。

HTML元素之间的关系

分为：①父元素、②子元素、③祖先元素、④后代元素、⑤兄弟元素。

父元素：直接包裹某个元素的元素，就是该元素的父元素。
子元素：被父元素直接包含的元素（简记：儿子元素）。
祖先元素：父亲的父亲…，一直往外找，都是祖先。
后代元素：儿子的儿子…，一直往里找，都是后代。
具有相同父元素的元素，互为兄弟元素。

后代选择器

作用：选中指定元素中，符合要求的后代元素。
语法：选择器1 选择器2 选择器3 … 选择器n {} （先写祖先，再写后代）

such as :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <!--空格隔开-->
    <style>
        ul li h2{
            color: pink;
        }
    </style>
</head>
<body>

&lt;div&gt; &lt;h1&gt;<span class="token property">职业选择</span><span class="token punctuation">:</span> &lt;/h1&gt; &lt;ul&gt; &lt;li&gt;JAVA&lt;/li&gt; &lt;li&gt;GOLANG&lt;/li&gt; &lt;li&gt;前端&lt;/li&gt; &lt;li&gt;安卓&lt;/li&gt; &lt;li&gt; &lt;h2&gt;HELLO DJ&lt;/h2&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;

</body>
</html>

such as :

/* 选中ul中的所有li */
ul li {
	color: red;
}
/* 选中ul中所有li中的a */
ul li a {
	color: orange;
}
/* 选中类名为subject元素中的所有li */
.subject li {
	color: blue;
}
/* 选中类名为subject元素中的所有类名为front-end的li */
.subject li.front-end {
	color: blue;
}

注意：

后代选择器，最终选择的是后代，不选中祖先。
儿子、孙子、重孙子，都算是后代。
结构一定要符合之前讲的 HTML 嵌套要求，例如：不能 p 中写 h1 ~ h6 。

子元素选择器

作用：选中指定元素中，符合要求的子元素（儿子元素）。（先写父，再写子）
语法：选择器1 > 选择器2 > 选择器3 > … 选择器n {}

such as :

/* div中的子代a元素 */
div>a {
	color: red;
}
/* 类名为persons的元素中的子代a元素 */
.persons>a{
	color: red;
}

注意：

子代选择器，最终选择的是子代，不是父级。
子、孙子、重孙子、重重孙子 … 统称后代！，子就是指儿子。

兄弟选择器

相邻兄弟选择器：

作用：选中指定元素后，符合条件的相邻兄弟元素。
语法：选择器1+选择器2 {} 。

such as ：

/* 选中div后相邻的兄弟p元素 */
div+p {
	color:red;
}

通用兄弟选择器：

作用：选中指定元素后，符合条件的所有兄弟元素。（简记：睡在我下铺的所有兄弟）
语法：选择器1~选择器2 {} 。

such as :

/* 选中div后的所有的兄弟p元素 */
div~p {
	color:red;
}

属性选择器

作用：选中属性值符合一定要求的元素。
语法：
1. [属性名] 选中具有某个属性的元素。
2. [属性名=“值”] 选中包含某个属性，且属性值等于指定值的元素。
3. [属性名^=“值”] 选中包含某个属性，且属性值以指定的值开头的元素。
4. [属性名$=“值”] 选中包含某个属性，且属性值以指定的值结尾的元素。
5. [属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素。

such as :

/* 选中具有title属性的元素 */
div[title]{color:red;}
/* 选中title属性值为atguigu的元素 */
div[title="atguigu"]{color:red;}
/* 选中title属性值以a开头的元素 */
div[title^="a"]{color:red;}
/* 选中title属性值以u结尾的元素 */
div[title$="u"]{color:red;}
/* 选中title属性值包含g的元素 */
div[title*="g"]{color:red;}

伪类选择器

作用：选中特殊状态的元素。

如何理解“伪” ? — 虚假的，不是真的。

如何理解“伪类”？ — 像类( class )，但不是类，是元素的一种特殊状态。

常用的伪类选择器：

动态伪类

:link 超链接未被访问的状态。
:visited 超链接访问过的状态。
:hover 鼠标悬停在元素上的状态。
:active 元素激活的状态。

什么是激活？—— 按下鼠标不松开。注意点：遵循 LVHA 的顺序，即： link 、 visited 、 hover 、 active 。

:focus 获取焦点的元素。

表单类元素才能使用 :focus 伪类。当用户：点击元素、触摸元素、或通过键盘的 “ tab ” 键等方式，选择元素时，就是获得焦点。

结构伪类

常用的：

:first-child 所有兄弟元素中的第一个。
:last-child 所有兄弟元素中的最后一个。
:nth-child(n) 所有兄弟元素中的第 n 个。
:first-of-type 所有同类型兄弟元素中的第一个。
:last-of-type 所有同类型兄弟元素中的最后一个。
:nth-of-type(n) 所有同类型兄弟元素中的第n个。

关于n的值：

\1. 0 或不写：什么都选不中 —— 几乎不用。 2. n ：选中所有子元素 —— 几乎不用。 3. 1~正无穷的整数：选中对应序号的子元素。 4. 2n 或 even ：选中序号为偶数的子元素。 5. 2n+1 或 odd ：选中序号为奇数的子元素。 6. -n+3 ：选中的是前 3 个。

了解即可：

\1. :nth-last-child(n) 所有兄弟元素中的倒数第 n 个。 2. :nth-last-of-type(n) 所有同类型兄弟元素中的倒数第n个。 3. :only-child 选择没有兄弟的元素（独生子女）。 4. :only-of-type 选择没有同类型兄弟的元素。 5. :root 根元素。 6. :empty 内容为空元素（空格也算内容）。

否定伪类

:not(选择器) 排除满足括号中条件的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>否定伪类</title>
    <style>
        /* 选中的是div的儿子p元素，但是排除类名为fail的元素 */
        div p:not(.fail) {
            color: pink;
        }
        /* 选中的是div的儿子p元素，但是排除title的开头为 你要加油 的元素 */
        div p:not([title^="你要加油"]) {
            color: aqua;
        }

<span class="token comment">/* 选中的是div的儿子元素，但是排除第一个元素 */</span> <span class="token selector">div p:not(:first-child)</span> <span class="token punctuation">{<!-- --></span> <span class="token property">color</span><span class="token punctuation">:</span> orange<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>

</head>
<body>
<div>
<p>张三：98分</p>
<p>李四：88分</p>
<p>王五：78分</p>
<p>赵六：68分</p>
<p class=“fail” title=“你要加油啊！孙七”>孙七：58分</p>
<p class=“fail” title=“你要加油啊！老八”>老八：48分</p>
</div>
</body>
</html>