1.html的注释
<!-- 这是页面的1级标题 -->
2.标题
在HTML一共有h1 ~ h6 六级标题6级标题中 h1最大 h6最小
从h1 到 h6 重要性依次降低,h1最重要，h2其次 依次递减
搜索引擎检索页面时，h1仅次于title，也会影响到页面在搜索引擎中的排名
一个页面一般只有一个h1标签一般页面中只会使用h1 ~ h3
3.p标签
段落标签 使用p标签来表示一个段落,段落标签会独占一行，并和其他内容会有一个距离
<p>
床前明月光<br />
疑是地上霜<br />
举头望明月<br />
低头思故乡<br />
</p>
在HTML中，默认将多个空格和换行认为是一个空格,使用br标签来表示一个换行
4.转义字符
在HTML中可以使用实体（转义字符），来表示一些特殊的字符
语法：
&实体的名字;
空格
< <
> >
版权符号 ©
使用转义字符，来表示一个Unicode编码, &#x编码; 编码需要的是4位的十六进制编码
<p>你 好</p>
a<b>c ©
<h1>✋</h1>
5.列表
列表类似于购物清单,HTML中一共有三种列表
1.无序列表
- 使用ul标签来创建一个无序列表
- 使用li向无序列表中添加列表项
- 无序列表默认使用 圆点 来作为项目符号
2.有序列表
- 有序列表和无序列表类似，不同的是它使用ol来创建其他的都和无序列表一样
- 有序列表使用有序的序号 作为项目符号
3.定义列表
- 定义列表用来对一些内容做解释说明的
- 使用 dl 来创建一个定义列表
- 在dl中使用dt，来创建一个定义项
- 使用dd来创建一个对定义项的描述
- 列表之间可以互相嵌套，可以在有序列表中放无序列表，也可以在无序列表放有序列表
<ul>
<li>西红柿</li>
<li>大茄子</li>
</ul>
<ol>
<li>桃花源记</li>
<li>岳阳楼记</li>
</ol>
6.a标签
href ：指定一个目标地址，点击超链接以后，将会跳转到该地址
可以指定一个外部网站的地址，也可以指定一个相对路径
target：指定在哪个窗口中打开目标页面
- 可选值：
_self 默认值 在当前窗口打开新的页面
_blank 在新的窗口中打开页面
<!-- 创建一个超链接，跳转到demo06页面 -->
<a href="demo06.html" target="_self">去DEMO06</a>
<!-- 创建一个超链接，跳转到demo06页面 -->
<a href="demo06.html" target="_blank">去DEMO06</a>
<!--
跳转到当前页面的指定位置
#id属性值
-->
<a href="#bottom">去底部</a>
<p id="p1">
在我的后园...
</p>
<a id="bottom" href="#">回到顶部</a>
<a href="#p1">去文章的开头</a>
7.css样式
基本语法：
选择器 声明块
声明实际上就是一个名值对结构，样式名:样式值;
1.将样式编写到元素的style属性中，我们称为内联样式,不推荐使用
<p style="color:red;font-size:60px;">落霞与孤鹜齐飞，秋水共长天一色</p>
2.可以将样式表编写到head中的style标签里 ,只能在当前页面中使用，不能在其他页面中应用,不推荐使用
<head>
<style type="text/css">
p {
color:red;
font-size:50px;
}
</style>
</head>
3.通过link引入，可以在不同的页面中同时应用相同的样式，使结构 和 表现完全分离，方便后期维护，是开发中用的最多的方式
<link rel="stylesheet" type="text/css" href="style.css" />
8.div和span
块元素（block）
- 在页面中块元素会独占一行，不会与其他元素出现在一行
- 无论内容多少，块元素总会独占一行
- 学习过的块元素
p h1~h6 ul ol dl li div....
- div是一个块元素，没有语义，在页面中使用div对页面进行布局
内联元素或行内元素（inline）
- 内联元素不会独占一行，只占自身内容的大小
- 学习过的内联元素
a img span
- 可以使用一个内联元素来选中一段文字，来为文字设置样式
- 在页面中主要使用块元素进行布局，使用内联元素来选中文字，
在页面中一般会使用块元素去包含内联元素，而不适用内联元素去包含块元素
a元素可以包含任意元素，除了他本身
p元素中不能包含任何的块元素
<div style=" width: 200px;">我是一个div</div>
<span style="background-color:green">我是一个span</span>
9.常用选择器
1.元素选择器,语法：标签名 {}
p {
font-size: 30px;
}
2.id选择器,唯一 语法：#id属性值 {}
#p1 {
color: cornflowerblue;
}
3.类选择器 ,语法：.class属性值 {}. 可以根据元素的class属性值选中一组元素
.p2{
background-color: yellow;
}
4.并集选择器, 语法：选择器1 , 选择器2 , 选择器N {}
.p3 , div , span{
color: green;
}
5.交集选择器,语法：选择器1选择器2选择器N {}
span.t1{
background-color: red;
}
6.通配选择器- 语法：* { }, 通配选择器的性能较差，尽量少用
* {
font-size: 50px;
}
可以为一个元素同时指定多个class，多个class值之间使用空格隔开
<p class="p2 p4 p5 p6 p7 p8">汗滴禾下土</p>
10.后代和子元素选择器
1.后代元素选择器,语法： 祖先元素 后代元素 {} ,中间是空格
div span{}
2.子元素选择器,语法：父元素 > 子元素{}
div > span{
background-color: yellow;
}
11.伪类选择器
<style type="text/css">
/*
* 将未访问过的链接设置为黄色
* :link
* - 正常的超链接（未访问过的超链接）
*/
a:link{
color: yellow;
}
/*
* 将访问过的链接设置为红色
* :visited
* - 已访问过的超链接
* - 是通过浏览器中是否有对应的历史记录，来判断链接访问过
* 但是由于隐私的原因，该为类只可以修改字体的颜色
*/
a:visited{
color: red;
}
/*
:hover
- 表示鼠标移入的元素
* */
a:hover{
color: blue;
}
/*
:active
- 表示元素正在被点击的状态
* */
a:active{
color: orange;
}
</style>
12.样式的继承
p{
font-size: 40px;
background-color: yellow;
}
利用继承可以将后代元素上的样式，统一设置给他们祖先元素，这样只需要设置一个，就可以同时应用到多个元素上
但是并不是所有的样式都会被继承，比如：背景相关的 边框相关 宽度 高度 等都不会被继承
13.选择器的优先级
当使用不同的选择器选择同一个元素，并且设置相同的样式时，此时会发生样式的冲突此时到底应用哪个样式由选择器的优先级来决定，优先级高的优先显示
选择器的优先级（权重）
1. 内联样式 优先级是 1000
2. id选择器 优先级是 100
#box1 {}
3. 类和伪类选择器 优先级 10
.b1.b2.b3.b4.b5.b6.b7.b8.b9.b10.b11 {}
4. 元素选择器 优先级 1
5. 通配选择器 优先级 0
6. 继承的样式 没有优先级
当一个选择器中含有多个选择器时，需要将所有的选择器的优先级进行相加，然后在进行比较
优先级高的优先显示，选择器的计算不会超过其最大的数量级
如果两个选择器的优先级相同，则谁在下边就用谁
如果在样式的最后添加一个!important，则该样式将会获取到最高的优先级，
将会优先于所有的样式显示，但是这个东西慎用
14.a标签的伪类
<style type="text/css">
/*
由于选择器的优先级的问题，所以在给a设置伪类时，一定要注意他们的顺序
我们一般使用的顺序是
link
visited
hover
active
* */
a:link{
color: red;
}
a:visited{
color: orange;
}
a:hover{
color: yellow;
}
a:active{
color: yellowgreen;
}
</style>
