高级文本格式

HTML中还有许多用于格式化文本的元素,我们在HTML文本基础文章。本文中描述的元素不那么为人所知,但是了解这些元素仍然很有用(而且这仍然不是一个完整的列表)。在这里,您将学习如何标记引文、描述列表、计算机代码和其他相关文本、下标和上标、联系信息等。

先决条件:
基本的HTML熟悉性,如开始使用HTML。HTML文本格式,如HTML文本基础.
目标:
学习如何使用不太知名的HTML元素来标记高级语义特性。
描述列表
在HTML文本基础知识中,我们介绍了如何标记基本列表在HTML中,但是我们没有提到第三种类型的列表-描述列表。这些列表的目的是标记一组项目及其相关描述,如术语和定义,或问答。让我们看一组术语和定义的示例:

自言自语的戏剧中,一个角色对自己说话,表达他们内心的想法或感受,并在这个过程中将他们传达给观众(但不是其他角色)。话剧中的独白,剧中一个角色大声地说出他们的想法,与在场的观众和任何其他角色分享他们的想法。在戏剧中,一个角色只为了幽默或戏剧效果而与观众分享评论。这通常是一种感觉、想法或其他背景信息。
描述列表使用与其他列表类型不同的包装器-

;此外,每个术语都封装在 元素,并且每个描述都封装在
(描述定义)元素。让我们完成对示例的标记:

独白
在戏剧中,一个角色对自己说话,表达他们内心的想法或感受,并在这个过程中将他们传达给观众(而不是其他角色)。
独白
在戏剧中,一个角色大声地说出他们的想法,与在场的观众和其他角色分享他们的想法。
撇开
在戏剧中,一个角色只为了幽默或戏剧效果而与观众分享评论。这通常是一种感觉、想法或其他背景信息。
浏览器默认样式将显示描述列表,说明部分缩进了术语。

请注意,允许具有多个描述的单个术语,例如:

撇开
在戏剧中,一个角色只为了幽默或戏剧效果而与观众分享评论。这通常是一种感觉、想法或其他背景信息。
在写作中,与当前主题相关的一段内容,但并不能直接融入主要的内容流,因此在附近(通常是在旁边的一个方框中)。

主动学习:标记一组定义
是时候尝试处理描述列表了;将元素添加到输入字段中显示为描述列表。输出量场。如果你愿意的话,你可以尝试使用你自己的术语和描述。

如果您犯了错误,可以使用复位纽扣。如果你真的被卡住了,按下示解按钮看答案。

引文
HTML还具有标记引号的功能;您使用的元素取决于是标记块还是内联引号。

区块引号
如果块级内容的一部分(无论是段落、多个段落、列表等)引用自其他地方,则应将其包装在<区块报价>元素中包含指向引号源的URL。引文属性。例如,以下标记取自MDN<区块报价>元素页:

这个<强壮>HTML<电码>区块报价>;

下面是一段粗俗的引语..。

<区块报价 引文="Https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">

这个<强壮>HTML<电码>区块报价>;

内联报价
内联引文的工作方式完全相同,但它们使用的是元素。例如,下面的标记位包含来自MDN的引用页:

引用元素-<电码>Q>;

引文
的内容引文属性听起来很有用,但是不幸的是,浏览器、屏幕阅读器等等并没有对它做太多事情。没有办法让浏览器显示引文,而不用使用JavaScript或CSS编写自己的解决方案。如果您想在页面上提供引号的来源,您需要通过链接或其他适当的方式使其在文本中可用。

有一个元素,但这意味着包含被引用的资源的标题,例如书的名称。但是,没有理由不能将文本链接到内部。以某种方式引用:

根据<一个 href="Https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"> <引文>MDN区块报价页面

<区块报价 引文=“Https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote”>

这个<强壮>HTML<电码>区块报价>;

引用元素-<电码>Q>;

主动学习:谁说的?
是时候做另一个主动学习的例子了!在本例中,我们希望您:

将中间段转换为块引号,其中包括引文属性。
将第三段中的“消除消极自我对话的需要”转换为内联引号,并包括引文属性。
将每个源的相应标题包装在标记并将每个标记转换成指向该源的链接。
你需要的引文来源如下:

孔子名言的http://www.brainyquote.com/quotes/authors/c/confucius.html
Http://www.affirmationsforpositivethinking.com用于“需要消除消极的自我对话”。
如果您犯了错误,可以使用复位纽扣。如果你真的被卡住了,按下示解按钮看答案。

缩略语
在浏览Web时,您将遇到的另一个相当常见的元素是-用于环绕缩写或首字母缩略词,并提供术语的全面扩展(包括在标题(属性)让我们看几个例子:

我们用

我认为

注*还有另一个因素,<缩写>,它基本上与,专门用于缩略语而不是缩略语。然而,这已经被废弃了–它在浏览器中也不受支持。,和具有如此相似的功能,因此两者兼而有之被认为是毫无意义的。只管用相反。

主动学习:标记缩写
对于这个简单的主动学习作业,我们希望你简单地标记一个缩写。您可以使用下面的示例,或者用您自己的示例替换它。

标记联系人详细信息
HTML有一个标记联系人详细信息的元素-<地址>。这只是简单地封装了您的联系人详细信息,例如:

<地址>

克里斯·米尔斯,曼彻斯特,格林北部,英国

<地址>

克里斯·米尔斯<溴>曼彻斯特<溴>格林北部<溴>英国

  • <李>电话:01234 567890

<地址>

写成的一页<一个 href="/作者/克里斯-米尔斯/">克里斯·米尔斯

我的生日是25号<苏普>TH

表示计算机代码
有许多元素可用于使用HTML标记计算机代码:

<代码>*对计算机代码中的通用代码进行标记。

为了保留空白(通常是代码块)--如果您在文本中使用缩进或多余的空白,浏览器将忽略它,并且您不会在呈现的页面上看到它。如果您将文本包装在但是,您的空白将与您在文本编辑器中看到它的方式相同。
*专门标记变量名称。
*对输入到计算机的键盘(和其他类型)输入进行标记。
用于标记计算机程序的输出。
让我们看几个例子。你应该试着用这些来玩(试着拿一份我们的Other-semantics.html(样本档案):

<预><电码>Var Para=document.querySelector(‘p’);n npara.οnclick=function(){n警报(‘owww,停止戳我!’);n}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

淋风沐雨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值