内容正文:
YCF
(中职)Web前端设计基础 项目二电子课件
1
单击此处编辑母版文本样式
第二级
第三级
第四级
第五级
网页中的文本和排版
项目二
授课教师:姓名
WEB前端设计基础
学习情境一
授课教师:姓名
单击此处编辑母版标题样式
Contents
1.项目描述
2.知识准备
3.项目实施
4.项目拓展
5.项目小结
6.技能训练
Contents
1.项目描述
2.知识准备
3.项目实施
4.项目拓展
5.项目小结
6.技能训练
一 项目描述
本项目学习要点
网页中各种文本的添加;
文字的排版标签;
网页中的图片。
二 知识准备
添加文本;
文本排版;
文字列表;
添加图片。
添加文本
1.添加普通文本
普通文本就是指汉字或者使用键盘可以直接输入的字符。
在网页中添加普通文本可以有两种方法:
一是在需要地位置直接输入汉字或字符;
二是如果有现成的文本,可以使用复制、粘贴的方法,把需要的文本从其他窗口中复制过来,回到Sublime窗口在需要文本内容的位置进行粘贴即可。
添加文本
2.添加特殊字符文本
在网页中输入特殊字符,需要在HTML代码中输入该特殊字符相对应的代码。这些特殊字符相对应的代码都是以“&”开头,以“;”(注意是英文分号)结束的。如不断行的空格用“ ”来表示。
特殊符号 名称 HTML代码 特殊符号 名称 HTML代码
" 双引号(英文) " § 分节符 §
‘ 左单引号 ‘ © 版权符 ©
’ 右单引号 ’ ® 注册商标 ®
× 乘号 × ™ 商标 ™
÷ 除号 ÷ € 欧元 €
< 小于号 < £ 英镑 £
> 大于号 > ¥ 日元 ¥
& 与符号 & ° 度 °
— 长破折号 —
| 竖线 |
添加文本
2.添加特殊字符文本
在编辑化学公式或物理公式时,使用特殊字符的频度非常高,如果每次输入时都去查询或者记忆这些特殊符号的代码,工作量是相当大的,在此提供一些输入技巧。
对于部分键盘上没有的字符,可以借助中文输入法的软键盘。如单击搜狗拼音输入法的“软键盘”按钮,弹出如图所示输入方式选项。
单击“特殊符号”,,选择需要输入的符号类型,选择相应的特殊符号。
添加文本
3.文本格式化标签
在HTML文档中,重要文本通常以粗体显示,可以使用两个标签<b>或<strong>。<b>标签和<strong>标签加粗的效果是一样的。但是在实际开发中,想要对文本加粗,尽量用<strong>标签,不要用<b>标签,这是由于<strong>标签比<b>标签更具有语义性。
在HTML文档中,使用<i>或<em>标签实现文本的倾斜显示。
(1)粗体标签<b>、<strong>
(2)斜体标签<i>、<em>标签
添加文本
3.文本格式化标签
在HTML文档中,用<sup>标签实现上标文本,用<sub>标签实现下标文本。<sup>和<sub>都是双标签,放在开始标签和结束标签之间的文本会分别以上标和下标的形式出现。
在HTML文档中,用<s>标签来呈现那些不再准确或不再相关的内容,用<u>标签实现文本的下划线效果。
(3)上标标签<sup>和下标标签<sub>
(4)删除线标签<s>和下划线标签<u>
HTML 5基本标签
3.文本格式化标签
【例2-1】文本格式化标签实例,代码如下所示(示例文件2-1.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本格式化标签标签实例</title>
</head>
<body>
<p>粗体标签</p>
<b>使用<b>标签的粗体文本</b><br>
<strong>使用<strong>标签的粗体文本</strong>
<hr>
<p>斜体标签</p>
<p>使用<i>标签的斜体文本</p>
HTML 5基本标签
3.文本格式化标签
【例2-1】文本格式化标签实例,代码如下所示(示例文件2-1.html)
<p>使用<em>标签的斜体文本</p>
<hr>
<p>上标、下标标签</p>
<p>使用<sup>标签的<sup>上标文本</sup></p>
<p>使用<sub>标签的<sub>下标文本</sub></p>
<hr>
<p>删除线标签</p>
<p>使用<s>标签的<s>删除线标签</s></p>
<hr>
<p>下划线标签</p>
<p>使用<u