（中职）Web前端设计基础 项目二电子课件.pptx

《（中职）Web前端设计基础 项目二电子课件.pptx》由会员分享，可在线阅读，更多相关《（中职）Web前端设计基础 项目二电子课件.pptx（53页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、YCF正版可修改PPT（中职）Web前端设计基础 项目二电子课件网页中的文本和排版项目二授课教师：姓名WEB前端设计基础Contents1.项目描述2.知识准备3.项目实施4.项目拓展5.项目小结6.技能训练一 项目描述本项目学习要点网页中各种文本的添加；文字的排版标签；网页中的图片。二 知识准备添加文本；文本排版；文字列表；添加图片。添加文本1.添加普通文本普通文本就是指汉字或者使用键盘可以直接输入的字符。在网页中添加普通文本可以有两种方法：一是在需要地位置直接输入汉字或字符；二是如果有现成的文本，可以使用复制、粘贴的方法，把需要的文本从其他窗口中复制过来，回到Sublime窗口在需要文本内

2、容的位置进行粘贴即可。添加文本2.添加特殊字符文本在网页中输入特殊字符，需要在HTML代码中输入该特殊字符相对应的代码。这些特殊字符相对应的代码都是以“&”开头，以“;”（注意是英文分号）结束的。如不断行的空格用“ ”来表示。特殊符号 名称HTML 代码特殊符号 名称HTML 代码 双引号（英文）"分节符§左单引号‘版权符©右单引号’注册商标®乘号×商标™除号÷欧元€大于号>日元¥&与符号&度°长破折号—|竖线|添加文本2.

3、添加特殊字符文本在编辑化学公式或物理公式时，使用特殊字符的频度非常高，如果每次输入时都去查询或者记忆这些特殊符号的代码，工作量是相当大的，在此提供一些输入技巧。对于部分键盘上没有的字符，可以借助中文输入法的软键盘。如单击搜狗拼音输入法的“软键盘”按钮，弹出如图所示输入方式选项。单击“特殊符号”，,选择需要输入的符号类型，选择相应的特殊符号。添加文本3.文本格式化标签在HTML文档中，重要文本通常以粗体显示，可以使用两个标签或。标签和标签加粗的效果是一样的。但是在实际开发中，想要对文本加粗，尽量用标签，不要用标签，这是由于标签比标签更具有语义性。在HTML文档中，使用或标签实现文本的倾斜显示。（

4、1）粗体标签、（2）斜体标签、标签添加文本3.文本格式化标签在HTML文档中，用标签实现上标文本，用标签实现下标文本。和都是双标签，放在开始标签和结束标签之间的文本会分别以上标和下标的形式出现。在HTML文档中，用标签来呈现那些不再准确或不再相关的内容，用标签实现文本的下划线效果。（3）上标标签和下标标签（4）删除线标签和下划线标签HTML 5基本标签3.文本格式化标签【例2-1】文本格式化标签实例，代码如下所示（示例文件2-1.html）文本格式化标签标签实例粗体标签使用<b>标签的粗体文本使用<strong>标签的粗体文本斜体标签使用<i>标签的斜体文本HTML 5

5、基本标签3.文本格式化标签【例2-1】文本格式化标签实例，代码如下所示（示例文件2-1.html）使用<em>标签的斜体文本上标、下标标签使用<sup>标签的上标文本使用<sub>标签的下标文本删除线标签使用<s>标签的删除线标签下划线标签使用<u>标签的下划线标签HTML 5基本标签3.文本格式化标签【例2-1】文本格式化标签实例，代码如下所示（示例文件2-1.html）在chrome 浏览器中预览文本排版1.换行标签换行标签是一个单标签，它没有结束标签，是英文单词break的缩写，作用是将文字在一个段内强制换行。一个标签代表一个换行，连续的多个标签可

6、以实现多次换行。使用换行标签时，在需要换行的位置添加标签即可。文本排版2.段落标签在HTML文档中，使用标签来标记一段文字。段落标签是双标签，即，在开始标签和结束标签之间的内容形成一个段落。如果省略结束标签，从标签开始，直到遇见下一个段落标签之前的文本，都在一个段落内。段落标签会自动换行，并且段落与段落之间有一定的空隙。文本排版3.标题标签在HTML文档中，文本的结构除了以行和段出现之外，往往还包含有各种级别的标题。各种级别的标题由元素来定义，标签中的字母h是英文header的简称。作为标题，它们的重要性是有区别的，其中标题的重要性最高，标题最低。一般一个页面只能有一个，而可以有多个。文本排版

7、3.标题标签【例2-2】标题标签实例，代码如右（示例文件2-2.html）标题标签实例山不在高，有仙则名水不在深，有龙则灵斯是陋室，惟吾德馨苔痕上阶绿，草色入帘青谈笑有鸿儒，往来无白丁可以调素琴，阅金经在chrome 浏览器中预览文字列表1.建立有序列表有序列表的各个列表项是有顺序的。有序列表从开始，到结束，中间的列表项是标签内容。有序列表的列表项是有先后顺序的，一般采用数字或字母作为顺序，默认是采用数字顺序，其结构如下：有序列表项 有序列表项 有序列表项文字列表1.建立有序列表在默认情况下，有序列表使用数字作为列表项符号，除此之外还可以通过有序列表type属性来改变列表项符号，如表所示。type 属性值列表项的序号类型1 数字1、2、3a 小写英文字母a、b、cA 大写英文字母A、B、Ci 小写罗马数字i、ii、iiiI 大写罗马数字I、II、IIItype属性实现的效果可以用CSS的list-style-type实现，在后面的项目中会学习到。