项目2HTML5简介（课件）《网页设计》（劳动保障出版社）

网页设计与制作 项目二 HTML5简介 N 1 知识目标 了解HTML5的优势 掌握标签的使用 掌握文本控制标签和图像标签的使用方法 ‹#› 网页设计与制作 2 HTML5的优势 任务2.1〓HTML5的优势 优势 含义 兼容 HTML5保持与过去技术完美衔接 合理 根据实际开发中已经存在的各类网页标签进行提炼和归纳 易用 遵循“简单至上”的原则，主要体现在简化的字符集声明、简化的DOCTYPE、简单而强大的API和以浏览器原生能力 新增标签 语义标签、新的表单控件、强大的图像支持等 ‹#› 网页设计与制作 HTML5的优势 任务2.1〓HTML5的优势 HTML5部分新增标签 ‹#› 网页设计与制作 HTML5的优势 任务2.1〓HTML5的优势 实例1 缺少</p>标签 代码： 运行结果： ‹#› 网页设计与制作 HTML5的优势 任务2.1〓HTML5的优势 解释 实例1的代码中缺少结束标签</p>，在HTML5中并没有把这种情况作为错误来处理，而是在允许这种写法的同时，定义了一些可以省略结束标签</p>的标签。 在其他版本的HTML中，语法非常宽松，标签是不区分大小写的，但在HTML5版本中，明确规定标签必须用小写格式。 在其他版本的HTML中，各浏览器对HTML的支持不统一，这就造成同一个页面在不同浏览器中可能显示不同的样式。HTML5通过详细分析各个浏览器所具有的功能，制定了一个通用的标准，并要求浏览器支持这个标准。 ‹#› 网页设计与制作 任务2.2〓HTML5的结构 实例2 新建XHTML文档 代码： ‹#› 网页设计与制作 解释 标签 含义 <!DOCTYPE…> <!DOCTYPE…>位于文档的最前面，用于向浏览器说明当前文档使用的标准规范。只有在开头处使用<!DOCTYPE…>声明，浏览器才能将该文档作为有效的HTML文档，并按指定的文档类型进行解析。 <html> <html>位于<!DOCTYPE…>之后，也被称为根标签。根标签主要用于告知浏览器其自身是一个HTML文档，其中<html>标志着HTML文档的开始，</html>则标志着HTML文档的结束，在它们之间是文档的头部和主体内容。 <head> <head>用于定义HTML文档的头部信息，也被称为头部标签。头部标签主要用于封装其他位于文档头部的标签，用于描述文档的标题、作者以及与其他文档的关系。例如，<title><meta><link>和<style>等。 <body> <body>用于定义HTML文档所要显示的内容，也被称为主体标签。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>内才能展示给用户。 任务2.2〓HTML5的结构 ‹#› 网页设计与制作 任务2.2〓HTML5的结构 实例3 新建HTML5文档 代码： 对比 通过对比可以看出，HTML5的结构相较于XHTML的结构简洁明了。 除上述的文档结构标签外，HTML5还简化了<meta>标签，让定义字符编码的格式变得更加简单。　 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.3〓标签概述 2.3.1标签的分类 标签名 语法格式 双标签 <标签名>内容<标签名> 单标签 <标签名/> 注释标签 <!--注释语句--> ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.3〓标签概述 嵌套关系也称为包含关系，可以简单地理解为一个双标签里面包含其他的标签。例如，在HTML5的结构代码中，<html>标签和<head>标签（或<body>标签）就是嵌套关系。 2.3.2标签的关系 1. 嵌套关系 实例4 嵌套关系 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.3〓标签概述 并列关系也称为兄弟关系，是指两个标签处于同一级别，并且没有包含关系，例如，在HTML5的结构代码中，<head>标签和<body>标签就是并列关系。在HTML标签中，无论是单标签还是双标签，都可以拥有并列关系。 2.3.2标签的关系 2. 并列关系 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.3〓标签概述 <标签名 属性1=“属性值1” 属性2=“属性值2” …>内容</标签名> 2.3.3标签属性 HTML标签设置属性的基本语法格式如下 实例5 文本居中显示 在上面的语法中，标签可以拥有多个属性，属性必须写在开始标签中，位于标签名后面。属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.3〓标签概述 网页制作时，经常需要设置页面的基本信息，如页面的标题、作者、与其他文档的关系等。为此HTML5提供了一系列的标签，这些标签通常都写在<head>标签中，被称为头部相关标签。 2.3.4头部相关标签 实例6 HTML5文档头部相关标签 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.3〓标签概述 设置页面标题标签<title> 2.3.4头部相关标签 <title>标签用于定义HTML5页面的标题，即给网页取一个名字，该标签必须位于<head>标签之中。一个HTML5文档只能包含一对<title></title>标签，<title></title>之间的内容将显示在浏览器窗口的标题栏中，如“苏轼全集”。 定义页面元信息标签<meta/> <meta/>标签用于定义页面的元信息（元信息不会显示在页面中），可重复出现在<head>头部标签中。在HTML5中，<meta/>标签是一个单标签，本身不包含任何内容，仅仅表示网页的相关信息。通过<meta/>标签的两组属性，可以定义页面的相关参数。 <meta/>标签的基本语法格式如下： <meta name="名称" content="值" /> <meta http-equiv="名称" content="值"/> ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.3〓标签概述 2.3.4头部相关标签 定义页面元信息标签<meta/> 使用name和content属性可以为搜索引擎提供信息，其中name属性用于提供搜索内容的名称，content属性提供对应的搜索内容值。 使用http-equiv和content属性可以设置服务器发送给浏览器的HTTP头部信息，为浏览器显示该页面提供相关的参数标准。http-equiv属性提供参数类型，content属性提供对应的参数值。默认会发送<meta http-equiv="Content-Type" content="text/html"/>，通知浏览器发送的文件类型是HTML。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.3〓标签概述 2.3.4头部相关标签 设置网页关键字，name属性的值为keywords，用于定义搜索内容名称为网页关键字，content属性的值用于定义关键字的具体内容，多个关键字内容之间可以用逗号分隔，如“苏轼,苏东坡,苏轼全集,苏东坡全集,苏轼词,宋词,水调歌头,东坡居士”。 设置网页描述，name属性的值为description，用于定义搜索内容名称为网页描述，content属性的值用于定义描述的具体内容，如“苏轼（1037年1月8日—1101年8月24日）,字子瞻,又字和仲,号东坡居士，世称苏东坡,汉族,眉州眉山（今属四川省眉山市）人,祖籍河北栾城,北宋文学家,书法家,画家。” ‹#› 网页设计与制作 设置网页作者，name属性的值为author，用于定义搜索内容名称为网页作者，content属性的值用于定义具体的作者信息，如“苏轼”。 设置字符集，http-equiv属性的值为Content-Type，content属性的值为text/html和charset=gbk，两个属性值中间用分号隔开，用于说明当前文档类型为HTML，字符集为gbk（中文编码）。常用的国际化字符集编码格式是utf-8，常用的国内中文字符集编码格式是gbk和gb2312。当用户使用的字符集编码与当前浏览器不匹配时，网页内容就会出现乱码。 设置页面自动刷新与跳转，http-equiv属性的值为refresh，content属性的值为数值和url，用分号隔开，用于指定在特定的时间后跳转至目标页面，该时间默认以秒为单位。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.4〓文本控制标签 2.4.1页面格式化标签 1. 标题标签 实例7 设置标题标签 标题标签的基本语法格式如下： <hn align="对齐方式">标题文本</hn> ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.4〓文本控制标签 2.4.1页面格式化标签 1. 标题标签 解释 默认情况下标题文字是加粗左对齐显示的，并且从<h1>到<h6>标题字号依次递减。如果想让标题文字右对齐或居中对齐，就需要使用align属性设置对齐方式。 属性值 含义 left 设置标题文字左对齐（默认值） center 设置标题文字居中对齐 right 设置标题文字右对齐 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.4〓文本控制标签 2.4.1页面格式化标签 1. 标题标签 实例8 align属性的使用 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.4〓文本控制标签 2.4.1页面格式化标签 2. 段落标签 实例9 使用<p>标签 第8行、第9行代码分别为<h2>标签和<p>标签添加align的“center”属性值，设置居中对齐。第10行代码中的<p>标签为段落标签的默认对齐方式。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.4〓文本控制标签 2.4.1页面格式化标签 3. 水平线标签 水平线可以通过<hr/>标签来定义，基本语法格式如下： <hr 属性="属性值"/> 属性 含义 属 性 值 align 设置水平线的对齐方式 left，right，center，默认为center，居中对齐显示 size 设置水平线的粗细 以px为单位，默认为2 px color 设置水平线的颜色 可用颜色名称，十六进制#RGB，rgb(r，g，b)表示 width 设置水平线的宽度 可以是确定的像素值，也可以是浏览器窗口的百分比，默认为100% <hr/>标签的常用属性 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.4〓文本控制标签 2.4.1页面格式化标签 3. 水平线标签 实例10 <hr/>标签的用法 第9行代码将<hr/>标签设置了不同的颜色、对齐方式、粗细和宽度值。第14行代码修改了<hr/>标签的颜色。其效果如图2-15所示。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.4〓文本控制标签 2.4.1页面格式化标签 4. 换行标签 实例11 使用<br/>标签 第8行代码在文本里面显示是在同一行，但是使用了<br/>标签，而第9行、第10行代码在文本中是换行显示的，采用了按Enter键的方式换行。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.4〓文本控制标签 2.4.2文本样式标签 文本样式标签可以设置一些文字效果（如字体、加粗、颜色），让网页中的文字样式变得更加丰富，其基本语法格式如下： <font 属性="属性值">文本内容</font> 属性 含义 face 设置文字的字体，例如，微软雅黑、黑体、宋体等 size 设置文字的大小，可以取1~7号之间的整数值 color 设置文字的颜色 <font>标签的常用属性 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.4〓文本控制标签 2.4.2文本样式标签 实例12 使用<font>标签 第1个段落中的文本设置为默认段落样式，第2~4个段落文本分别使用<font>标签设置了不同的文本样式。其效果如图2-19所示。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.4〓文本控制标签 2.4.3文本格式化标签 为文字设置粗体、斜体或下画线等一些特殊显示的文本效果 标签 显示效果 <b></b>和<strong></strong> 文字以粗体方式显示 <u></u>和<ins></ins> 文字以加下画线方式显示 <i></i>和<em></em> 文字以斜体方式显示 常用的文本格式化标签 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.4〓文本控制标签 2.4.3文本格式化标签 实例13 使用文本格式化标签 第8行代码设置段落文本正常显示，第9~13行代码分别给段落文本应用不同的文本格式化标签，使文字产生特殊的显示效果。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.4〓文本控制标签 2.4.4文本语义标签 1. <time>标签 <time>标签用于定义时间或日期，可以代表24小时中的某一时间。<time>标签不会在浏览器中呈现任何特殊效果，但是该元素能够以机器可读的方式对日期和时间进行编码，用户能够将生日提醒或其他事件添加到日程表中，搜索引擎也能够生成更智能的搜索结果。<time>标签有以下两个属性。 datetime属性，用于定义相应的时间或日期。取值为具体时间（如9:00）或具体日期（如2020-09-01），不定义该属性时，由文本的内容给定日期或时间。 pubdate属性，用于定义<time>标签中的文档（或article元素）发布日期。取值一般为“pubdate”。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.4〓文本控制标签 2.4.4文本语义标签 实例14 使用<time>标签 如果不使用<time>标签，也是可以正常显示文本内容的，因此<time>标签的作用主要是增强文本的语义，方便机器解析。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.4〓文本控制标签 2.4.4文本语义标签 2. <mark>标签 <mark>标签的主要功能是在文本中高亮显示某些字符，该标签的用法与<em>标签和<strong>标签有相似之处，但是使用<mark>标签在突出显示样式时更随意灵活。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.4〓文本控制标签 2.4.4文本语义标签 实例15 使用<mark>标签 使用<mark>标签包裹需要突出显示样式的内容，高亮显示的文字就是通过<mark>标签实现的。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.4〓文本控制标签 2.4.4文本语义标签 3. <cite>标签 <cite>标签可以创建一个引用，用于对文档引用参考文献的说明，一旦在文档中使用了该标签，被标注的文档内容将以斜体的样式展示在页面中，以区别于段落中的其他字符。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.4〓文本控制标签 2.4.4文本语义标签 实例16 使用<cite>标签 被<cite>标注的文字，以斜体的样式显示在网页中。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.4〓文本控制标签 2.4.5特殊字符标签 在浏览网页时常常会看到一些包含特殊字符的文本，如数学公式、版权信息等。在网页上显示这些包含特殊字符的文本时，需要特殊字符标签。 常用的特殊字符标签 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.5〓图像标签 2.5.1常见的图像格式 格式 特点 GIF格式 支持动画，同时GIF也是一种无损的图像格式 PNG格式 体积小，支持透明（全透明、半透明、全不透明），并且颜色过渡更平滑，但PNG不支持动画 JPG格式 可以用于保存超过256种颜色的图像，但是JPG是一种有损压缩的图像格式，这就意味着每修改一次图片都会造成一些图像数据的丢失。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.5〓图像标签 2.5.2图像标签及常用属性 在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签<img/>和与它相关的属性。图像标签的基本语法格式如下： <img src="图像url"/> ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.5〓图像标签 2.5.2图像标签及常用属性 属性 属 性 值 描述 src url 图像的路径 alt 文本 图像不能显示时的替换文本 title 文本 鼠标指针悬停时显示的内容 width 像素 设置图像的宽度 height 像素 设置图像的高度 border 数字 设置图像边框的宽度 vspace 像素 设置图像顶部和底部的空白（垂直边距） ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.5〓图像标签 2.5.2图像标签及常用属性 属性 属 性 值 描述 hspace 像素 设置图像左侧和右侧的空白（水平边距） align left 将图像对齐到左边 right 将图像对齐到右边 top 将图像的顶端和文本的第一行文字对齐，其他文字居图像下方 middle 将图像的水平中线和文本的第一行文字对齐，其他文字居图像下方 bottom 将图像的底部和文本的第一行文字对齐，其他文字居图像下方 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.5〓图像标签 2.5.2图像标签及常用属性 　1. alt属性 有时页面中的图像可能无法正常显示，如图片加载错误，浏览器版本过低等。因此，为页面上的图像添加替换文本是个很好的方式，在图像无法显示时告诉用户该图片的信息，这就需要使用图像的alt属性。 实例17 使用alt属性 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.5〓图像标签 2.5.2图像标签及常用属性 2. width和height属性 通常情况下，如果不为<img/>标签设置宽度和高度属性，图片会按照它的原始尺寸显示。通过width和height属性可以自定义图片的宽度和高度。通常我们只设置其中的一个属性，另一个属性则会依据前一个属性将原图等比例缩放显示。如果同时设置两个属性，且其比例和原图大小的比例不一致，显示的图像就会变形或失真。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.5〓图像标签 2.5.2图像标签及常用属性 3. border属性 网页默认情况下图像是没有边框的，通过border属性可以为图像添加边框，设置边框的宽度。通过实例18来演示使用border、width和height属性同时对图像进行修饰。 实例18 使用border、width和height属性 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.5〓图像标签 2.5.2图像标签及常用属性 4. vspace和hspace属性 在网页中，由于排版需要，有时候还需要调整图像的边距。HTML5中通过vspace和hspace属性可以分别调整图像的垂直边距和水平边距。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.5〓图像标签 2.5.2图像标签及常用属性 5. align属性 图文混排是网页中很常见的排版方式，默认情况下图像的底部会与文本的第一行文字对齐 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.5〓图像标签 2.5.3相对路径和绝对路径 1. 绝对路径 绝对路径就是网页上的文件或目录在硬盘上的真正路径 C:＼Users＼Administrator＼Desktop＼网页设计与制作＼项目二案例＼实例19 使用align属性 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务2.5〓图像标签 2.5.3相对路径和绝对路径 2. 相对路径 相对路径的设置分为以下3种。 图像文件和网页文件位于同一个文件夹中，只需输入图像文件的名称即可，如<img src="logo.gif"/>。 图像文件位于HTML文件的下一级文件夹，上下级文件之间用“/”隔开，如<img src="img/img01/logo.gif"/>。 图像文件位于HTML文件的上一级文件夹中，在文件名之前加入“../”，如果在上两级文件夹中，则需要使用“../ ../”，依此类推，如<img src="../logo.gif "/>。 相对路径就是相对于当前文件的路径。相对路径没有盘符， 通常是以网页文件为起点，通过层级关系描述目标图像的位置。 ‹#› 网页设计与制作 项目小结 本项目主要介绍了HTML5的优势和标签的概念，具体内容如下。 HTML5的优势： 介绍了HTML5的三个优势和新增标签。 HTML5的结构： 介绍了XHTML文档和HTML5文档的不同。 标签概述： 介绍了标签的分类、标签的关系、标签属性和头部相关标签。 文本控制标签： 介绍了页面格式化标签、文本样式标签、文本格式化标签和文本语义标签。 图像标签： 介绍了常见的图像格式、图像标签及常用属性、相对路径和绝对路径。 通过本项目的学习，了解HTML5文档的优势和结构，掌握标签概念，熟练使用相关的标签为网页添加文本样式和图片效果。 谢谢 $$