理论教育 HTML5文本标记符-《DIV+CSS3网页设计与制作》

HTML5文本标记符-《DIV+CSS3网页设计与制作》

时间:2023-11-22 理论教育 版权反馈
【摘要】:图4.1.3特殊文本标记符应用斜体文本HTML中的标记实现了文本的倾斜显示。案例段落标记符的应用微课4.2HTML5的文本编辑标记符效果如图4.1.7所示。图4.1.8强制换段标记符的应用2)注释标记符HTML的注释标记符的格式为:注释并不局限于一行,长度不受限制。本任务主要是讲HTML5的文本标记符中的标题标记符、换段标记符

、注释标记符<!4.是上标标记符的标

HTML5文本标记符-《DIV+CSS3网页设计与制作》

【案例引入】

2021年6月2日,华为正式发布鸿蒙HarmonyOS 2,引起国人关注。不到一周时间,HarmonyOS 2.0用户就突破了1 000万;一月以内,突破3 000万。目前,从开发者层面来看,鸿蒙HarmonyOS 2.0已覆盖50多万开发者,预计两年内将突破200万。从产业层面来看,市面上已经有1 000家硬件厂商,300多家APP服务商参与了鸿蒙OS系统的生态建设过程。华为负责人称已将鸿蒙操作系统的基础代码全部捐献给了开放原子开源基金会。开源基金会由国家工信部主导主管,各个厂家都可以平等地在开放原子基金会获得代码。生态企业可以根据各自的业务诉求,做自己的产品,共同发展好鸿蒙操作系统的软件生态。

图4.1.1 鸿蒙HarmonyOS

【案例分析】

代码的编写要遵守一定的规则,富有逻辑性,总结如下:

1.学习代码编写一定要刻苦钻研,理清内在联系,逻辑条理清晰。

2.学习文本标记符与排版标记符,要注意语法和细节,做到没有错误。

3.养成认真严谨、严于律己的好习惯。

【主要知识点】

4.1.1 HTML5的文本格式标记符

微课4.1 HTML5的文本标记符

1)标题标记符

标题文字标记符的格式:

属性align用来设置标题在页面中的对齐方式:left(左对齐)、center(居中)或right(右对齐)。

说明:<H1>到<H6>字体大小依次递减。

在HTML中,用户可以通过Hn标记符来标识文档中的标题和副标题,其中n是1到6的数字。<H1>表示最大的标题,<H6>表示最小的标题。使用标题样式时,必须使用结束标记符。

标题内容用黑体字显示,各行之间自动换行。在制作网页时,<h4>一般作文本正文,而h6字体由于太小,一般用得很少。

案例【4.1.1】标题标记符的应用

图4.1.2 标题标记符的应用

效果如图4.1.2所示。

2)特殊文本标记符

(1)强调加粗标记符

重要文本通常以粗体显示,表示强调方式或加强强调方式。HTML中的<b>和<strong>标记符实现了这种显示方式。

案例【4.1.2】特殊文本标记符应用

效果如图4.1.3所示。

图4.1.3 特殊文本标记符应用

(2)斜体文本

HTML中的<i>标记实现了文本的倾斜显示。放在<i><i/>之间的文本将以斜体表示。

案例【4.1.3】斜体文本的应用

图4.1.4 斜体文本的应用

效果如图4.1.4所示。

(3)上标和下标文本的应用

在HTML中,用<sup>标记实现上标文本,用<sub>标记实现下标文本。<sup>和<sub>都是成对标记,放在开始标记和结束标记之间的文本会分别以上标或下标的形式出现。

案例【4.1.4】上标和下标文本的应用

效果如图4.1.5所示。

图4.1.5 上标和下标文本的应用

3)水平线标记符<HR>

<HR>(水平线)标签用于在页面上绘制水平线。只有开始标签,没有结束标签。语法:

size用来指定水平线的高度,以像素为单位;color可用来设置水平线的颜色。width用于改变水平线的宽度,可以以像素为单位,也可以是窗口的百分比

案例【4.1.5】水平线标记符的应用

效果如图4.1.6所示。

(www.daowen.com)

图4.1.6 水平线标记符的应用

4.1.2 HTML5的文本编辑标记符

1)换段标记符

(1)设置段落标记

为了排列整齐、清晰,文字段落之间常用<p></p>来做标记。<p>是HTML格式中特有的段落元素。在HTML格式里不需要在意文章每行的宽度,不必担心文字是不是太长了而被截掉,它会根据窗口的宽度自动转折到下一行。因此,在原始文件中的<p>,指出在这儿告一段落,下面的文字另起一段。如果没有遇到<p>这个符号,它就会把所有的文字都挤在一个段落里,不遇到窗口边界是不会换行的。段落标记里面可以加入文字、列表、表格等。文件段落的开始由<p>来标记,段落的结束由</p>来标记,</p>是可以省略的,因为下一个<p>的开始就意味着上一个<p>的结束。

标记一般格式为:

说明:<p>标签有一个常用属性align,它用来指明字符显示时的对齐方式,其值一般有left(左)、center(中)、right(右)三种。

案例【4.1.6】段落标记符的应用

微课4.2 HTML5的文本编辑标记符

效果如图4.1.7所示。

图4.1.7 段落标记符的应用

(2)强制换段标记符

强制换段标记符的格式为:

<P>标记不但能使后面的文字换到下一行,还可以使两段之间多一空行。

案例【4.1.7】强制换段标记符的应用

效果如图4.1.8所示。

图4.1.8 强制换段标记符的应用

2)注释标记符

HTML的注释标记符的格式为:

注释并不局限于一行,长度不受限制。结束标记符不必与开始标记符在同一行。注释的内容不在浏览器中显示。

案例【4.1.8】注释标记符的应用

3)强制换行标记符

强制换行标记符为
,放在一行的末尾,可以使后面的文字、图片、表格等显示于下一行,而又不会在行与行之间留下空行,即强制文本换行。

强制换行标记符的格式为:

文字

案例【4.1.9】强制换行标记符的应用

图4.1.9 强制换行标记符的应用

效果如图4.1.9所示。

课程育人】

本任务主要是讲HTML5的文本标记符中的标题标记符<hn></hn>、换段标记符<p>、注释标记符<!---->、强制换行标记符
、特殊文本标记加粗<b>、斜体<i>、下划线<u>、上标<sup>、下标<sub>、水平线标记符<hr>等的作用与使用方法,让我们学会使用HTML5的文本标记符,同时注意:

1.认真细心,提高学习效率

2.养成良好的逻辑性,有始有终,坚持到底,不能半途而废。

【课堂互动】

1.在HTML中,下面是段落标签的是( )。

A.
</br> B.<hr></hr>

C.<table></table> D.<p></p>

2.哪一个标题标记符文字大小跟网页正文差不多?( )。

A.<h1></h1> B.<h2></h2>

C.<h3></h3> D.<h4></h4>

3.下列哪一个标记符不是强调加粗标记符?( )。

A.<strong>…</strong> B.<b>…</b>

C.<em>…</em> D.<i>…</i>

4.是上标标记符的标签是( ),是下标标记符的标签是( )。

A.<sub>…</sub> B.<hr>…</hr>

C.<sup>…</sup> D.<form>…</form>

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