搜索
首页web前端html教程HTML文本级元素_html/css_WEB-ITnose

目录 [1]强调重要 [2]文字间隔 [3]不精确文字 [4]高亮显示 [5]次要评论 [6]术语处理 [7]引用 [8]换行 [9]上标下标 [10]文本删改 [11]特定时间 [12]注音标识 [13]文字方向 [14]计算机代码 例子演示

前面的话

  用于标记段落里的文本和其他内容组的元素种类很多,将这些文本级元素进行简单分类,便于整理和记忆

 

文本元素

强调重要

  虽然浏览器通常用斜体和粗体来显示em和strong,但这些元素不应用作加粗和斜体。这两个元素分别用来提升包含内容的强调程度和重要性

      表示强调

   表示重要

<p>I am <em>very</em> worried!</p><strong>warning</strong>

 

文字间隔

  i和b元素历来是用来展示粗体和斜体字体的,但在HTML5中,它们有了新的语义

  [1]表示不同情绪或声音的文本,如内心对白

<p>Simon smirked,"Yes,I'm happy to take the garbage out." <i>Ugh,I <em>really</em> don't want to !</i> he thought as he picked up the garbage bag.</p>

  [2]表示外来语、分类学名和技术术语等

<i lang="fr">Oh la la!</i>    

 

  [1]用于分隔文字

<p>After bringing <b>water</b> to a boil, add <b>potatoes</b> and <b>carrots</b></p>

  [2]用于文章或故事的引言

<p><b class="lede">Meteorologists predict more sunshine and scorching temperatures for the upcoming week, prompting area farmers to install irrigation systems.</b></p>

 

不精确文字

   在HTML5中重新定义为有错的、过时的、不被建议使用的文本,常用于表示价格变动等

<p>价格<s>¥1298</s>¥998!</p><p><s>37度</s> <strong>41度</strong></p>    

 

高亮显示

   表示高亮或用于引用而标记的文字

<p><mark>We're all hoping it rains soon</mark>, some farmers have installed irrigation systems, at <em>considerable</em> expense</p>

 

次要评论

   表示旁注,可用于免责声明、使用条款和版权信息等需要小字体的场景

<small>图片仅供参考,请以实物为准</small><small>Chris Elhorn | The city Press</small>

 

术语处理

  用来定义术语

<p>The term <dfn>organic food</dfn> refers to food produced without synthetic chemicals</p>

 

   缩写词,可以配合定义术语

<p>The <dfn><abbr title="Garage Door Operner">GDO</abbr></dfn> id a device allows off-world teams to open the iris.</p>

 

引用

   表示作品标题的引用,可以是书影音画等

<p>我最喜欢的电影是<cite>千与千寻</cite></p>

 

   表示短引用,常用于引用别人说的话,用引号可以表达等价语义

<p>The judge said <q>You can drink water form the fish tank</q> but advised against it.</p>

 

换行


  换行

  [注意]
标签是文本级语义元素,可以设置行高和字体大小,但设置宽高无效

<p>    <b>The City Press</b><br />    123 General Street <br />    Springfield, OH 45501</p>

 

   需要时指定单词可以换行的位置

<i>Irrigation<wbr /> Direct</i>

 

上标下标

  这两个标签在数学等式、科学符号和化学公式中非常有用

   表示上标

<p>    a<sup>2</sup>    +    b<sup>2</sup>    =    c<sup>2</sup></p>

 

   表示下标

<p>    H<sub>2</sub>    SO<sub>4</sub></p>

 

文本删改

  如果要表示文档的增删改记录,则应该使用ins和del标签

   文档中插入的内容

  文档中删除的内容

  [注意]可以嵌套任何元素

  

  [1]datetime:用于标明编辑的日期和可选的时间

  [2]cite:用于指定说明编辑的文档网址

<p>一打有 <del datetime="2015-12-30T00:00Z" cite="edit.html">二十</del> <ins>十二</ins> 件。</p>

 

特定时间

  

  [1]datatime表示确切的时间,遵循格式YYYY-MM-DDThh:mm:ssTZD,表示年-月-天-分割符T-时-分-秒-时区

  [2]pubdate表示

