14.HTML全局属性
1).全局属性可以在各种标签中使用。
2).常用属性：
更多属性：HTML全局属性
14.meta元信息
以head为标签：
1).配置字符编码：
<!-- 字符编码 -->
<meta charset="UTF-8">2).针对IE浏览器的兼容性配置
<!-- 针对移动端 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">3). 针对移动端的配置
<!-- 针对移动端 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">4).配置网页关键字
<!-- 配置网页关键字 -->
<meta name="keyword" content="网上购物，化妆品 ">5).配置网页描述信息
<!-- 配置网页关键信息 -->
<meta name="descrption" content="本网站是xxx">6).针对搜索引擎爬虫配置(如下)：
<meta name="robots" content="此处可选值见下表">
7).配置网页作者：
<meta name="author" content="name">8).配置网页生成工具:
<meta name="generator" content="Visual Studio Code"9).配置定义网页版权信息：
<meta name="copyright" content="2023-2027©版权所有"10).配置网页自动刷新:
<meta http-equiv="refresh" content="7";url=http://www.baidu.com">四.HTML总结
CSS学习DAY1
一.CSS基础
1.简介
1).CSS 的全称为：层叠样式表 ( Cascading Style Sheets ) 。
2).CSS 也是一种标记语言，用于给 HTML 结构设置样式，例如：文字大小、颜色、元素宽高等等。
3).HTML搭建了骨架（结构），CSS为其描绘外貌（样式），实现了结构与样式的分离）
2.CSS的编写位置
1).行内样式：
a.写在标签的 语法： style 属性中，（又称：内联样式)
e.g.
<h1 style="color: aqua;" font-size=:80px;>欢迎来到尚硅谷学习代码</h1>
b.组成:选择器+声明块（color名+:;对+80px/apua值）
2).内部样式：
a.写在html 页面内部，将所有的语法： CSS 代码提取出来，单独放在<style>标签中>。（既可以放在head标签内也可以放在body标签内，一般放在head标签内）
e.g.
h1 {
color: aqua;
font-size: 60px;
}
img{
width: 200px;
}注意：此写法并没有实现结构与样式完全分离，也无法在不同html文件复用。
3).外部样式
a.写在单独的 语法: .css 文件中，随后在 HTML 文件中引入使用。
需要新建.css后缀的文件，用于存放css代码\n\n外部样式代码除无需style标签，与内部样式相同。
e.g.
HTML:
<head>
<meta charset="UTF-8">
<title>位置3外部文件</title>
<link rel="stylesheet" href="./position3.css">
</head>
<body>
<h1>欢迎去尚硅谷学习</h1>
<img src="../图/怪兽.jpg" alt="怪兽" title="怪兽">CSS：
h1{
color: aqua;
font-size: 60px;
}
img{
width: 200px;
}b.在html文件引入css文件需要在head标签内添加用link链接(类似于超链接中的图片文件跳转）
href ：引入的文档来自于哪里。
rel ：( relation ：关系）说明引入的文档与当前文档之间的关系。
3).优先级：
a.优先级规则：行内标样式>内部样式=外部样式,并且，样式表之间，后面的会覆盖前面的。
e.g.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>优先级</title>
<link rel="stylesheet" href="./index.css">
<style>
h1{
color: gold;
font-size: 100px;
}
</style>
</head>
<body>
<h1 style="color: black;">欢迎来尚硅谷学代码</h1>
</body>
</html>
4.CSS语法规范
1).CSS 语法规范由两部分构成:
a.选择器：找到要添加样式的元素。
b.声明块：设置具体的样式（声明块是由一个或多个声明组成的），声明的格式为： 属性名：属性值；
注1：最后一个声明后的分号理论上能省略，但最好还是写上。
注2：选择器与声明块之间，属性名与属性值之间，均有一个空格，理论上能省略，但最好还是写上
注3:注释改为：/**/,但快捷键不变。
e.g.
<style>
h1 {
/* 注释：给字体加样式 */
color: aquamarine;
font-size: 60px;
}
</style>二.CSS选择器
1.通配选择器
1).作用：可以选中所有的HTML 元素。
2).语法：*{
}
e.g.
<style>
*{
color: beige;
font-size: 60px;
}
</style>2. 元素选择器
1).作用：为页面中某种元素统一设置样式。
2).语法：标签名{
}
e.g.
<style>
h1{
color: beige;
font-size: 60px;
}
h2{
color: aquamarine;
font-size: 20px;
}
p{
color: burlywood;
font-size: 40px;
}
h3{
color: blueviolet;
font-size: 10px;
}
</style>3. 类选择器
1).作用：根据元素的class 值，来选中某些元素。
2).语法：.类名{
}
e.g.
/* 选中页面中所有类名为speak的元素 */
.speak{
color: aquamarine;
font-size: 30px;
/* 选中页面中所有类名为answer的元素 */
}
.answer{
color: chocolate;
font-size: 70px;
}
.big{
color: crimson;
}4. id选择器
1).作用：根据元素的id属性值，来精准的选中某个元素。
2).语法：#id值{
}
<style>
#earthy{
color: burlywood;
}
#turn-earthy{
color: chartreuse;
}
</style>
5、基本选择器总结
二.复合选择器
CSS选择器整体分类两大类：
1.基本选择器：
1).通配选择器
2).元素选择器
3).类选择器
4).ID选择器
二，复合选择器：
1.交集选择器
2.并集选择器
3.后代选择器
4.子元素选择器
1).交集选择器
a.作用：选中同时符合多个条件的元素
b.语法：选择器1选择器2选择器3...选择器n {}
<style>
/* 选中类名为rich的元素*/
.rich {
color: gold;
}
/* 选中类名为beauty的元素*/
.beauty {
color: red;
}
/* 选中类名为beauty的p元素，这种形式（元素配合类选择器）以后用的很多！！ */
p.beauty {
color: green;
}
/* 选中同时具备rich和beauty类名的元素 */
.rich.beauty {
color: orange;
}
</style>注意：
1. 有标签名，标签名必须写在前面。
2. id选择器、通配选择器，理论上可以作为交集的条件，但实际应用中几乎不用 —— 因为没有意义。
3. 交集选择器中不可能出现两个元素选择器
2.并集选择器
1).作用：选中多个选择器对应的元素，又称：分组选择器。
2).语法：选择器1, 选择器2, 选择器3, ... 选择器n {}
<style>
.rich {
color: gold;
}
.beauty {
color: red;
}
.dog {
color: blue;
}
.pig {
color: green;
}
/* 选中类名为：rich或beauty或dog或pig或id为suxi的元素*/
.rich,
.beauty,
.dog,
.pig,
#suxi {
font-size: 40px;
background-color: gray;
width: 180px;
}
</style>3.html元素之间的关系
分为：1.父元素、2.子元素、3.祖先元素、4.后代元素、5.兄弟元素。
1). 父元素：直接包裹某个元素的元素，就是该元素的父元素。
2).子元素：被父元素直接包含的元素（简记：儿子元素）。
3).祖先元素：父亲的父亲......，一直往外找，都是祖先。
注：父元素，也算是祖先元素的一种。
4).后代元素：儿子的儿子......，一直往里找，都是后代。
备注：子元素，也算是后代元素的一种。
5).兄弟元素：具有相同父元素的元素，互为兄弟元素。
4.后代选择器
1).作用：选中指定元素中，符合要求的后代元素。
2).语法：选择器1 选择器2 选择器3 ...... 选择器n {} （先写祖先，再写后代）
e.g.
<style>
ul li {
color: red;
}
ol li {
color: green;
}
ul li a {
color: orange;
}
ol li a {
color: gray;
}
.subject li.front-end {
color: blue;
}
.subject div.front-end {
color: chocolate;
}
</style>5.子代选择器
1).作用：选中指定元素中，符合要求的子元素（儿子元素）。（先写父，再写子)
子代选择器又称：子元素选择器、子选择器。
2).语法：选择器1 > 选择器2 > 选择器3 > ...... 选择器n {}
e.g.
<style>
div>a {
color: red;
}
div>p>a{
color: skyblue;
}
.foot>a {
color: chocolate;
}
</style>6.兄弟选择器
1).相邻兄弟选择器：
a.作用：选中指定元素后，符合条件的相邻兄弟元素。
所谓相邻，就是紧挨着他的下一个。
b.语法： 选择器1+选择器2 {}
e.g.
<style>
/* 选中div后紧紧相邻的兄弟p元素（睡在我下铺的兄弟）—— 相邻兄弟选择器 */
div+p {
color: red;
}
2).通用兄弟选择器：
a.作用：选中指定元素后，符合条件的所有兄弟元素。
b.语法： 选择器1~选择器2 {}
注意：两种兄弟选择器，选择的是下面的兄弟。
7.属性选择器
1).作用：选中属性值符合一定要求的元素。
2).语法：
a. [属性名] 选中具有某个属性的元素。
e.g.
/* 第一种写法：选中具有title属性的元素 */
[title] {
color: red;
}b. [属性名="值"] 选中包含某个属性，且属性值等于指定值的元素。
e.g.
/* 第二种写法：选中具有title属性，且属性值为atguigu1的元素 */
[title="atguigu1"] {
color: red;
}c. [属性名^="值"] 选中包含某个属性，且属性值以指定的值开头的元素。
e.g.
/* 第三种写法：选中具有title属性，且属性值以字母a开头的元素 */
[title^="a"] {
color: red;
} d. [属性名$="值"] 选中包含某个属性，且属性值以指定的值结尾的元素。
e.g.
/* 第四种写法：选中具有title属性，且属性值以字母u结尾的元素 */
[title$="u"] {
color: red;
} f. [属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素。
e.g.
/* 第五种写法：选中具有title属性，且属性值包含字母u的元素 */
[title*="u"] {
color: red;
}8 伪类选择器
1).作用：选中特殊状态的元素。
2).常用的伪类选择器：
一、动态伪类：
1. : link 超链接未被访问的状态。
e.g.
/* 选中的是没有访问过的a元素 */
a:link {
color: orange;2. :visited 超链接访问过的状态。
e.g.
/* 选中的是访问过的a元素 */
a:visited {
color: gray;
}3. : hover 鼠标悬停在元素上的状态。
e.g.
/* 选中的是鼠标悬浮状态的a元素 */
a:hover {
color: skyblue;
}4. :active 元素激活的状态。
/* 选中的是激活状态的a元素 */
a:active {
color: green;
}注意点：遵循 LVHA 的顺序，即： link 、 visited 、 hover 、 active。
/* 选中的是获取焦点状态的input元素、获取焦点状态的select元素 */
input:focus,select:focus {
color: orange;
background-color: green;
}: focus 获取焦点的元素。
表单类元素才能使用 link 、 visited 、 hover 、 :focus 伪类。
二、结构伪类
常用的：
1. :first-child 所有兄弟元素中的第一个。
e.g.
/* 选中的是div的第一个儿子p元素（按照所有兄弟计算的） —— 看结构1 */
div>p:first-child {
color: red;
}2. :last-child 所有兄弟元素中的最后一个。
e.g.
/* 选中的是div的第一个儿子p元素（按照所有兄弟计算的） —— 看结构2 */
div>p：last-child {
color: red;
}
3. :nth-child(n) 所有兄弟元素中的第 n 个。
e.g.
/* 选中的是div的第n个儿子p元素（按照所有兄弟计算的）—— 结构1 */
div>p:nth-child(3) {
color: red;4. :first-of-type 所有同类型兄弟元素中的第一个。
e.g.
/* 选中的是div的第一个儿子p元素（按照所有同类型兄弟计算的）—— 结构3 */
div>p:first-of-type{
color: red;
}5. :last-of-type 所有同类型兄弟元素中的最后一个
e.g.
/* 选中的是div的第一个儿子p元素（按照所有同类型兄弟计算的）—— 结构3 */
div>p:first-of-type{
color: red;
}6. :nth-of-type(n) 所有同类型兄弟元素中的 第n个
e.g.
/* 选中的是div的第n个儿子p元素（按照所有同类型兄弟计算的）—— 结构3 */
div>p:nth-of-type(5) {
color: red;
}关于n的值：1. 0或 不写：什么都选不中 —— 几乎不用。
2. n：选中所有子元素 —— 几乎不用。
3. 1~正无穷的整数 ：选中对应序号的子元素。
4. 2n 或 even ：选中序号为偶数的子元素。
5. 2 n+1 或 odd ：选中序号为奇数的子元素。
6.n+3 ：选中的是前3个。
e.g.
/* 选中的是div的偶数个儿子p元素（按照所有兄弟计算的）—— 结构2 */
/* 关于n的值 —— 结构2：
1. 0或不写：什么都选不中 —— 几乎不用。
2. n ：选中所有子元素 —— 几乎不用。
3. 1 ~ 正无穷的整数，选中对应序号的子元素。
4. 2n 或 even ：选中序号为偶数的子元素。
5. 2n+1 或 odd ：选中序号为奇数的子元素。
6. -n+3 : 选中前三个。
*/
div>p:nth-child(2n) {
color: red;
}另：1. :nth-last-child(n) 所有兄弟元素中的倒数第 n 个。
e.g.
/* 选中的是div的第n个儿子p元素（按照所有兄弟计算的）—— 结构1 */
div>p:nth-last-child(3) {
color: red;
}
2. :nth-last-of-type(n) 所有同类型兄弟元素中的 倒数第n个 。
e.g.
/* 选中的是div的第一个儿子p元素（按照所有同类型兄弟计算的）—— 结构3 */
div>p:last-of-type{
color: red;
}3. :only-child 选择没有兄弟的元素（独生子女,在所有兄弟里）。
e.g.
/* 选中的是没有兄弟的span元素 —— 看结构2 */
span:only-child {
color: red;
}4. :only-of-type 选择没有同类型兄弟的元素。（同标签类型）
e.g.
/* 选中的是没有同类型兄弟的span元素 —— 看结构2 */
span:only-of-type {
color: red;
}5. : root 根元素。
e.g.
/* 选中的是根元素 */
:root {
background-color: gray;
}6. : empty 内容为空元素（空格也算内容）。(一定要有范围才能显色)
e.g.
/* 选中的是没有内容的div元素 */
div:empty {
width: 100px;
height: 100px;
background-color: red;
}10.3作业：
HTML:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>校园失物招领</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<h1 class="notebook">校园失物招领</h1>
<img src="./images/notebook.png" alt="笔记本" title="笔记本">
<h2 class="notebook">谁的笔记本？</h2>
<p class="color">物品编号：SW-016</p>
<p class="color">捡到<div id="notebook">一本蓝色笔记本</div>，封面上没有姓名。</p>
<p class="color">拾取地点：操场看台</p>
<p class="color">拾取时间：周三午休</p>
<h2>物品特征</h2>
<ul>
<li>
封面为蓝色，没有姓名
</li>
<li>
前几页写有课堂笔记
</li>
<li>
书页中间夹着一个白色书签
</li>
</ul>
<h2>认领须知</h2>
<ol>
<li>先核对物品特征，再到值班室登记。</li>
<li>认领时请先说明笔记本中的内容。</li>
<li>确认信息后，签字领取物品。</li>
</ol>
<span>温馨提示：请勿代领，避免拿错。</span>
<div>认领地点：教学楼一楼值班室</div>
</main>
</body>
</html>
CSS：
/* 基础排版已提供，可直接使用。这部分不作为考点。
margin 是外边距，padding 是内边距；不要求记忆或自行调整。
在本文件末尾添加你自己的选择器规则。 */
body {
margin: 0;
padding: 30px;
background-color: whitesmoke;
color: black;
font-family: "Microsoft YaHei", sans-serif;
font-size: 18px;
line-height: 1.8;
}
main {
width: 600px;
margin: 0 auto;
padding: 30px;
background-color: white;
}
h1 {
margin: 0 0 20px;
font-size: 32px;
}
h2 {
margin: 20px 0 12px;
font-size: 24px;
}
img {
display: block;
width: 600px;
}
p {
margin: 12px 0;
}
ul, ol {
margin: 12px 0;
padding-left: 28px;
}
/* 在下面自行编写样式，选择器和 class、id 名称由你决定。 */
/* 并集选择器 */
h1,h2,#notebook{
color: blue;
}
/* 类选择器 */
.color{
color: gray;
}
/* 后代选择器 结构伪类 */
ul li:nth-child(3){
color: green;
}
/* 结构伪类 */
span:only-of-type{
color: red;
}转载自 CSDN-专业IT技术社区
原文链接：https://blog.csdn.net/2601_97083438/article/details/167072166
