1 文本标签
文本标签常嵌套在格式排版标签中,其本身不再包裹别的标签,而是用于包裹某个词,而非大段文字。
标签名 | 语义和功能 | 属性 | 单标签or双标签 |
---|---|---|---|
em | 强调,默认表现为斜体 | 双标签 | |
strong | 强调,默认表现为粗体 | 双标签 | |
del | 表示已删除,默认文字上有删除线 | 双标签 | |
ins | 表示已插入,默认文字有下划线 | 双标签 | |
sup | 上标字 | 双标签 | |
sub | 下标字 | 双标签 |
注:
- 在HTML规范中
的强调语气比
更强,在实际开发中并未区分,两个都可以用;强调是为了让搜索引擎知道该关键词。
-
和标签常用于表示原价和现价。
-
和
可用于表示一些公式的上下脚标,如H2O、1003
2 图片
2.1 img 标签
标签名 | 语义和功能 | 属性 | 单标签or双标签 |
---|---|---|---|
img | 页面中显示图片 | src:指定图片的路径 alt:图片的替代文字 width:设置图片宽度 height:设置图片高度 |
单标签 |
注:
- alt属性的作用:1、搜索引擎可以通过alt属性来判断图片中的内容,便于浏览器搜索;2、图片无法正常显示时显示替代文字,可以知道这是一张什么图片,因此建议为
设置alt属性。 - width和height如果只设置一个,另一个会根据原图比例自动计算。因此通常只设置一个,如果两个同时设置,需保证比例正确,否侧图片会变形。
2.2 常见的图片格式
- jpg / jpeg 压缩
- png 无损
- gif 动图,损失程度最高
3 绝对路径和相对路径
如果目标文件与当前文件不在同一台计算机中,必须使用绝对路径访问目标文件;
如果目标文件与当前文件在同一台计算机中,使用相对路径会更加方便。
3.1 绝对路径
前端中,指一个文件在网络中的绝对的地址。如:
https://upload.jianshu.io/users/upload_avatars/xxxxx.jpg
3.2 相对路径
- ./ 表示当前文件所在目录。目标文件在当前文件的同级或下级时,路径以./开始。./可以省略。
- ../ 表示当前文件的上一级目录。目标文件在当前文件的上级或更上级时,路径以../开始。../不可以省略。../表示上一级,../../表示上两级,../../../表示上三级,以此类推。
4 超链接和锚点
4.1 a 标签
标签名 | 语义和功能 | 属性 | 单标签or双标签 |
---|---|---|---|
a | 设置超链接 | href:设置目标文件地址 target:设置目标文件在当前窗口(值: _self )还是在新窗口(值:_blank )打开name:设置锚点名 |
双标签 |
注:
-
只有具备了href属性的
标签才是超链接。
-
如果href的值为空,则目标文件即为当前文件自己,点击超链接将跳转至该网页本身,因此可以达到刷新页面的效果。
刷新当前页面
- a 标签中除了包裹文本,也可以包裹图片,即图片也可以作为一个超链接。
4.2 超链接
① 跳转到新的页面
简书首页
某个HTML文件
② 跳转到其他类型的文件
一般浏览器打开的都是html类型的文件。浏览器也可以打开其他类型的文件,基本上文本类型的文件都能打开,如:图片、pdf、视频;但一些不是文本类型的文件,如:.docx、.7z等压缩文件,浏览器不能直接打开,只能下载。
dog
dog
dog
dog
dog
dog
③ 超链接其他功能
不仅可以在网页上使用,也可以在手机上使用超链接,如:拨打电话、发送短信。
超链接也可以用于打开APP,比如:点击微信分享的淘宝链接,有的手机可以自动跳转至淘宝应用。
发送电子邮件
拨打电话
发送短信
4.3 锚点
作用:标记本页面或其他页面中的某一个位置,用超链接可以跳转至该位置。
点击能跳转至锚点的超链接时,锚点名会显示在网页地址的末尾。

① 如何设置锚点
方法一:通过标签的name属性设置锚点
方法二:通过给标签设置id属性来设置锚点(任何一个标签都可以)
② 如何跳转至锚点
使用超链接跳转至指定的锚点