超链接
超链接是HTML5中常用的链接之一，超链接可以实现页面与页面的对接
超链接的规范写法
<a href="这里写跳转网址" target="_blank">给链接起名字</a>
关于超链接的小练习
<!DOCTYPE html>
<html>
<head>
<title>一曲相思</title>
<meta charset="utf-8" />
<style type="text/css"></style>
</head>
<body>
<center>
<a id="a" href="#b">去底部</input></a>
<h2>一曲相思.半阳</h2>
<hr></hr>
<h4>《一曲相思》</h4>
<a href="https://baike.baidu.com/item/%E5%8D%8A%E9%98%B3/23129760?fr=aladdin" target="_blank">半阳</a>
<p>这人间袅袅炊烟</p>
<p>和风花雪月浪漫</p>
<p>痴情人多半贪恋</p>
<img src="./img/半阳一曲相思.jpg" alt="半阳组图" width="300px" height="300px" />
<p>这人间袅袅炊烟</p>
<p>和风花雪月浪漫</p>
<p>痴情人多半贪恋</p>
<img src="https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D220/sign=ba01c9ecab1ea8d38e227306a70b30cf/0824ab18972bd407bc01adaa76899e510eb309a6.jpg" alt="半阳组图" width="146px" height="220px" />
<p>欲问青天这人生有几何</p>
<p>怕这去日苦多</p>
<p>往事讨一杯相思喝</p>
<hr></hr>
<a id="b"href="#a">回顶部</a>
<p>友情链接：<a href="https://baike.baidu.com/item/%E5%8D%8A%E9%98%B3/23129760?fr=aladdin" target="_blank">1</a>|<a href="https://baike.baidu.com/item/%E5%8D%8A%E9%98%B3/23129760?fr=aladdin" target="_blank">2</a>|<a href="https://baike.baidu.com/item/%E5%8D%8A%E9%98%B3/23129760?fr=aladdin" target="_blank">3</a></p>
</center>
</body>
</html>
锚链接
锚链接就是给超链接起一个唯一id
其写法与超链接相似,主要用于页面主页面的直接跳转，比如：直接跳转到底部或顶部。
锚链接的规范写法
<a id="a" href="#b">去底部</a>
<a id="b" href="#a">去顶部</a>
CSS选择器
作用：CSS选择器主要用来对网页中的元素进行设置样式
CSS选择器的规范写法
标签名{ }
类选择器
作用：根据元素的class值进行选取元素
语法
.className { }
ID选择器
作用：根据元素的id属性值选取元素
语法
#id { }
符合选择器（交集选择器）
作用：可以同时使用多个选择器，这样可以选择同时满足多个选择器的元素。
语法
选择器1选择器2 { }
群组选择器（并集选择器）
作用：可以同时使用多个选择器，多个选择器将被同时应用指定的样式
语法
选择器1，选择器2，选择器3 { }
通用选择器
作用：可以选中页面中所有的元素
语法
* { }
选择器小练习
1，plate 元素选择器
2，bento 元素选择器
3，#fancyID id选择器
4，plate apple 子元素选择器
5，#fancy pickle
6，.small 类选择器
7，bento.small,plate.small
8，bento orange
9，plate,bento,plate
10，*通用选择器
网友评论