《网页设计与制作（活页式）》 课件 项目2 HTML5简介_第1页
《网页设计与制作（活页式）》 课件 项目2 HTML5简介_第2页
《网页设计与制作（活页式）》 课件 项目2 HTML5简介_第3页
《网页设计与制作（活页式）》 课件 项目2 HTML5简介_第4页
《网页设计与制作（活页式）》 课件 项目2 HTML5简介_第5页
已阅读5页，还剩44页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

网页设计与制作项目二

HTML5简介N

知识目标了解HTML5的优势掌握标签的使用掌握文本控制标签和图像标签的使用方法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头部相关标签实例6HTML5文档头部相关标签任务1.3〓网页制作工具任务2.3〓标签概述设置页面标题标签<title>2.3.4头部相关标签<title>标签用于定义HTML5页面的标题，即给网页取一个名字，该标签必须位于<head>标签之中。一个HTML5文档只能包含一对<title></title>标签，<title></title>之间的内容将显示在浏览器窗口的标题栏中，如“苏轼全集”。定义页面元信息标签<meta/><meta/>标签用于定义页面的元信息（元信息不会显示在页面中），可重复出现在<head>头部标签中。在HTML5中，<meta/>标签是一个单标签，本身不包含任何内容，仅仅表示网页的相关信息。通过<meta/>标签的两组属性，可以定义页面的相关参数。<meta/>标签的基本语法格式如下：<metaname="名称"content="值"/><metahttp-equiv="名称"content="值"/>任务1.3〓网页制作工具任务2.3〓标签概述2.3.4头部相关标签定义页面元信息标签<meta/>使用name和content属性可以为搜索引擎提供信息，其中name属性用于提供搜索内容的名称，content属性提供对应的搜索内容值。使用http-equiv和content属性可以设置服务器发送给浏览器的HTTP头部信息，为浏览器显示该页面提供相关的参数标准。http-equiv属性提供参数类型，content属性提供对应的参数值。默认会发送<metahttp-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设置标题标签标题标签的基本语法格式如下：<hnalign="对齐方式">标题文本</hn> 任务1.3〓网页制作工具任务2.4〓文本控制标签2.4.1页面格式化标签1.标题标签解释默认情况下标题文字是加粗左对齐显示的，并且从<h1>到<h6>标题字号依次递减。如果想让标题文字右对齐或居中对齐，就需要使用align属性设置对齐方式。属性值含义left设置标题文字左对齐（默认值）center设置标题文字居中对齐right设置标题文字右对齐任务1.3〓网页制作工具任务2.4〓文本控制标签2.4.1页面格式化标签1.标题标签实例8align属性的使用任务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为单位，默认为2pxcolor设置水平线的颜色可用颜色名称，十六进制#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/>和与它相关的属性。图像标签的基本语法格式如下：<imgsrc="图像url"/>任务1.3〓网页制作工具任务2.5〓图像标签2.5.2图像标签及常用属性属性属性值描述srcurl图像的路径alt文本图像不能显示时的替换文本title文本鼠标指针悬停时显示的内容width像素设置图像的宽度height像素设置图像的高度border数字设置图像边框的宽度vspace像素设置图像顶部和底部的空白（垂直边距）任务1.3〓网页制作工具任务2.5〓图像标签2.5.2图像标签及常用属性属性属性值描述hspace像素设置图像左侧和右侧的空白（水平边距）alignleft将图像对齐到左边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

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论