HTML5 CSS3 JavaScript第2章ppt课件.pptx

《HTML5 CSS3 JavaScript第2章ppt课件.pptx》由会员分享，可在线阅读，更多相关《HTML5 CSS3 JavaScript第2章ppt课件.pptx（43页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、HTML5 CSS3 JavaScript 第2 章教学课件第2章 HTML构建基本网页 2.1 制作简单文本网页 2.2 添加图片 2.3 添加超链接了解HTML常用的基本标签了解块元素的特点掌握标签的多种跳转功能熟练使用标签和标签引言本章重点学习如何去构建一个基本HTML网页。标签是构建HTML网页的重要元素，而了解并正确使用标签是十分重要的。HTML网页常用的标签有段落标签、超链接标签、图片标签、块元素等。段落标签用于显示网页中的文本内容，超链接标签可以实现网页之间的跳转，图片标签可在网页中嵌入图片，块元素能对网页内容进行分类分组处理，用于网页的布局。2.1制作简单文本网页标题标签案例秋

2、天的故事换行标签段落标签2.1 制作简单文本网页2.1.1 标题标签标题能够体现文档结构，搜索引擎通过标题能为网页的结构和内容编制索引，用户可通过标题来快速浏览网页。作用标题是由至标签定义，定义最大的标题，依次递减，定义最小的标题，浏览器会自动在标题的前后添加空行。标题文字语法格式标题标签的语法格式如下。2.1 制作简单文本网页2.1.1 标题标签依次输出至标题标签，以便更好地看出它们之间的差别。演示说明绿水青山就是金山银山绿水青山就是金山银山绿水青山就是金山银山绿水青山就是金山银山绿水青山就是金山银山绿水青山就是金山银山代码 例2.1运行效果2.1 制作简单文本网页2.1.2 段落标签段落是

3、通过标签来定义的。段落文字语法格式段落标签的语法格式如下。2.1 制作简单文本网页2.1.2 段落标签在标签中输入文本内容。演示说明明月别枝惊鹊，清风半夜鸣蝉。稻花香里说丰年，听取蛙声一片。七八个星天外，两三点雨山前。旧时茅店社林边，路转溪桥忽见。代码 例2.2运行效果说明，默认情况下，HTML会自动在块级元素（段落、标题）前后添加一个额外的空行。2.1 制作简单文本网页2.1.3 换行标签换行标签可在文本中生成一个换行（回车）符号，它是一个空元素，也是一个单标签，不能在里面写内容。在写诗句文本和地址时，换行是十分适用的。内容内容语法格式换行标签的语法格式如下。2.1 制作简单文本网页2.1.

4、3 换行标签输入一首古诗春晓，在每个小诗句内容后面添加换行标签，查看实现的效果。演示说明    春晓春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。代码 例2.3运行效果2.1 制作简单文本网页2.1.4 案例秋天的故事本实例是一篇关于秋天的简单文本介绍。该页面主要由文字元素和标签构成，使用至标题标签、段落标签和换行标签来实现整个页面。页面结构简图如图所示。2.1 制作简单文本网页2.1.4 案例秋天的故事代码实现秋天的故事秋天，又称秋季，一年四季的第三季，由夏季到冬季的过渡季，天文为秋分到冬至。自然景观最明显的变化在树木上面，城市里会开始清扫大量的落叶

5、，山区则涌进不少观赏红叶的游客们。进入秋季，北方冷空气不断侵入，但势力不是很强，常在中国北方形成秋高气爽的天气，华西常有绵绵秋雨出现。总体来讲，进入秋季，太阳高度角渐低，温度渐降；秋风送爽、炎暑顿消、硕果满枝、田野金黄。主体代码 例2.4本节小结本节内容主要讲解了标题标签、段落标签和换行标签的使用。通过本节的学习，希望读者可以熟练掌握这些标签。2.2添加图片图片标签案例致敬教师节块元素水平线标签2.2 添加图片2.2.1 图片标签在HTML中图像是由标签定义的，图片标签属于单标签，没有闭合标签，并且是一个空元素，只包含属性，不包含文本内容。图片标签表示向网页中嵌入一张图片，创建的是引用图像的占

6、位空间。语法格式图片标签的语法格式如下。2.2 添加图片2.2.1 图片标签src属性在标签中是必须存在的，引用要嵌入的图片的路径，这个路径可以是相对路径，也可以是绝对路径。相对路径是被引入的文件相对于当前页面的路径；绝对路径是文件在网络或本地的绝对路径。标签属性1.src属性相对路径的3种使用方式，示例如下。绝对路径的2种使用方式，示例如下。2.2 添加图片2.2.1 图片标签alt为文本提示属性，用户可为图像定义一串预备的可替换的文本，它的值是对图片的文字进行描述，用于图片无法显示或不能被用户看到的情况。若图片正常显示，则看不到任何效果；若图片无法显示或不能被用户看到，则显示出提示文本。当

