目录

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标签

• 专门用来统一制定当前网页中所有的超链接如何打开（是新建选项卡还是在当前页面打开）

注意

1. 需要写在head标签内
2. 如果既在base中指定了target标签内容，又在a标签中指定了target，那么会根据a标签中的内容来执行

三、假链接

• 点击链接之后不会跳转
• 企业开发前期，其他页面都没有写出来，无法跳转，只能使用假链接代替

1.格式

• "#"
  <a href="#">百度一下你就知道</a>

• "javascript:" 此时的":"为英文符号
  <a href="javascript:">百度一下你就知道</a>

• 二者区别：
  “#”的假链接点击之后会自动回到网页顶部而“javascript:”不会

“回到顶部”就是使用“#”做出来的

四、锚点

1. 通过a标签跳转到页面指定位置

1. 给目标位置的标签添加一个id属性，之后指定一个独一无二的值

2. 告诉a标签这个独一无二的值是多少

   
   
   顶部跳转到中部.png

• 注意

1. 通过a标签跳转到指定位置是没有过渡过程的，而是直接跳转到指定位置

2. 除了可以跳转到当前界面的指定位置之外，还可以跳转到其它界面的指定位置
   例：
   <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

• 注意

1. ul标签是用来给数据添加语义的而不是添加“·”
2. 列表前面的小圆点可以去掉
3. 使用ul标签也可以表示有序列表
   例：
   <h2>中国的城市有哪些？</h2>
   <ul>
   <li> 1.广东</li>
   <li> 2.上海</li>
   <li> 3.北京</li>
   <li> 4.长春</li>
   </ul>

image.png

4. 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 键
• 自动生成