高阶文字排版- 学习Web 开发

HTML 中有许多其他元素可以用于格式化文本，我们没有在HTML 文字处理基础中提到它们。

本文中所描述的元素虽然少有人知，但仍然值得去学习（尽管仍然不是完整的列表）。

SkiptomaincontentSkiptosearchSkiptoselectlanguage学习Web开发学习HTML：指南与教程HTML介绍高阶文字排版ArticleActions中文(简体)此页面由社区从英文翻译而来。

了解更多并加入MDNWebDocs社区。

描述列表引用缩略语标记联系方式上标和下标展示计算机代码标记时间和日期总结本章目录RelatedTopics 新手请从这开始！ Web入门 Web概述 安装基本软件 您的网站会是什么样？ 处理文件 HTML基础 CSS基础 JavaScript基础 发布您的网站 Web如何运作 HTML—构建Web HTML介绍 HTML概述 HTML入门 脑袋里是什么？HTML中的元数据 HTML文字基础 建立超链接 高级文字格式 文档与网站架构 HTML除错 作业：标记字母 作业：构建出有内容的网页 多媒体与嵌入 多媒体与嵌入概述 HTML中的图片 视频和音频内容 从对象到iframe—其他嵌入技术 为Web新增向量图 自适应图片 作业：Mozilla醒目页面 HTML表格 HTML表格概览 HTML表格基础 HTML高级表格特性和可访问性 作业：构建行星数据 CSS—设计Web CSS第一步 CSS第一步概览 什么是CSS 让我们开始CSS之旅 如何构建CSS CSS如何运行 作业：传记页的风格设计 CSS构建基础 CSS构建基础概览 层叠与继承 CSS选择器 盒模型 背景与边框 处理不同方向的文本 溢出的内容 CSS值和单位 在CSS中调整大小 图像、媒体和表单元素 样式化表格 调试CSS 组织你的CSS Assessment:FundamentalCSScomprehension Assessment:Creatingfancyletterheadedpaper Assessment:Acool-lookingbox 样式化文字 样式化文字概述 基础文字与字体样式化 样式化列表 样式化链接 Web字体 作业：排版社区大学首页 CSS排版 CSS排版概述 IntroductiontoCSSlayout 正常布局流 弹性区块 网格 浮动 定位 多栏式布局 响应式设计 媒体查询 传统的布局方法 支持旧版浏览器 作业：基本布局的理解力 JavaScript—用户端动态脚本 JavaScript第一步 JavaScript第一步概述 什么是JavaScript？ 初次接触JavaScript 出现了什么问题？JavaScript疑难解答 储存你所需的信息—变量 JavaScript基础概念—数字与运算符 处理文字—JavaScript中的字符串 有用的字符串方法 数组 作业：傻瓜故事产生器 JavaScript基础要件 JavaScript基础要件概述 在代码中决策—条件 代码循环 函数-可重复利用的代码块 建立自己的函数 函数回传值 事件介绍 作业：图库 JavaScript对象介绍 JavaScript对象概述 对象基础概念 对象原型 Object-orientedprogrammingconcepts ClassesinJavaScript 使用JSON资料 对象构建实践 作业：为弹跳球展示新增功能 异步JavaScript AsynchronousJavaScriptoverview IntroducingasynchronousJavaScript Howtousepromises Implementingapromise-basedAPI Introducingworkers Assessment:sequencinganimations 客户端网页API 客户端网页API 网页API介绍 操纵文档 从服务器获取数据 第三方API 画图 视频与音频API 客户端存储 Web表单—与用户数据打交道 Web表单核心 Web表单概览 你的第一个表单 如何构造Web表单 原生表单控件 HTML5的input类型 其它表单控件 样式化Web表单 高级表单样式 UI伪类 客户端表单验证 发送表单数据 Web表单进阶 如何构造自定义表单控件 使用JavaScript发送表单 表单组件兼容性列表 可访问性—使每个人都能使用Web 可访问性指南 可访问性概览 什么是可访问性 HTML:可访问性的好基础 CSS和JavaScript可访问性最佳实践 WAI-ARIA基础 可访问性多媒体 移动端可访问性 可访问性测评 作业：可访问性疑难解答 工具与测试 客户端web开发工具 客户端web开发工具索引 客户端工具概览 命令行速成课 包管理基础 一个完整的工具链 发布你的应用 客户端框架介绍 客户端框架概览 框架的主要特性 React GettingstartedwithReact BeginningourReacttodolist ComponentizingourReactapp Reactinteractivity:Eventsandstate Reactinteractivity:Editing,filtering,conditionalrendering AccessibilityinReact Reactresources Ember GettingstartedwithEmber Emberappstructureandcomponentization Emberinteractivity:Events,classesandstate EmberInteractivity:Footerfunctionality,conditionalrendering RoutinginEmber Emberresourcesandtroubleshooting Vue 开始使用Vue 创建第一个Vue组件 渲染一个Vue组件列表 添加一个新的TODO表单:Vue事件、方法、模型 用CSS样式化Vue组件 UsingVuecomputedproperties Vueconditionalrendering:editingexistingtodos FocusmanagementwithVuerefs Vueresources Svelte GettingstartedwithSvelte StartingourSvelteTodolistapp DynamicbehaviorinSvelte:workingwithvariablesandprops ComponentizingourSvelteapp AdvancedSvelte:Reactivity,lifecycle,accessibility WorkingwithSveltestores TypeScriptsupportinSvelte Deploymentandnextsteps Angular GettingstartedwithAngular BeginningourAngulartodolistapp StylingourAngularapp Creatinganitemcomponent Filteringourto-doitems BuildingAngularapplicationsandfurtherresources Git和GitHub Git和GitHub概览 HelloWorld GitHandbook ForkingProjects Aboutpullrequests MasteringIssues 跨浏览器测试 跨浏览器测试概述 跨浏览器测试介绍 执行测试策略 处理常见的HTML与CSS问题 处理常见的JavaScript问题 处理常见的可访问性问题 建置功能侦测 自动测试介绍 设置您的自动测试环境 服务端网页编程 第一步 第一步概述 服务端介绍 用户端概述 服务端网络框架 网站安全 Django网站框架(Python) Django网站框架(Python)概述 介绍 搭建开发环境 在线教学：本地图书馆网站 在线教学2：建立网站框架 在线教学3：使用模型 在线教学4：Django管理网站 在线教学5：建立我们的首页 在线教学6：通用列表与细节检查 在线教学7：会话框架 在线教学8：用户授权与许可 在线教学9：搭配表单 在线教学10：测试Django的Web应用 在线教学11：部署Django至产品 Web应用安全性 作业：DIY博客 Express网页框架(node.js/JavaScript) Express网页框架(Node.js/JavaScript)概览 Express/Node介绍 架设Node(Express)开发环境 Express教程：本地图书馆网站 Express教程2：新建网站骨架 Express教程3：使用数据库(Mongoose) Express教程4：路由和控制器 Express教程5：呈现图书馆数据 Express教程6：使用表单 Express教程7：部署至生产环境 更多资源 常见问题 HTML问题 CSS问题 JavaScriptquestions Web是如何运作的 工具与安装 设计与可访问性 描述列表引用缩略语标记联系方式上标和下标展示计算机代码标记时间和日期总结本章目录高阶文字排版 上一页 Overview:IntroductiontoHTML 下一页 HTML中有许多其他元素可以用于格式化文本，我们没有在HTML文字处理基础中提到它们。

