HTML5文本元素解析

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介:

1、<b>表示关键字和产品名称

1
< b >HTML5</ b >

解释:<b>元素实际作用就是加粗。从语义上来看,就是标记一段文字,但并不是特别强调重要性。


2、<strong>表示重要的文字

1
< strong >HTML5</ strong >

解释:<strong>元素实际作用和<b>一样,就是加粗。从语义上来看,就是强调一段重要的文本。


3、<br>强制换行 <wbr>安全换行

1
2
< br >
Thisabc< wbr >dksdfsdf< wbr >sdfsf s a apple

解释:在任意文本位置键入<br>都会被换行,而在英文单词过长时,使用<wbr>会根据浏览器的适当宽度适当的裁切换行。


4、<i>表示外文词汇或科技术语

1
< i >HTML5</ i >

解释:<i>元素实际作用就是倾斜,从语义上来看,表示区分周围内容,并不是特别强调或重要


5、<em>加以强调

1
< em >HTML5</ em >

解释:<em>元素实际作用和<i>一样,就是倾斜:从语义上来看,表示对一段文本的强调。


6、<s>表示不准确或者校正

1
< s >HTML5</ s >

解释:<s>元素实际作用就是删除线,从语义上来看,表示不准确的删除


7、<del>表示删除文字

1
< del >HTML5</ del >元素

解释:<del>元素实际作用和<s>一样,就是删除线,从语义上来看,表示删除文字


8、<u>表示给文字加上下划线

1
< u >HTML5</ u >

解释:<u>元素实际作用就是加一条下划线,从语义上来看,并不强调此段文本。


9、<ins>添加一段文本

<ins>HTML5</ins>

解释:<ins>元素作用和<u>一样,加一条下划线,从语义上来看,是添加一段文本,起强调作用


10、<small>添加小号字体

1
< small >HTML5</ small >

解释:<small>元素实际作用就是将文本放小一号,从语义上来看,用于免责声明,和澄清声明


11、<sub>添加下标 <sup>添加上标

1
2
< sub >5</ sub >
< sup >5</ sup >

解释:<sub>和<sup>元素实际作用就是数学中的下标和上标


12、<code>表示输入和输出

1
2
3
4
< code >HTML5</ code >
< var >HTML5</ var >
< samp >HTML5</ samp >
< kdb >HTML5</ kdb >

解释:<code>表示计算机代码片段,<var>表示编码语言中的变量。<samp>表示程序或计算机中的输出:<kdb>表示用户的输入,由于这属于英文范畴,必须将lang='en'才能体现出效果


13、<abbr>表示缩写

<abbr>HTML5</abbr>

解释:<abbr>元素没有实际作用,从语义上看是一段文本的缩写


14、<dfn>表示定义术语

1
< dfn >HTML5</ dfn >

解释:<dfn>元素就是一般性的倾斜,从语义上来看,表示解释一个词或短语的一段文本


15、<q>引用来自它处的内容

1
< q >HTML5</ q >

解释:<q>元素实际作用就是加了一对双引号,从语义上来看,表示引用来自其他方的内容。



16、<cite>引用其他作品的标题

1
< cite >HTML5</ cite >

解释:<cite>元素实际作用就是加粗,从语义上来看,表示引用其他作品的标题


17、<ruby>语言元素

<ruby>

   饕<rp>(</rp><rt>tao</rt></rp>)</rp>

   餮<rp>(</rp><rt>tie</rt></rp>)</rp>

</ruby>

解释:<ruby>用来为非西方语言提供支持。<rp><rt>用来帮助读者掌握表意语言文字正确发音,比如:

汉语拼音在文字的上方,但木桥FireFox不支持


18、<bdo>设置文字方向

1
< bdo  dir = "rt1" >HTML5</ bdo >

解释:<bdo>必须使用属性dir才可以设置,一共两个值,rtl从左到右,和ltr(从又到左)。一般设置是ltr,还有一个是<bdi>元素也是处理方向的。由于是特殊语言的特殊效果,且主流浏览器打扮不支持,忽略


