这两年对前端网页制作来说,讨论最多的无非就是结构,表现,行为分离的思想了。 结构,表现,行为分离究竟有什么好处?为什么现在那么热门?HTML如何语义化,同时他语义化又有什么好处,这节我们来研究下。
HTML结构是页面的骨架,一个页面就好像一幢房子,HTML结构就是钢精钢筋混泥土的墙,一幢房子如果没有钢精钢筋混泥土的墙那就是一堆费砖头。css是装饰材料,是油漆,是用来装饰房子的,CSS的强大就不用多说了,css如果没有html结构那就是一堆木板,一同油漆,没有了实际使用价值。CSS完全依靠引用它的HTML文档。如果你想使CSS的能力充分发挥到极致,提供一个用既干净又有结构的内容的html是非常必要的。
HTML是一种对文本内容进行结构和语义进行补充的。它会告诉我们说:“这行是一个标题,这几行组成了一个段落。这些文字是项目列表,这些文字是链接到互联网上另一个文件的超链接。”值得注意的是,不应该让HTML来告诉我们:“这些文字是蓝色的,这些文字又是红色的。这部分内容是最最靠右的一栏,这行内容是斜体字。”这些和表现相关的信息是CSS的工作。在做前端开发的时候要记住:HTML告诉我们一块内容是什么(或其意义),而不是它长的什么样子。
写语义化的HTML结构其实很简单,首先掌握html中各个标签的语义,<div>是一个容器;<strong>是表示强调;<ul><li>是一个无序列表等等…在看到内容的时候想想用什么标签能更好的描述它,是什么就用什么标签
我们知道HTML5新增的标签,比如<header>和<footer>,html正在朝着更加健壮的语义化的HTML结构发展,xhtml2在这点上没html5先进,这也是xhtml2死亡的一个原因,这一点也说明了语义化的HTML结构是html的发展趋势。
1,去掉或样式丢失的时候能让页面呈现清晰的结构:
html本身是没有表现的,我们看到例如 <h1>是粗体,字体大小2em,加粗;<strong>是加粗的,不要认为这是html的表现,这些其实html默认的css样式在起作用,所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点,但是浏览器都有有默认样式,默认样式的目的也是为了更好的表达html的语义。
2.,PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页(通常是因为这些设备对CSS的支持较弱).
使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页.例如,一部手机可以选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显示.无论哪种方式一旦你对文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面.