元素选择器
语法：标签名{}
例如p会选中页面中所有p标签，h1会选中所有h1标签
类选择器
语法：.className{}
例如hello会选中页面中所有class属性为hello的元素。
ID选择器
语法：#id{}
例如#b1会选中页面中所有class属性为#b1的元素,id属性不可重复。
复合选择器
语法：选择器1选择器2
例如siv.b1会选中页面中所有b1这个class的div元素。
群组选择器
语法：选择器1选择器2选择器3{}
例如：p,hello,#b1会同时选页面中p元素，class为hello,id为b1的元素。
通用选择器
语法：*{}
后代选择器
语法：祖先元素后代元素后代
例如：p strong 会选中页面中所有p元素内的strong元素。
兄弟元素选择器
语法：
查找后边一个兄弟元素
兄弟元素 + 兄弟元素{}
查找后边所有兄弟元素
兄弟元素 ~ 兄弟元素{}
否定伪类
语法:
not(选择器){}
例如：p:not(.hello)表示选择所有p元素但class为hello的除外。
权重（依次排列，优先级从高到低）
！important
内联（1000）
id（100）
类，伪类（10）
元素p（1）
通配（0）
继承样式无优先级
优先级一样用后面的
<em>和<strong>
em标签表示一段内容中的着重点
strong标签表示一个内容的重要性
em显示斜体，strong显示粗体。
<i>会使文本变成斜体
<b>会使文本变成粗体
<small>会显示一个比父元素小的字号
<cite>指明对某内容的引用或参考
<p>
<cite>《水浒》</cite>是本书
</p>
<blockquote>和<q>
blockquote用于长引用
q用于短引用
和
sup 定义上标
sub 定义下标
作业:
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta charset="utf-8">
</head>
<body>
<center>
<a href="#q">去底部</a>
<a href="#x">去指定位置</a>
<a name="p"></a>
<h1>这是我的个人博客</h1>
<hr/>
<h3>东风破</h3>
<a href="https://baike.baidu.com/item/周杰伦/129156?fr=aladdin">周杰伦</a></br>
<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="img/zhoujielun-1.jpg" alt="这是一张图片 ">
<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="img/zhoujielun-2.jpg" alt="这是一张图片">
<a name="x"></a>
<p>谁在用琵琶弹奏一曲东风破</p>
<p>岁月在墙上剥落看见小时候</p>
<p>犹记得那年我们都还很年幼</p>
<p>而如今琴声幽幽我的等候你没听过</p>
<p>谁在用琵琶弹奏一曲东风破</p>
<p>枫叶将故事染色结局我看透</p>
<p>篱笆外的古道我牵着你走过</p>
<p>荒烟漫草的年头就连分手都很沉默</p>
<hr/>
友情链接: <a href="http://www.baidu.com">A网站</a>
|
<a href="http://www.baidu.com">B网站</a>
|
<a href="http://www.baidu.com">C网站</a><br>
<a name="q"></a>
<a href="#p">回到顶部 </a>
|
<a href="http://www.baidu.com">联系我们</a>
</center>
</body>
</html>
网友评论