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

743 查看

首先我们理解下思路开发思路。
第一步，我们先只考虑一个静态的前端网页。假设：
一、先不管数据从哪里来的，假定我们已经有相应的数据（例如菜单名、表格数据等），我们需要使用什么样的元素；
二、不要考虑样式问题，只简单考虑，在标准文档流下，语义是否合理，页面是否会正常呈现，能否完成基本的数据呈现功能。
这种情况下的页面怎么开发。
第二步，页面元素的布局如何实现，样式怎么设计更美观，甚至可以设定几套样式，可以自定义皮肤，等等。这是CSS样式的设计问题。
第三步考虑特定的页面交互事件，事件响应的处理，结合CSS和JS对页面做进一步的前端功能设计。注意特定情况下，这部分功能不要是唯一性的，即，无第二步、第三步的设计，也不会从基本功能上影响页面的使用。
第四步，开始考虑数据的传输问题，即需要哪些动态数据？用何种方式和后端服务器程序进行交互？这部分需要和后端开发一起仔细研究。
第五步，考虑前端设计的优化问题，如何更快的加速页面的加载和执行，如何定义前端的离线缓存使用，安全性如何加强，等等。
鉴于浏览器核心的不同，在每一步，我们都要考虑到兼容性问题，即客户端可能使用的浏览器情况，在这些浏览器如何实现兼容性。IE10版本以上，加上其他浏览器，基本对HTML5/CSS3/JS没有了障碍；在特定情况下，很多元素和属性，包括JS的解释，IE8/9/10是特例，需要用特定方式处理。至于IE8以下，还是呵呵吧，建议做个分支，提醒客户升级系统、更换浏览器版本。

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

       <!doctype html >   ----------------文档版本说明
         <html >-----------------文档开始
             <head>------------文档的头部
                 头部内容
              </head>-----------头部结尾
              <body>------------文档主体开始
                 主体内部
               </body>----------主体结束
         </html>----------------文档结尾

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

2、：HTML标签的全局属性
属性的基本写法是

        <标签 属性名=“属性值 ”> </标签>

注意以下几点：
有一种属于布尔型的属性，在HTML/HTML5里面，不需要用属性=“”的方式，直接写属性名即可，默认是true的属性，不写就是false属性。但在XHTML文档里面，需要书写完整的属性名=“属性名”的写法；
这里可以用""，也可以用''，甚至HTML5里可以不用引号。不同符号之间可以嵌套，但注意同样的符号不可以。为了规范起见，还是建议统一都用""号。
多个属性之间，用空格隔开即可。
全局属性，就是所有的元素都拥有的属性（尽管可能有一些元素不能使用，浏览器会自动忽略）。我们可以从属性的功能分类、功能简述、相关知识点、对应属性值、兼容性这几个方面进行学习。

3、：元素标签以及其特有属性
结构语义化标签
除了在介绍页面结构的时候提到的几个元素标签，还有一些其他的结构类元素，如：

    <title>、<style>、<script>、<div>、<span>

等，这些元素是对页面的结构做组织性功能的，负责搭建框架、元数据说明、引用外部文件、大区块容器定义等等。我们可以从标签说明、特定属性、兼容性等方面，来进行学习。
我们想象一下一个页面的主要结构框架。页面上的元素是由一个一个的方块盒子组合嵌套而成的，我们可以先不要关心这些盒子的排列布局方法和样式，从下面典型的图可以大致了解：上面是我们的设计结构，当我们不考虑区块位置和样式的时候，按照正常文档流，这些盒子在容器内是从左到右、从上到下依次显示排列的，下面就是无样式的时候显示效果。
图片描述
这些容器和盒子，在HTML5之前，通常是用无语义的div和span来实现。当前，HTML5已经设定了一些语义化的标签，其目的就是为了更清晰的直观显示页面的结构组成。
文本标签
文本标签的功能主要是在页面里面组织文章结构，显示一篇文章文本。早期的HTML里，有很多涉及到文本的元素和相关属性，但是由于是纯格式的设定，例如定义粗体和斜体的文本、定义大号小号文字、定义居中文本等等，这些在HTML5里面已经属于废弃或者不建议使用。鉴于语义化和样式分离的需求，我们应该重点学习那些有具体语义表达功能的文本标签，而样式的设定，用CSS样式表的功能来实现。
图片描述
（请注意下面为了正确在文章里显示标签，去除了前后的尖括号。请大家阅读时候自行脑补上）想象一下一篇文章的结构，我们可以定义一个article标签来在页面包含。基本的结构就是由标题加文本，这是最基础的h1~h6标签和 p 段落文本标签。再复杂一点，文章可以有多个标题形成组，因此有hgroup标题组合标签；段落和段落组合构成节，形成section。节和节之间可以用hr间隔线区分。如果文章有顶部和脚注，我们可以应用header 、footer标签；还可能文章有侧边栏，里面的内容和文本相关，这个侧边栏我们定义成aside标签。如果文章很长，需要用目录来点击导航段落，我们可以用nav标签来定义。对于文章的作者信息，联系方式，我们可以放到专门的address标签里。需要注意的是，这些语义标签示HTML5的新标签，在HTML4里面是用没有含义的div区块来定义的，IE9以下都无法识别，需要用特别的CSS语句来做重新预定义。这个在后面说CSS的时候会谈到。
然后是文本里面的一些格式元素。我们排除掉那些建议用CSS样式来处理的纯样式元素，从语义的角度看，一段文本的呈现，里面的一部分会有一些语义需求：缩写、强调、标记、插入和删除的文本、上下标、顶部注音等。这些，可以直接用相应的标签来实现。
表格、列表、图像和链接
这些标签，就涉及到页面上的常用功能元素了。我们知道，页面上除了最常见的文本内容外，还会有图像显示，可以点击跳转内容的超链接，以及显示数据的表格和列表。
图像标签img用于在页面显示图片，也可以定义图片内部的点击链接区域。
表格标签table拥有多行和多列的数据显示，有着自己的表格标题、表头和表尾。表格元素原来有大量的关于样式的特有属性，现在在HTML5里面基本都被废止或者不建议使用，转而由CSS样式表来完成设置。在早期一度被拿来用于页面布局（想象下我们的页面构成），下面是一个用table定义样式的例子，可以看到，整个页面用一个大的多行多列表格完成，然后合并了某些行、某些列来达到定义区块的目的。但这不是个好方法，这个元素的功能不是用来做这个的；不建议如此使用。
图片描述
无序列表ul，有序列表ol，自定义列表dl和超链接a，是构成我们常见的菜单、点击栏等区域的基本核心组件。

下一弹，我会继续介绍表单、多媒体等其他元素。以上这些元素，详细的名称、说明、特有属性、兼容性的内容，我整理了一个综合的表格，随后会放出供大家参考，也建议大家上W3C相关网站检索资料。