web前端结构_HTML入门(三)_常用标签之超文本类标签

HTML常见超文本标签（三）

快速阅览：

• 布局标签 div
• 跨距标签 span
• 图片标签 img
• 超链接标签 a
• 注释标签 < !-- -->
• 特殊字符

1. 布局标签 div

• < div >< /div >
• div的主要作用用于布局网页
• 类似于盒子，将其他标签封装在一个盒子里，方便以后使用样式（css）对这个‘盒子’里的所有元素设置外观样式等，目前阶段接触不到太多div的用法

<div class="">
        <!--将需要封装的内容写进div里-->
</div>

2. 行内标签 span

• < span >< /span >
• 使用span来组合行内元素，以便通过样式（css）来格式化它们

<span class=""></span>

3. 图片标签 img

• < img src=“路径”/ >
• 使用 img 标签在网页中显示图片
• 其中 src属性不能少，src=“图片路径”

3.1绝对路径和相对路径

3.1.1 绝对路径：

（1）图片在电脑中所在的绝对位置
如：D:\桌面文件\picture\活动图片\circle.jgp

<img src="D:\桌面文件\picture\活动图片\circle.jpg"/>

（2）网络地址（仅联网时可用）
如：https://img01.sogoucdn.com/app/a/100520115/6e2eddfd974aa4ac4eaff2751e0a62e2

<img src="https://img01.sogoucdn.com/app/a/100520115/6e2eddfd974aa4ac4eaff2751e0a62e2"/>

3.1.2 相对路径：

• 图片相对于此html文件的路径
  (1）同级路径，所需图片与此html在同一目录下，直接写图片名称，如：imag.jgp

<img src="imag.jgp"/>

（2）上一级路径，所需图片在此html文件的上一级目录，使用…/可以完成跳转到上级目录的操作，如：…/imag.jgp

<img src="../imag.jgp"/>

（3）下一级路径，所需图片在此html文件所在目录的同级文件夹test内，如：test/imag.igp

<img src="../imag.jgp"/>

4. 超链接标签 a

• < a href=“链接”>< /a >
• target属性可以设置是否在当前窗口打开页面
• target="_self" 在当前窗口打开页面
• target="_blank"在新的窗口打开页面

<a href="#" target="_blank"></a>

4.1 外部链接

• 网络链接 如：href=“https://www.baidu.com/”

<a href="https://www.baidu.com/">点击文字可进入百度页面</a>

4.2 内部链接

• 打开html文件所在目录中的文件的链接，直接在目录文件夹中打开即可
• 如：gongsi.html

<a href=’gongsi.html’></a>

4.3 空链接

• 没考虑好放什么链接，使用 # 代表空链接

<a href=’#’></a>

4.4 下载链接

• 地址就写需要下载的文件所在地址
• 地址链接是文件 .exe 或者zip等压缩包的形式

<a href=’imag.jgp’></a>

4.5 锚点链接

• 锚点链接主要用于页面内部的快速定位
• 在链接文本href属性中设置属性值为#名字的形式如这是字
• 找到目标位置标签，里面添加一个id属性=“one”
• 如< h3 id=’one’ >这是需要跳到的地方< /h3 >

<a href="#one">an</a>
    <h3 id="one">会跳转到这里来</h3>

5. 注释标签 < !-- – >

• < !-- 你好 – >
• 在visual studio code里面使用Ctrl +/ 快捷键可快速创建注释标签

 <!-- 这是注释 -->

6. 特殊字符

• 较为常用 空格符 &nbsp ;