19、<mark>突出显示文本

<mark>HTML5</mark>

解释:<mark>实际作用就是加上一个黄色的背景,黑色的字,从语义上看,与上下文相关而突出的文字。用于记号


20、<time>表示日期和时间

<time>207-2-12</time>

解释:<time>元素没有实际作用,从语义上看表示日期和时间


21、<span>表示一般性文本

<span>HTML5</span>

解释:没有实际作用,语义上表示一段文本,经常用来设置CSS等操作



示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>  
< html  lang = 'en' >           
< head >
< meta  charset = 'utf-8' >       
< title >基本</ title >
</ head >
< body >
b元素,这是< b >HTML5</ b >教程< br >
strong元素,这是< strong >HTML5</ strong >教程< br >
wbr元素,这里填充一下:Thisisaasdfsdddddddddddddddddd< wbr >dddddddf< wbr >asdfasd is apple< br >
i元素,这是< i >HTML5</ i >教程< br >
em元素,这是< em >HTML5</ em >教程< br >
s元素,这是< s >HTML5</ s >教程< br >
del元素,这是< del >HTML5</ del >教程< br >
u元素,这是< u >HTML5</ u >教程< br >
ins元素,这是< ins >HTML5</ ins >教程< br >
small元素,这是< small >HTML5</ small >教程< br >
sub元素,这是< sub >5</ sub >教程< br >
sup元素,这是< sup >5</ sup >教程< br >
code元素,这是< code >HTML5</ code >教程< br >
var元素,这是< var >HTML5</ var >教程< br >
samp元素,这是< samp >HTML5</ samp >教程< br >
kdb元素,这是< kdb >HTML5</ kdb >教程< br >
abbr元素,这是< abbr >HTML5</ abbr >教程< br >
dfn元素,这是< dfn >HTML5</ dfn >教程< br >
q元素,这是< q >HTML5</ q >教程< br >
cite元素,这是< cite >HTML5</ cite >教程< br >
ruby元素,
< ruby  style = "font-size: 50px;" > 饕< rp >(</ rp >< rt >tao</ rt >< rp >)</ rp >餮< rp >(</ rp >< rt >tie</ rt >< rp >)</ rp ></ ruby >< br >
bdo元素,这是< bdo  dir = 'rtl' >HTML5</ bdo >教程< br >
mark元素,这是< mark >HTML5</ mark >教程< br >
time元素,这是< time >2017-2-12</ time >教程< br >
span元素,这是< span >HTML5</ span >教程< br >
</ body >
</ html >

wKioL1igIaHjEu58AAR-Lp8xQpY276.png












本文转自 曾哥最爱 51CTO博客,原文链接:http://blog.51cto.com/zengestudy/1897083,如需转载请自行联系原作者

