Web前端开发实例教程——HTML5 CSS3 JavaScript 第2章 HTML概述.pptVIP

第2章 HTML概述 Web前端开发实例教程 ——HTML5+CSS3+JavaScript 2.1 HTML简介 2.1.1 Web技术发展历程 HTML最早源于SGML（Standard General Markup Language，标准通用化标记语言）。2000年，W3C组织公布发行了XHTML 1.0版本。不过XHTML并没有成功，而HTML5便因此孕育而生。 2012年12月17日，W3C宣布凝结了大量网络工作者心血的HTML5规范正式定稿，确定了HTML5在Web网络平台奠基石的地位。 Web技术发展历程时间表如图2-1所示。 2.1 HTML简介 2.1.2 HTML5的特性 HTML5实现Web应用程序和用于更好的呈现内容。 1．实现Web应用程序 HTML5引入新的功能，以帮助Web应用程序的创建者更好地在浏览器中创建富媒体应用程序，这是当前Web应用的热点。多媒体应用程序目前主要由Ajax和Flash来实现，HTML5的出现增强了这种应用。 2．更好地呈现内容 基于Web表现的需要，HTML5引入了更好地呈现内容的元素： ① 用于视频、音频播放的video元素和audio元素。 ② 用于文档结构的article、footer、header、nav、section等元素。 ③ 功能强大的表单控件。 2.1 HTML简介 2.1.3 HTML5元素 根据内容类型的不同，可以将HTML5的标签元素分为7类，见表2-1。 2.2 HTML语法基础 2.2.1 HTML语法结构 1．标签 在HTML中，通常标签都是由开始标签和结束标签组成的，开始标签用“标签”表示，结束标签用“/标签”表示。其格式为： 标签 受标签影响的内容 /标签 2．属性 标签仅仅规定这是什么信息，但是要想显示或控制这些信息，就需要在标签后面加上相关的属性。其格式为： 标签 属性1=属性值1 属性2=属性值2 … 受标签影响的内容 /标签 3．元素 元素指的是包含标签在内的整体，元素的内容是开始标签与结束标签之间的内容。 2.2 HTML语法基础 2.2.2 HTML编写规范 1．标签的规范 （1）标签分单标签和双标签，双标签往往是成对出现，所有标签（包括空标签）都必须关闭，如br/、img/、p…/p等。 （2）标签名和属性建议都用小写字母。 （3）多数HTML标签可以嵌套，但不允许交叉。 （4）HTML文件一行可以写多个标签，但标签中的一个单词不能分两行写。 （5）HTML源文件中的换行、回车符和空格在显示效果中是无效的。 2.2 HTML语法基础 2.2.2 HTML编写规范 2．属性的规范 （1）根据需要可以使用该标签的所有属性，也可以只用其中的几个属性。 （2）属性值都要用双引号括起来。 （3）并不是所有的标签都有属性，如换行标签就没有。 3．元素的嵌套 （1）块级元素可以包含行级元素或其他块级元素，但行级元素却不能包含块级元素，它只能包含其它的行级元素。 （2）有几个特殊的块级元素只能包含行级元素，不能再包含块级元素。 4．代码的缩进 HTML代码并不要求在书写时缩进，但为了文档的构性和层次性，建议初学者使用标记时首尾对齐，内部的内容向右缩进几格。 2.2 HTML语法基础 2.2.3 HTML5文档结构 HTML5文档是一种纯文本格式的文件，文档的基本结构为： !doctype html html head meta charset=gb2312 title文档标题/title /head body 网页内容 /body /html 2.3 创建HTML文档 创建HTML文档 下面用最简单的“记事本”来编辑网页文件。 ① 打开记事本。单击Windows的“开始”按钮，在“程序”菜单的“附件”子菜单中单击“记事本”命令。 ② 创建新文件，并按HTML语言规则编辑。在“记事本”窗口中输入HTML代码。 ③ 保存网页。将记事本中的内容保存在磁盘中。 ④ 在“我的电脑”相应的存盘文件夹中双击first.html文件启动浏览器，即可看到网页的显示结果。 2.4 搭建支持HTML5的浏览器环境 创建HTML文档 因此，在正式执行一个HTML5页面之前，必须先搭建支持HTML5的浏览器环境，并检查浏览器是否支持HTML5标签。 目前，Microsoft的IE系列浏览器仅有IE 9及其以上版本支持HTML5，本书所有的应用实例均是在Windows 7操作系统下的IE 9浏览器中运行的。 【例2-1】制作简单的HTML5文档检测浏览器是否支持HTML5，本例文件2-1.html在IE 9浏览器中的显示效果如图2-4所示。 2.5 网页头部标签