关于HTML的常用标签
- 前言
- html常用标签
- 排版标签
- 图像标签
- 链接标签
- 注释标签
- 预格式化文本pre标签&特殊字符
- 语义化标签
前言
本文主要是对html的常用标签一个总结归纳，对所学的内容做一个查漏补缺。如果有不对的地方，欢迎指正哦！
html常用标签
HTML（Hypetext Markup Language）超文本标记语言。所谓超文本，其实就是它超越了文本本身的范畴，含有超链接，可以通过点击使浏览器获得新的页面。而标记就是将文本的内容通过不同的标签区分开来，使浏览器可以通过标签正常渲染标记的内容。它不属于编程语言，属于解释型标记语言，对书写出错的标记浏览器不指出其错误，且不会停止其解释执行过程，编制者只能通过显示效果来分析出错的原因和出错部位。需要注意的是，对于不同的浏览器，对同一标记符可能有不完全相同的解释，因而可能有不同的效果。以下是一些常用标签的类型。
排版标签
排版标签是用来显示网页结构的标签，通常有以下几种类型：
- 标题标签（h1~h6）
- 段落标签（p）
- 水平线标签（hr）
- 换行标签（br）
- div和span标签，没有具体语义，用于网页布局。
除此之外还有突出字体显示的标签也属于排版标签，比如：
- 文字粗体显示：b和strong，两者没有明显的区别，但是最好还是使用strong标签，使标签更语义化
- 文字斜体显示：i和em，推荐使用em。
- 文字加删除线：s和del
- 文字加下划线：u和ins
示例：
图像标签
1、图像标签语法格式：
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | URL | 图像的路径 |
| alt | 文本 | 图像不能显示时的替换文本 |
| title | 文本 | 鼠标悬停时显示的内容 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 规定图像周围的边框的宽度 （该属性在html4和XHTML中不在使用） |
注意：
- 标签可以有多个属性，每个属性用空格隔开，写在标签名后面
- 属性不分先后顺序，均采取键值对的格式，即key="value"的格式
链接标签
链接标签是重点标签，它的语法格式如下所示：
文本或图像
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的url地址，为必须属性 |
| target | 用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank表示打开一个新窗口 |
锚点定位：通过创建锚点链接使用户快速定位到目标位置
- 使用相应的id名标注跳转的目标位置。
目标位置
- 使用链接文本创建链接文本
注意：
- 外部链接 需要写上url地址，比如http:// www.baidu.com
- 内部链接 直接写上内部文件的路径即可
- 如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
- 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
注释标签
注释标签用来解析代码的含义，方便阅读标记。快捷键：ctrl+'/'或者shift+ctrl+'/'，一般团队约定注释写在注释代码的上面，单独占一行。
预格式化文本pre标签&特殊字符
pre标签可以保空格符和换行符。而文本也会呈现为等宽字体。格式化的意思是指它可以按照我们设定的文字格式来显示页面。一般在文章中需要展示代码时会使用到pre标签，有些会与code标签搭配使用，其中code标签主要起到语义化的作用。这里需要注意的是，pre标签里面的特殊字符需要用到转义代码，否则会当做html标签渲染。常用特殊字符如下表所示：
| 特殊字符 | 描述 | 字符代码 |
|---|---|---|
| 空格符 | ||
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| ? | 版权 | © |
| ? | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| 2 | 平方2（上标2） | ² |
| 3 | 立方3（上标3） | ³ |
| " | 引号 | " |
示例：
语义化标签
为什么会用语义化标签呢？有两个原因：
-
方便浏览器读取页面
-
方便程序员理解代码，提高代码的可读性
刚学习html时，我们都喜欢用DIV+CSS来布局我们的页面，这样写起来方便但是却使我们的文档结构不够清晰，不利于浏览器对页面的读取，所以HTML5增加了新的语义化标签，便于团队开发和维护，提高代码可读性，也使浏览器能够更好的读取页面结构，减少差异化。
常用的语义化标签
| 标签 | 标签名 |
|---|---|
| 头部 | |
| 导航栏 | |
| 区块（有语义化的div） | |
| 主要区域 | |
| 主要内容 | |
| 侧边栏 | |
| 底部 |
页面布局如下所示：
参考文章：
https://mp.weixin.qq.com/s/lNkLbVL8qWsay8c3krVL8A
https://www.wenjiangs.com/article/use-pre-show-code.html
https://blog.csdn.net/liuyingv8/article/details/80800841