认识HTML5

大家好，今天由我来给大家介绍这门新课程，网页设计与制作，学习HTML5和CSS相关的概念和知识。这门课学起来比较轻松，在你们学习了网页设计标签这个概念之后，整个学习过程会很轻松，我们只需要学会使用标签，就可以知道怎样去设计一个静态网页。

在深入学习这门课之前，我们先来简单的了解下网页的相关概念。

Web全称为“World Wide Web”,即全球广域网，通常也被称为万维网，是基于超文本和HTTP开发的一种全球的，动态交互的，跨平台的分布式图形信息系统。对于这个概念呢，首先我们要抽象的理解一下，全球的，因为网页技术在全球都有被使用，无论是中国，美国，亦或是韩国日本等等国家，他们都会有网页技术，所以是全球的，其次动态交互，可能你们现在理解起来还有些困难，网页不可能是静态的，他还需要与用户进行交互，比如说，你用鼠标点击一个链接，网页就会进行一个调转，这个跳转的过程就成为动态交互，我们这学期的课程讲的是HTML和css,只应用在静态网页设计上，至于什么是HTML和CSS，这个我们待会来了解。跨平台这个理解起来也很简单，一个相同的网页，我们可以在不同浏览器打开，或者这个网页的链接你打开又是在其他平台打开，这个就称之为跨平台。分布式图形信息系统我们可以这样来理解，整个网页的图片或者是文本都在用分布式布局，每一个元素的布局都有静态代码来控制，上面还包括了图形和信息。

深究完网页的基本概念之后，我们再来了解一下什么是网页标准。使用的浏览器不同，导致相同的代码在显示或是排版上会呈现出不同的效果，这时开发者需要很长时间为兼容性不同的浏览器开发多个版本程序，这时候，为了兼容不同平台不同的设计标准，我们遵循WEB标准，这个web标准不仅可以使开发人员编写的页面标准统一外，在网页制作中还具有多种优势。具体如下：

1） 开发效率高，维护简单

2） 结构与表现分离可以针对不同的设备设置不同的表现，使信息可以跨平台，跨浏览器展示。

3） 降低网站流量成本

4） 便于改版

5） 提高页面浏览速度

6） 兼容性高，使用结构与表现分离的方式，不必担心后面代码的兼容性。

7） 用户体验更好。

一个简单的Web标准由三个部分组成，分别是结构标准（strucure）（包含XML,HTML,XHTML）,表现（presentation）标准(css)、和行为（behavior）标准(DOME),ECMAScript)

一个用来规范结构，一个人用来规范样式，最后一个是用来用于规范页面内容与用户交互的动作。这就涉及到什么是HTML，什么是CSS，什么又是JS，html用于铺写页面的结构比如第一行是什么，标题又是什么，内容是什么，那些地方是文字，哪些地方是图片，那CSS 是用来规范样式的，比如字体是什么颜色，图片的大小是多少，JS则是用来进行数据交互的，比如网页的增删改查功能，数据进行修改后，如何和后台进行交互，后台处理结束后又如何传递到前端。这里说的后台和前端又是什么意思呢，后台我们可以把它叫做数据处理中心，前端指的就是网页，网页把用户需求获取到，传递到后台，后台处理后又重新存储到数据库，界面可获取到数据库信息，进行展示。这个过程就叫做前端和后台的交互。

接下来我们来深入了解一下HTML，HTML全称为“HyperText Markup Language”即超文本标记语言，为网页创建和其他可在网页浏览器中看到的信息而设计，主要使用标记标签进行网页的描述，统一网络上文档的格式，将分散的网络资源链接为一个网络整体。

我们在 了解HTML这个概念时 不妨通过代码的形式来理解，我先来给大家展示一下简单的HTML代码。

我们在hbuilder中创建一个html文件，首先我们看到整个文件都是由标签组成，我们来依次解释一下代码，

/*定义文档类型，用于向浏览器解释当前文档用的是哪种HTML标签*/

/*HTML的根元素，表示文档的开始和结束*/

/*头部标签，用于定义HTML5文档的头部信息，紧跟在标签后，里面包括的内容有等*/

/*设置编码格式*/

/*文件标题*/

/*结束标签*/

简单拓展下头部标签里面几个常用的标签，

1、

用于定义文档的标题

该标题会出现在浏览器窗口的标题栏或状态栏上

把该页面加入收藏夹或书签列表时，该标题为页面链接的默认名称

用于定义文档与外部资源的关系，最常用于链接样式表，也常用于给标题添加小图标