《HTML5+CSS3任务驱动教程(第2版)(微课版)》课件 模块2 HTML5开发基础_第1页
《HTML5+CSS3任务驱动教程(第2版)(微课版)》课件 模块2 HTML5开发基础_第2页
《HTML5+CSS3任务驱动教程(第2版)(微课版)》课件 模块2 HTML5开发基础_第3页
《HTML5+CSS3任务驱动教程(第2版)(微课版)》课件 模块2 HTML5开发基础_第4页
《HTML5+CSS3任务驱动教程(第2版)(微课版)》课件 模块2 HTML5开发基础_第5页
已阅读5页,还剩20页未读 继续免费阅读

下载本文档

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

文档简介

模块二HTML5开发基础目录任务一任务二任务三写一个简单的HTML5页面设置“在线学习网”的首页文件头部信息引入知识点2.1HTML简介2.2HTML文件的基本结构任务1编写一个简单的HTML5页面2.1HTML简介HTML是一切网页实现的基础,在网络中浏览的网页都是一个个由HTML标记构成的文件。浏览器只要看到HTML源代码,就能解析成网页。HTML文件本身是一种纯文本文件,我们可以使用任意一种文本编辑工具进行编写。比如,使用最简单的记事本工具,或Editplus、HBuilder、Sublime、InterlliJIDEA等文本编辑工具,或Dreamweaver可视化编辑工具编写。目前,最新的HTML文件是HTML5。任务1编写一个简单的HTML5页面2.1HTML简介2.1.1HTML的定义HTML(HyperTextMarkupLanguage,超文本标记语言)是由W3C(WorldWideWebConsortium,万维网联盟)所提出的,是用于描述网页文档的一种标记语言,其主要用途是制作网页。用HTML编写的超文本文档称为HTML文档,也叫网页。它能独立于各种操作系统平台。任务1编写一个简单的HTML5页面2.1HTML简介2.1.2HTML的发展历史HTML(第一版):在1993年6月作为互联网工程工作小组(IETF)工作草案发布,并非标准。

HTML2.0:1995年11月作为RFC1866发布,在RFC2854于2000年6月发布之后被宣布已经过时。

HTML3.2:1996年1月14日,W3C推荐标准。

HTML4.0:1997年12月18日,W3C推荐标准。

