html5结构元素的作用,静态HTML/HTML5的结构和基本元素（一）

首先我们理解下思路开发思路。

第一步，我们先只考虑一个静态的前端网页。假设：

一、先不管数据从哪里来的，假定我们已经有相应的数据(例如菜单名、表格数据等)，我们需要使用什么样的元素；

二、不要考虑样式问题，只简单考虑，在标准文档流下，语义是否合理，页面是否会正常呈现，能否完成基本的数据呈现功能。

这种情况下的页面怎么开发。

第二步， 页面元素的布局如何实现，样式怎么设计更美观，甚至可以设定几套样式，可以自定义皮肤，等等。这是CSS样式的设计问题。

第三步考虑特定的页面交互事件，事件响应的处理，结合CSS和JS对页面做进一步的前端功能设计。注意特定情况下，这部分功能不要是唯一性的，即，无第二步、第三步的设计，也不会从基本功能上影响页面的使用。

第四步，开始考虑数据的传输问题，即需要哪些动态数据？用何种方式和后端服务器程序进行交互？这部分需要和后端开发一起仔细研究。

第五步，考虑前端设计的优化问题，如何更快的加速页面的加载和执行，如何定义前端的离线缓存使用，安全性如何加强，等等。

鉴于浏览器核心的不同，在每一步，我们都要考虑到兼容性问题，即客户端可能使用的浏览器情况，在这些浏览器如何实现兼容性。IE10版本以上，加上其他浏览器，基本对HTML5/CSS3/JS没有了障碍；在特定情况下，很多元素和属性，包括JS的解释，IE8/9/10是特例，需要用特定方式处理。至于IE8以下，还是呵呵吧，建议做个分支，提醒客户升级系统、更换浏览器版本。

1、：基本结构和结构类元素

我们说的页面，简单而言，分为HTML标准、XHTML标准和HTML5标准。大多数是HTML，XHTML是更严格的标准，很快发展到HTML5，正逐步成为主流。他们都是以htm或者html扩展名定义的文档，是一种解释性的代码语言，被浏览器加载后进行解析和渲染，然后在页面上显示运行。用记事本打开页面文档，可以看到，代码是用很多标签名>的元素相互嵌套来实现的；这个成组的标签，就是构成页面的基本材料元素。同时，一个标签，拥有相应的属性来做说明。这些属性，又分为通用属性和特定属性。通用属性指的是大部分标签都拥有的属性，特定属性是每个标签特有的。拥有属性的标签，组成了最基本的页面结构。我们现在正常情况下，就按照HTML5的写法即可。

从整体代码看，页面结构组成分为三大块：

----------------文档版本说明

-----------------文档开始

头部内容

-----------头部结尾

主体内部

----------主体结束

----------------文档结尾

要注意，标签是可以嵌套的，要注意正确的嵌套顺序和前后闭合；浏览器对代码的解释是很智能宽松的，即使标签的书写有错误，甚至没有正确闭合，这些关键的部分都没有输入的话，只要定义了正确的文档说明，浏览器还是能正常显示页面。不过不推荐故意省略标签书写，我们写的代码，还是需要能从语义上容易看懂和分析的。另外所有的元素标签，都建议统一用小写字母书写。

2、：HTML标签的全局属性

属性的基本写法是

标签>

注意以下几点：

有一种属于布尔型的属性，在HTML/HTML5里面，不需要用 属性=“”的方式，直接写属性名即可，默认是true的属性，不写就是false属性。但在XHTML文档里面，需要书写完整的 属性名=“属性名”的写法；

这里可以用""，也可以用""，甚至HTML5里可以不用引号。不同符号之间可以嵌套，但注意同样的符号不可以。为了规范起见，还是建议统一都用""号。

多个属性之间，用空格隔开即可。

全局属性，就是所有的元素都拥有的属性(尽管可能有一些元素不能使用，浏览器会自动忽略)。我们可以从属性的功能分类、功能简述、相关知识点、对应属性值、兼容性这几个方面进行学习。

3、：元素标签以及其特有属性

结构语义化标签

除了在介绍页面结构的时候提到的几个元素标签，还有一些其他的结构类元素，如：

、