# 文本标签
标签名 | 语义和功能 | 属性 | 单双标签 |
em | 表示强调,斜体字 | 双 | |
strong | 表示强调,粗体字 | 双 | |
del | 表示删除,给文本加删除线 | 双 | |
ins | 增加的内容,给i文本添加下划线 | 双 | |
sup | 表示上标字 | 双 | |
sub | 表示下标字 | 双 | |
span | 没有语义(用的最多) | 双 |
# 图片标签
标签名 | 语义和功能 | 属性 | 单双标签 |
img | 在网页中插入图片 | src:设置图片文件的地址(路径)。 alt:设置图片的代替文字。 width:设置图片宽度。 height: 设置图片高度。 | 单 |
1. alt 属性用于设置图片的代替文字,当图片无法正常加载,会显示代替文字。
2. 设置图片尺寸的时候,如果只设置 width 或者 height,另外一个会根据比例自动缩放。
常见图片格式
jpg / jpeg
png
gif
#
相对路径和绝对路径
当前文件: 代码所在的文件。
目标文件: 代码中要引入的文件。
绝对路径
1. 绝对路径指的是文件绝对位置,与当前文件所处的位置无关。
2. 前端中使用的绝对路径是文件在网络中的地址,也称为 URL(统一资源定位符)。
3. 目标文件不论是否与网页文件在同一台计算中,都可以通过绝对路径访问
注意:计算中的文件要想被通过绝对路径访问,该计算机必须部署web服务器。
相对路径
1. 根据目标文件相对于当前文件处于什么样的位置
2. 目标文件在当前的文件的同级或者下一级
./ 开头的路径
./ 可以省略
3. 目标文件在当前文件的上级以及更上级或者必须通过上级才能访问到
../ 开头的路径
HTML 中使用路径的场景
1. 使用 img 标签引入图片文件
2. 使用 video 标签引入视频文件
3. 使用 audio 标签引入音频文件
4. 使用 iframe 标签引入多种类型的文件
5. 使用 script 标签引入 js 文件
6. 使用 a 标签关联目标文件
7. 使用 link 标签关联 css 文件
...
超链接和锚点
标签名 | 语义和功能 | 属性 | 单双标签 | |
a | 设置超链接 | href:设置目标文件的地址。 target:设置目标文件打开的窗口; 值: |
|
1. a 标签只有设置了 href 属性才能称为超链接
2. 超链接 target 属性的默认值是 _self,表示目标文件在本窗口打开;将 target 属性的值设置成 _blank,目标文件将在新窗口打开
1. 如果超链接目标文件的类型,浏览器能够打开,点击超链接,直接打开目标文件
2. 如果超链接目标文件的类型,浏览器打不开,点击超链接,直接下载。
超链接的其他特殊功能
<a href="mailto:fuming@atguigu.cn">发邮件</a>
<a href="tel:10086">打电话</a>
<a href="sms:10086">发短信</a>
<a href="">点击刷新</a>
如何设置锚点
1. 给标签设置 id 属性,该标签就会称为锚点,id 属性的值就是锚点名。
2. 所有的标签都可以设置 id 属性,但是各个标签 id 属性的值不能相同。
<!-- 跳转到本页面指定的锚点 -->
<a href="#锚点名">本页面中制定的锚点</a>
<!--跳转到其他页面指定的锚点-->
<a href="页面地址#锚点名"></a>
<!--跳转到页面顶部-->
<a href="#">返回顶部</a>