关于HTML的常用标签

目录

• 前言
• html常用标签
  • 排版标签
  • 图像标签
  • 链接标签
  • 注释标签
  • 预格式化文本pre标签&特殊字符
  • 语义化标签

前言

本文主要是对html的常用标签一个总结归纳，对所学的内容做一个查漏补缺。如果有不对的地方，欢迎指正哦！

html常用标签

HTML（Hypetext Markup Language）超文本标记语言。所谓超文本，其实就是它超越了文本本身的范畴，含有超链接，可以通过点击使浏览器获得新的页面。而标记就是将文本的内容通过不同的标签区分开来，使浏览器可以通过标签正常渲染标记的内容。它不属于编程语言，属于解释型标记语言，对书写出错的标记浏览器不指出其错误，且不会停止其解释执行过程，编制者只能通过显示效果来分析出错的原因和出错部位。需要注意的是，对于不同的浏览器，对同一标记符可能有不完全相同的解释，因而可能有不同的效果。以下是一些常用标签的类型。

排版标签

排版标签是用来显示网页结构的标签，通常有以下几种类型：

• 标题标签（h1~h6）
• 段落标签（p）
• 水平线标签（hr）
• 换行标签（br）
• div和span标签，没有具体语义，用于网页布局。
  
  除此之外还有突出字体显示的标签也属于排版标签，比如：

1. 文字粗体显示：b和strong，两者没有明显的区别，但是最好还是使用strong标签，使标签更语义化
2. 文字斜体显示：i和em，推荐使用em。
3. 文字加删除线：s和del
4. 文字加下划线：u和ins
   
   示例：
   
   

---

---

图像标签

1、图像标签语法格式：

<img src="pic.jpeg" alt="图像不能显示时的替换文本" title="鼠标悬停时显示的内容" width="500" height="400" border="3">

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	规定图像周围的边框的宽度 （该属性在html4和XHTML中不在使用）

注意：

• 标签可以有多个属性，每个属性用空格隔开，写在标签名后面
• 属性不分先后顺序，均采取键值对的格式，即key="value"的格式

链接标签

链接标签是重点标签，它的语法格式如下所示：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

属性	作用
href	用于指定链接目标的url地址，为必须属性
target	用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank表示打开一个新窗口

锚点定位：通过创建锚点链接使用户快速定位到目标位置

• 使用相应的id名标注跳转的目标位置。
  
  <h3 id="taget">目标位置</h3>
• 使用<a href="#id名">链接文本</a>创建链接文本
  
  <a href="#taget">

注意：

1. 外部链接 需要写上url地址，比如http:// www.baidu.com
2. 内部链接 直接写上内部文件的路径即可
3. 如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
4. 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

注释标签

注释标签用来解析代码的含义，方便阅读标记。快捷键：ctrl+'/'或者shift+ctrl+'/'，一般团队约定注释写在注释代码的上面，单独占一行。

预格式化文本pre标签&特殊字符

pre标签可以保空格符和换行符。而文本也会呈现为等宽字体。格式化的意思是指它可以按照我们设定的文字格式来显示页面。一般在文章中需要展示代码时会使用到pre标签，有些会与code标签搭配使用，其中code标签主要起到语义化的作用。这里需要注意的是，pre标签里面的特殊字符需要用到转义代码，否则会当做html标签渲染。常用特殊字符如下表所示：

特殊字符	描述	字符代码
	空格符	&nbsp
<	小于号	&lt
>	大于号	&gt
&	和号	&amp
¥	人民币	&yen
	版权	&copy
	注册商标	&reg
°	摄氏度	&deg
±	正负号	&plusmn
×	乘号	&times
÷	除号	&divide
²	平方2（上标2）	&sup2
³	立方3（上标3）	&sup3
"	引号	&quot

示例：

---

语义化标签

为什么会用语义化标签呢？有两个原因：

• 方便浏览器读取页面

• 方便程序员理解代码，提高代码的可读性

  刚学习html时，我们都喜欢用DIV+CSS来布局我们的页面，这样写起来方便但是却使我们的文档结构不够清晰，不利于浏览器对页面的读取，所以HTML5增加了新的语义化标签，便于团队开发和维护，提高代码可读性，也使浏览器能够更好的读取页面结构，减少差异化。

---

常用的语义化标签

标签	标签名
<header></header>	头部
<nav></nav>	导航栏
<section></section>	区块（有语义化的div）
<main></main>	主要区域
<article></article>	主要内容
<aside></aside>	侧边栏
<footer></footer>	底部

页面布局如下所示：

---

参考文章：

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