目录
相关文章
|
2月前
|
数据采集 自然语言处理 搜索推荐
基于qwen2.5的长文本解析、数据预测与趋势分析、代码生成能力赋能esg报告分析
Qwen2.5是一款强大的生成式预训练语言模型,擅长自然语言理解和生成,支持长文本解析、数据预测、代码生成等复杂任务。Qwen-Long作为其变体,专为长上下文场景优化,适用于大型文档处理、知识图谱构建等。Qwen2.5在ESG报告解析、多Agent协作、数学模型生成等方面表现出色,提供灵活且高效的解决方案。
215 49
|
1月前
|
机器学习/深度学习 人工智能 自然语言处理
秒级响应 + 99.9%准确率:法律行业文本比对技术解析
本工具基于先进AI技术,采用自然语言处理和语义匹配算法,支持PDF、Word等格式,实现法律文本的智能化比对。具备高精度语义匹配、多格式兼容、高性能架构及智能化标注与可视化等特点,有效解决文本复杂性和法规更新难题,提升法律行业工作效率。
|
1月前
|
前端开发 UED
React 文本区域组件 Textarea:深入解析与优化
本文介绍了 React 中 Textarea 组件的基础用法、常见问题及优化方法,包括状态绑定、初始值设置、样式自定义、性能优化和跨浏览器兼容性处理,并提供了代码案例。
67 8
|
2月前
|
XML 数据采集 数据格式
Python 爬虫必备杀器,xpath 解析 HTML
【11月更文挑战第17天】XPath 是一种用于在 XML 和 HTML 文档中定位节点的语言,通过路径表达式选取节点或节点集。它不仅适用于 XML,也广泛应用于 HTML 解析。基本语法包括标签名、属性、层级关系等的选择,如 `//p` 选择所有段落标签,`//a[@href=&#39;example.com&#39;]` 选择特定链接。在 Python 中,常用 lxml 库结合 XPath 进行网页数据抓取,支持高效解析与复杂信息提取。高级技巧涵盖轴的使用和函数应用,如 `contains()` 用于模糊匹配。
|
2月前
|
存储 移动开发 数据处理
HTML5 元素2
HTML5引入了多个新元素以增强表单功能和用户体验。`&lt;keygen&gt;`元素用于生成密钥对,提交表单时生成私钥和公钥,私钥保存在客户端,公钥发送至服务器,用于后续的身份验证。`&lt;output&gt;`元素则用于展示计算结果或其他脚本输出,如表单数据处理的结果。此外,`&lt;datalist&gt;`元素可与`&lt;input&gt;`元素结合使用,提供预定义的选项列表,增强输入的便捷性和准确性。这些元素共同提升了网页的交互性和安全性。
|
1月前
|
移动开发 前端开发 JavaScript
HTML5 <nav> 元素2
HTML5中的`&lt;nav&gt;`标签用于定义页面的导航链接部分,但并非所有链接都需置于其中。`&lt;aside&gt;`标签定义页面主内容外的相关信息,如侧边栏。`&lt;header&gt;`标签描述文档或节的头部区域,可用于定义内容的介绍展示区。示例包括导航、家庭旅行记录和IE9发布信息等。
|
2月前
|
移动开发 UED HTML5
HTML5 表单元素1
HTML5引入了新的表单元素,如`&lt;datalist&gt;`、`&lt;keygen&gt;`和`&lt;output&gt;`,以增强表单的功能性和用户体验。
|
1月前
|
Web App开发 移动开发 iOS开发
HTML5 语义元素1
HTML5引入了语义元素,如`&lt;nav&gt;`、`&lt;header&gt;`、`&lt;footer&gt;`等,这些元素能清晰地向浏览器和开发者传达其内容的意义,如导航链接、头部和尾部。与非语义元素(如`&lt;div&gt;`)不同,语义元素使网页结构更加明确,有助于提升可读性和可访问性。例如,`&lt;section&gt;`标签用于定义文档中的节,而`&lt;article&gt;`标签则用于定义独立的内容,如论坛帖子、博客文章等。这些新元素在IE9及更高版本、Firefox、Chrome、Safari和Opera中得到支持。
|
2月前
|
XML JavaScript 前端开发
如何解析一个 HTML 文本
【10月更文挑战第23天】在实际应用中,根据具体的需求和场景,我们可以灵活选择解析方法,并结合其他相关技术来实现高效、准确的 HTML 解析。随着网页技术的不断发展,解析 HTML 文本的方法也在不断更新和完善,
|
2月前
|
JavaScript API 开发工具
<大厂实战场景> ~ Flutter&鸿蒙next 解析后端返回的 HTML 数据详解
本文介绍了如何在 Flutter 中解析后端返回的 HTML 数据。首先解释了 HTML 解析的概念,然后详细介绍了使用 `http` 和 `html` 库的步骤,包括添加依赖、获取 HTML 数据、解析 HTML 内容和在 Flutter UI 中显示解析结果。通过具体的代码示例,展示了如何从 URL 获取 HTML 并提取特定信息,如链接列表。希望本文能帮助你在 Flutter 应用中更好地处理 HTML 数据。
144 1

推荐镜像

更多