目录
1.A标签
一、a标签
-控制页面与页面之间跳转的
1.格式:
<a href="指定需要跳转的页面网址">展现在网页上的内容</a>
注意
-url地址需要写全面,加上“http://”或"https://"不然会not found
-不只可以让文字跳转,也可以让图片跳转
1.例:
【错误】<a href="www.baidu.com">百度一下,你就知道</a>
【正确】<a href="http://www.baidu.com">百度一下,你就知道</a>
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>
2.跳转到本机网页
-例:
<a href="hr标签.html">hr标签</a>(hr标签网页与该网页在同一个文件夹)
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>
五、无序列表
- 列表标签: 给一堆数据添加列表语义
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>
- 注意
- ul标签是用来给数据添加语义的而不是添加“·”
- 列表前面的小圆点可以去掉
- 使用ul标签也可以表示有序列表
例:
<h2>中国的城市有哪些?</h2>
<ul>
<li> 1.广东</li>
<li> 2.上海</li>
<li> 3.北京</li>
<li> 4.长春</li>
</ul>
- ul标签与li标签组合使用,所以ul标签内不会出现其他标签。但是li标签中还是可以出现其它标签的,包括ul标签
4.应用场景
- 导航条
- 新闻列表
- 商品列表
5.生成ul li快捷键
-
ul>li*2>h2+ul>li
-按下TAB键
-自动生成
例:
生成之前.png
六、有序列表
- 给一堆数据添加语义,数据有先后之分
1. 格式:
<ol>
<li></li>
</ol>
- 其他用法与ul相同
七、定义列表
1. 格式
<dl>
<dt>
<dd>
</dd>
</dt>
</dl>
dt :定义列表中的标题
dd :定义标题对应的描述
例:
2.定义列表的应用场景:
-
网站尾部的相关信息
image.png - 做图文混排
3.注意点
- dl和dt dd也是一个整体,一起出现
- dl中 一般只出现dt dd标签 而dt dd中可以添加其他标签
- 推荐一个dt对应一个dd
4. 快捷生成方式
- dl>dt+dd
- 按下 tab 键
- 自动生成