本文中所描述的元素虽然少有人知，但仍然值得去学习（尽管仍然不是完整的列表）。

在这里你将了解标记引文、描述列表、计算机代码和其他相关文本、下标和上标、联系信息等。

预备知识： 熟悉HTML基础（包含在开始学习HTML中）、HTML文本格式（包含在HTML文字处理初步中）。

目标： 学习一些不常见的HTML元素标记来使用高级语义功能。

描述列表在HTML基础部分，我们讨论了如何在HTML中标记基本的列表，但是我们没有提到你偶尔会遇到的第三种类型的列表—描述列表(descriptionlist)。

这种列表的目的是标记一组项目及其相关描述，例如术语和定义，或者是问题和答案等。

让我们看一组术语和定义的示例： 内心独白 戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。

语言独白 戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。

旁白 戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。

描述列表使用与其他列表类型不同的闭合标签—

;此外，每一项都用

(descriptionterm)元素闭合。

每个描述都用

(descriptiondefinition)元素闭合。

让我们来完成下面的标记例子：

内心独白

戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。

语言独白

戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。

旁白

戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。

浏览器的默认样式会在描述列表的描述部分（descriptiondefinition）和描述术语（descriptionterms）之间产生缩进。

MDN非常严密地遵循这一惯例，同时也鼓励关于术语的其他更多的定义（butalsoemboldenthetermsforextradefinition）。