HTML4.01(微小改进):1999年12月24日,W3C推荐标准。HTML5:2014年10月29日,W3C宣布,经过接近8年的艰苦努力,HTML5标准规范终于制定完成。任务1编写一个简单的HTML5页面2.2HTML文件的基本结构HTML文档包含标记和纯文本,它被Web浏览器读取并解析后以网页的形式显示出来。每个网页都有其基本的结构,包括HTML文档的结构,标记的语法格式,语法规范等。2.2.1HTML的语法格式HTML的语法结构主要有标记、属性和元素组成,其基本语法格式如下:<标记名属性1=“属性值1”属性2=“属性值2”…>内容</标记名>任务1编写一个简单的HTML5页面2.2HTML文件的基本结构1.标记HTML标记组成HTML文档的元素,每一个标记描述了一个功能。标记分为单标记,双标记两种。(1)单标记:只需单独使用就能完整地表达意思,这类标记的基本语法格式如下:<标记名>(2)双标记:这类标记的基本语法格式如下:<标记名>内容</标记名>任务1编写一个简单的HTML5页面2.2HTML文件的基本结构2.标记的属性使用HTML制作网页时,如果想让HTML标记提供更多的信息,可以使用HTML标记的属性来实现,许多单标记和双标记的始标记内可以包含一些属性。在HTML中,属性要在开始标记中指定,用来表示该标记的性质和特性。基本语法格式如下:<标记名属性1=“属性值1”属性2=“属性值2”…>任务1编写一个简单的HTML5页面2.2HTML文件的基本结构3.元素HTML(element)元素是由“标记(tag)”和“属性(attribute)”所组成,指的是从开始标记到结束标记的所有代码。没有内容的HTML元素被称为空元素,空元素是在开始标记中关闭的。例如,以下代码片段所示:<p>欢迎来到广东创新科技职业学院信息工程学院</p><!--该p元素为有内容的元素-->任务1编写一个简单的HTML5页面2.2HTML文件的基本结构2.2.2HTML的文档结构HTML5文件的基本结构如下:<!doctypehtml><!--文档类型的声明--><html><!--文档的开始--><head><!--文档头部的开始--><title>此处是网页标题</title><!--文档标题信息的开始和结束--></head><!--文档头部的结束--><body><!--文档主体的开始-->此处是网页文件内容</body><!--文档主体的结束--></html><!--文档的结束-->任务1编写一个简单的HTML5页面2.2HTML文件的基本结构2.2.3HTML的常用标记HTML5文档核心是HTML5标记,标记是用来实现网页元素的最小单位。学习HTML语言时,除要知道HTML语言结构外,更多是学习掌握这些标记的使用方法。HTML语言的常用标记包含文件结构标记、文本段落标记、链接标记、表格标记、列表标记等等任务1编写一个简单的HTML5页面任务1编写一个简单的HTML5页面任务实现(1)创建一个HTML5页面。(3)该网页页面显示的内容为“让我们开始HTML语言的新旅程!”。(2)该网页页面标题为“第一个HTML页面”。引入知识点任务2设置“在线学习网”的首页文件头部信息2.3页面的头部摘要信息2.3页面的头部摘要信息在网页的头部<head>和</head>标记所包含的部分中,通常存放一些介绍页面内容的信息,例如页面标题、关键字、描述、页面大小,更新日期和网页快照等。其中,网页标题及页面描述称为网页的摘要信息。如果希望自己发布的网页能被百度、谷歌等搜索引擎搜索到,在制作网页时就需要注意编写网页的摘要信息。接下来就介绍一下网页的摘要信息,<meta>标记如何去使用。任务2设置“在线学习网”的首页文件头部信息2.3页面的头部摘要信息2.3.1<meta>标记元数据(metadata)是关于数据的信息。<meta>标记是页面头部部分中的一个辅助性标记,提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。meta元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。任务2设置“在线学习网”的首页文件头部信息2.3页面的头部摘要信息2.3.2<meta>标记属性<meta>设置的内容包括字符集、网页关键字、网页描述信息、页面的刷新及跳转等,这些内容都是通过设置meta标记的相应属性来实现。任务2设置“在线学习网”的首页文件头部信息2.3页面的头部摘要信息2.3.3使用<meta>设置页面字符集在HTML5中,有一个新的charset属性,它使字符集的设置更加简化。基本语法格式如下:<metacharset="字符集">例如,下列代码告诉浏览器,网页使用字符集为utf-8,代码如下:<metacharset="utf-8">任务2设置“在线学习网”的首页文件头部信息2.3页面的头部摘要信息2.3.4使用<meta>设置作者信息基本语法格式如下:<metaname="author"content="作者的姓名">例如,将作者的姓名“李小茗”添加到网页的源代码中,代码如下:<metaname="author"content="李小茗">任务2设置“在线学习网”的首页文件头部信息2.3页面的头部摘要信息2.3.5使用<meta>设置网页搜索关键字基本语法格式如下:<metaname="keywords"content="关键字1,关键字2,关键字3,…">例如,定义针对搜索引擎的关键字,代码如下:<metaname="keywords"content="网页制作,HTML,Dreamweaver">任务2设置“在线学习网”的首页文件头部信息2.3页面的头部摘要信息2.3.6使用<meta>设置网页描述信息基本语法格式如下:<metaname="discription"content="描述内容">例如,在网页中设置为网站设计者提供网页制作的说明信息,代码如下:<metaname="discription"content="这是一个网页制作等在线学习平台,拥有系统的前端和移动开发等课程。">任务2设置“在线学习网”的首页文件头部信息2.3页面的头部摘要信息2.3.7使用<meta>设置网页刷新时间基本语法格式如下:<metahttp-equiv="refresh"content="刷新间隔时间">例如,将网页设置为每隔10秒自动刷新,代码如下:<metahttp-equiv="refresh"content="10">任务2设置“在线学习网”的首页文件头部信息2.3页面的头部摘要信息2.3.8使用<meta>设置网页自动跳转基本语法格式如下:<metahttp-equiv="refresh"content="刷新间隔时间";url="页面地址">例如,将网页设置10秒之后,网页自动跳转到中国大学慕课网站首页,代码如下:<metahttp-equiv="refresh"content="10";url="">任务2设置“在线学习网”的首页文件头部信息任务实现

温馨提示

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

最新文档

评论

0/150

提交评论