HTML标签参考（一）

Doyle 发布于2019-04-23 13:09 / 2161人阅读

摘要：标签的特点是独占一行，并且段落上下都会有一定的间隔距离。标签标签的作用是将里面的文字加粗处理。结构化标签还有另外一个作用就是用来为里面的子元素设置样式。标准中提到标签是空标签意味着它没有结束标签，因此这是错误的。

hi，小哥哥小姐姐们，我们今天要说的是前端的入门，却也是十分重要的意识的培养哦！

• html中的标签数量是很多的，据人统计大概有300个左右，并且每年都会以20-30个的速度增加着，但是这么多的标签我们不必都去记住，因为很多标签都是不常用的或者可以用基础的标签搭配组合，实际上我们需要掌握的大概在30个左右。

• 在前端开发中我们要知道，并不是你用的技术多么先进就显得多么厉害，我们要考虑到代码的可读性以及后期的可维护性，用常见的标签来写才会让其他人都能读懂你的代码。

• 代码中还有一点很重要的就是要勤写注释哟~ 顺便一提在html中的注释形式是

好了前言说完了，我们正式开始介绍一些标签吧！

（这里的标签都是属于html4中的内容，html5会有新的标签和新的内容，我在后面的文章中再介绍。）

几个基础的标签

• p标签

是段落标签，在

中间写的内容会当做一个段落来处理。

p标签的特点是独占一行，并且段落上下都会有一定的间隔距离。

• 标题标签 h1-h6

标题标签的作用是着重显示文字，一般用在标题上，它会将里面的文字加粗放大并且独占一行。其中h4的默认大小是正常的文字大小，不过是加粗的。

• strong标签

标签的作用是将里面的文字加粗处理。

• em标签

的作用是将里面的文字变成斜体。

• del标签

是删除标签，它会在里面的文字的中间画一条横线，一般在打折的时候使用。

• address 标签

是地址标签，它会将里面的内容变成斜体并且独占一行。

这六个是很基础很简单的标签，作用也是显而易见，还有另外一种结构化标签，它们没有特殊的效果，而是用来当做容器来盛放其他的标签，这有点类似于每个家庭中都会多带带分出来厨房卧室大厅等区域，然后每个区域中还有各种各样的设备，这里的家庭中的区域就是我们的结构化标签的作用。

结构化标签还有另外一个作用就是用来为里面的子元素设置样式。一般的元素如果某一条属性没有被开发者设置样式的话，它会自动继承父级元素的相应属性的样式。

比如我们现在有三个p标签，我们想让三个p标签里面的文字都变成红色，给三个p标签都写上color:red 是非常麻烦的，最简单的方法是将三个p标签都放到一个结构化标签里面，给这个结构化标签一个color:red的样式，这样里面的三个p标签就都会有这个样式了。

这两点作用是最常见的，因此我们在写一个页面之前，最先考虑的就是结构问题，因此一般先写结构化标签。

下面我们就介绍最常见的两个结构化标签。

• div

标签可以说是我们在前端开发中用的最多的标签了。

• span

标签里面多数情况下盛放文字或者小icon之类的小物件。

我们现在为div标签设置一下样式，并且在中间加一些文字。

我们发现文字会在这个div标签的边界处自动换行，也就是说这个div标签圈定了一个范围，里面的文字或者其他标签都默认在这个范围里面显示。

但是当我们在中间书写的不是中文而是一串英文字符的时候，我们会发现这一串英文字符在div的边界处并没有换行，而是一直显示下去，这是为什么呢？

文字分隔符与编码集

• 这是因为我们的每一个汉字，计算机都会认出来是一个多带带的单词，每一个汉字都会默认地和其他汉字分隔开，但是英文字母却不会默认地分隔开，因为计算机不知道多少个英文字母才算是一个单词，因此我们需要手动为其添加分隔符。

而这个分隔符我们也不陌生，就是我们常用的空格，只要我们在这一串字符中间加几个空格，那么被空格隔开的字符就会被当做是一个单词从而与其他的单词分隔开。

那么现在问题来了，空格的作用是当做分隔符来使用，并不是我们所想的那种空白的一个格，那么我们怎么在html中写空白格呢？

• 这里我们就要提到一个名词叫做编码集了。我们在书写html的时候，很多特殊的符号是无法写出来的，这个时候我们只能用编码来让浏览器识别我们所想的符号。编码的格式是&编码; 千万不能忘记后面的分号哟~

• 空格的编码就是当我们写多个的时候，在页面中我们也就可以看到多个空白格了。

• 其次，用来当做标签的尖括号<>也是无法正常通过符号来显示出来的，我们同样需要用编码集让浏览器识别出来。< 小于号的编码是< less than的意思，同理，> 大于号的编码时> great than的意思。我们只要在html中写这两个编码，那么大于号和小于号就可以正常显示出来了哟~我记得有一个表情是 >_<~

• 同样的，回车也是属于分隔符，在html中回车是没有作用的，我们想要在网页上让文字显示出回车换行的效果的话，编码同样也是没有办法实现的，我们需要一个标签叫做
标签，这个标签的作用就是换行。w3c标准中提到：
标签是空标签（意味着它没有结束标签，因此这是错误的：

）。在 XHTML 中，把结束标签放在开始标签中，也就是
。

下一篇我们会继续教给大家HTML里更多的标签

云服务器 GPU云服务器 html参考 html参考手册 html参考教程 html的参考手册

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1500.html

HTML的简介

摘要：教程标准超文本标记语言英语，简称是一种用于创建网页的标准标记语言。版本从初期的网络诞生后，已经出现了许多版本版本发布时间声明声明有助于浏览器中正确显示网页。声明是不区分大小写的，以下方式均可通用声明查看完整网页声明类型参考手册。HTML 教程- (HTML5 标准) 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。...

cncoder 2019-04-23 13:13 评论0 收藏0
第二天·初识HTML

摘要：一什么是是超文本标记语言，超文本的意思就是指页面内可以包含图片链接，甚至音乐程序等非文字元素。这表示着元素的结尾这表示元素在此结束在本例中即段落在此结束。元素指定了当前的字符编码是，它包括了非常多人类已知语言的字符。一·什么是HTML HTML（HyperText Markup Language）是超文本标记语言，超文本的意思就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素...

Pocher 2019-08-02 12:01 评论0 收藏0
【Hello CSS】第四章-HTML的标签与语意

摘要：年月日作为推荐标准发布年月日作为提案被提出年月作为推荐标准发布年月日作为推荐标准发布年月日作为推荐标准发布。规定元素的上下文菜单。上下文菜单在用户点击元素时显示。规定元素仍未或不再相关。规定是否对元素进行拼写和语法检查。规定元素的行内样式。作者：陈大鱼头 github： KRISACHAN 上一篇分享了CSS的逻辑属性与盒子模型中分享了一些有关设备屏幕的知识以及浏览器视口的坐标...

kycool 2019-08-02 15:35 评论0 收藏0
【Hello CSS】第四章-HTML的标签与语意

摘要：年月日作为推荐标准发布年月日作为提案被提出年月作为推荐标准发布年月日作为推荐标准发布年月日作为推荐标准发布。规定元素的上下文菜单。上下文菜单在用户点击元素时显示。规定元素仍未或不再相关。规定是否对元素进行拼写和语法检查。规定元素的行内样式。作者：陈大鱼头 github： KRISACHAN 上一篇分享了CSS的逻辑属性与盒子模型中分享了一些有关设备屏幕的知识以及浏览器视口的坐标...

魏宪会 2019-08-30 11:27 评论0 收藏0