下面是前述代码的显示结果： 内心独白 戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。

语言独白 戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。

旁白 戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。

请注意：一个术语

可以同时有多个描述

，比如说： 旁白 戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。

写作中，指与当前主题相关的一段内容，通常不适于直接置于内容主线中，因此置于附近的其它位置（通常位于主线内容旁边一个文本框内）。

主动学习：标记一组定义现在是时候尝试一下描述列表了;在输入区域的原始文本里添加相应的元素，使得它在输出区域是以描述列表的形式出现。

如果你喜欢，你也可以使用你自己的描述术语和描述。

如果你做错了，你可以随时点击【重置】按钮。

如果实在进行不下去，可以点击【显示答案】。

引用HTML也有用于标记引用的特性，至于使用哪个元素标记，取决于你引用的是一块还是一行。

块引用如果一个块级内容（一个段落、多个段落、一个列表等）从其他地方被引用，你应该把它用

元素包裹起来表示，并且在cite属性里用URL来指向引用的资源。

例如，下面的例子就是引用的MDN的

元素页面：

TheHTML<blockquote>Element(orHTMLBlock QuotationElement)indicatesthattheenclosedtextisanextendedquotation.

要把这些转换为块引用，我们要这样做：

TheHTML<blockquote>Element(orHTMLBlock QuotationElement)indicatesthattheenclosedtextisanextendedquotation.

浏览器在渲染块引用时默认会增加缩进，作为引用的一个指示符；MDN是这样做的，但是也增加了额外的样式： TheHTML

Element(orHTMLBlockQuotationElement)indicatesthattheenclosedtextisanextendedquotation. 行内引用行内元素用同样的方式工作，除了使用元素。

例如，下面的标记包含了从MDN页面的引用：

Thequoteelement—<q>—isintended forshortquotationsthatdon'trequireparagraphbreaks.

浏览器默认将其作为普通文本放入引号内表示引用，就像下面： Thequoteelement——isintendedforshortquotationsthatdon'trequireparagraphbreaks.(元素旨在用于不需要分段的短引用)引文cite属性内容不会被浏览器显示、屏幕阅读器阅读，需使用JavaScript或CSS，浏览器才会显示cite的内容。

如果你想要确保引用的来源在页面上是可显示的，更好的方法是为元素附上链接：

Accordingtothe MDNblockquotepage:

TheHTML<blockquote>Element(orHTMLBlock QuotationElement)indicatesthattheenclosedtextisanextendedquotation.

Thequoteelement—<q>—isintended forshortquotationsthatdon'trequireparagraphbreaks.-- MDNqpage.

引文默认的字体样式为斜体。

你可以在quotations.html中参看代码。

主动学习：是谁说的？到了主动学习的时间！在这个例子中我们想要你： 把中间的段落变成块引用，它要包含cite属性 把第三个段落的一部分变成行内引用，它要包含cite属性 每一个引用都要包含元素 你需要的引用源： http://www.brainyquote.com/quotes/authors/c/confucius.html对应"孔子曰"。

http://www.affirmationsforpositivethinking.com/对应"不要说泄气的话"。

如果你做错了，你可以随时点击【重置】按钮。

如果实在进行不下去，可以点击【显示答案】。

缩略语另一个你在web上看到的相当常见的元素是——它常被用来包裹一个缩略语或缩写，并且提供缩写的解释（包含在title属性中）。

让我们看看下面两个例子：

我们使用HTML

来组织网页文档。

第33届奥运会将于2024年8月在法国巴黎举行。

这些代码的显示效果如下（当光标移动到项目上时会出现提示）： 我们使用HTML来组织网页文档。