<p>我们在每天早上 <time>9:00</time> 开始营业。</p><p>我在<time datetime="2008-02-14">情人节</time>有个约会。</p><small>Posted <time datetime="2015-12-30T00:00:00UTC+08:00"></time></small>

 

注音标识

  ruby标签定义注音标识,多用于CJK文字,CJK是指中日韩统一表意文字(Chinese、Japanese、Korean)

     表示ruby标记

     表示ruby标记文字

    表示ruby标记括号

<ruby> 漢 <rt> ㄏㄢˋ </rt></ruby>

<ruby>    汉    <rp>(</rp>    <rt>h&agrave;n</rt>    <rp>)</rp>    语    <rp>(</rp>    <rt>yǔ</rt>    <rp>)</rp>    </ruby>

 

文字方向

   忽略周围文字方向的文字
   覆盖两种方向的设置,允许显式设置方向,并覆盖所有其他当前方向

<p>When rendered by a browser, <bdo dir="rtl">these words</bdo> will appear as 'sdroweseht'</p>

 

计算机代码

    表示计算机代码<br><kbd>      定义键盘码<br><samp>      定义计算机例子代码<br><tt>       定义打字机代码<br><var>     定义变量</var></tt></samp></kbd>

<p>    <code>Computer code</code>    <br />    <kbd>Keyboard input</kbd>    <br />    <tt>Teletype text</tt>    <br />    <samp>Sample text</samp>    <br />    <var>Computer variable</var>    <br /></p>

 

例子演示

   点击下列相应标签名可进行演示

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
HTML标签的目的是什么?HTML标签的目的是什么?Apr 28, 2025 am 12:02 AM

htmltagsareessentialforsenteringwebpages,增强辅助性,seo和Performance.1)他们areAnclosedInangleBracketSandInpairStocrateAteAhierArchical.2)samantictagsictagsatagslikslikroikreveuseerexperienceencperienceandseo.3)

什么是自我关闭标签?举一个例子。什么是自我关闭标签?举一个例子。Apr 27, 2025 am 12:04 AM

self-closingtagsinhtmlandxmlaretagsthatclosethem hexpthementneedingAseparateCloseTag,SightifyingmarkingmarkupStrupupStruptoReanDenhancingCodingsifice.1)shemeSsentialInxmmllforelementsswithcontentsswithcontent contentcontent,可确保wellwell-formedDocuments.2)Inhtmlible5,inhtmlibut forfix

超越HTML:网络开发的基本技术超越HTML:网络开发的基本技术Apr 26, 2025 am 12:04 AM

要构建一个功能强大且用户体验良好的网站,仅靠HTML是不够的,还需要以下技术:JavaScript赋予网页动态和交互性,通过操作DOM实现实时变化。CSS负责网页的样式和布局,提升美观度和用户体验。现代框架和库如React、Vue.js和Angular,提高开发效率和代码组织结构。

HTML中的布尔属性是什么?举一些例子。HTML中的布尔属性是什么?举一些例子。Apr 25, 2025 am 12:01 AM

布尔属性是HTML中的特殊属性,不需要值即可激活。1.布尔属性通过存在与否控制元素行为,如disabled禁用输入框。2.它们的工作原理是浏览器解析时根据属性的存在改变元素行为。3.基本用法是直接添加属性,高级用法可通过JavaScript动态控制。4.常见错误是误以为需要设置值,正确写法应简洁。5.最佳实践是保持代码简洁,合理使用布尔属性以优化网页性能和用户体验。

如何验证您的HTML代码?如何验证您的HTML代码?Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript:比较Web技术HTML与CSS和JavaScript:比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术:1.HTML定义网页结构,2.CSS负责网页外观,3.JavaScript提供网页动态和交互性,它们共同作用,打造出用户体验良好的网站。

HTML作为标记语言:其功能和目的HTML作为标记语言:其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容,其目的在于提供一种标准化的方式来展示信息。1)HTML通过标签和属性组织网页的各个部分,如标题和段落。2)它支持内容与表现分离,提升维护效率。3)HTML具有可扩展性,允许自定义标签增强SEO。

HTML,CSS和JavaScript的未来:网络开发趋势HTML,CSS和JavaScript的未来:网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件,CSS的未来趋势是CSS-in-JS和CSSHoudini,JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果,Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积,CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡,Serverless简化开发但需优化冷启动问题。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)