《模块03创建普通文档电子课件 HTML5网页设计.pptx》由会员分享，可在线阅读，更多相关《模块03创建普通文档电子课件 HTML5网页设计.pptx（54页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、模块三创建普通文档3.1HTML5文档的基本结构一个HTML文件是由一系列元素和标签组成的。元素是HTML文件的重要组成部分，如title（HTML文件标题）、img（图像）、table（表格）等。元素名不区分大小写。HTML用标签来规定元素的属性和其在文件中的位置。首标签的格式为，尾标签的格式为。其完整的语法如下。被控制的元素说明：HTML的标签一般成对出现，但也会单独出现。3.1HTML5文档的基本结构在每个HTML标签中，还可以设置一些属性，控制HTML的元素，这些属性位于所建立元素的首标签内，其基本语法如下。内容需要说明的是，HTML是对大小写不敏感的语言，也就是同一字母的大写和小写字
2、符被认定为同一个字符。因此在每一个标签内，大写、小写、混写均可；但如果嵌入其他语言，则需要按照其他语言的规范来判断是否区分大小写字符。提示：统一大小写规范是一个优秀的程序编写人员必备的素质，建议大家按照统一的规范编写，本书中范例的标签均采用小写。3.2HTML5基本标记3.2.1 文档类型标记是文档类型标记，声明必须位于HTML5文档中的第一行，也就是位于标记之前。该标记告知浏览器文档所使用的HTML规范。声明不属于HTML标记，它是一种指令，告知浏览器编写页面所用的标记版本，写法如下。3.2HTML5基本标记3.2.2 HTML文档标记在任何一个HTML文件中，最先出现的HTML标签就是，它
3、用于表示该文件是以超文本标记语言编写的。是成对出现的，首标签和尾标签分别位于文件的最前面和最后面，文件中所有内容和HTML标签都要包含其中。写法如下。文件内容3.2HTML5基本标记3.2.3 头部标记头部标记见表3-1。表3-1 头部标记说明：与之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。3.2HTML5基本标记3.2.4 标题标记每个HTML文件都需要有一个文件名称。在浏览器中，文件名称作为窗口名称显示在该窗口的上方。HTML文件标签是可以嵌套的，即在一对标签中可以嵌入另一对子标签，用来规定母标签范围的属性或其中某一部分内容，嵌套在标签中的主要是标签。3.2HTM
4、L5基本标记3.2.4 标题标记【例3-1】标题标记的应用。标题样例在浏览器中运行上面的代码，得到图3-1所示的结果。图3-1 标题样例的显示结果3.2HTML5基本标记3.2.5 主体标记网页所要显示的内容都被放在网页的主体标记内，是HTML文件的重点。主体标记以开始，以结束，语法如下。3.2HTML5基本标记3.2.6 换行标记【例3-2】换行标记的应用。换行样例HTML（Hypertext Markup Language，超文本标记语言）诞生于20世纪90年代初，用于指定构建网页的元素，这些元素中的大多数都用于描述网页内容，如标题、段落、列表、指向其他网页的链接等。HTML5是HTML的
5、最新版本，它的大部分内容都可以兼容新旧浏览器，并新增了大量新的功能。HTML5还引入了原生的音频和视频播放功能。3.2HTML5基本标记3.2.6 换行标记【例3-2】在浏览器中运行上面的代码，得到图3-2所示的结果。图3-2 换行标记的效果3.2HTML5基本标记3.2.7 水平线标记添加水平线01语法如下。在网页中输入一个标记，就添加了一条默认样式的水平线。3.2HTML5基本标记3.2.7 水平线标记【例3-3】添加水平线。添加一条水平线在浏览器中运行上面的代码，得到图3-3所示的效果。图3-3 添加水平线的效果3.2HTML5基本标记3.2.7 水平线标记设置水平线的宽度和高度属性02
6、在默认情况下，在网页中插入的水平线的宽度是100%，高度是1。在实际网页中，通过设置width、size的属性参数可以对水平线的宽度和高度进行设置。语法如下。说明：在该语法中，水平线的宽度值可以是确定的像素值，也可以是相对于浏览器窗口宽度的百分比。而水平线的高度值只能是像素值；如果在创建水平线时只设置一个参数，那么另外一个没有设置的参数取默认值。3.2HTML5基本标记3.2.7 水平线标记【例3-4】设置水平线的宽度和高度。设置水平线的宽度和高度在浏览器中运行代码，可以看到两条宽度和高度不同的水平线效果，如图3-4所示。图3-4 设置水平线的宽度和高度效果3.2HTML5基本标记3.2.7
7、水平线标记设置水平线的颜色03为了使水平线更美观，还可以设置水平线的颜色。语法如下。说明：颜色代码在HTML里有两种表现形式：一种是6位十六进制数，如#FFB6C1、#FFFFFF等；另一种是英文代码，如pink、red、black等。3.2HTML5基本标记3.2.7 水平线标记【例3-5】设置水平线的颜色。在浏览器中运行上面的代码，得到图3-5所示的效果。图3-5 设置水平线颜色的效果设置水平线的颜色3.2HTML5基本标记3.2.7 水平线标记设置水平线的对齐方式04水平线在默认情况下是居中对齐的，如果希望水平线左对齐或右对齐，就需要设置align参数。语法如下。说明：水平线的对齐方式有
8、三种，包括left、center和right。其中，center的效果与默认效果相同。3.2HTML5基本标记3.2.7 水平线标记【例3-6】设置水平线的对齐方式。在浏览器中运行上面的代码，得到图3-6所示的效果。图3-6 设置水平线对齐方式的效果设置水平线的对齐方式3.2HTML5基本标记3.2.8 注释标记在网页中，除了能够在页面显示出来的元素外，还包含一种不显示在页面中的元素，也就是注释文字。适当的注释可以帮助用户更好地了解网页中各个模块的功能，也有助于以后对代码的修改。语法如下。例如查资料：看看还有没有其他注释标记？3.3在网页中添加文本3.3.1 文档作者或拥有者联系信息标记标签定
9、义文档作者或拥有者的联系信息。如果元素位于元素内部，则它表示该文档作者或拥有者的联系信息。通常的做法是将元素添加到网页的头部或底部。3.3在网页中添加文本3.3.1 文档作者或拥有者联系信息标记【例3-7】添加文档作者信息。添加文档作者信息 Written by html教材编写组 Email us Address:Box 564,Disneyland Phone:+12 34 56 783.3在网页中添加文本3.3.1 文档作者或拥有者联系信息标记【例3-7】在浏览器中运行上面的代码，得到图3-7所示的效果。图3-7 添加文档作者或拥有者联系信息标记的效果3.3在网页中添加文本3.3.2 加
10、粗文本标记在编辑网页时，经常需要对一些特殊文字进行加粗显示，该效果可以通过标签来实现。语法如下。需要加粗的文字3.3在网页中添加文本3.3.2 加粗文本标记【例3-8】加粗文本标记的用法。加粗标记加粗标记在浏览器中运行上面的代码，得到图3-8所示的效果。图3-8 加粗标记的效果3.3在网页中添加文本3.3.2 加粗文本标记【例3-9】文本加粗和斜体标记的用法。加粗和斜体标记加粗和斜体标记在浏览器中运行上面的代码，得到图3-9所示的效果。图3-9 加粗和斜体标记的效果3.3在网页中添加文本3.3.3 定义计算机代码文本标记 标签用于表示计算机源代码或其他机器可以阅读的文本内容。软件代码的编写者已
11、经习惯了编写源代码时文本表示的特殊样式。标签就是为他们设计的。包含在该标签内的文本将以等宽、类似电传打字机样式的字体（courier）显示出来。3.4文本排版标记3.4.1 换行标记 【例3-10】换行样例HTML（Hypertext Markup Language，超文本标记语言）诞生于20世纪90年代初，用于指定构建网页的元素，这些元素中的大多数都用于描述网页内容，如标题、段落、列表、指向其他网页的链接等。HTML5是HTML的最新版本，它的大部分内容都可以兼容新旧浏览器，并新增了大量新的功能。HTML5还引入了原生的音频和视频播放功能。文本换行标记的用法。3.4文本排版标记3.4.1 换
12、行标记 【例3-10】上面的代码在浏览器中的显示效果如图3-10所示。图3-10 段落文字换行的效果3.4文本排版标记3.4.2 段落标记在HTML中，段落通过标记来表示。语法如下。段落文字3.4文本排版标记3.4.2 段落标记【例3-11】段落标记的用法。段落标记信息是用文字、数字、符号、语言、图像等介质来表示事件、事物、现象等内容、数量或特征，从而向人（或系统）提供关于现实世界新的事实和知识，作为生产、建设、经营、管理、分析和决策的依据。3.4文本排版标记3.4.2 段落标记【例3-11】在浏览器中运行上面的代码，得到图3-11所示的效果。图3-11 段落标记的效果3.4文本排版标记3.4
13、.3 标题标记至至标签可定义标题。定义最大的标题，定义最小的标题。由于h元素拥有确切的语义，应慎重地选择恰当的标签层级来构建文档的结构。因此，不应利用标题标签来改变同一行中的字体大小。相反，应当使用层叠样式表定义来实现漂亮的显示效果。元素用来描述网页中最上层的标题。3.4文本排版标记3.4.3 标题标记至【例3-12】标题标记的用法。h1-h6This is heading 1This is heading 2This is heading 3This is heading 4This is heading 5This is heading 63.4文本排版标记3.4.3 标题标记至【例3-1
14、2】在浏览器中运行上面的代码，得到图3-12所示的效果。图3-12 h1至h6的效果3.5列表3.5.1 建立有序列表有序表类似Word中的自动编号功能，有序列表使用的标记是，每一个列表项前面使用。每个项目都有前后顺序之分，一般用数字表示，其结构如下。有序列表项1有序列表项2有序列表项3有序列表项43.5列表3.5.1 建立有序列表【例3-13】有序列表的用法。有序列表HTML5基本结构 HTML文档标记头部标记HEAD 标题标记主体标记无序表3.5列表3.5.1 建立有序列表【例3-13】上述代码在浏览器中的显示结果如图3-13所示。图3-13 有序列表的显示结果3.5列表3.5.1 建立有
15、序列表【例3-13】把上面的代码的标签改为，在IE 11中预览可以得到图3-14所示的效果。图3-14 有序列表的自定义序号结果3.5列表3.5.2 建立无序列表无序列表相当于Word中的项目符号，无序列表的项目排列没有顺序，只以符号作为分项标识。无序列表使用一对标记，其中每一个列表使用，其结构如下。无序列表项无序列表项无序列表项无序列表项3.5列表3.5.2 建立无序列表【例3-14】无序列表的用法。无序列表HTML5基本结构 HTML文档标记头部标记HEAD标题标记主体标记无序表3.5列表3.5.2 建立无序列表【例3-14】上述代码在浏览器中的显示结果如图3-15所示。图3-15 无序列
16、表的显示结果3.5列表3.5.2 建立无序列表【例3-15】无序列表修改标记的用法。无序列表Disc 项目符号列表：苹果 香蕉 柠檬 橘子3.5列表3.5.2 建立无序列表【例3-15】无序列表修改标记的用法。Circle 项目符号列表：苹果 香蕉 柠檬 橘子Square 项目符号列表:苹果 香蕉 柠檬 橘子3.5列表3.5.2 建立无序列表【例3-15】上述代码在浏览器中的显示结果如图3-16所示。图3-16 无序列表项目符号的不同效果3.5列表3.5.2 建立无序列表【例3-16】列表嵌套的用法。嵌套列表咖啡茶 红茶 绿茶龙井碧螺春 牛奶3.5列表3.5.2 建立无序列表【例3-16】列表
17、嵌套的用法。蒙牛 伊利 3.5列表3.5.2 建立无序列表【例3-16】在IE浏览器中预览上述代码，结果如图3-17所示。图3-17 列表嵌套的结果思考：和有什么区别？3.6案例【案例描述】为了参加信息化教学评比，讲授思想政治课的孙老师找到小张同学，想让小张同学帮忙设计一个HTML页面，展示马克思主义哲学课程中绪论的教学内容。【源代码展示】具体见书本P59-61。3.6案例【运行结果】运行结果如图3-18所示。图3-18 模块3案例运行结果3.6案例【分析】小张同学根据孙老师给的教学内容，结合本模块所学的知识完成了页面的设计。在设计中，小张同学运用了标题样式为绪论、教学目的和要求等标题添加了标
18、签，使内容的层次分明，还充分利用有序列表和无序列表对授课提纲中的内容进行了设计，使授课内容层次非常清晰。3.7思考与练习一、选择题1.创建最小的标题的文本标签是（）。A.B.C.D.2.设置水平线高度的HTML代码是（）。A.B.C.D.3.在HTML中，段落标签是（）。A.B.C.D.3.7思考与练习4.在HTML中，表示换行的标签是（）。A.B.C.D.5.在HMTL中，加粗字的文本标签是（）。A.B.C.D.二、填空题1.HTML5文件中用标签表示文件头部，其中标签用来定义页面的标题。2.是标签，如果希望自定义序号的样式，需要设置的属性。3.HTML5中用来表示注释内容。三、简答题1.HTML5文件头部包括哪些内容？2.HTML5包括哪些基本标记？THANKS