网页设计与制作-HTML5 + CSS3 课件 任务3 制作“学习资料”子页面

网页设计与制作HTML5+CSS3任务3制作“学习资料”子页面第2章网页的基本结构实现知识目标技能目标素质目标（1）掌握HTML基本的结构元素。（2）掌握HTML元素的分类。（3）掌握HTML注释标签与文档类型标签的用法。（1）能够正确使用基本的结构元素。（2）能够正确使用注释标签进行注释。（3）能够正确使用文档类型标签对文档进行声明。（1）掌握并遵循Web开发并标准。（2）培养勤奋学习的态度。（3）培养严谨的编程习惯。HTML基本结构元素HTML元素类型任务实现第2章网页的基本结构实现1.HTML基本结构元素1.1html元素1.2head元素1.3body元素第2章网页的基本结构实现1.1html元素1.HTML基本结构元素HTML元素是构成HTML文档的基本对象，是通过HTML标签进行定义的，是从开始标签起始，以结束标签终止，元素的内容是开始标签与结束标签之间的内容；每个HTML网页文档都包含html、head和body元素这三个元素，并且只能出现一次。HTML基本结构元素包括html、head、title、body、meta、link、style、script等;1.1html元素1.HTML基本结构元素

html元素是网页文件的根元素，网页文件内容都要放置在html的起始标签和结束标签内，它告诉浏览器整个文件是HTML格式，按照HTML规范解析并显示HTML文件。1.2head元素1.HTML基本结构元素head元素包含网页的头部信息，用于定义文档的头部，它是所有头部元素的容器。主要包括网页的标题、网页介绍、关键词、样式文件、脚本文件、字符编码等内容。head常用元素如下：1）title元素

2）link元素3）script元素 4）meta元素1.2head元素1.HTML基本结构元素title元素：网页的标题，应尽可能地短，并具有可描述性。例如：<title>学习资料</title>link元素：引入外部样式文件。例如：<linkrel="stylesheet"type="text/css"href="style.css">script元素：引入外部脚本文件和内置脚本。例如：<script>document.write("HelloWorld!");</script>meta元素：设置网页关键词、描述、作者等信息，与SEO优化有关。例如：<metaname="keywords"content="江西工业工程职业技术学院"/>1.3body元素1.HTML基本结构元素body元素包含网页文档的所有内容，是网页文档的主体元素。具体标签包括：1）段落p 2）标题h1~h63）超链接a 4）图像img5）表单form 6）列表ul元素HTML基本结构元素HTML元素类型任务实现第2章网页的基本结构实现2.HTML元素类型2.1行内元素、块状元素和行内块状元素2.2替换元素与不可替换元素2.3注释标签和文档类型标签第2章网页的基本结构实现2.1行内元素、块状元素和行内块状元素2.HTML元素类型根据元素的显示（能不能在同一行显示）类型，HTML元素分为行内元素、块状元素和行内块状元素。1.行内元素(也称内联元素)，具有以下特点：（1）和其他元素都在一行上。（2）元素的高度、宽度、行高及顶部和底部边距不可设置，左右边距可以设置。（3）元素的宽度就是它包含的文字或图片的宽度，不可改变。（4）只可以容纳行内元素。常用的内联元素有:a、span、br、i、em、strong、label、q、textarea等。其中a、span是最典型的行内元素。2.1行内元素、块状元素和行内块状元素2.HTML元素类型2.块状元素(也称块级元素)，具有以下特点：（1）总是在新行上开始，独立占一行，两个相邻块状元素不会出现并列显示的现象，会按顺序自上而下排列。（2）高度、高度、行高以及边距都可控制。（3）元素宽度在不设置的情况下，是它本身容器的100%。（4）它可以包含内联元素和部分块元素。常见的块状元素有div、p、h1、h2、h3、h4、h5、h6、ul、li、ol、dl、form、table等；其中div是最典型的块状元素，被广泛地应用到了网页布局中。2.1行内元素、块状元素和行内块状元素2.HTML元素类型3.行内块状元素(也称内联块级元素)，本质上是行内元素，具有以下特点：（1）默认宽度是它本身内容的宽度，但是可以设置宽度、高度和内外边距。（2）可以与其他行内元素、内联元素共处一行，但是之间会有空白缝隙。常见的行内块元素有img、input、td。2.2替换元素与不可替换元素2.HTML元素类型1.替换元素(也称置换元素)，浏览器会根据元素的标签和属性，来决定元素的具体显示内容。常见的替换元素有img、input、textarea、select、object等。例如：浏览器会根据img标签的src属性的值来读取图片信息并显示出来。<inputtype="text"/>2.不可替换元素(也称非置换元素)，其内容直接表现在浏览器。例如：段落P就是一个不可替换元素，文字段落的内容全部被显示。2.3注释标签和文档类型标签2.HTML元素类型1.注释标签：可以在HTML文档中添加注释，增加代码的可读性，便于维护和修改。在浏览器中对用户透明，只有在用代码编辑器打开文档源代码时才可见。格式：<!--注释内容-->例如：<p>这是一段普通的段落。</p><!--这是一段注释，不会在浏览器中显示。-->2.文档类型标签：正确声明HTML的版本，使浏览器就能正确显示网页内容