餐厅联系
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)
作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>东风破</title>
<style type="test/css">
</style>
</head>
<body>
<center>
<a href="#" target="_blank">去底部</a>
<a href="#" target="_blank">去指定位置</a>
<h1>这是我的个人博客</h1>
<hr>
<h2>东风破</h2>
<a href="http://www.zhoujielun.com" target="_blank" name="qq">周杰伦</a>
<p>一盏离愁孤灯伫立在窗口</p>
<p>我在门后假装你人还没走</p>
<p>旧地如重游月圆更寂寞</p>
<p>夜半清醒的烛火不忍苛责我</p>
<p>一壶漂泊浪迹天涯难入喉</p>
<p>你走之后酒暖回忆思念瘦</p>
<p>水向东流时间怎么偷</p>
<p>花开就一次成熟我却错过</p>
<p>谁在用琵琶弹奏一曲东风破</p>
<p>岁月在墙上剥落看见小时候</p>
<p>犹记得那年我们都还很年幼</p>
<p>而如今琴声幽幽我的等候你没听过</p>s
<img src="https://img01.sogoucdn.com/app/a/100520093/453d6c68217a4fae-7a8c60269214c589-f3de86084f5e852955f97c9209954be9.jpg" width="400px">
<p>谁在用琵琶弹奏一曲东风破</p>
<p>枫叶将故事染色结局我看透</p>
<p>篱笆外的古道我牵着你走过</p>
<p>荒烟蔓草的年头就连分手都很沉默</p>
<p>一壶漂泊浪迹天涯难入喉</p>
<p>你走之后酒暖回忆思念瘦</p>
<p>水向东流时间怎么偷</p>
<p>花开就一次成熟我却错过</p>
<p>谁在用琵琶弹奏一曲东风破</p>
<p>岁月在墙上剥落看见小时候</p>
<p>犹记得那年我们都还很年幼</p>
<p>而如今琴声幽幽我的等候你没听过</p>
<p>谁在用琵琶弹奏一曲东风破</p>
<p>枫叶将故事染色结局我看透</p>
<p>篱笆外的古道我牵着你走过</p>
<p>荒烟蔓草的年头就连分手都</p>
<img src="http://a4.att.hudong.com/35/84/01300000234985122043846480800.jpg"width="400px">
<p>谁在用琵琶弹奏一曲东风破</p>
<p>岁月在墙上剥落看见小时候</p>
<p>犹记得那年我们都还很年幼</p>
<p>而如今琴声幽幽我的等候你没听过</p>
<p>谁在用琵琶弹奏一曲东风破</p>
<p>枫叶将故事染色结局我看透</p>
<p>篱笆外的古道我牵着你走过</p>
<p>荒烟蔓草的年头就连分手都很沉默</p>
<hr>
<a>友情链接：</a>
<a href="#" target="_blank">A网站</a>
<a>|</a>
<a href="#" target="_blank">B网站</a>
<a>|</a>
<a href="#" target="_blank">C网站</a>
<br>
<p></p>
<a href="#" target="_blank">回到顶部</a>
<a>|</a>
<a href="#" target="_blank">联系我们</a>
</center>
</body>
</html>
内联框架
使用内联框架可以引入一个外部的页面
使用iframe来创建一个内联框架
属性：
src：指向一个外部页面的路径，可以使用相对路径
width：
height：
name：可以为内联框架指定一个name属性
在现实开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索
<iframe src="demo010_XHTML的语法规范.html" name="tom"></iframe>
超链接
使用超链接可以让我们从一个页面跳转到另一个页面
使用a标签来创建一个超链接
属性：
href：指向链接跳转的目标地址，可以写一个相对路径，也可以写一个完整的地址
<a href="http://www.baidu.com">我是一个超链接</a><br /><br />
<a href="http://www.baidu1234567.com">我是一个超链接</a><br /><br />
a标签中的target属性可以用来指定打开链接的位置
可选值：
_self：表示在当前窗口中打开（默认值）
_blank：在新的窗口中打开链接
可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开
<a href="demo011_内联框架.html" target="tom">我是一个超链接</a><br /><br />
<iframe src="demo010_XHTML的语法规范.html" name="tom"></iframe>
center标签中的内容，会默认在页面中居中显示
我们可以将要居中的元素全都放到center中
<center>
<p>我是一个p标签</p>
</center>
css
也可以将CSS样式编写到head中的style标签里，称为内部样式表
将样式表编写的style标签中，然后通过CSS选择器选中指定元素
然后可以同时为这些元素一起设置样式，这样可以使样式进一步的复用
将样式表编写到style标签中，也可以使表现和结构进一步分离，它也是我们推荐的使用方式
<style type="text/css">
p{
color:red;
font-size:40px;
}
</style>
还可以将样式表编写到外部的CSS文件中，然后通过link标签来将外部的CSS文件引入到当前页面中
这样外部文件中的CSS样式表将会应用到当前页面中
将CSS样式统一编写到外部的样式表中，完全使结构和表现分离，可以使样式表在不同的页面中使用
最大限度地使样式可以进行复用，将样式统一写在样式表中，然后通过link标签引入
可以利用浏览器的缓存，加快用户访问的速度，提高了用户体验
所以在开发中我们最推荐使用的方式就是外部的CSS文件
<link rel="stylesheet" type="text/css" href="style.css" />
css 语法
CSS的注释，作用和HTML注释类似，只不过它必须编写在style标签中，或者是CSS文件中
CSS的语法：
选择器 声明块
选择器：
- 通过选择器可以选中页面中指定的元素，并且将声明块中的样式应用到选择器对应的元素上
声明块：
- 声明块紧跟在选择器的后边，使用一对{}括起来
- 声明块中实际上就是一组一组的名值对结构
- 这一组一组的名值对我们称为声明
- 在一个声明块中可以写多个声明，多个声明之间使用;隔开
- 声明的样式名和样式值之间使用:来连接
p{
color:red;
font-size:40px;
}
开发工具
<link rel="stylesheet" type="text/css" href="css/style.css">
块和内联
块元素
所谓的块元素就是会独占一行的元素
无论它的内容有多少，它都会独占一整行
常见的块元素：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;
}
网友评论