【web超链接和列表】
一、页面间的超链接
页面间超链接
a标签。a标签表示超链接
herf属性表示超链接地址,也就是单击超链接之后跳转到的地址
![](https://img-blog.csdnimg.cn/img_convert/977169ba7fa227fe37dbb783c8b6f5b8.png)
点击优酷
![](https://img-blog.csdnimg.cn/img_convert/6c4c76607bd534642cc29536c5a3f818.png)
点击一个优酷的图片,进入优酷的网站
![](https://img-blog.csdnimg.cn/img_convert/8f588fc013c6ab518db58c54447ab723.png)
![](https://img-blog.csdnimg.cn/img_convert/a6dcdcb348b6cd4f9f6a5c0023e4a719.png)
target属性
属性值 | 语义 | 属性值 | 语义 |
_self | 默认方式,既在当前窗口打开超链接 | _top | 在顶层框架中打开超链接 |
_blank | 在一个全新的空白窗口中打开超链接 | _parent | 在当前框架的上一层打开超链接 |
target中常用"_self" "_blank"两个属性值
锚链接
锚链接,就是单击某一个链接,就会跳转到当前页面的某一部分
设置目标位置锚点di名称,在要跳转到的地方添加id(在同一个页面中,id是唯一的,不能出现相同的id)
在href中设置锚链接,格式为“#”+id名称
![](https://img-blog.csdnimg.cn/img_convert/f12207d60da45498240fc8d27a87f58a.png)
![](https://img-blog.csdnimg.cn/img_convert/d17975c74ee82bdb7b227112bbc89ed5.png)
![](https://img-blog.csdnimg.cn/img_convert/72aa492a9f44bffed1fc9f0922ac1780.png)
点击网页会返回网页的位置
![](https://img-blog.csdnimg.cn/img_convert/91e9dacafc77ea17b0de47319ab0c4f8.png)
单击王维会回到王维的位置
![](https://img-blog.csdnimg.cn/img_convert/93e78b7109b49e4b3294a76f34997a2b.png)
页面制作
href="#"表示空链接,在网页开发时,如果需要链接的网页还没有制作完成,可用空连接代替
按Ctrl+s组合键保存网页
![](https://img-blog.csdnimg.cn/img_convert/e733206cb25be3f8e55f0cb76e9e986f.png)
我在主页中建立了一个链接,三个页面之间点击链接就可以相互转换
![](https://img-blog.csdnimg.cn/img_convert/bb589e30c5b472cb552971cedb05f8c1.png)
![](https://img-blog.csdnimg.cn/img_convert/614cdd200388c39770dc490192b1f6a2.png)
点开链接是图片网
![](https://img-blog.csdnimg.cn/img_convert/2ce959743d0746f0b31385b21444d237.png)
![](https://img-blog.csdnimg.cn/img_convert/c53f8791daba9373cae8036450de50c1.png)
点击“back”会返回到主页中,点击“返回顶部会跳会顶部页面”,点击“去听听励志的语录吧”会跳到下面的界面
![](https://img-blog.csdnimg.cn/img_convert/d86e9d46f554c00ec2d5635e7188f109.png)
![](https://img-blog.csdnimg.cn/img_convert/adffa1e69ac617af827160ebda314956.png)
二、列表
有序列表(用ol,il,来定义。ol嵌套li)
有序列表从<ol>开始,到</ol>结束,中间的列表项是li标签内容
ol和il要配合使用,不能单独使用
![](https://img-blog.csdnimg.cn/img_convert/5a3eec190bc9f67512c84ca6fd747189.png)
![](https://img-blog.csdnimg.cn/img_convert/6a0dcc5239b87ab0db69e0b27a9c62a8.png)
有序列表前面的数字格式可以用CSS样式改变
![](https://img-blog.csdnimg.cn/img_convert/788d6dfe628e933b42dfd83f519aea2e.png)
无序列表(ul嵌套li)
无序列表的列表项是没有规律的
![](https://img-blog.csdnimg.cn/img_convert/3361fd953b082f9f56be9f59a8d59a09.png)
定义列表(dl嵌套dt,dt嵌套dd)
用dl来声明一个自定义列表,用dt来声明列表表项,用dd声明列表项内容
![](https://img-blog.csdnimg.cn/img_convert/3fb4810296606cb44f0cd579e24ffa9a.png)
将它的属性改变一下
![](https://img-blog.csdnimg.cn/img_convert/3d6e37fc4eb01dca131598fcf6424a87.png)
现在我做一个这样的网页
![](https://img-blog.csdnimg.cn/img_convert/1cfb3c52cf263aff189073793d73b452.png)
![](https://img-blog.csdnimg.cn/img_convert/e170ac81a5f1f4832e80636ff202a8a5.png)
![](https://img-blog.csdnimg.cn/img_convert/87f57bee1fede2c2dcaacd55a538a314.png)