7、图片只是用于装饰网页，而不作为主体重点内容的一部分时，可以写一个空的alt（alt=），这是一个较佳的处理方法。标签属性2.alt属性2.2 添加图片2.2.1 图片标签3.title属性title属性是鼠标移到图片上的提示文字。设置title属性后，若鼠标移入到图片上，则会显示出title里的提示信息。4.width属性和height属性width属性为宽度属性，height属性为高度属性，可分别用于设置图片的宽度和高度，属性值常用单位为像素（px）。标签属性2.2 添加图片2.2.1 图片标签在网页中嵌入一张细草微风的风景图片。演示说明代码 例2.5图片正常显示时的运行效果2.2 添加图片

8、2.2.1 图片标签图片无法显示时，一般有2种情况出现。第1种情况为图片不存在，导致的因素可能是图片名称拼写错误，示例代码如下。第2种情况为图片路径错误，导致的因素可能是图片路径漏写，示例代码如下。图片不存在或图片路径错误导致图片无法显示时，运行效果如图所示。2.2 添加图片2.2.2 水平线标签水平线是由标签定义的，在HTML文件中使用标签创建横跨网页的水平线，将段落与段落之间分隔开，使文档结构更加层次分明。水平线标签是一个单标签，一般添加在两个段落之间，可以是一个单独的简单标签，也可以加入它的一些属性，使设计效果更美观。语法格式水平线标签的语法格式如下。水平线标签常用属性的具体说明如表所示

9、。常用属性属性 说明align 设置水平线对齐方式，属性值有center（居中对齐，默认值）、left（左对齐）、right（右对齐）color 设置水平线颜色，属性值可以是颜色的英文单词或十六进制值或RGB 值size 设置水平线粗细，属性值为数值，以像素（px）为单位，默认值为2pxwidth 设置水平线宽度，属性值为像素值或浏览器窗口的百分比（默认为100%）2.2 添加图片2.2.2 水平线标签2.2 添加图片2.2.3 块元素块元素也称为内容划分元素，是一个块级元素，在HTML中独占一行，可以设置宽度和高度，支持所有全局属性。它是一个通用型的流内容容器，在不使用CSS的情况下，不设置

10、宽度和高度，其对内容或布局没有任何影响。它作为一个“纯粹的”容器，元素在语义上不表示任何特定类型的内容，可以使用class或id属性更方便地定义内容的格式，将内容分组。由于元素独自占据一行的块级元素特性，要想实现在一行内并排放置块元素，可以使用浮动属性，但元素浮动的同时也会对页面布局产生影响。块元素的概念2.2 添加图片2.2.3 块元素HTML元素大体可分为3大类，分别为块元素、内联元素和内联块元素。块元素的特点是可以自定义宽度和高度，并独占一行，自上而下排列，还可以作为一个容器包含其他的块元素或内联元素。常见的块元素有、等。块元素的特点2.2 添加图片2.2.3 块元素拓展 内联元素也称为

11、行内元素，它的特点是不可以自定义宽度和高度，不独占一行，在一行逐个进行显示。内联元素设置与高度相关的一些属性，例如margin-top，margin-bottom，padding-top，padding-bottom，line-height等属性，会显示无效或显示不准确。常用的内联元素有、等。内联块元素也称为行内块元素，它的特点是可以自定义宽度和高度，可以和其他内联元素在一行显示，既具有内联元素特点，也具有块元素特点。常用的内联块元素有、等。2.2 添加图片2.2.4 案例致敬教师节本实例是一篇致敬教师节的文案页面。该页面主要由段落标签、水平线标签、图片标签、块元素等构成。页面结构简图如图所示

12、。2.2 添加图片2.2.4 案例致敬教师节代码实现 致敬教师节！老师您辛苦了 一支粉笔 两袖微尘三尺讲台 四季耕耘 是他们每日脚踏实地坚守在讲台上，勤勉又充满担当。教师节来临之际，让我们向老师们说一句：谢谢您！.教师节的建立，标志着教师在中国受到全社会的尊敬。在这个特殊的日子里，让我们表达对老师的敬意吧！主体代码 例2.6本节小结本节内容主要讲解了图片标签、块元素和水平线标签的使用，并利用这些标签元素实现一个关于致敬教师节的文案。通过本节的学习，希望读者可以熟练运用图片标签、水平线标签和块元素。2.3添加超链接超链接案例技术手册导航超链接的伪类锚点链接2.3 添加超链接2.3.1 超链接超链

