目录
一、安装vscode
live server插件
二、初步了解html
1.标签
<marquee>hello world!</marquee> <input> //单标签
<标签名>标签体<标签名>
<marquee loop="1">hello world!</marquee> //loop:属性名 "1":值
2.基本框架
<html>
<head>
<title>我的网页</title>
</head>
<body>
<marquee>hello world!</marquee>
</body>
</html>3.注释
<html>
<head>
<title>html注释</title>
</head>
<body>
<marquee loop="1">
hello world!
<!--输入框可以滚动，且只能滚动一次-->
<input type="text">
</marquee>
<!--下面输入框不能滚动 -->
<input type="text">
</body>
</html><!--注释-->
快捷键：ctrl+/
ctrl+z返回
4.文档声明
作用：告诉浏览器当前网页版本
注意：文档声明必须在网页的第一行，且在html标签的外侧
<!DOCTYPE html>
5.字符编码
编码：ASCII ISO 8859-1 GB2312 GBK(收录了汉字) UTF-8(万国码)
解码：存储时采用哪种方式编码，读取时就必须采用相同方式解码。会出现乱码
<meta charset="UTF-8">
6.设置语言
大多数浏览器都能分析出所语言
<!DOCTYPE html>
<html lang="en">
<!-- lang:语言 en:英语 th:泰语 zh-CN:简体中文-->
<head>
<meta charset="UTF-8">
<title>HTML设置语言</title>
</head>
<body>
<marquee>i love you</marquee>
</body>
</html>
三.HTML
w3c官网 开发者文档
w3school网站
MDN Web Docs网站
1.标准结构
vscode中输入！按回车自动生成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>
<input type="text">
</body>
</html>将图片ico放在vscode打开的文件夹下
在存放代码的文件夹中，存放一个 favicon.ico 图片，可配置网站图标
2.排版标签
| 标签名 | 标签含义 | 单/双标签 |
|---|---|---|
| h1~h5 | 标题 | 双 |
| p | 段落 | 双 |
| div | 没有任何含义，用于整体布局（包装） | 双 |
-
h1 最好写一个， h2~h6 能适当多写。
-
h1~h6 不能互相嵌套，例如： h1 标签中最好不要写 h2 标签了。
-
p 标签很特殊！它里面不能有： h1~h6 、 p 、 div 标签（暂时先这样记，后面会说规律）。
3.语义化标签
概念：用特定的标签，去表达特定的含义。
原则：标签的默认效果不重要（后期可以通过 CSS 随便控制效果），语义最重要！
举例：对于 h1 标签，效果是文字很大（不重要），语义是网页主要内容（很重要）。
优势：
1.代码结构清晰可读性强。
2.有利于 SEO（搜索引擎优化）。
3.方便设备解析（如屏幕阅读器、盲人阅读器等）。
4.文本标签
块级元素：独占一行（排版标签都是块级元素）。
行内元素：不独占一行。
块级元素 中能写 行内元素 和 块级元素（简单记：块级元素中几乎什么都能写）。
行内元素 中能写 行内元素，但不能写 块级元素
| 标签名 | 标签含义 | 单/双标签 |
|---|---|---|
| em | 着重阅读的内容 | 双 |
| strong | 重要的内容(语义比em更重) | 双 |
| span | 没有语义，用于包装短语的通用容器 | 双 |
| 标签名 | 标签含义 | 单/双标签 |
|---|---|---|
| cite | 作品标签 | 双 |
| dfn | 特殊术语，专属名词 | |
| fel与ins | 删除的文本 【与】 插入的文本 | |
| sub与sup | 下标文字 【与】 上标文字 | |
| code | 一段代码 | |
| samp | 从正常的上下文中，将内容提取出来 | |
| kbd | 键盘文本，表示文本是通过键盘输入的，经常用在与计算机相关的手册 | |
| abbr | 缩写，最好匹配上title属性 | |
| bdo | 更改文本方向，要配合dir属性 | |
| var | 标记变量，可以与code标签一起使用 | |
备注：
这些不常用的文本标签，编码时不用过于纠结（酌情而定，不用也没毛病）。
blockquote 与 address 是块级元素，其他的文本标签，都是行内元素。
有些语义感不强的标签，我们很少使用，例如：
small 、 b 、 u 、 q 、 blockquote
HTML标签太多了！记住那些：重要的、语义感强的标签即可；截止目前，有这些：
h1~h6 、 p 、 div 、 em 、 strong 、 span
5.图片标签
1.基本使用
| 标签名 | 标签语义 | 常用属性 | 单/双标签 |
|---|---|---|---|
| img | 图片 | src ：图片路径（又称：图片地址）—— 图片的具体位置 alt ：图片描述 width ：图片宽度，单位是像素，例如： 200px 或 200 height ：图片高度， 单位是像素，例如： 200px 或200 | 单 |
2.路径分类
1.相对路径
以当前位置作为参考点，去建立路径。
<body> <img src="./奥特曼.jpg" alt="atm" width="200px" height="200px"> <img src="./a/喜羊羊.jpg"> <img src="../怪兽.jpg"> </body>
| 符号 | 含义 | 举例（如上） |
|---|---|---|
| ./ | 同级 | |
| / | 下一级 | |
| ../ | 上一级 |
2.绝对路径
以根位置作为参考点，去建立路径
-
本地绝对路径： D:/a/b/c/奥特曼.jpg 。（很少使用）
-
网络绝对路径： http://www.atguigu.com/images/index_new/logo.png 。
3.图片格式
jpg png bmp gif webp base64 ……(自行了解)
6.超链接
主要作用：从当前页面进行跳转。
可以实现：①跳转到指定页面、②跳转到指定文件（也可触发下载）、③跳转到锚点位置、④唤起指定
应用。
| 标签名 | 标签语义 | 常用属性 | 单/双标签 |
|---|---|---|---|
| a | 超链接 | href ： 指定要跳转到的具体目标。 target ： 控制跳转时如何打开页面，常用值如下: _self ：在本窗口打开。_blank ：在新窗口打开。 id ： 元素的唯一 标识，可用于设置锚点。 name ： 元素的名字，写在 a 标签中，也能设置锚点。 | 双 |
1.跳转到界面
<!-- 跳转到其他界面 --> <a href="https://www.jd.com/" target="_blank">去京东</a> <!-- 跳转到本地界面 --> <a href="./html图片标签.html" target="_self">去图片标签</a>
代码中的多个空格、多个回车，都会被浏览器解析成一个空格！
虽然 a 是行内元素，但 a 元素可以包裹除它自身外的任何元素！
2.跳转到文件
<!-- 浏览器能直接打开的文件 --> <a href="./奥特曼.jpg">看奥特曼</a> <a href="./a/喜羊羊.jpg">看喜羊羊</a> <!-- 浏览器不能打开的文件，会自动触发下载 --> <a href="./a/内部资源.zip">内部资源</a> <!-- 强制触发下载 --> <a href="./resource/小电影.mp4" download="电影片段.mp4">下载电影</a>
若想强制触发下载，请使用 download 属性，属性值即为下载文件的名称
若浏览器无法打开文件，则会引导用户下载。
3.跳转到锚点
什么是锚点？—— 网页中的一个标记点
-
设置锚点
<!-- 第一种方式：a标签配合name属性 --> <a name="test1"></a> <!-- 第二种方式：其他标签配合id属性 --> <h2 id="test2">我是一个位置</h2
具有href属性的a标签是超链接，具有name属性的a标签是锚点
name和id都是区分大小写的，且id最好不要数字开头
-
跳转锚点
<!-- 跳转到test1锚点 -->
<a href="#test2">去test锚点</a>
<!-- 跳转到本界面顶部 -->
<a href="#">回到顶部</a>
<!-- 跳转到其他界面锚点 -->
<a href="demo.html#test1">去demo.html页面锚点</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>7.列表
1.有序列表
有顺序或侧重顺序的列表
<h2>吃饭</h2>
<o1>
<li>1</li>
<li>2</li>
<li>3</li>
</o1>ol有序列表
2.无序列表
无顺序或不侧重顺序的列表
<h2>城市</h2>
<ul>
<li>北京</li>
<li>上海</li>
<li>成都</li>
<li>厦门</li>
</ul>ul无序列表
3.列表嵌套
列表中的某项内容，又包含一个列表(嵌套时，务必把解构写完整)
<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>注意： li 标签最好写在 ul 或 ol 中，不要单独使用。
4.自定义列表
-
概念：所谓自定义列表，就是一个包含术语名称以及术语描述的列表。
-
一个 dl 就是一个自定义列表，一个 dt 就是一个术语名称，一个 dd 就是术语描述（可以有多
个）。
<!-- 自定义列表 -->
<h2>如何高效学习？</h2>
<d1>
<dt>做好笔记</dt>
<dd>笔记可以是电子版也可以是纸质版</dd>
<dd>复习笔记</dd>
<dt>多加练习</dt>
<dd>只有敲出来的代码才是自己的</dd>
<dt>别怕出错</dt>
<dd>改正后并记住</dd>
</d1>8.表格
1.基本结构
-
一个完整的表格：表格标题，表格头部，表格主体，表格脚注，四部分组成。
-
表格涉及标签
table：表格caption：表格标题thead：表格头部tbody：表格主体tfoot：表格脚注tr：每一行th，td：每一个单元格（表格头部中用th，表格主体，表格脚注中用td） -
具体编码
<table border="1"> <!--border 边框--> <!-- 表格标题 --> <caption>学生信息表</caption> <!-- 表格头部 --> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>民族</th> <th>政治面貌</th> </tr> </thead> <!-- 表格主体 --> <tbody> <tr> <td>张三</td> <td>男</td> <td>18</td> <td>汉族</td> <td>团员</td> </tr> <tr> <td>李四</td> <td>女</td> <td>20</td> <td>满族</td> <td>群众</td> </tr> <tr> <td>王五</td> <td>男</td> <td>20</td> <td>回族</td> <td>党员</td> </tr> </tbody> <!-- 表格脚注 --> <tfoot> <tr> <td></td> <td></td> <td></td> <td></td> <td>共计:3人</td> </tr> </tfoot> </table>
2.常用属性
| 标签名 | 标签含义 | 常用属性 | 单/双标签 |
|---|---|---|---|
table | 表格 | width：设置表格宽度 height：设置表格最小高度，表格最终高度可能比设置的值大 border：设置表格边框宽度 cellspacing：设置单元格之间的间距 | 双 |
thead | 表格头部 | height ：设置表格头部高度。 align ： 设置单元格的水平对齐方式，可选值如下： 1. left ：左对齐 2. center ：中间对齐 3. right ：右对齐 valign ：设置单元格的垂直对齐方式，可选值如下： 1. top ：顶部对齐 2. middle ：中间对齐 3. bottom ：底部对齐 | 双 |
tbody | 表格主体 | 与 thead相同 | 双 |
tr | 行 | 与 thead相同 | 双 |
tfoot | 表格脚注 | 与 thead相同 | 双 |
td | 普通单元格 | width ：设置单元格的宽度，同列所有单元格全都受影响。 heigth ：设置单元格的高度，同行所有单元格全都受影响。 align：设置单元格的水平对齐方式。 valign：设置单元格的垂直对齐方式。 rowspan：指定要跨的行数。 colspan ：指定要跨的列数。 | 双 |
th | 表头单元格 | 与td相同 | 双 |
- 元素的 border 属性可以控制表格边框，但 border 值的大小，并不控制单元格
边框的宽度，
只能控制表格最外侧边框的宽度，这个问题如何解决？—— 后期靠 CSS 控制。
默认情况下，每列的宽度，得看这一列单元格最长的那个文字。
给某个 th 或 td 设置了宽度之后，他们所在的那一列的宽度就确定了。
给某个 th 或 td 设置了高度之后，他们所在的那一行的高度就确定了。
3.跨行跨列
-
rowspan：指定要跨的行数 -
colspan：指定要跨的列数
<table border="1">
<tr>
<th>星期一</th>
<th>星期二</th>
</tr>
<tr>
<td colspan="2">星期天</td>
</tr>
</table>
9.表单
一个包含交互的区域，用于收集用户提供的数据。
1.基本结构
<form action="https://www.baidu.com/s" target="_blank" method="get">
<input type="text" name="wd">
<button>去百度搜索</button>
</form>简单梳理：
| 标签名 | 标签 语义 | 常用属性 | 单/双标签 |
|---|---|---|---|
form | 表 单 | action：用于指定表单的提交地址 target：用于控制表单提交后，如何打开页面，常用值： _blank:在新窗口打开。 _self:在本窗口打开。 method：用于控制表单的提交方式 | 双 |
input | 输入框 | type：设置输入框的类型，目前用到的值是text,表示普通文本。 name：用于指定提交数据的名字 | 单 |
button | 按钮 | 双 |
2.常用表单控件
-
文本输入框
<input type="text" > <input type="text" name="baidu" value="wenbenkuang" maxlength="10">
常用属性：
name属性：数据的名称。value属性：输入框的默认输入值。maxlength属性：输入框最大可输入长度。 -
密码输入框
<input type="password">
常用属性：同上
-
单选框
<input type="radio" name="sex" value="femalex">女 <input type="radio" name="sex" value="male">男 <input type="radio" name="sex" value="ms" checked>保密常用属性：
name属性：数据的名称。注意：想要单选效果，多个radoi的name属性值要保持一致。value属性：提交的数据值。checked属性：让改单选按钮默认选中。 -
复选框
<input type="checkbox" name="hobby" value="sing">唱歌 <input type="checkbox" name="hobby" value="dance">跳舞 <input type="checkbox" name="hobby" value="piano">钢琴常用属性：同上
-
隐藏域
<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="12" cols="60">（文本域）请输入</textarea>
常用属性如下：
-
rows属性：指定默认显示的行数，会影响文本域的高度。 -
cols属性：指定默认显示的列数，会影响文本域的宽度。 -
不能编写
type属性，其他属性，与普通文本输入框一致。
-
-
下拉框
<select name="form" >
<option value="black">黑色</option>
<option value="pink">粉色</option>
<option value="green">绿色</option>
<option value="blue" selected>蓝色</option>
</select>常用属性：
name属性：指定数据的名称。
option标签设置value属性， 如果没有value属性，提交的数据是option中间的文字；如果设置了
value属性，提交的数据就是value的值（建议设置value属性）
option标签设置了selected属性，表示默认选中。
3.禁用表单控件
给表单控件的标签设置disabled即可禁用表单控件。
input，textarea，button，select，option都可以设置disabled属性。
4.label标签
<label for="1">label标签</label>
<label for="1">label标签</label>
<label><input type="text">label标签</label>label标签可与表单控件相关联，关联后点击文字，与之对应的表单控件就会获取焦点。
两种与label关联方式如下：
-
让
label标签的for属性的值等于表单控件的id。 -
把表单控件套在
label标签里面。
5.fieldset与lengend
fieldset可以为表单控件分组，legend标签是分组的标题。
<fieldset>
<legend>主要信息</legend>
<label for="zhanghu">账户:</label>
<input type="text" name="account" id="zhanghu" maxlength="10"><br>
<label >
密码：
<input type="password" name="pwd" id="mima" maxlength="6">
</label>
<br>
性别：
<input type="radio" name="gender" id="nan" value="male">
<label for="nan">男</label>
<label>
<input type="radio" name="gender" value="femalex" id="nv">女
</label>
</fieldset>
代码展示：
<!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="https://www.baidu.com/s" target="_blank" method="get">
<!-- 文本输入框 -->
<p>文本输入框</p>
<input type="text">
<input type="text" name="baidu" value="wenbenkuang" maxlength="10">
<button >去百度搜索</button>
<!-- 密码输入框 -->
<p>密码输入框</p>
<input type="password">
<button>提交</button>
<!-- button默认为submit属性 -->
<!-- 单选框 -->
<p>单选框</p>
<input type="radio" name="sex" value="femalex">女
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="ms" checked>保密
<!-- 复选框 -->
<p>复选框</p>
<input type="checkbox" name="hobby" value="sing">唱歌
<input type="checkbox" name="hobby" value="dance">跳舞
<input type="checkbox" name="hobby" value="piano">钢琴
<!-- 隐藏域 -->
<p>隐藏域</p>
<input type="hidden" name="tag" value="100">
<!-- 提交按钮 -->
<p>提交按钮</p>
<input type="submit" value="点我提交表单">
<button>点我提交表单</button>
<!-- 重置按钮 -->
<p>重置按钮</p>
<input type="reset" value="点我重置">
<button type="reset">点我重置</button>
<!-- 普通按钮 -->
<p>普通按钮</p>
<input type="button" value="普通按钮">
<button type="button">普通按钮</button>
<!-- 文本域 -->
<p>文本域</p>
<textarea name="msg" rows="12" cols="60">（文本域）请输入</textarea>
<!-- 下拉框 -->
<p>下拉框</p>
<select name="form" >
<option value="black">黑色</option>
<option value="pink">粉色</option>
<option value="green">绿色</option>
<option value="blue" selected>蓝色</option>
</select>
<!-- label 标签 -->
<p>label标签</p>
<input type="text" id="1">
<label for="1">label标签</label>
<label><input type="text">label标签</label>
<!-- fieldset表单边框 -->
<fieldset>
<legend>主要信息</legend>
<label for="zhanghu">账户:</label>
<input type="text" name="account" id="zhanghu" maxlength="10"><br>
<label >
密码：
<input type="password" name="pwd" id="mima" maxlength="6">
</label>
<br>
性别：
<input type="radio" name="gender" id="nan" value="male">
<label for="nan">男</label>
<label>
<input type="radio" name="gender" value="femalex" id="nv">女
</label>
</fieldset>
</form>
</body>
</html>
10.框架标签
<iframe src="https://www.mi.com/shop" width="1000px" height="500px" frameborder="0"></iframe>
iframe 标签的实际应用：
在网页中嵌入广告。
与超链接或表单的
target配合，展示不同的内容
11.HTML实体
在 HTML 中我们可以用一种特殊的形式的内容，来表示某个符号，这种特殊形式的内容，就是 HTML 实
体。比如小于号 < 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须
在 HTML 源码中插入字符实体。
<p><<</p> <p>>></p>
12.HTML全局属性
全局属性 - HTML（超文本标记语言） | MDN (mozilla.org)
| 属性名 | 含义 |
|---|---|
id | 给标签指定唯一标识，注意： id 是不能重复的。 作用：可以让 label 标签与表单控件相关联；也可以与 CSS 、 JavaScript 配合使用。 |
class | 给标签指定类名，随后通过 CSS 就可以给标签设置样式。 |
style | 给标签设置 CSS 样式。 |
dir | 内容的方向，值: ltr 、 rtl |
title | 给标签设置一个文字提示，一般超链接和图片用得比较多。 |
lang | 给标签指定语言，具体规范和可选值请参考【10. HTML 设置语言】 |
13.meta元信息
全局属性 - HTML（超文本标记语言） | MDN (mozilla.org)
-
配置字符编码
<meta charset="UTF-8">
-
针对IE浏览器的兼容性配置
<meta http-equiv="X-UA-Compatible" content="IE=edge">
-
针对移动端的配置
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
配置网页关键字
<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语">
-
配置网页描述信息
<meta name="description" content="80字以内的一段话，与网站内容相关">
-
针对搜索引擎爬虫配置
<meta name="robots" content="此处可选值见下表">
值 描述 index允许搜索爬虫索引此页面 noindex要求搜索爬虫不索引此页面。 follow允许搜索爬虫跟随此页面上的链接。 nofollow要求搜索爬虫不跟随此页面上的链接。 all与 index, follow 等价 none与 noindex, nofollow 等价 noarchive要求搜索引擎不缓存页面内容。 nocachenoarchive 的替代名称。 -
配置网页作者
<meta name="author" content="tony">
-
配置网页生成工具
<meta name="generator" content="Visual Studio Code">
-
配置定义网页版权信息
<meta name="copyright" content="2023-2027©版权所有">
-
配置网页自动刷新
<meta http-equiv="refresh" content="10;url=http://www.baidu.com">
14.HTML总结
四.CSS
1.CSS简介
-
CSS的全称：层叠样式表（Cascading Style Sheets）。
-
CSS也是一种标记语言，用于给HTML结构设置样式，例如：文字大小，颜色，元素宽高等。
简单理解：CSS可以美化HTML，让HTML更漂亮。
核心思想：HTML搭建结构，CSS添加样式，实现了：结构与样式的分离。
2.CSS编写位置
2.1 行内样式
-
写在标签的
style属性中（又称：内联函数）。 -
语法：
<h1 style="color: red;font-size: 16px;">CSS学习</h1> -
注意点：
1.
style属性的值不能随便写，写要符合CSS语法规范，是名：值的形式。2.行内样式表，只能控制当前标签的样式，对其他标签无效。
-
存在问题：
书写繁琐，样式不能复用，并且没有体现：结构与样式分离的思想，不推荐大量使用，只有对当前元素添加简单样式时，才偶尔使用。
2.2内部样式
-
写在
html页面内部，将所有的CSS代码提取出来，单独放在<style>标签中。 -
语法：
<style>
h1{
color: red;
font-size: 20px;
}
h2{
color: blue;
font-size: 10px;
}
p{
color: aqua;
font-size: 8px;
}
</style>-
注意点：
1.
<style>标签理论上可以放在HTML文档的如何地方，当一般都放在<head>标签中。2.此种写法：样式可以复用，代码结构清晰。
-
存在问题：
1.并没有实现：结构与样式完全分离。
2.多个HTML页面无法复用。
2.3外部样式
-
写单独的
.css文件中，随后在HTML文件中引入使用。 -
语法：
1.新建一个扩展名为
.css的样式文件，把所有CSS代码都放入此文件中。
-
2.在HTML文件中引入.css文件。
<link rel="stylesheet" href="./xxx.css">
h1 {
color: red;
font-size: 20px;
}
h2 {
color: blue;
font-size: 10px;
}
p {
color: aqua;
font-size: 8px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>位置2_内部样式</title>
<link rel="stylesheet" href="./position3.css">
<!-- rel:关系，联系relation stylesheet：样式
通过link引入的与原文件是样式关系-->
</head>
<body>
<h1>CSS学习</h1>
<h2>位置3</h2>
<p>外部样式</p>
</body>
</html>-
注意点：
<link>标签要写在<head>标签里面。
<link>标签属性说明：href：引入的文档来自哪里。rel：说明引入的文档与当前文档之间的关系。外部样式的优势：样式可以复用，结构清晰，可以触发浏览器的缓存机制，提高访问速度，实现了结构与样式的完全分离。
实际情况中，几乎都在使用外部样式，这是最推荐的使用方式！
3.样式表的优先级
就近原则
-
优先级原则：行内样式>内部样式=外部样式
1.内部样式，外部样式，这两者的优先级相同，且 后面的会覆盖前面的。
2.同一个样式表，优先级也和编写顺序有关，且 后面的会覆盖前面的。
| 分类 | 优点 | 缺点 | 使用频率 | 作用范围 |
|---|---|---|---|---|
| 行内样式 | 优先级最高 | 结构与样式未分离，代码混乱，样式不能复用 | 很低 | 当前标签 |
| 内部样式 | 样式可复用，代码结构清晰 | 样式与结构不能彻底分离，样式不能多页面复用 | 一般 | 当前页面 |
| 外部样式 | 样式可以复用，代码结构清晰，可触发浏览器缓存机制，结构与样式传递分离 | 需要引用才能使用 | 最高 | 多个页面 |
<!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: red;
font-size: 120px;
}
</style>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<h1 style="color: black;">CSS学习样式表优先级</h1>
</body>
</html>4.语法规范
css语法由两部分构成：
-
选择器：找到要添加样式的元素。
-
声明块：设置具体的样式（声明块是由一个或者多个声明构成的），声明的格式为：
属性名：属性值。
备注：
最后一个声明后的分号理论上可以省略，但最好写上。
选择器与声明块之间，属性名与属性值之间，均有一个空格，理论上能省略，但是最好写上。
5.代码风格
-
展开风格——开发时推荐，便于维护和调试。
-
紧凑风格——项目上线时推荐，可减小文件体积。
<style>
/* 展开风格 */
h1 {
color: red;
font-size: 50px;
}
/* 紧凑风格 */
h1{color: red;font-size: 50px;}
</style>
6 基本选择器包括：
-
通配选择器
-
元素选择器
-
类选择器
-
ID选择器
6.1 通配选择器
作用：可以选中所有的HTML元素。
语法：
* {
属性名:属性值;
}举例：
* {
/* 选中所有元素 */
color: aqua;
font-size: 40px;
}在清除样式时，回应很大帮助
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_通配选择器</title>
<style>
* {
/* 选中所有元素 */
color: aqua;
font-size: 40px;
}
</style>
</head>
<body>
<h1>古诗文网</h1>
<br>
<h2>出自唐代骆宾王的《咏鹅》</h2>
<p>鹅，鹅，鹅，曲项向天歌。</p>
<p>白毛浮绿水，红掌拨清波。</p>
</body>
</html>6.2 元素选择器
作用：为页面中某种元素统一设置样式。
语法：
标签名{
属性名:属性值;
}举例：
h1 {
color: blue;
}
h2 {
color: aquamarine;
}
p {
color: brown;
}备注：元素选择器无法实现差异化设置，例如上面代码中，所有的p元素效果都一样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02_元素选择器</title>
<style>
h1 {
color: blue;
}
h2 {
color: aquamarine;
}
p {
color: brown;
}
</style>
</head>
<body>
<h1>古诗文网</h1>
<br>
<h2>出自唐代骆宾王的《咏鹅》</h2>
<p>鹅，鹅，鹅，曲项向天歌。</p>
<p>白毛浮绿水，红掌拨清波。</p>
<h2>出自唐代李白的《静夜思》</h2>
<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡。</p>
</body>
</html>6.3 类选择器
作用：根据元素的class值，来选中某些元素。
语法：
.类名 {
属性名:属性值;
}举例：
/* 选中页面中所有类名为test01的元素 */
.test01 {
color: rgb(9, 161, 161);
}
.test02{
/* 选中页面中所有类名为test02的元素 */
color: rgb(78, 233, 181);
}
.big {
font-size: 60px;
}注意点：
-
元素的
class属性值不带.，但CSS的类选择器要带.。 -
class值，是我们定义的，按照标准：不要使用纯数字，不要使用中文，尽量使用英语与数字的组合，若由多个单词构成，使用—做连接，例如：left—menu，且命名要有意义。 -
一个元素不能写多个
class属性，下面是错误示例：<p class="test01" class="big">鹅，鹅，鹅，曲项向天歌。</p>
-
一个元素的
class属性，能写多个值，要用空格隔开，例如<p class="test01 big">鹅，鹅，鹅，曲项向天歌。</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03_类选择器</title>
<style>
/* 选中页面中所有类名为test01的元素 */
.test01 {
color: rgb(9, 161, 161);
}
.test02{
/* 选中页面中所有类名为test02的元素 */
color: rgb(78, 233, 181);
}
.big {
font-size: 60px;
}
</style>
</head>
<body>
<h1>古诗文网</h1>
<br>
<h2>出自唐代骆宾王的《咏鹅》</h2>
<p class="test01 big">鹅，鹅，鹅，曲项向天歌。</p>
<p class="test01">白毛浮绿水，红掌拨清波。</p>
<h2>出自唐代李白的《静夜思》</h2>
<p class="test02">床前明月光，疑是地上霜。</p>
<p class="test02">举头望明月，低头思故乡。</p>
</body>
</html>
6.4 ID选择器
作用：根据元素的id属性值，来精准的选中某个元素。
语法：
#id值{
属性名:属性值;
}举例：
/* 选中id值为er的那个元素 */
#er {
color: blue;
}注意点：
-
id属性值：尽量由字母，数字，下划线，短杆组成，最好以字母为开头，不要包含空格，区分大小写。 -
一个元素只能拥有一个
id属性值，多个元素的id属性值不能相同。 -
一个元素可以同时拥有
id和class属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>04_ID选择器</title>
<style>
/* 选中id值为er的那个元素 */
#er {
color: blue;
}
#jing {
color: red;
}
.libai {
font-size: 35px;
}
</style>
</head>
<body>
<h1>古诗文网</h1>
<br>
<h2 id="er">出自唐代骆宾王的《咏鹅》</h2>
<p>鹅，鹅，鹅，曲项向天歌。</p>
<p>白毛浮绿水，红掌拨清波。</p>
<h2 id="jing" class="libai">出自唐代李白的《静夜思》</h2>
<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡。</p>
</body>
</html>6.5 基本选择器总结
| 基本选择器 | 特点 | 用法 |
|---|---|---|
| 通配选择器 | 选中所有标签，一般用于清除样式。 | * { color: aqua } |
| 元素选择器 | 选中所有同种标签，但是不能差异化选择 | h1 {color: blue} |
| 类选择器 | 选中所有特定类名（class）的元素——使用频率很高 | .big {font-size: 60px} |
| ID选择器 | 选中特定id值的那个元素（唯一的） | #er {color: blue} |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子代选择器</title>
<style>
div>a{
color: aquamarine;
}
div>p>a{
color: blue;
}
</style>
</head>
<body>
<div>
<a href="#">李四</a>
<a href="#">王五</a>
<p>
<a href="#">张三</a>
</p>
</div>
</body>
</html>注意：
1. 子代选择器，最终选择的是子代，不是父级。
2. 子、孙子、重孙子、重重孙子 ...... 统称后代！，子就是指儿子。
7.5 兄弟选择器
相邻兄弟选择器：
作用：选中指定元素后，符合条件的相邻兄弟元素。
所谓相邻，就是紧挨着他的下一个，简记：睡在我下铺的兄弟。
语法： 选择器1+选择器2 {} 。
div+p{
color: brown;
}通用兄弟选择器：
作用：选中指定元素后，符合条件的所有兄弟元素。（简记：睡在我下铺的所有兄弟）
语法： 选择器1~选择器2 {} 。
实例：
div~p{
color: brown;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>兄弟选择器</title>
<style>
/* 与div紧紧相邻的兄弟p元素（在div下面） */
div+p{
color: brown;
}
/* 与div后所有的兄弟p元素（在div下面） */
div~p{
color: brown;
}
</style>
</head>
<body>
<p>广州</p>
<div>大学</div>
<p>上海</p>
<p>北京</p>
</body>
</html>注意：两种兄弟选择器，选择的是下面的兄弟。
7.6 属性选择器
作用：选中属性值符合一定要求的元素。
语法：
-
[属性名] 选中具有某个属性的元素。
-
[属性名="值"] 选中包含某个属性，且属性值等于指定值的元素。
-
[属性名^="值"] 选中包含某个属性，且属性值以指定的值开头的元素。
-
[属性名$="值"] 选中包含某个属性，且属性值以指定的值结尾的元素。
-
[属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素。
/* 选中具有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;}7.7 伪类选择器
作用：选中特殊状态的元素。
如何理解“伪” ? — 虚假的，不是真的。
如何理解“伪类”？ — 像类( class )，但不是类，是元素的一种特殊状态
7.7.1动态伪类
-
:link超链接未被访问的状态。
-
:
visited超链接访问过的状态。
-
:
hover鼠标悬停在元素上的状态。
-
:
active元素激活的状态。
-
:
focus获取焦点的元素。
link和visited是a标签独有的属性，active和hover是使用元素都具有什么是激活？—— 按下鼠标不松开。
注意点：遵循 LVHA 的顺序，即： link 、 visited 、 hover 、 active 。
表单类元素才能使用 :focus 伪类。
当用户：点击元素、触摸元素、或通过键盘的 “ tab ” 键等方式，选择元素时，就是获
得焦点。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态</title>
<style>
/* 选中的是没有访问过的a元素 */
a:link{
color: orange;
}
/* 选中的是访问过的a元素 */
a:visited{
color: gray;
}
/* 选中的是鼠标悬浮状态的a元素 */
a:hover{
color: skyblue;
}
/* 选中的是鼠标点击激活状态的a元素 */
a:active{
color: greenyellow;
}
/* */
input:focus {
background-color: green;
}
</style>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">baidu</a>
<a href="https://www.jingdong.com">jingdong</a>
<br>
<input type="text" name="" id="">
</body>7.7.2结构伪类
常用的：
-
:first-child 所有兄弟元素中的第一个。
-
:last-child 所有兄弟元素中的最后一个。
-
:nth-child(n) 所有兄弟元素中的第 n 个。
-
:first-of-type 所有同类型兄弟元素中的第一个。
-
:last-of-type 所有同类型兄弟元素中的最后一个。
-
:nth-of-type(n) 所有同类型兄弟元素中的 第n个 。
关于 n 的值：
-
0 或 不写 ：什么都选不中 —— 几乎不用。
-
n ：选中所有子元素 —— 几乎不用。
-
1~正无穷的整数 ：选中对应序号的子元素。
-
2n 或 even ：选中序号为偶数的子元素。
-
2n+1 或 odd ：选中序号为奇数的子元素。
-
-n+3 ：选中的是前 3 个。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>结构伪类</title>
<style>
/* 选中div的第一个儿子p元素 结构1*/
/* div>p:first-child{
color: #de3939;
} */
/* 选中div的第一个儿子p元素 结构2*/
div>p:first-child {
color: #341dc9;
}
/* 选中div的后代p元素，且p的父级是谁无所谓
，但p必须是其父亲的第一个儿子 结构3*/
div p:first-child {
color: #0dc62f;
}
/* 选中div的后代p元素，且p的父级是谁无所谓
，但p必须是其父亲的第一个儿子 结构3*/
p:first-child {
color: #0dc62f;
}
/* 选中div的第n个儿子p元素（按照所以儿子计算） */
div>p:nth-child(3) {
color: brown;
}
div>p:nth-child(2n+1) {
color: rgb(65, 42, 165);
}
/* 所有同类型兄弟元素中的第一个 */
div>p:first-of-type{
color: rgb(5, 96, 66);
}
/* 所有同类型兄弟元素中的最后一个 */
div>p:last-of-type{
color: rgb(5, 96, 66);
}
/* 所有同类型兄弟元素中的 第n个（按照所有同类型兄弟计算） */
div>p:nth-of-type(3){
color: blue;
}
</style>
</head>
<body>
<!-- 结构1 -->
<!-- <div>
<p>张三：100</p>
<p>李四：99</p>
<p>王五：98</p>
<p>刘：97</p>
</div> -->
<!-- 结构2 -->
<!-- <div>
<span>张三：100</span>
<p>李四：99</p>
<p>王五：98</p>
<p>刘：97</p>
</div> -->
<!-- 结构3 -->
<p>测试1</p>
<div>
<p>测试2</p>
<marquee>
<p>测试3</p>
<p>张三：100</p>
</marquee>
<p>李四：99</p>
<p>王五：98</p>
<p>刘：97</p>
</div>
</body>
</html>
了解即可：
:nth-last-child(n) 所有兄弟元素中的倒数第 n 个。
:nth-last-of-type(n) 所有同类型兄弟元素中的 倒数第**n个** 。
:only-child 选择没有兄弟的元素（独生子女）。
:only-of-type 选择没有同类型兄弟的元素。
:root 根元素。
:empty 内容为空元素（空格也算内容）。
7.7.3否定伪类
:not(选择器) 排除满足括号中条件的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>否定伪类</title>
<style>
/* 选中的是div的儿子p元素，排除类名为fail的元素 */
div>p:not(.fail){
color: red;
}
/* 选中的是div的儿子p元素，排除title属性为加油的元素 */
div>p:not([title^="加油"]){
color: blue;
}
/* 选中的是div的儿子p元素，排除第一个儿子p元素*/
div>p:not(:first-child){
color: aqua;
}
</style>
</head>
<body>
<div>
<p>张三：100</p>
<p>李四：99</p>
<p>王五：98</p>
<p>刘：97</p>
<p class="fail" title="加油">孙七：59</p>
<p class="fail">李八：40</p>
</div>
</body>
</html>7.7.4 UI伪类
-
:
checked被选中的复选框或单选按钮。
-
:
enable可用的表单元素（没有 disabled 属性）。
-
:
disabled不可用的表单元素（有 disabled 属性）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UI伪类</title>
<style>
/* 选中的是勾选的复选框
:checked 被选中的复选框或单选按钮。*/
input:checked{
width: 100px;
height: 100px;
}
/* 选中的是被禁用的input元素 */
input:disabled{
background-color: aquamarine;
}
/* 选中的是可用的input元素 */
input:enabled{
background-color: black;
}
</style>
</head>
<body>
<input type="checkbox">
<input type="radio" name="gender" id="">
<input type="radio" name="gender" id="">
<input type="text">
<input type="text" disabled>
</body>
</html>
7.7.5 目标选择器
:target 选中锚点指向的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UI伪类</title>
<style>
div{
background-color: bisque;
height: 400px;
}
div:target{
background-color: black;
}
</style>
</head>
<body>
<a href="#one">第1个</a>
<a href="#two">第2个</a>
<a href="#three">第3个</a>
<a href="#four">第4个</a>
<a href="#five">第5个</a>
<div id="one">1</div><br>
<div id="two">2</div><br>
<div id="three">3</div><br>
<div id="four">4</div><br>
<div id="five">5</div><br>
</html>
持续更新......
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
