HTML常用标签介绍

本文介绍了HTML的一些基本标签,包括加粗、斜体、换行、段落、字体样式、标题、下划线、删除线、行内标签和块级标签等,并提到了标签的属性使用,如颜色、对齐方式。此外,还提及了父子、兄弟关系的概念以及HTML的注释和特殊字符的使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

HTML常用标签介绍:

语法结构:<标签 属性=“值”> 内容 </标签>

在这里插入图片描述
标签通常是成对出现的,分为开始标签(p)和结束标签(/p),结束标签只是在开始标签前加一个斜杠“/”。标签可以有属性,属性必须有值(align=“center” )。 开始标签与结束标签中包含的内容称之为区域。
标签不区分大小写,p和P是相同的。

常用的标签:

(1)加粗字体标签:“strong”/“b”
在这里插入图片描述在这里插入图片描述(2)斜体标签:“em”/“i”
在这里插入图片描述
(3)换行标签:“br”-单标签
在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述(4)分割线标签:“hr”
在这里插入图片描述在这里插入图片描述分割线的长度和大小都是可以改变的,这就要用到上文提到的标签的属性了:再次提示:语法结构:<标签 属性=“值”> 内容 </标签>
其中:
width是"hr"标签的长度属性
size是"hr"标签的宽度属性
800px和30px是属性的值(px表示像素,类似于数学中的量化单位,可不加)
另外:具体数值(800)可以用百分比替代(50%)
在这里插入图片描述在这里插入图片描述
(5)段落标签:“p”-两个相邻的p标签之间会间隔一行
另外:HTML是不能自动换行的,在这里插入图片描述在这里插入图片描述必须用"br"标签进行人为换行。在这里插入图片描述在这里插入图片描述如上:我们可以看到在添加了"br"标签后,系统对文字进行了分行处理,但段与段之间依旧不好辨别,为此我们添加了"p"标签对文字进行分段处理。
在这里插入图片描述在这里插入图片描述我们可以清晰地看到,“p"标签对文字进行了分段处理(即两个p标签之间的内容空了一行)。
align属性:表示位置,它的值可以取"left”,“center”,“right”(默认值是左对齐)****在这里插入图片描述在这里插入图片描述
(6)字体标签:“font”
颜色属性:“color”:表示颜色-英文单词(red,blue,green,pink)

在这里插入图片描述在这里插入图片描述
(7)原样输出标签:pre
在这里插入图片描述在这里插入图片描述由上图可见,

(8)下划线标签:“ins”/“u”
在这里插入图片描述在这里插入图片描述
(9)删除线标签:“del”/“s”
在这里插入图片描述在这里插入图片描述

(10)标题标签:“h1-h6”
一般用在新闻标题,文章标题,网页区域名称,产品名称等等。
eg在这里插入图片描述在这里插入图片描述在这里插入图片描述
由图我们可以看到,在使用标题标签后系统会对标签内的内容进行1.自动加粗处理,2.并且随着数字的增加字号依次减小,3.且每个标题标签独占一行,当数字超过7时,标题标签失效,标签内的字体按照正常字体输出。

(11)sub下标标签 sup上标标签
在这里插入图片描述在这里插入图片描述

(12)标准行内标签:span 标准块级标签:div
在这里插入图片描述在这里插入图片描述
由图可知,行内标签不能自动换行,而块级标签可以自动换行(独占一行),之前的:hr.hn.p也都是块级标签,其他用法以后会具体讲。

(13)特殊字符:
在这里插入图片描述
在这里插入图片描述在这里插入图片描述

(14)注释:
在空白处输入"<!–“然后系统会自动补齐。
快捷方式:“ctrl”+”/"
(15)标签的关系:
作用:明确标签的书写位置;让代码格式更整齐。
(1)父子关系(嵌套关系):在这里插入图片描述

(2)兄弟关系(并列关系):
在这里插入图片描述
以上就是HTML中最基本的标签的运用,下一节作者将会就form表单标签进行展开叙述。
(https://www.w3school.com.cn/)如果现实应用中还需要实现额外功能的,可进入此网站进行查询。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值