网站的HTML结构分析
如同所示，这是一个旅游网站，最左上角是一个logo图片，这个图片应该写在
<body>里跟右上角的“旅游首页|登录|注册”在同一个<div>里
<div style="height: 56px;">` <img src="图片 img/logo.png" align="left" > ``<p align="right">旅游首页 | 登录 | 注册</p> </div>我觉得顺序应该是从上到下，再从左到右最上面，最上面的部分就写好了。接下来是图片，放在左边的位置上并且确定好图片位置的长宽和像素大小，左边的图片是一个部分，右边的文字又是一个部分。右边的文字也是从上到下的顺序。先是“说旅游”三个字，“说”和“游”是一样大小的字体，“旅”却要比另外两个字要大一些，写的时候要注意这个“旅”字。
<strong></strong>在这个之间写标注好字体大小，颜色，字体
<font size="6" color="orange" face="微软雅黑">说</font> <font size="7" color="orange" face="微软雅黑">旅</font> <font size="6" color="orange" face="微软雅黑">游</font>接下来的文字又分为三段，第一段从到位都是黑色的大小一样的文字，所以，直接将文字打在<div>就好，第二段文字根标题的处理没有上面不同，只是添加了斜体和下划线，少了大小的变化，加入<ins><em>就好，最后一段文字跟第二段文字处理一样。
这一部分左上角的文字与之前的处理相同，在文字的下面有一条淡灰色的划分线，虽然与文字的颜色相同却是不同的两个部分，只需在文字的下方写
<hr color="#ccc"/>。接下来的文字图片是一样处理的方法。这个页面的结构很简单，运用起来也不困难。
对比非语义化标签的差异
- 有利于搜索引擎的收录，比如，搜索引擎遇到了超链接，然后继续访问这个超链接的页面一直无限循环下去，如果超链接改成了div了，那么就会被搜索引擎少收录了一个页面，其他人访问的时候就永远不会通过这个搜索引擎搜索到这个页面。那么为什么搜索引擎不那么智能，div这种写法千变万化，搜索引擎每天要爬取成千上亿条效率就已经很低了，所以大家都遵循同一套约定，减少不必要的负担。
- 有利于浏览器的渲染，我们知道标签和文字混在一起就是一串字符串，最终从服务区传给浏览器，再由浏览器渲染出来，浏览器每个标签都有自己发一套规则，不同的渲染方式对于浏览器而言工作量肯定不一定相同，所以再浏览器渲染上有效率的差异，就会决定这个页面呈现给用户的速度。
- 有利于团队的开发和维护，如果大家都用同一个规则，你写的东西别人维护时也能看懂，让其他开发人员更加理解拿到HTML结构，减少差异化，可以避免很多不必要的麻烦。
