目录
Html负责结构
Css负责表现
一.编译器的使用
1.便捷
便捷方式：！+Tab可以直接生成一个小的模板
lang=“zh” 代表中文网站
lang="en"代表英文网站
<!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>
</body>
</html>
2.live server
可以边写边显示
二.HTML
1.实体（转义字符）
这个时候产生了与自己期望的不一样的结果 这个时候需要转义字符
具体的参考大全： HTML实体符号
2.meta
3.
a<sup>2</sup>
a<sub>2</sub>
显示
<blockquote>长引用
<q>短引用
4.块元素与行内元素
块元素：在网页中通过块元素来布局
行内元素：修饰文字
一般在块元素内放行内元素
5.
6.列表
7.超链接
<a href="http://wwww.baidu.com" >百度</a>
属性 target如果不写默认在本页面打开一个新的页面。如果写成
他会新建一个页面
还有一个属性
<a href="#">回到顶部</a>
8.图片
<img src="/photo/ga.png" alt="nibaba">
<img width="800" height="800" src="/photo/ga.png" alt="nibaba">
9.内联框架
<iframe src="https://www.bilibili.com" width="800" height="700"frameborder="0"></iframe>
在网页镶嵌对应的网址 frameborder代表有没有边框
10.音频
音乐 两种方式 第二种最好
因为有的浏览器不支持 它就不会执行source会执行文字 而支持文件播放的 他只会执行第一个source的内容
<audio src="/source/audio.mp3" controls></audio>
<audio controls>
对不起您的浏览器不支持音频播放
<source src="/source/audio.mp3">
</audio>
或者
直接粘贴 到vscode
二.CSS
1.初始css
2.css编写位置
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>First</title>
<style>
p{
color: blue;font-size: 66px;}
</style>
</head>
<body>
<p>我是你</p>
<p>我是你</p><p>我是你</p><p>我是你</p><p>我是你</p><p>我是你</p><p>我是你</p><p>我是你</p><p>我是你</p>
</body>
</html>
这样在head的style设置 p{
}代表所有的p标签文字都是这种格式的！！！！
第二种方式不会覆盖第一种方式！！！！！
在head内引用link标签 就ok了
3.css基本语法
4.常用选择器
id唯一不重复 class可以重复，可以包含多个！
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>First</title>
<style>
#only{
color: blue;
}
.red{
color: red;
}
.big{
font-size: 100px;
}
</style>
</head>
<body>
<p id="only">
我曾难自拔与世界之大
</p>
<p class="red">也曾</p>
<p class="red big">
忙忙碌碌加油！
</p>
</body>
</html>
显示效果
通配选择器是用* 那样页面全部元素都是那个形式的！
5.复合选择器
交集选择器
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>First</title>
<style>
/*必须是既是div又得class为red的*/
div.red{
color: blue;
}
.red{
color: red;
}
</style>
</head>
<body>
<p class="red">
我曾难自拔与世界之大
</p>
<div class="red"> 忙忙碌碌加油！</div>
</body>
</html>
并集
<style>
p,div{
color: green;
}
</style>
p标签的或者div的颜色都是green+
6.关系选择器
<div >
<p>我是div中的p标签</p>
<span>我是div中的span标签</span>
<p>
我是div内p标签<br>
<span>我是div内p内的span标签</span>
</p>
<span>我是div中的span2标签</span>
</div>
如果
div span{
color:red;
}
div>span{
color:red;
}
上边两个差异 原因是一个空格表示后代 那个>表示子代
7.属性选择器
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>First</title>
<style>
p[title=a]{
color: red;
}
p[title=aa]
{
color: salmon;
}
p[title=b]
{
color: springgreen;
}
</style>
</head>
<body>
<p title="a">我是title为a的</p>
<p title="aa">我是title为a的</p>
<p title="b">我是title为a的</p>
</body>
</html>
8.伪类选择器
ul > li : first-child
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>First</title>
<style>
ul>li:first-child{
color: springgreen;
}
</style>
</head>
<body>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>First</title>
<style>
ul>li:first-of-type{
color: tomato;
}
</style>
</head>
<body>
<ul>
<span>xxx</span>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
</ul>
</body>
</html>
这个是因为它在标签内的排序是针对所有的标签
当你指定特定类型 那么它就会去执行特定类型的。
9.超链接的伪类
link没访问的链接 属性的设置
visited访问过的链接的属性的设置
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>First</title>
<style>
a:link{
color: yellow;
}
a:visited{
color: tomato;
}
a:hover{
color: teal;
font-size: 50px;
}
a:active{
color: white;
}
</style>
</head>
<body>
<a href="https://www.36.0.com">360官网（访问过的）</a>
<br><br><br>
<a href="https://www.baidu.com">百度（没访问过的）</a>
</body>
</html>
a:hover那个是代表鼠标移动到上边时候显示的属性
a:active
表示鼠标点击的瞬间显示的属性（white）
10.伪元素
调整某一段的第一个字符的属性！
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>First</title>
<style>
div::first-letter{
font-size: 50px;
}
</style>
</head>
<body>
<div>我们都是员工卡大小不变</div>
</body>
</html>
那个before在标签最开头插入内容
after是在标签结束前插入内容
三.
1.继承
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>First</title>
<style>
div{
color: turquoise;
}
</style>
</head>
<body>
<div>
我是div
<p>我是div下的p</p>
</div>
</body>
</html>
但是与背景相关的却不能继承！！！！！！
2.选择器的优先级!
以下优先级一次递减
内联样式
<div style="color: tomato;">我是什么颜色</div>
--------------------
id选择器
<style>
#wh{
color: thistle;
}
</style>
<div id="wh" >我是什么颜色</div>
-----------------------------
类和伪类选择器
<style>
.wh{
color:purple;
}
</style>
<div class="wh" >我是什么颜色</div>
-----------------------------
<style>
div{
color:purple;
}
</style>
<div >我是什么颜色</div>
分组选择器（div,p,span）是单独计算的！！
通配符优先级最低*的那个
然后继承的没有优先级