**⭐️大一小何，还在学习当中，欢迎交流指正~
**
要开学了，整理一下最近的笔记
内联框架
内联框架：用于向当前页面中引入一个其他页面
src指定要引入的网页路径
frameborder指定内联框架的边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
内联框架：用于向当前页面中引入一个其他页面
src指定要引入的网页路径
frameborder指定内联框架的边框
-->
<iframe src="http://www.JD.com" witch="800" height="600" frameborder="0"></iframe>
</body>
</html>
音视频
audio标签用来向页面中引入一个外部的音频文件
音视频文件引入后，默认情况下不允许用户自己控制播放停止属性： controls是否运行用户控制播放 autoplay当前文件是否自动播放 如果设置了autoplay，则音乐在打开页面时会自动播放 但是大部分浏览器不会对音乐自动播放 音乐是否循环播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
audio标签用来向页面中引入一个外部的音频文件
音视频文件引入后，默认情况下不允许用户自己控制播放停止
属性：
controls是否运行用户控制播放
autoplay当前文件是否自动播放
如果设置了autoplay，则音乐在打开页面时会自动播放
但是大部分浏览器不会对音乐自动播放
音乐是否循环播放
-->
<audio src="" controls autoplay loop></audio>
<audio controls>
<source src="">
</audio>
<!--
ie8浏览器不支持播放，用embed来改善
-->
<embed src="" type="">
<!--
使用video标签来向网页中引入一个video视频
使用方式和video基本一样
-->
<video controls>
<iframe src="" frameborder="0"></iframe>
</video>
</body>
</html>
css 简介
第一种方式(内联样式 行内样式)
在标签内部通过style属性来设置元素的样式
使用内联样式，样式只能对一个标签生效
如果希望影响多个元素必须都复制一遍
并且当样式发生改变时，我们需要一个一个的修改，非常的不方便开发时不要用内联样式
第二种方式
将样式编写到head中的style标签里面
可以通过css选择器来选中元素并为其设置各种样式
可以同时为多个标签设置样式，并且修改时只需修改一处即可
内部样式表更加方便对样式进行复用
问题：
我们的样式表只能对一个网页起作用
它里面的样式不能跨网页进行复用
第三种方式（外部样式表）最佳实践
可以将css样式编写到一个外部的css文件中
然后通过link标签来引入外部的css文件
外部样式表需要通过link标签进行引入
意味着只要想通过这些样式的网页都可以对其进行引用
使样式可以在不同的页面之间进行复用
将样式编写到外部的css文件中，可以使用到浏览器的缓存机制
从而加快网页的加载速度，提高用户的体验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
第二种方式
将样式编写到head中的style标签里面
可以通过css选择器来选中元素并为其设置各种样式
可以同时为多个标签设置样式，并且修改时只需修改一处即可
内部样式表更加方便对样式进行复用
问题：
我们的样式表只能对一个网页起作用
它里面的样式不能跨网页进行复用
-->
<style>
p{
color: green;
font-size: 50px;
}
</style>
<!--
第三种方式（外部样式表）最佳实践
可以将css样式编写到一个外部的css文件中
然后通过link标签来引入外部的css文件
外部样式表需要通过link标签进行引入
意味着只要想通过这些样式的网页都可以对其进行引用
使样式可以在不同的页面之间进行复用
将样式编写到外部的css文件中，可以使用到浏览器的缓存机制
从而加快网页的加载速度，提高用户的体验
-->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!--
网页三个部分
结构（html）
表现（css）
行为（Javascript）
css
层叠样式表
网页实际上是一个多层结构，通过css可以分别为网页的每一层来设置样式
总之一句话，css用来设置网页中元素的样式
-->
<!--
使用css来修改元素的样式
第一种方式(内联样式 行内样式)
在标签内部通过style属性来设置元素的样式
使用内联样式，样式只能对一个标签生效
如果希望影响多个元素必须都复制一遍
并且当样式发生改变时，我们需要一个一个的修改，非常的不方便
开发时不要用内联样式
-->
<!--<p style="color: red; font-size: 60px;" >少小离家老大回,乡音无改鬓毛催</p>
<p style="color: red; font-size: 60px;" >今天天气真不错</p>
-->
<p>落霞与孤鹜齐飞,秋水共长天一色</p>
</body>
</html>
css语法
css中的注释，注释中的内容会自动被浏览器所忽略
css基本语法： 选择器 声明块 选择器：通过选择器可以选中页面中的指定元素 比如p的作用就是选中页面中所有的p元素 声明块：通过声明块来指定要为元素设置的样式 声明块由一个一个的声明组成 声明是一个名值对结构 一个样式对应一个样式值，名与值之间：连接，以；结尾
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
css中的注释，注释中的内容会自动被浏览器所忽略
css基本语法：
选择器 声明块
选择器：通过选择器可以选中页面中的指定元素
比如p的作用就是选中页面中所有的p元素
声明块：通过声明块来指定要为元素设置的样式
声明块由一个一个的声明组成
声明是一个名值对结构
一个样式对应一个样式值，名与值之间：连接，以；结尾
*/
p{
color: red;
font-size: 40px;
}
h1{
color: green;
}
</style>
</head>
<body>
<p>哈哈哈哈哈哈</p>
<h1>嘿嘿嘿嘿嘿嘿</h1>
</body>
</html>
选择器
常用选择器
元素选择器
作用：根据标签名来选中指定的元素
语法：标签名{}
例子：p{} h1{} div{}
类选择器：
根据元素的class属性值选中一组元素
语法：.class属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
将所有段落设置为红色（字体）
元素选择器
作用：根据标签名来选中指定的元素
语法：标签名{}
例子：p{} h1{} div{}
*/
/* p{
color: red;
}
h1{
color: green;
}
*/
/*
将儿童相见不相识设置为红色
id选择器
作用：根据元素的id属性选中一个元素
语法：#id属性值{}
例子：#box{} #red{}
*/
#red{
color: red;
}
/*
类选择器：
根据元素的class属性值选中一组元素
语法：.class属性值
*/
/*
.blue{
color: blue;
}
.abc{
font-size: 20px;
}*/
/*
通配选择器
作用：选中页面中的所有元素
语法：*
*/
*{
color: red;
}
</style>
</head>
<body>
<h1 class="blue abc" >我是标题</h1>
<p>少小离家老大回</p>
<p>乡音无改鬓毛催</p>
<p id="red">儿童相见不相识</p>
<p>笑问客从哪里来</p>
<!--
class属性是一个标签属性，它和id类似，不同的是，class可以重复使用
可以通过class属性来为class分组
-->
<p class="blue">落霞与孤鹜齐飞</p>
<p class="blue">秋水共长天一色</p>
</body>
</html>
复合选择器
交集选择器
作用：选中同时复合多个条件的元素
语法：选择器1选择器2选择器3.。。
注意：交集选择器中如果有元素选择器，必须使用元素选择器开头
选择器分组：
作用：同时选择多个选择器的元素
语法：选择器1，选择器2，选择器3，选择器n{}#b1,p1,h1,span,div.red{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
将class为red的元素设置为红色（字体）
*/
.red{
color: red;
}
/* 将class为red的div字体大小设置为30px*/
/*交集选择器
作用：选中同时复合多个条件的元素
语法：选择器1选择器2选择器3.。。
注意：交集选择器中如果有元素选择器，必须使用元素选择器开头
*/
div.red{
font-size: 30px;
}
.a.b.c{
color: blue;
}
/*
选择器分组：
作用：同时选择多个选择器的元素
语法：选择器1，选择器2，选择器3，选择器n{}
#b1,p1,h1,span,div.red{}
*/
h1,span{
color: green;
}
</style>
</head>
<body>
<div class="red">我是div</div>
<p class="red">我是p标题</p>
<div class="red2 a b c">我是div</div>
<h1>h1</h1>
<span>span</span>
</body>
</html>
关系选择器
父元素
直接包含子元素的的元素叫做父元素
子元素
直接被父元素包含的元素是子元素
祖先元素
直接或间接包含后代元素的元素叫做祖先元素
一个元素的父元素也是它的祖先元素
后代元素
直接或间接被祖先元素包含的元素叫做后代元素
子元素也是后代元素
兄弟元素
拥有相同父元素的元素是兄弟元素
子元素选择器
作用：选中指定元素的指定子元素
语法：父元素>子元素
后代元素选择器 作用：选中指定元素内的指定后代元素 语法：祖先 后代
选择下一个兄弟
语法：前一个 + 下一个
选择下边所有的兄弟
语法：兄 ~ 弟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
子元素选择器
作用：选中指定元素的指定子元素
语法：父元素>子元素
*/
/*div.box>span{
color: orange;
}
*/
/*
后代元素选择器
作用：选中指定元素内的指定后代元素
语法：祖先 后代
*/
/* div span{
color: skyblue;
}
*/
/* div > p > span{
color: blueviolet;
}
*/
/*
选择下一个兄弟
语法：前一个 + 下一个
选择下边所有的兄弟
语法：兄 ~ 弟
*/
/*p + span{
color: red ;
}
*/
p ~ span{
color: red;
}
</style>
</head>
<body>
<!--
父元素
直接包含子元素的的元素叫做父元素
子元素
直接被父元素包含的元素是子元素
祖先元素
直接或间接包含后代元素的元素叫做祖先元素
一个元素的父元素也是它的祖先元素
后代元素
直接或间接被祖先元素包含的元素叫做后代元素
子元素也是后代元素
兄弟元素
拥有相同父元素的元素是兄弟元素
-->
<div class="box">
我是div
<p>我是div中的p元素
<span>
我是p元素中的span元素
</span>
</p>
<div></div>
<span>
我是div中的span元素
</span>
<span>
我是div中的span元素
</span>
<span>
我是div中的span元素
</span>
</div>
<div>
<span>
我是div中的span元素
</span>
</div>
</body>
</html>
属性选择器
[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性值^=属性值] 选择属性值以指定值开头的元素
[属性值$=属性值] 选择属性值以指定元素值结尾的元素
[属性值*=属性值] 选择属性值中含有某值的元素的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性值^=属性值] 选择属性值以指定值开头的元素
[属性值$=属性值] 选择属性值以指定元素值结尾的元素
[属性值*=属性值] 选择属性值中含有某值的元素的元素
*/
p[title*=abc]{
color: rgb(231, 158, 21);
}
</style>
</head>
<body>
<p title="abc">少小离家老大回</p>
<p title="abcdef">乡音无改鬓毛催</p>
<p title="helloabc">儿童相见不相识</p>
<p>笑问客从哪里来</p>
<p>落霞与孤鹜齐飞</p>
<p>秋水共长天一色</p>
</body>
</html>
伪类选择器
伪类（不存在的类，特殊的类）
伪类用来描述一个元素的特殊状态
比如：第一个子元素被点击的元素。鼠标移入元素。。。
伪类一般情况下都是使用：开头
：first-child 表示第一个元素
last-child 最后一个元素
nth-child（) 选中第n个子元素
特殊值：n
n 第n个，n的范围0到正无穷
2n 或even 表示选中偶数位的元素
2n+1或odd 表示选中奇数位的元素
以上这些伪类都是根据所有的子元素进行排序：first-of-type :last-of-type :nth-last-of-type( 这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序 not（）否定伪类 将符合条件的元素从选择器中去除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
将ul里的第一个li设置为红色
*/
/*
伪类（不存在的类，特殊的类）
伪类用来描述一个元素的特殊状态
比如：第一个子元素被点击的元素。鼠标移入元素。。。
伪类一般情况下都是使用：开头
：first-child 表示第一个元素
last-child 最后一个元素
nth-child（) 选中第n个子元素
特殊值：n
n 第n个，n的范围0到正无穷
2n 或even 表示选中偶数位的元素
2n+1或odd 表示选中奇数位的元素
以上这些伪类都是根据所有的子元素进行排序
：first-of-type
:last-of-type
:nth-last-of-type(
这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序
not（）否定伪类
将符合条件的元素从选择器中去除
)
*/
/* ul>li:first-child{
color: red;
}
*/
/*ul>li:last-child{
color: red;
}
*/
/*ul>li:first-of-type{
color: red;
}*/
ul>li:not(:nth-of-type(2)){
color: red;
}
</style>
</head>
<body>
<ul>
<span>ooo</span>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
</body>
</html>
元素的伪类
:link用来表示没访问过的链接（正常的链接）
visited用来表示访问过的链接
由于隐私的原因，所以visited这个伪类只能修改链接的颜色
:hover 用来表示鼠标移入的状态
:active 用来表示鼠标点击
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
:link用来表示没访问过的链接（正常的链接）
*/
a:link{
color: red;
}
/*
visited用来表示访问过的链接
由于隐私的原因，所以visited这个伪类只能修改链接的颜色
*/
a:visited{
color: orange;
}
/*
:hover 用来表示鼠标移入的状态
*/
a:hover{
color: aqua;
font-size: 50px;
}
/*
:active 用来表示鼠标点击
*/
a:active{
color: yellowgreen;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">访问过的链接</a>
<br><br>
<a href="http://www.baidu1234">没访问过的链接</a>
</body>
</html>
伪元素选择器
伪元素：表示页面中一些特殊的并不真实存在的元素（特殊的位置）
伪元素的使用：：开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始
::after 元素的最后
before和after必须结合content属性来使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
font-size: 20px;
}
/*
伪元素：表示页面中一些特殊的并不真实存在的元素（特殊的位置）
伪元素的使用：：开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始
::after 元素的最后
before和after必须结合content属性来使用
*/
p::first-letter{
font-size: 50px;
}
p::first-line{
background-color: yellow;
}
p::selection{
background-color: greenyellow;
}
div::before{
content: 'abc';
color: red;
}
div::after{
content: 'hhhh';
color: rgb(100, 19, 192);
}
</style>
</head>
<body>
<div>ahxh</div>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque, aliquid optio! Maxime doloremque dolorem qui, fugit iste earum amet natus vitae! Dolorem sapiente a quibusdam eveniet, sunt laborum harum explicabo!
</p>
</body>
</html>
结语
冲冲冲
版权归原作者 超级小何 所有， 如有侵权，请联系我们删除。