13、接标签可以通过href属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。超链接（Uniform Resource Locator，简称URL）就是统一资源定位器，表达形式为。它的效果是点击网页上的某个链接，会自动跳转到另外一个链接。内容语法格式超链接图片标签的语法格式如下。2.3 添加超链接2.3.1 超链接href（Hypertext Reference，链接目标地址）是指示链接的目标。target指打开新窗口的方式，主要有以下四种方式。第一种：self在同一个窗口打开（默认值）。第二种：blank新建一个窗口打开。第三种：parent在父窗口打开。第四种：

14、top在浏览器整个窗口打开。标签属性2.3 添加超链接2.3.1 超链接超链接可实现网页跳转功能，href属性值为目标链接地址。示例代码如下所。天猫超链接功能超链接能创建邮件链接、电话链接等功能链接，邮件链接是mailto链接将用户的电子邮件程序打开，发送新邮件。电话链接是使用tel链接查看连接到手机的网络文档和笔记本电脑。示例代码如下。发送邮件+1234562.3 添加超链接2.3.2 锚点链接锚点链接具有锚点功能，href属性值为锚点id，点击锚点能跳转到对应id所在的位置，可以是同一个网页内，也可以是其他网页内。示例代码如下。秋天的故事秋天的故事秋天的故事.锚点功能2.3 添加超链接2.

15、3.2 锚点链接锚点链接具有锚点功能，href属性值为锚点id，点击锚点能跳转到对应id所在的位置，可以是同一个网页内，也可以是其他网页内。示例代码如下。秋天的故事秋天的故事秋天的故事.锚点功能2.3 添加超链接2.3.3 超链接的伪类超链接有4种常用的伪类，分别是link、visited、hover和active，它们是一种动态伪类标签，使用冒号（:）可以表示4种不同的状态。属性 说明:link 表示超链接点击之前:visited 表示超链接点击之后:hover 表示鼠标放到某个标签上的时候:active 表示点击某个标签没有松鼠标时伪类标签使用的状态顺序为link，visited，hove

16、r，active。值得注意的是，静态伪类只能使用link和visited两个状态，并且只能用于超链接。2.3 添加超链接2.3.4 案例技术手册导航本实例是制作一个技术手册导航。该页面不仅应用超链接的多种功能，例如，锚链接功能、网页跳转功能以及回到顶部功能，同时也应用到上一节所学的标题标签、段落标签和换行标签来共同实现这个页面效果。页面结构简图如图所示。2.2 添加超链接2.3.4 案例技术手册导航代码实现 了解web前端/*锚链接*/1.HTML概述 2.CSS概述 3.JavaScript概述/*网络链接*/不懂就百度一下/*锚点id*/1.HTML概述 HTML（Hyper Text M

17、ark-up Language，超文本标记语言）。.回到顶部 主体代码 例2.72.2 添加超链接2.3.4 案例技术手册导航代码实现/*超链接去掉文本修饰下划线*/a text-decoration:none;/*鼠标单击标签之前的文字颜色*/a:link color:#ab6713;/*鼠标单击标签之后，文字变颜色*/a:visited color:#aaa;/*鼠标放到标签时，文字变颜色*/a:hover color:#6495ef;/*鼠标单击标签未松开时，文字变颜色*/a:active color:hotpink;CSS 代码 例2.72.2 添加超链接2.3.4 案例技术手册导航代

18、码实现在上述主体代码中，利用超链接的锚点功能，点击目录可实现跳转到相应内容。锚点目录下方添加1个百度网页的超链接，实现网页跳转功能，方便浏览者进行相关内容的检索。文本内容下方添加一个通过点击超链接回到顶部的功能，为浏览者提供更好的浏览体验。在HTML中以内嵌方式应用CSS样式实现超链接在4种不同状态下的颜色变化，这4种不同状态有固定的代码编写顺序，在编写代码时一定要注意超链接状态的顺序，以免达不到预期效果。本节小结本节内容主要讲解了超链接的网页链接跳转和锚点链接跳转。通过本节的学习，希望读者可以了解超链接的功能作用，在网页设计中能够熟练运用。课后小结本章重点介绍构建网页的一些基本标签，文字、图片和超链接是网页中经常使用到的元素，因此熟练掌握段落标签、图片标签和超链接是十分重要的，而块元素的应用能实现网页的整体布局。希望通过对本章内容的分析和讲解，读者能够对网页的构建有进一步地了解，掌握HTML基本标签的使用，能编写出基础的网页，提升代码编写能力，为后面的深入学习奠定基础。