Web前端开发实例与实战第2章 HTML基础元素.docxVIP

编写日期：授课日期：任课教师：

课程

名称

《Web前端开发实例与实战》

授课

专业

授课

班级

周次

节次

授课

章节

第2章

HTML基础元素

授课

学时

5学时

教学

目标

知识

1.了解标签。

2.了解标签之间的关系。

3.了解HTML元素。

4.了解块级元素和内联元素。

5.了解文档信息。

能力

1.熟知文档类型。

2.熟知文本修饰标签。

3.熟知文本结构元素。

4.熟知在网页中插入图片。

5.能够嵌入音频文件。

素质

能反思、优化解决问题的方案，并将其迁移运用于解决其他问题

教学

重点

制作视频播放页面

教学

难点

制作宣传海报

教学

方法

教学环节包括课堂讲授、集体讨论、师生互动、课后答疑等

教学

用具

多媒体、课件

教学

内容

第2章HTML基础元素

2.1文档结构元素

2.1.1文档类型

HTML文档需要通过浏览器进行显示，但是，浏览器可以展示的文档类型有很多种，所以，在编写HTML文档时需要使用!DOCTYPE标签告知浏览器当前文档的类型。

文档类型标签!DOCTYPE必须位于HTML文档的第1行。

2.1.2文档根部

文档根部使用文件标签html实现，它包含文档的头部标签head及主体标签body。文件标签可以告知浏览器HTML文档的范围。

2.1.3头部元素

浏览器是HTML文档展示的平台，所以，一个完整的HTML文档必须在头部元素中指定浏览器所需的相关属性，这些属性包括文档头部、文档信息、文档标题等多个内容。

1.文档头部

文档的头部使用头部标签head表示。文档头部位于文档主体之前。在文档头部的范围内，可以指定的头部元素包括引用的脚本、样式、标题等。文档标题是文档头部中的必要元素。

2.文档信息

文档信息包括对搜索引擎和更新频率的描述。该信息由标签meta实现。

3.文档标题

文档标题使用标题标签title实现，浏览器会以特殊的方式来使用标题，并且把它放置在浏览器窗口的标题栏或状态栏上，

2.1.4主体元素

文档主体元素位于头部元素下方，使用主体标签body元素表示。主体元素中包含HTML要展示的主要内容，包括文本、图片、音乐、视频等。

2.2文本控制元素

2.2.1标题标签

标题是大段文字中心思想的一个概况，合理地使用标题不但可以吸引读者的注意而且可以对大段文字进行分割。HTML提供了6个标题标签，从h1到h6。其中，h1标签的字体最大，h6标签的字体最小。标题标签属于块级标签，所以，在网页显示时，会创建新行。

课后

分析

2.2.2文本修饰标签

文本修饰标签主要是针对文本的字体、字号及颜色的一种修饰。在HTML中使用标签font的属性可以控制对应文字的样式。

2.2.3文本语义标签

在网页中我们看到的文本加粗、斜体、添加下划线、高亮等样式都属于文本语义样式。文本语义的控制是为了着重对某段内容或文字进行语气上的强调。

2.2.4特殊字符

在HTML语言中有很多符号都是有特殊含义的，比如小于号（）和大于号（）是用于标识标签的。所以，当我们想要显示特殊符号时，可能会导致浏览器解析错误，把我们要显示的符号认知为标签。为此，HTML提供了一个转义字符表，将常用的符号使用字符代码进行转义，这样能保证特殊符号在网页中的正常使用。

2.3文本结构元素

文本结构元素包段落标签、换行标签和水平线标签。通过这些标签可以实现对整个HTML文档结构的设置。

2.3.1段落标签

段落是指将多行文字组合在一起用于表达一个中心思想的文本内容。在HTML文档中使用p标签实现段落的分隔。浏览器会自动地在p元素前后添加空行。

2.3.2换行标签

一般情况下建议页面的文本每行的字数在35个字左右，超出该字数建议进行换行显示。在HTML文档中使用br/标签实现换行效果，该标签为自闭合标签，只需要一个标签即可实现对应功能。

2.3.3水平线标签

在网页布局中可以使用一条横线实现对文本内容的分隔，从而让网页内容的条理更加清晰。HTML文档中使用hr/标签实现多种形式的水平线。该标签属于自闭合标签，只需要一个标签即可实现功能。

2.4图像元素

在网页中，图像元素的使用是必不可少的。图像元素可以作为整个页面的背景，也可以作为文本内容的具象展示，还可以作为一个网站的LOGO出现。

2.4.1在网页中插入图片

在HTML文档中插入图片需要使用img标签实现。

2.4.2控制图片的大小

插入网页的图片默认会以图片的尺寸进行显示，如果要控制图片的大小需要使用到height属性和width属性。

2.4.3为图片设置边框效果

为了区分图片的边界可以使用border属性设置图片的边框样式。

2.4.4图片与文本混排

图文混排是指图片和文本内容的对齐方式，需要使用align属性实现，可选项包括top、bottom