0

0

HTML常用文本元素

高洛峰

高洛峰

发布时间:2016-10-14 15:28:50

|

1695人浏览过

|

来源于php中文网

原创

本文首发于个人微信公众号(xinjie-just)。

HTML是超文本标记语言,它提供网页的具体内容,包括文本、表单、图像、表格、链接、多媒体、列表等。其中文本是我们遇到的最多的展示内容。正确的使用文本标签,会使页面具有语义化,也有利于SEO。

文本标签主要包括:abbr, address, strong, b, em, i, bdi, bdo, blockquote, cite, code, del, ins, s, dfn, kbd, mark, small, meter, pre, progress, q, sub, sup, time, span, var.

网页中并不总是使用 div 和 span 就够了。正确使用这些文本标签,使得我们的页面即便没有 css 的情况下,也能良好的展示。另一方面,使用这些标签是为了写出别人能看得懂的代码,而不仅仅是机器能看得懂,这也是我从学习编程以来一直在努力的方向。

1. abbr

立即学习前端免费学习笔记(深入)”;

abbr 解释缩写词,鼠标悬停在其上时显示title属性值
WHO

1.jpg

2. address

address 定义与 html 页面和页面一部分有关的作者、相关人士或组织的联系信息,通常位于页面底部或相关部分内 (用 address 标记公司网站 “联系我们” 中的办公地点,则是错误的用法),字体以斜体显示
Written by Jon Doe.
Visit us at:
Example.com
Box 564, Disneyland
USA

1.jpg

3. strong

strong 强调内容的重要性(重要程度),字体以粗体显示
stop and get out

1.png

4. b

b 表示出于实用目的提醒读者注意的一块文字,不传达任何额外的重要性,也不代表其他的语态和语气,用于文章的关键词、评论中的产品名、文章导语、基于文本的交互式软件中的指示操作的文字        

他在感情上的愚钝就想门窗紧闭的屋子

1.png

5. em

em 表示内容的着重点(唯一性),字体以斜体显示
I just love you

1.png

6. i

i 表示一块不同于其他文字的文字,具有不同的语态或语气,或其他不同于常规之处,用于如技术名称、技术术语、外语中的惯用语、翻译的散文、西方文字中的船舶名称等
HTML,重构,wow,解忧杂货店,泰坦尼克号

1.png

7. bdi

bdi 允许设置一段文本,使其脱离其父元素的文本方向设置。目前只有 Firefox 和 Chrome 浏览器支持

1.png

8. bdo

bdo 定义文本的方向,ltr(从左到右为默认方向)        
This text will go left-to-right.        
This text will go right-to-left.

1.png

9. blockquote

blockquote 表示单独存在的引述(可长可短)
For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

1.png

10. cite

cite 指明对某内容源的引用或参考。如:戏剧、脚本、图片的标题、歌曲、电影、照片、雕塑的名称、演唱会、音乐会、规范、报纸、法律文件(不能作为对人名的引用),字体以斜体显示

你我都当过警务处长,自己人太懂礼貌,虚伪!这句话出自电影《寒战II》

1.png

11. code

code 定义计算机代码文本
This is a piece of computer code: alert("这里有再次成为好人的路,Here is the way to be a good person again.")

1.png

12. del

del 如果需要在前一个版本之后对页面内容的编辑标记出来,或者对不再准确、不再相关的文本进行标记。 ins 表示添加内容, del 表示删除内容, s 用来标记不再准确或不再相关的内容, 浏览器对删除的内容加删除线,对添加的内容加上下划线,对 s 元素添加删除线

My favorite color is blue red!

1.png

13. ins

ins 如果需要在前一个版本之后对页面内容的编辑标记出来,或者对不再准确、不再相关的文本进行标记。 ins 表示添加内容, del 表示删除内容, s 用来标记不再准确或不再相关的内容, 浏览器对删除的内容加删除线,对添加的内容加上下划线,对 s 元素添加删除线

My favorite color is not blue, is red!

1.png

纯CSS单复选框选中美化特效
纯CSS单复选框选中美化特效

纯CSS单复选框选中美化特效是一款适用于文章问卷调查表单元素特效。

下载

14. s

s 如果需要在前一个版本之后对页面内容的编辑标记出来,或者对不再准确、不再相关的文本进行标记。 ins 表示添加内容, del 表示删除内容, s 用来标记不再准确或不再相关的内容, 浏览器对删除的内容加删除线,对添加的内容加上下划线,对 s 元素添加删除线

You think I love you!

As a matter of fact, I love her!

1.png

15. dfn

dfn 短语标签,定义一个项目。对其做语义上的区分,用 dfn 包围要定义的术语,而不是包围定义

There is a item, txhy APP

1.png

16. mark

mark 用于提起读者对特定文本片段的注意,对文本添加黄色背景。可以在样式表中添加 mark{ background: yellow;} 让浏览器实现同样的效果

Do not forget to buy milk today.

1.png

17. small(非常常见,又容易用错或直接不使用)

small 免责声明、注解、署名、版权信息、法律限制等(标记短语,不要标记过长文字),字体以小字号显示

example: 京公网安备11000002000001号(百度备案号)

1.png

18. pre

pre 定义预格式文本
        给重要的人写信,一定要自己亲笔手写。
        别人认真问的问题,一定要认真回答。

1.png

19. q

q 用于短的引述

WWF's goal is to: Build a future where people live in harmony with nature.We hope they succeed.

1.png

20. sub

sub 创建下标.下标文本将会显示在当前文本流中字符高度的一半为基准线的下方,但是与当前文本流中文字的字体和字号都是一样的

我们知道,H2O分解将生成H2和O2

1.png

21. sup

sup 创建上标。上标文本将会显示在当前文本流中字符高度的一半为基准线的上方,但是与当前文本流中文字的字体和字号都是一样的

时间就像海绵里的水,挤一挤总会有的[1]

1.png

22. time


We open at every morning.

I have a date on .

1.png

23. span

span 同 div 一样,没有任何语义,只适合包围字词和短语。可对文档进行分离,然后添加适当的样式。

just cting 影响,生活变得有趣多了

1.png

24. var

定义变量
variable

1.png

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

2

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

0

2026.01.31

Golang人工智能合集
Golang人工智能合集

本专题整合了Golang人工智能相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

76

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

73

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

67

2026.01.31

漫画免费在线观看地址大全
漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

19

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
CSS教程
CSS教程

共754课时 | 25.9万人学习

ThinkPHP6.x API接口--十天技能课堂
ThinkPHP6.x API接口--十天技能课堂

共14课时 | 1.1万人学习

PHP基础入门课程
PHP基础入门课程

共33课时 | 2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号