HTML：
超文本标记语言
超文本：文字 图片 音频 超链接等；
标记： <> 单标记 </>双标记
标记语言：将特定的英文单词放在标记中 这个标记就有了特殊含义，这个标记也可以叫做标签
1，HTML基础结构：
①<!DOCTYPE html> 文档头声明
②<html> </html>根元素：
<head> </body> :头 head标签内部的内容绝大部分是不可见的
<body> </body>: 身体 主要书写页面中的内容，用于搭建html结构
<div> </div> ：称为区隔标记，作用：设定字、画、表格等的摆放位置。当你把文字，图象，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。所以当你以后看到这些名词的时候，你就知道它们是指一段在 DIV 中的 HTML。
<div>应用于 Style Sheet（式样表）方面会更显威力，它最终目的是给设计者另一种组织 能力，
示例代码：
<!--文档头（类型）的声明-->
<!--<!DOCTYPE html>; 代表HTML的标准
注意：文档头声明 不是标签-->
<!DOCTYPE html>
<html>
<!--代表了HTML的根元素-->
<head>
<!--head:标签内部的内容绝大部分是不可见的 修饰性的不可见-->
<!--title:定义文档的标题，在页面中是可见的-->
<!--mate: 定义HTML页面的元数据 -->
<title>清茶煮酒</title>
<meta charset="uft-8">
<!--meta中的charset属性针对搜索引擎和解析格式的属性-->
</head>
<body>
<!--主要书写页面中的内容 用于搭建HTML结构-->
<!--历史上最常用的标签div -->
<div></div>
</body>
</html>
<!--
放在外面的是父标签
放在里面的是子标签
父子关系时候需要用tab进行缩进
-->
——————————————————————————————————————————————————
CSS
1.内联样式表
作为属性 直接书写在标签内部
<div style=" 100px; height:100px;</div>
注：前端中基础单位都是像素：px
宽度 height:高度 background-color:背景颜色
优点：优先级非常高
缺点：非常繁琐，冗余代码非常多；维护困难
使用场景 ：确定样式，书写后不需要修改
2.内部样式表
CSS选择器
①标签选择器：作用范围是所有相同的标签
网页中所有的div标签都会具有样式
div{
color: pink; 声明 ：需要设置的样式
background-color: green;最后一条声明的;可以省略 建议写上 }
②类名选择器：用于选择一类具有相同特征的标签
在一个页面中可以有N个 .class对应的属性值可以重复
.word{
color: pink;
}
③ID选择器：用于选择第一个具有特定ID名称的标签
在一个页面中只能有1个 #id对应的属性值不能重复
#s{
color: pink;
}
④群组选择器：
选择器1，选择器2 {}
中间用逗号，不涉及优先级问题
后代选择器：
选择器1 选择器2{}
中间用空格，针对左右的后代，优先级是相加的
子代选择器：
选择器1 > 选择器2
中间用大于号，只针对子集由小，优先级大于后代选择器
动态伪类选择器：
1.用来添加一些选择器的特殊效果
- a:link {} 用于定义未访问的连接
- a:visited{} 用于定义被访问过的链接
- a:hover{} 用于定义鼠标在当前标签内部移动的时候
- a:active{} 用于定义被选中的链接
ICE原则：用于计算选择器的优先级：
标签名：1 class: 10 ID:100 内联：1000
优点：加载速度快，没有服务器的请求压力
缺点：单个文件过大，维护起来有点困难
使用场景：大型网站的首页
3.外部样式表：
使用link标签重新引入HTML文档
优点：便于维护，可以重复使用
缺点：垃圾代码多，加载速度慢，会造成服务器的额外压力
使用场景： 多用于大型网站的二三级页面
选择器优先级：
ID选择器>类选择器>标签选择器
如果样式直接写在标签内部，那么它的优先级是1000
样式表优先级：
内联样式>内部样式表>外部样式表
有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
| <head> |
| <style type="text/css"> |
| /* 内部样式 */ |
| h3{color:green;} |
| </style> |
| <!-- 外部样式 style.css --> |
| <link rel="stylesheet" type="text/css" href="style.css"/> |
| <!-- 设置：h3{color:blue;} --> |
| </head> |
| <body> |
| <h3>测试！</h3> |
| </body> |
两种方式：
选择器优先级相同时，谁后加载谁生效
选择器优先级不同时，谁优先级高谁生效
CSS样式具有继承性：
继承性是指指被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父元素的属性，例如下面的代码，div中包含2个p标签，1个span标签，当给div设置字体颜色为红色时，他的子标签会继承父元素的属性，因而会显示红色。 在CSS中以text-、font-、line- 开头的属性都是可以继承的。
示例代码：
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title></title>
- <style>
- div {
- color: red;
- }
- </style>
- </head>
- <body>
- <div>
- <p>苹果</p>
- <p>香蕉</p>
- <span>葡萄</span>
- </div>
- </body>
- </html>
显示结果如下：
苹果
香蕉
葡萄