扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
语义化的HTML结构怎么理解
创新互联服务项目包括容县网站建设、容县网站制作、容县网页制作以及容县网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，容县网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到容县省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
关于html结构的面试题，语义化的html占据了很大一部分。那么为什么要使用语义化的HTML？语义化的HTML到底有什么好处呢？
HTML是提供网页文档内容的上下文结构和含义；html本身是没有表现的，我们看到例如h1是粗体，字体大小2em，加粗；strong是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以首先我们要知道html和页面的表现是没有关系的，这些是css的事情。HTML在页面中的作用就是结构和含义，通俗点说就是划分内容，这里放什么，我们放的是什么。
语义化的HTML结构首先要强调HTML结构
HTML结构是页面的骨架，一个页面就好像一幢房子，HTML结构就是钢精钢筋混泥土的墙，一幢房子如果没有钢精钢筋混泥土的墙那就是一堆费砖头，不能住人，不能办公。css是装饰材料，是原木地板，是大理石，是油漆，是用来装饰房子的，CSS的强大就不用多说了，css如果没有html结构那就是一堆木板，一同油漆，没有了实际使用价值。CSS完全依靠引用它的(X)HTML文档。如果你想使CSS的能力充分发挥到极致，提供一个用既干净又有结构的内容的html是非常必要的，“HTML是在互联网上发布超文本的通用语，HTML使用标签来对文本结构化”。
语义化的HTML结构怎么写？
HTML是一种对文本内容进行结构和意义（或者说“语义”）进行补充的方法。它会告诉我们说：“这行是一个标题，这几行组成了一个段落。这些文字是项目列表，这些文字是链接到互联网上另一个文件的超链接。”值得注意的是，不应该让HTML来告诉我们：“这些文字是蓝色的，这些文字又是红色的。这部分内容是最最靠右的一栏，这行内容是斜体字。”这些和表现相关的信息是CSS的工作。在做前端开发的时候要记住：HTML告诉我们一块内容是什么（或其意义），而不是它长的什么样子。当我们提到“语义标记”的时候，我们所说的HTML应该是完全脱离表现信息的，其中的标签应该都是语义化地定义了文档的结构。
语义化的HTML结构其实很简单，首先掌握html中各个标签的语义，div是一个容器；strong是表示强调；ulli是一个无序列表等等…在看到内容的时候想想用什么标签能更好的描述它，是什么就用什么标签。
语义化的HTML结构到底有什么好处？
我们知道HTML5新增的标签，比如header和footer，html正在朝着更加健壮的语义化的HTML结构发展，xhtml2在这点上没html5先进，这也是xhtml2死亡的一个原因，这一点也说明语义化的HTML结构是html的发展趋势。
1.去掉或样式丢失的时候能让页面呈现清晰的结构：
html本身是没有表现的，我们看到例如h1是粗体，字体大小2em，加粗；strong是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。
2.屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页.
例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音.
3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）.
使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页.
语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况（包括现有的或者将来新的设备）.例如,一部手机可以选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显示.无论哪种方式一旦你对文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面.
4.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重.
过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”,但现在它们他们实际上是极其宝贵的用户.没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问.
5.你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.
因此,如果页面文件的标题被标记,而不是,那么这个页面在搜索结果的位置可能会比较靠后.除了提升易用性外,语义标记有利于正确使用CSS和JavaScript,因为其本身提供了许多“钩钩”来应用页面的样式与行为.SEO主要还是靠你网站的内容和外部链接的。
6.便于团队开发和维护
W3C给我们定了一个很好的标准，在团队中大家都遵循这个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至 实现模块化开发。
如有不同观点，补充，欢迎留言讨论。
自从接触网站开发以来到现在已经有六个年头了，今天偶然整理电脑资料看到当时为参加系里面一个比赛而做的第一个网站时，勾起了在这网站开发道路上的一串串回忆，成功与喜悦、烦恼与纠结都历历在目，感慨颇多。在此与大家分享，希望对初学Web前端的各位童鞋来说有所帮助。欢迎各位吐槽、拍砖。
先从大家学习上的一个误区开始谈起。
前端开发是一个近几年兴起的新兴行业，所以远没有电子商务那样成熟的课程体系，大学内也没有完整的前端课程体系，所以学习前端在国内无非就是培训，以及自学。
培训是针对那些有条件的人来说，很多小伙伴更喜欢的是自学。但是一个人自学毕竟力量是有限的，为了让想学习的人可以更好的学习，给大家推荐一个裙，前面是4
9 4，中间是〇 6 4，最后面就是 9 三 4
，这里有很多想学习的人和你一起交流，也有大牛每天晚上免费教学，想要学习的人都可以加入我们，但是我们只欢迎想学习的人，不是来学习，随便看看的就不要进了。
Web前端的学习误区
网页制作是计算机专业同学在大学期间都会接触到的一门课程，而学习网页制作所用的第一个集成开发环境（IDE）想必大多是Dreamweaver，这种所见即所得的“吊炸天”IDE为我们制作网页带来了极大的方便。
入门快、见效快让我们在不知不觉中已经深深爱上了网页制作。此时，很多人会陷入一个误区，那就是既然借助这么帅的IDE，通过鼠标点击菜单就可以快速方便地制作网页。
那么我们为什么还要去学习HTML、CSS、JavaScrpt、jQuery等这些苦逼的代码呢？这不是舍简求繁吗？
但是随着学习的深入，就会发现我们步入了一种窘境——过分的依赖IDE导致我们不清楚其实现的本质，知其然但不知其所以然。
因此在页面效果出现问题时，我们便手足无措，更不用提如何进行页面优化以及完成一些更高级的应用了。其原因是显而易见的——聪明的IDE成全了我们的惰性，使我们忽略了华丽的网页背后最本质的内容——code。
正确的方向胜过无谓的努力
有两只蚂蚁想翻越一段墙，寻找墙那头的食物。一只蚂蚁来到墙脚就毫不犹豫地向上爬去，可是每当它爬到大半时，就会由于劳累、疲倦而跌落下来。虽然它不气馁，一次次跌下来，又迅速地调整一下自己，重新开始向上爬去。
另一只蚂蚁观察了一下，决定绕过墙去。很快，这只蚂蚁绕过墙来到食物前，开始享受起来；而另一只蚂蚁还在不停地跌落下去又重新开始。
很多时候，成功除了勇气、坚持不懈外，更需要方向。也许有了一个好的方向，成功来得比想象的更快。如果在错误的路上奔跑,再怎么努力也是白搭。学习Web前端也是如此，首先应该选择一个正确的学习路线。
Web前端的学习路线结合我的学习经历、近年来辅导学生的经验以及公司中实际项目的需求，在这里将Web前端的学习分为以下几个阶段，具体的学习路线图如图所示。
第一阶段——HTML的学习。
超文本标记语言（HyperText
Mark-up Language
简称HTML）是一个网页的骨架，无论是静态网页还是动态网页，最终返回到浏览器端的都是HTML代码，浏览器将HTML代码解释渲染后呈现给用户。因此，我们必须掌握HTML的基本结构和常用标记及属性。
HTML的学习是一个记忆和理解的过程，在学习过程中可以借助Dreamweaver的“拆分”视图辅助学习。在“设计”视图中看效果，在“代码”视图中学本质，将各种视图的优势发挥到极致，这种对照学习的方法弥补了单纯识记HTML标签和属性的枯燥乏味，想必对各位初学的小盆友们来说必定是极好的！
在学习了HTML之后，我们只是掌握了各种“原材料”的制作方法，要想盖一幢楼房就还需要把这些“原材料”按照我们设计的方案组合布局在一起并进行一些样式的美化。
于是进入第二个阶段——CSS的学习。
CSS是英文Cascading Style Sheets的缩写，叫做层叠样式表，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言其样式是可以复用的，这样就极大地提高了我们开发的速度，降低了维护的成本。
同时CSS中的盒子模型、相对布局、绝对布局等能够实现对网页中各对象的位置排版进行像素级的精确控制。通过此阶段的学习，我们就可以顺利完成“一幢楼房”的建设。
“楼房”建设完成之后，我们可以交给用户使用，但是如果想让用户获得更佳的体验，我们还可以对“楼房”进行更深一步的“装修”，让它看起来更“豪华”一些。
为了完成这个任务，我们进入第三个阶段——JavaScript的学习。
JavaScript是一种在客户端广泛使用的脚步语言，在JavaScript当中为我们提供了一些内置函数、对象和DOM操作，借助这些内容我们可以来实现一些客户端的特效、验证、交互等，使我们的页面看起来不那么呆板，屌丝瞬间逆袭高富帅！有么有？
此时，也许你还沉浸在JavaScript给你带来的惊喜之中，但你的项目经理却突然对你大吼道:
“这个效果在××浏览器下不兼容，重新搞……”
“不兼容？”瞬间石化了有木有？
“我擦，坑爹啊！那可是花了我一个晚上写了几百行代码搞定的啊，吐血了都!”
JavaScript的兼容性和复杂性有时候的确让我们头疼，还好有“大神”帮我们做了封装。
接下来我们进入第四个阶段——jQUery的学习。
jQuery是一个免费、开源的轻量级的JavaScript库，并且兼容各种浏览器（jQuery2.0及后续版本放弃了对IE6/7/8浏览器的支持），同时现在有很多基于jQuery的插件可供选择，这样在我们实现一些丰富的动态效果时更方便快捷，大大节省了我们开发的时间，提高了开发速度，这也充分体现了其write
less,do more的核心宗旨。这个Feel倍儿爽！有么有？
“豪华大楼”至此拔地而起，但是每天这样日复一日，年复一年的盖楼，好繁琐！能不能将大楼里面每一个单独部件模块化，当需要盖楼时就像堆积木一样组合在一起，这样岂不是爽歪歪？可以实现吗？答案是肯定的。
这种思想在Web前端开发中也是适合的，于是乎就出现了各种前端框架，在这里推荐给大家的是Bootstrap。 Bootstrap是Twitter推出的一个开源的用于前端开发的工具包，是一个CSS/HTML框架，并且支持响应式布局。一经推出后颇受欢迎，一直是GitHub上的热门开源项目。
在项目开发过程中，我们可以借助Bootstrap提供的CSS样式、组件、JavaScript插件等快速的完成页面布局和样式设置，然后再有针对性的微调样式，这样基于框架进行开发大大缩短了开发周期。站在巨人的肩膀上就是爽！
Web前端的学习建议
最后给大家聊聊在学习Web前端中的一些建议和方法。
在CSS布局时需要注意的一个问题是很多同学缺乏对页面布局进行整体分析，不能够从宏观上对页面中盒子间的嵌套关系进行把握，就急于动手去做，导致页面中各元素间的关系很混乱，容易出现盒子在浮动时错位等情况。建议大家在布局时采用“自顶向下，逐步细化”的思想，先用几个盒子将页面从整体上划分，然后逐步在盒子中继续嵌套盒子。
“君子生非异也，善假于物也”，在学习的过程中还要多浏览一些优秀的网站，善于分析借鉴其设计思路和布局方法，见多方能识广，进而才可以融会贯通，取他人之长为我所用。
同时还要善于使用Firebug这个利器。Firebug一方面可以在我们学习过程中帮助我们调试自己的页面，另一方面我们可以使用Firebug方便地查看、分析别人网站的源代码，“偷”也是一种技能！
随着移动互联网热潮的到来，移动开发越来越受到大家的追捧，响应式布局、微网站等需求量不断增加，也是我们Web前端未来的发展方向之一，学有余力的同学可以多多关注。最后祝愿大家能在Web前端开发道路上走出一片更宽更广的天地！
完全可以的，你可以根据自己需要做适合自己的照片墙。一般来说在代码和布局上面来说都是不难的。
输入QQ号码和密码，点击登录登录成功后点击正下方“动态”找到并点击“好友动态”进入好友动态，点击正上方的背景图片进入背景商城，找到并点击“照片墙”进入照片墙，点击右上角的“添加”，你可以选择从手机里或者从空间相册里添加照片
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网