目录
1.A标签
一、a标签
-控制页面与页面之间跳转的
1.格式：
<a href="指定需要跳转的页面网址">展现在网页上的内容</a>
注意
-url地址需要写全面，加上“http://”或"https://"不然会not found
-不只可以让文字跳转，也可以让图片跳转
1.例：
【错误】<a href="www.baidu.com">百度一下，你就知道</a>
404.png
【正确】<a href="http://www.baidu.com">百度一下，你就知道</a>
正确的页面.png
2.例：
【图片】
<a href="https://baike.baidu.com/item/%E9%83%91%E4%BC%8A%E5%81%A5/324247?fr=aladdin"><img src="郑伊健.jpg" height="250"alt="图片不见了"></a>
点击图片之前.png
点击图片之后.png
2.跳转到本机网页
-例：
<a href="hr标签.html">hr标签</a>（hr标签网页与该网页在同一个文件夹）
本地地址.png
3.a标签中target属性
-作用：
控制网页如何跳转
- _self
<a href="hr标签.html"target="_self">hr标签</a>
在当前选项卡中跳转，不新建跳转。
默认为_self - _blank
<a href="hr标签.html"target="_blank">hr标签</a>
新建页面跳转
4.a标签中title属性
- <a href="hr标签.html"target="_blank"title="hr标签">hr标签</a>
- 与img标签中的title一样，用于控制鼠标悬停时候的文字
二、base标签
- 专门用来统一制定当前网页中所有的超链接如何打开（是新建选项卡还是在当前页面打开）
注意
- 需要写在head标签内
- 如果既在base中指定了target标签内容，又在a标签中指定了target，那么会根据a标签中的内容来执行
三、假链接
- 点击链接之后不会跳转
- 企业开发前期，其他页面都没有写出来，无法跳转，只能使用假链接代替
1.格式
-
"#"
<a href="#">百度一下你就知道</a> -
"javascript:" 此时的":"为英文符号
<a href="javascript:">百度一下你就知道</a> -
二者区别：
“#”的假链接点击之后会自动回到网页顶部而“javascript:”不会
“回到顶部”就是使用“#”做出来的
四、锚点
1. 通过a标签跳转到页面指定位置
- 给目标位置的标签添加一个id属性，之后指定一个独一无二的值
-
告诉a标签这个独一无二的值是多少
顶部跳转到中部.png
- 注意
- 通过a标签跳转到指定位置是没有过渡过程的，而是直接跳转到指定位置
-
除了可以跳转到当前界面的指定位置之外，还可以跳转到其它界面的指定位置
例：
<a href="锚点测试.html#buttom">跳转到锚点测试界面</a>
锚点页面.png
<h2 id="buttom">测试界面3</h2>
锚点测试页面.png
五、无序列表
- 列表标签： 给一堆数据添加列表语义
1. HTML中列表标签的分类：
- 无序列表（使用最多）（unordered list）
- 定义列表（其次）（definition list）
- 有序列表 （最少）（ordered list）
2. 无序列表作用：
给一堆数据添加列表语义，没有先后之分
3. 格式
<ul>
<li> 需要显示的条目内容</li>
</ul>
其中 ul为UNordered list 缩写 li 为list item缩写
例：
<h2>中国的城市有哪些？</h2>
<ul>
<li> 广东</li>
<li> 上海</li>
<li> 北京</li>
<li> 长春</li>
</ul>
image.png
- 注意
- ul标签是用来给数据添加语义的而不是添加“·”
- 列表前面的小圆点可以去掉
- 使用ul标签也可以表示有序列表
例：
<h2>中国的城市有哪些？</h2>
<ul>
<li> 1.广东</li>
<li> 2.上海</li>
<li> 3.北京</li>
<li> 4.长春</li>
</ul>
image.png
- ul标签与li标签组合使用，所以ul标签内不会出现其他标签。但是li标签中还是可以出现其它标签的，包括ul标签
4.应用场景
- 导航条
- 新闻列表
- 商品列表
5.生成ul li快捷键
-
ul>li*2>h2+ul>li
-按下TAB键
-自动生成
例：
生成之前.png
生成之后.png
六、有序列表
- 给一堆数据添加语义，数据有先后之分
1. 格式：
<ol>
<li></li>
</ol>
- 其他用法与ul相同
七、定义列表
1. 格式
<dl>
<dt>
<dd>
</dd>
</dt>
</dl>
dt ：定义列表中的标题
dd ：定义标题对应的描述
例：
image.png
image.png
2.定义列表的应用场景：
-
网站尾部的相关信息
image.png
- 做图文混排
3.注意点
- dl和dt dd也是一个整体，一起出现
- dl中 一般只出现dt dd标签 而dt dd中可以添加其他标签
- 推荐一个dt对应一个dd
4. 快捷生成方式
- dl>dt+dd
- 按下 tab 键
- 自动生成
网友评论