1、列表（list) ：表示多个并列关系
有序列表：（数字表示顺序，开发时不用）------ol li
ol标签创建一个有序列表
使用li 标签表示列表中的项
无序列表：（小黑点表顺序，开发时不用）---------做导航条--------ul li
ul标签创建一个有序列表
使用li 标签表示列表中的项
列表之间可以互相嵌套，有序列表中可放无序列表，无序列表中可放有序列表
定义列表：主要对于一些内容下定义 ----------dl dt dd
dl 创建定义列表
在dl 中，用dt ，表示定义项
用dd，描述定义项
2、CSS （层叠样式表） : 处理网页的表现
网页中所有外在显示效果都由CSS控制
【1】CSS书写方式
1）内联样式：直接将css代码编写到标签的style 属性中（会导致结构和表现耦合 1、不方便代码复用 2、不方便代码的维护 3、开发时不使用此内联样式）
2） 内部样式表：将样式编写到style 标签中，style 标签需写在head里。通过CSS选择器，选择指定的元素并为其设置样式。（1、将html和css代码分离开，2、使CSS样式可以复用，3、方便后期的维护 ）
3）外部样式表：将CSS代码编写到外部的CSS文件中，然后通过 link 标签引入到页面中。(外部文件直接写样式) 1、 将CSS写在外部的样式表中，使结构和表现完全分离，2、可以在不同的页面中对样式表进行复用，方便后期的维护。将样式表写在外部文件中，可以充分的利用到浏览器的缓存机制，进而加快页面的加载速度，提高用户体验
【2】CSS语法
语法结构：选择器 声明块
1）选择器（本例子中的P)：通过选择器可以选中页面中的指定元素 （例：P 选中所有P元素）
2）声明块：
- 整体是一对大括号
- 声明块由一个一个的声明组成
- 声明是一个名值对结构：
样式名对应一个样式值
名和值之间使用:连接，使用;结尾
- 声明块中的所有样式将会应用到其前边的选择器所对应的元素上
1>元素选择器
作用：根据标签名来选中指定的元素
语法：标签名
例子：p{} div{} span{}
2>id选择器
作用：根据元素的id属性值，选中一个元素
语法：#id
例子： #p1{} #box{}
3>类选择器
作用：根据元素的class属性选中元素
语法：.class
例子：.p1{} .box{}
除了id属性，也可以为元素添加一个class属性
class的作用的是为元素进行分类
拥有相同class属性的元素属于同一类元素
设置方式也和id基本一致，不同的是class属性可以重复使用
可以同时为一个元素设置多个class
4>选择器分组（并集选择器）
作用：可以同时为多个选择器设置同样的样式
语法：选择器1, 选择器,...选择器N（选择器都可以放一起，不分类型）
例子：#p2, div, span {}
5>通配选择器
作用：选中页面中的所有元素
语法：*
例子：
*{
color: red
}
6>交集选择器
作用：选中同时符合多个选择器的元素
语法：选择器1选择器2...选择器N
例子： div.box{}--------div .box 是两个选择器
7>后代元素选择器
作用：选中指定元素的指定后代
语法：祖先 后代{}
例子： div span{}
8>子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素
9>兄弟元素选择器
作用：选中指定的元素的兄弟元素
语法：兄 + 弟 {}
选择紧随其后的一个兄弟元素
语法：兄 ~ 弟 {}
选择其后边所有兄弟元素
10>伪类选择器 （都以 ：号开头） 一般用来表示元素的一些特殊的状态或者特殊的位置
1） :first-child
-表示第一个子元素（在所有的子元素中查找）
2）:first-of-type
-同类型中的第一个子元素
3) :last-child
:last-of-type
4) :nth-child( 这里写数字，代表第几个子元素 )
-第n个子元素 odd表示单数 even表示双数
:nth-of-type()
-同类型的第n个子元素 ...
5）:only-child : 有且只有一个元素
<div class=”p1”> </div>
-唯一的一个子元素
:only-of-type
-同类型中唯一的一个子元素
6) :empty
-匹配空元素
7) :not()
-否定伪类，表示除了
11> [endif]a的伪类
:link
- 正常的超链接，链接都可以用（带有href的a标签）
-主要用来设置没有访问的链接的样式
:visited
-访问过的超链接（只能修改字体的颜色）
:hover
-鼠标移入的状态（不仅仅适用于超链接）
:active
-鼠标正在点击的状态（不仅仅适用于超链接）
【3】快捷键：CTRL+B 改名
【4】元素间的关系
父元素：直接包含子元素的元素
子元素：直接被父元素所包含的元素
祖先元素：直接或间接包含后代元素的元素
父元素也属于祖先元素
后代元素：直接或间接被祖先元素包含的元素
子元素也属于后代元素
兄弟元素：拥有相同父元素的元素
网友评论