第33届奥运会将于2024年8月在法国巴黎举行。

Note:还有另一个元素，它基本上与相同，专门用于首字母缩略词而不是缩略语。

然而，这已经被废弃了-它在浏览器的支持中不如，并且具有类似的功能，所以没有意义。

只需使用。

主动学习：标记一个缩略语在这个简单的主动学习任务中，我们希望你简单地标记一个缩写。

你可以使用下面的示例，或者用自己的示例来替换。

标记联系方式HTML有个用于标记联系方式的元素——

。

它仅仅包含你的联系方式，例如：

ChrisMills,Manchester,TheGrimNorth,UK

但要记住的一点是，

元素是为了标记编写HTML文档的人的联系方式，而不是任何其他的内容。

因此，如果这是Chris写的文档，上面的内容将会很好。

注意，下面的内容也是可以的：

PagewrittenbyChrisMills.

上标和下标当你使用日期、化学方程式、和数学方程式时会偶尔使用上标和下标。

和元素可以解决这样的问题。

例如：

咖啡因的化学方程式是C₈H₁₀N₄O₂。

如果x²的值为9，那么x的值必为3或-3。

这些代码输出的结果是： 咖啡因的化学方程式是C8H10N4O2。

如果x2的值为9，那么x的值必为3或-3。

展示计算机代码有大量的HTML元素可以来标记计算机代码： :用于标记计算机通用代码。

:用于保留空白字符（通常用于代码块）——如果您在文本中使用缩进或多余的空白，浏览器将忽略它，您将不会在呈现的页面上看到它。

但是，如果您将文本包含在
标签中，那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。


:用于标记具体变量名。


:用于标记输入电脑的键盘（或其他类型）输入。


:用于标记计算机程序的输出。




让我们看看一些例子。

你应该尝试运行一下（尝试运行一下other-semantics.html样例文件的拷贝）：

constpara=document.querySelector('p');

para.onclick=function(){
alert('噢，噢，噢，别点我了。

');
}

请不要使用<font>、<center>等表象元素。



在上述的JavaScript示例中，para表示一个段落元素。




按Ctrl/Cmd+A选择全部内容。



$pingmozilla.org
PINGmozilla.org(63.245.215.20):56databytes
64bytesfrom63.245.215.20:icmp_seq=0ttl=40time=158.233ms


上面的代码显示效果如下：

标记时间和日期HTML还支持将时间和日期标记为可供机器识别的格式的元素。

例如：

2016年1月20日

为什么需要这样做？因为世界上有许多种书写日期的格式，上边的日期可能被写成：


20January2016
20thJanuary2016
Jan202016
20/06/16
06/20/16
The20thofnextmonth
20eJanvier2016
2016年1月20日
Andsoon


但是这些不同的格式不容易被电脑识别—假如你想自动抓取页面上所有事件的日期并将它们插入到日历中，元素允许你附上清晰的、可被机器识别的时间/日期来实现这种需求。



上述基本的例子仅仅提供了一种简单的可被机器识别的日期格式，这里还有许多其他支持的格式，例如：


20January2016

January2016

20January

19:30

19:30:01.856

7.30pm,20January2016

7.30pm,20January2016is8.30pminFrance

Thefourthweekof2016总结到这里你就完成了HTML语义文本元素的学习。

但要记住，你在本课程中学到的并不是HTML文本元素的详细列表—我们想要尽量覆盖主要的、通用的、常见的，或者至少是有趣的部分。

如果你想找到更多的HTML元素，可以看一看我们的HTML元素参考（从内联文本语义部分开始会是一个好的选择）。

在下一篇文章中我们将会学习用来组织HTML文档不同部分的HTML元素。




上一页
Overview:IntroductiontoHTML
下一页
本章目录
开始学习HTML
“头”里有什么？HTML元信息
HTML文字处理初步
创建超链接
高级文字格式
文档和站点结构
HTML调试
课程测验：为信件排版
课程测验：构建内容丰富的网页
Foundaproblemwiththispage?EditonGitHubSourceonGitHubReportaproblemwiththiscontentonGitHubWanttofixtheproblemyourself?SeeourContributionguide.Lastmodified:2022年6月23日,byMDNcontributors