学习笔记 第四章 设计网页文本

学习重点：

1、熟悉HTML4定义的格式化文本标签；

2、掌握HTML5新增的文本标签；

3、正确选用标签设计网页文本信息。

 

4.1 使用文本标签

4.1.1 标题文本

<h1>~<h6>用于定义标题。

<h1>定义最大的标题，表示最重要的信息；<h6>定义最小的标题，表示最次要的信息。

<h1>只用一次，<h2>作副标题时只用一次。

4.1.2 段落文本

<p>标签用于定义段落文本，文本前后会创建一定距离的空白。

4.1.3 引用文本

<q>标签定义短的引用，引用内容周围会添加引号；<blockquote>标签定义块引用，包含的文本会从常规文本中分离出来，左、右侧缩进显示。

一段文本不可以直接放在<blockquote>中，应该包含在一个块元素中。

<q>、<blockquote>均包含一个cite属性，定义引用的出处。<cite>标签还有一个功能：从文档中自动摘录参考书目。

4.1.4 强调文本

<em>用于强调文本，包含的文字显示为斜体；<strong>强调程度更强，包含的文字以粗体显示。

4.1.5 格式文本

<b>定义粗体文本，与<strong>的默认效果类似。

<i>定义斜体文本，与<em>的默认效果类似。

<big>定义大号字体，可以嵌套使用，直至上限7号文本。

<small>定义小号字体。

<sup>定义上标文字。

<sub>定义下标文字。

4.1.6 输出文本

<code> 表示代码字体，即显示源代码。

<pre> 表示预定义格式的源代码，保留源代码中的空格。

<tt> 打印机字体。

<kbd> 键盘字体。

<dfn> 定义的术语。

<var> 变量字体。

<samp> 代码范例。

4.1.7 缩写文本

<abbr> 定义简称或缩写。

<acronym> 定义首字母缩写。（HTML5不支持）

4.1.8 插入和删除文本

<ins> 定义插入到文档中的文本。

<del> 定义文档中已经被删除的文本。

4.1.9 文本方向

<bdo> 可以改变文本流的方向，包含属性：dir，取值有ltr（从左到右）和rtl（从右到左）。

例：<bdo dir="rtl">床前明月光，疑似地上霜。<bdo>

4.2 HTML5新增文本标签

4.2.1 标记文本

<mark>定义带有记号的文本，表示页面中需要突出显示或高亮显示的信息。

4.2.2 进度信息

<progress>标识任务的进度。可以是不确定的，表示进度正在进行；也可以用0到某个数字（如100）之间的数字来表示进度完成情况。

progress元素包含两个属性：max，value，表示当前完成情况。

例：<p>百分百进度：<progress id="progress" max="100"><span>0</span>%</progress></p>

4.2.3 刻度信息

<meter>定义已知范围或分数值内的标量、进度。如磁盘用量、查询结果的相关性等。

meter元素包含7个属性：

• value 在元素中特别标识出来的实际值，默认为0。
• min 设置规定范围时，允许使用的最小值，默认为0。
• max 设置规定范围时，允许使用的最大值，默认为1。
• low 设置范围的最大值，如果low小于min，则把min的值视为low的值。
• high 设置范围的上限值，如果大于max，则把max的值视为high的值。
• optimum 设置最佳值。
• form 设置meter元素所属的一个或多个表单。

例：<meter value="3" min="0" max="10">十分之三</meter>

4.2.4 时间信息

<time>定义公历的时间（24小时制）或日期，时间和时区偏移可选。

示例1：<time datetime="2017-11-17T20:00+9:00">我的生日晚上8点的美国时间</time>

<time>元素有两个属性：

datetime 定义日期和时间；

pubdate 定义time元素中的日期和时间时文档的发布日期。

4.2.5 联系文本

<address>定义文档或文章的作者、拥有者的联系信息。包含的文本通常为斜体。

4.2.6 隔离文本

<bdi>允许设置一段文本，使其脱离父元素的文本方向设置。

4.2.7 换行断点

<wbr>定义在文本中的何处添加换行符。

示例：<p>本站旧地址为：https:<wbr>//<wbr>www.old_site.com/，新地址为：https:<wbr>//<wbr>www.new_site.com/。<p>

4.2.8 文本注释

<ruby>定义中文注音或字符。<ruby>需要与<rt>或<rp>一同使用。

• <rt>定义字符的解释或发音；
• <rp>定义当浏览器不支持ruby元素的显示内容。

示例：<ruby>

           少<rt>shao</rt>壮<rt>zhuang</rt>不<rt>bu</rt>努<rt>nu</rt>力<rt>li</rt>

           </ruby>

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有