HTML5基础与应用PowerPointdesign
目
录CONTENTS01.HTML5概述02.HTML的常用标签03.练习案例
HTML5概述Part01
01什么是HTMLHTML5是构建网站内容的一种语言描述方式。HTML5是互联网的新一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。HTML的全称为HyperTextMarkupLanguage，表示超文本标记语言。所谓超文本，是指HTML可以加入图片、声音、动画、影视等内容，它可以从一个文件跳转到另一个文件。02HTML的基本结构HTML元素的构成：解释HTML元素是由预定义的HTML标签组成，包括单标签和双标签的使用。
HTML文档的主要部分：描述HTML文档由头部信息和主体信息构成，包括head和body标签的用途。
HTML标签的类型：区分单标签和双标签，并解释标签属性的作用。03HTML5文件的创建HTML5文件的创建过程：使用文本编辑器创建HTML5文件，包括新建文本文档、输入HTML代码、保存为HTML文件等步骤。
HTML5的基本结构：展示一个简单的HTML5文档结构，包括html、head、title和body标签的使用。
HTML5文件的浏览：描述如何通过浏览器打开并查看HTML5文件的效果。课堂案例——编写HTML5
在Windows的操作系统下，创建一个HTML5文件的步骤如下。（1）单击鼠标右键，在弹出的菜单中中执行“新建文本文档”命令，打开“记事本”文件。课堂案例——编写HTML5
（2）在“记事本”中输入以下HTML代码。htmlheadtitle网页标题/title/headbody编写HTML5/body/html课堂案例——编写HTML5
（3）在“记事本”文件中执行“文件另存为”命令，打开“另存为”对话框，在“保存类型”下拉列表中选择“所有文件”，然后在“文件名”文本框中输入文件名以及扩展名（比如编写HTML5.html），最后设置保存路径，这样就建好了一个HTML文档。（4）打开该文件所在的目录，可以看到文件的图标已经变成了一个HTML文件。课堂案例——编写HTML5
（5）使用鼠标左键双击该文件，浏览器将显示此页面。标题栏显示“网页标题”，文档中出现文字“编写HTML5”。使用DreamweaverCC创建一个页面是很容易的，而不需要在纯文本中编写代码。打开DreamweaverCC切换到代码视图，可以看到Dreamweaver在新文档中已经自动创建了HTML文档。课堂案例——编写HTML5
HTML文档是由HTML元素组成的文本文件。HTML元素是预定义正在使用的HTML标签，即HTML标签用来组成HTML元素。HTML标签两端有两个包括字符和，这两个包括字符被称为角括号。标签通常是成对出现，比如body和/body。一对标签的前面一个是开始标签，第二个是结束标签，在开始和结束标签之间的文本是元素内容。HTML标签并不区分字母的大小写，比如title与TITLE所表示的含义是一致的。HTML主要由头部信息和主体信息两部分构成，如图3-9所示。头部信息是文档的开头部分，以head标签开始，/head标签结束。在标签对之间可包含文档总标题title…/title、脚本操作script…/script等，如不需要也可以省略。body标签是文档主题部分的开始，以/body标签结束，其标签对包含众多的标签。html…/html标签在最外层，表示这对标签之间的内容是HTML文档，标签对之间包含所有HTML标签HTML的基本结构
HTML中的标签丰富多样，通过它们可以表现出丰富多彩的设计风格，下面就介绍标签的几种类型。1.单标签某些标签称为“单标签”，因为它只需单独使用就能完整地表达意思，这类标签的语法如下。标签名称最常用的单标签是br，它表示换行。2.双标签双标签由“始标签”和“尾标签”两部分构成，必须成对使用，其中“始标签”使浏览器从此处开始执行该标签所表示的功能，而“尾标签”告知浏览器在这里结束该功能。“始标签”前加一个斜杠（/）即成为尾标签，双标签的语法如下。标签内容/标签其中“内容”部分就是这对标签要施加作用的部分，例如想突出某段文字的显示，就可以将该段文字放在em…/em标签中。3.标签属性在单标签和双标签的始标记内可以包含一些属性，其语法如下。标签名称属性1属性2属性3…各属性之间无先后次序，属性也可省略（即取默认值）。例如单标签hr表示在文档当前位置绘制一条水平线，默认是从窗口中当前行的最左端一直到最右端，属性为hrsize=3align=leftwidth=75%，其中各属性的含义如下。? size：定义线的