餐厅联系
1,plate
2,bento
3,#fancy
4,plate apple
5,#fancy pickle
6,apple.small,plate.small
7,orange.small
8,bento orange.small
9,plate,bento
10,*
11,plate>*
12,plate+small,plate+apple
13,bento~pickle
14,plate>apple
15,plate>:first-child
16,plate>:only-child
17,plate#fancy>apple.small,pickle.small
18,:nth-child(3)
19,:nth-last-child(4)
20,apple:firth-of-type
21,:nth-of-type(even)
22,:nth-of-type(2n+3)
23,apple:only-of-type
24,orange:last-of-type,apple:last-of-type
25,bento:empty
26,apple:not(.small)
作业
这是我的个人博客
东风破
一盏离愁孤灯伫立在窗口
我在门后假装你人还没走
旧地如重游月圆更寂寞
夜半清醒的烛火不忍苛责我
一壶漂泊浪迹天涯难入喉
你走之后酒暖回忆思念瘦
水向东流时间怎么偷
花开就一次成熟我却错过
谁在用琵琶弹奏一曲东风破
岁月在墙上剥落看见小时候
犹记得那年我们都还很年幼
而如今琴声幽幽我的等候你没听过
s 
谁在用琵琶弹奏一曲东风破
枫叶将故事染色结局我看透
篱笆外的古道我牵着你走过
荒烟蔓草的年头就连分手都很沉默
一壶漂泊浪迹天涯难入喉
你走之后酒暖回忆思念瘦
水向东流时间怎么偷
花开就一次成熟我却错过
谁在用琵琶弹奏一曲东风破
岁月在墙上剥落看见小时候
犹记得那年我们都还很年幼
而如今琴声幽幽我的等候你没听过
谁在用琵琶弹奏一曲东风破
枫叶将故事染色结局我看透
篱笆外的古道我牵着你走过
荒烟蔓草的年头就连分手都
谁在用琵琶弹奏一曲东风破
岁月在墙上剥落看见小时候
犹记得那年我们都还很年幼
而如今琴声幽幽我的等候你没听过
谁在用琵琶弹奏一曲东风破
枫叶将故事染色结局我看透
篱笆外的古道我牵着你走过
荒烟蔓草的年头就连分手都很沉默
内联框架
使用内联框架可以引入一个外部的页面
使用iframe来创建一个内联框架
属性：
src：指向一个外部页面的路径，可以使用相对路径
width：
height：
name：可以为内联框架指定一个name属性
在现实开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索
超链接
使用超链接可以让我们从一个页面跳转到另一个页面
使用a标签来创建一个超链接
属性：
href：指向链接跳转的目标地址，可以写一个相对路径，也可以写一个完整的地址
a标签中的target属性可以用来指定打开链接的位置
可选值：
_self：表示在当前窗口中打开（默认值）
_blank：在新的窗口中打开链接
可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开
center标签中的内容，会默认在页面中居中显示
我们可以将要居中的元素全都放到center中
我是一个p标签
css
也可以将CSS样式编写到head中的style标签里，称为内部样式表
将样式表编写的style标签中，然后通过CSS选择器选中指定元素
然后可以同时为这些元素一起设置样式，这样可以使样式进一步的复用
将样式表编写到style标签中，也可以使表现和结构进一步分离，它也是我们推荐的使用方式
还可以将样式表编写到外部的CSS文件中，然后通过link标签来将外部的CSS文件引入到当前页面中
这样外部文件中的CSS样式表将会应用到当前页面中
将CSS样式统一编写到外部的样式表中，完全使结构和表现分离，可以使样式表在不同的页面中使用
最大限度地使样式可以进行复用，将样式统一写在样式表中，然后通过link标签引入
可以利用浏览器的缓存，加快用户访问的速度，提高了用户体验
所以在开发中我们最推荐使用的方式就是外部的CSS文件
css 语法
CSS的注释，作用和HTML注释类似，只不过它必须编写在style标签中，或者是CSS文件中
CSS的语法：
选择器 声明块
选择器：
- 通过选择器可以选中页面中指定的元素，并且将声明块中的样式应用到选择器对应的元素上
声明块：
- 声明块紧跟在选择器的后边，使用一对{}括起来
- 声明块中实际上就是一组一组的名值对结构
- 这一组一组的名值对我们称为声明
- 在一个声明块中可以写多个声明，多个声明之间使用;隔开
- 声明的样式名和样式值之间使用:来连接
p{
color:red;
font-size:40px;
}
开发工具
块和内联
块元素
所谓的块元素就是会独占一行的元素
无论它的内容有多少，它都会独占一整行
常见的块元素：div p h1 h2 h3……
div这个标签没有任何语义，就是一个纯粹的块元素
并且不会为它里边的元素设置任何的默认样式
div元素主要用来对页面进行布局的
内联元素（行内元素）
所谓的行内元素指的是只占自身大小的元素，不会占用一行
常见的内联元素：span a img iframe
span没有任何语义，span标签专门用来选中文字，然后为文字来设置样式
块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式
一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素
a元素可以包含任意元素，除了他本身
p元素不可以包含任何其它的块元素
常用选择器
元素选择器
作用：通过元素选择器可以选择页面中的所有指定元素
语法：标签名{}
id选择器
作用：通过元素的id属性值选中唯一的一个元素
语法：#id属性值{}
类选择器
作用：通过元素的class属性值选中一组元素
语法：.class属性值{}
选择器分组（并集选择器）
作用：通过选择器分组可以同时选中多个选择器对应的元素
语法：选择器1,选择器2,选择器N{}
通配选择器
作用：可以用来选中页面中的所有的元素
语法：*{}
复合选择器（交集选择器）
作用：可以选中同时满足多个选择器的元素
语法：选择器1选择器2选择器N{}
子元素和后代元素选择器
后代元素选择器
作用：选中指定元素的指定后代元素
语法：祖先元素 后代元素{}
子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素
IE6及以下的浏览器不支持子元素选择器
元素之间的关系
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素
伪类选择器
类专门用来表示元素的一种特殊的状态
比如：访问过的超链接、普通的超链接、获取焦点的文本框
当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
为没访问过的链接设置一个颜色为绿色
:link 表示普通的链接（没访问过的链接）
a:link{
color: yellowgreen;
font-size: 50px;
}
为访问过的链接设置一个颜色为红色
:visited 表示访问过的链接
浏览器是通过历史记录来判断一个链接是否访问过
由于涉及到用户的隐私问题，所以使用:visited伪类只能设置字体的颜色
a:visited{
color: red;
}
:hover 表示鼠标移入的状态
a:hover{
color: skyblue;
}
:active 表示超链接被点击的状态
a:active{
color: black;
}
/*文本框获取焦点以后，修改背景颜色为黄色*/
input:focus{
background-color: yellow;
}
/*兼容大部分浏览器的*/
p::selection{
background-color: orange;
}
/*兼容火狐的*/
p::-moz-selection{
background-color: orange;
}
伪元素
p:before{
content: "我会出现在整个段落的最前边";
color: green;
}
p:after{
content: "我会出现在整个段落的最后边";
color: orange;
}
属性选择器
属性选择器
作用：可以根据元素中的属性或属性值来选取指定元素
语法：
[属性名] 选取含有指定属性的元素
[属性名="属性值"] 选取含有指定属性值的元素
[属性名^="属性值"] 选取属性值以指定内容开头的元素
[属性名$="属性值"] 选取属性值以指定内容结尾的元素
[属性名*="属性值"] 选取属性值包含指定内容的元素
子类选择器
为第一个p标签设置一个背景颜色为黄色
:first-child 可以选中第一个子元素
:last-child 可以选中最后一个子元素
:nth-child 可以选中任意位置的子元素
该选择器后边可以指定一个参数，指定要选中第几个子元素
even 表示偶数位置的子元素
odd 表示奇数位置的子元素
兄弟元素选择器
为span后的一个p元素设置一个背景颜色为黄色
后一个兄弟元素选择器
作用：可以选中一个元素后紧挨着的指定的兄弟元素
语法：前一个 + 后一个
span + p{
background-color: yellow;
}
选中后边的所有兄弟元素
语法：前一个 ~ 后边所有
span ~ p{
background-color: yellow;
}
否定伪类
为所有的p元素设置一个背景颜色为黄色，除了class值为hello的
否定伪类：
作用：可以从已选中的元素中剔除出某些元素
语法：
:not(选择器)
p:not(.hello){
background-color: yellow;
}