对于当前的 Web 而言,HTML 是联系大多数 Web 资源的纽带,也是内容的载体。在 Web 被刚刚设计出来的时候,Tim Berners-Lee 可能不会想到它现在会达到的规模以及深入到我们生活的那么多方面。也许起初的想法很简单:用来发布 Web 内容和资源的索引,方便人们查看。
但是随着 Web 规模的不断扩大,信息量之大已经不在人肉处理的范围之内了。这个时候人们开始用机器来处理 Web 上发布的各种内容,搜索引擎就诞生了。再后来,人们又设计了各种智能程序来对索引好的内容作各种处理和挖掘。所以让机器能够更好地读懂 Web 上发布的各种内容就变得越来越重要。
其实 HTML 在刚开始设计出来的时候就是带有一定的「语义」的,包括段落、表格、图片、标题等等,但这些更多地只是方便浏览器等 UA 对它们作合适的处理。但逐渐地,机器也要借助 HTML 提供的语义以及自然语言处理的手段来「读懂」它们从网上获取的 HTML 文档,但它们无法读懂例如「红色的文字」或者是深度嵌套的表格布局中内容的含义,因为太多已有的内容都是专门为了可视化的浏览器设计的。面对这种情况,出现了两种观点:
1、我们可以让机器的理解能力越来越接近人类,人能看懂、听懂的东西,机器也能理解;
2、我们应该在发布内容的时候,就用机器可读的、被广泛认可的语义信息来描述内容,来降低机器处理 Web 内容的难度(HTML 本身就已经是朝这个方向迈出的一小步了)。
这个图,意思是说,内容的语义表达能力和 AI 的智能程度决定了机器分析处理 Web 内容能力的高低。上面观点 1 的方向是朝着人类水平的人工智能努力,而观点 2 的方向正是万维网创始人 Tim Berners-Lee 爵士提出的美好愿景:语义网。语义网我就不多说了,简单来说就是让一切内容和包括对关系的描述都成为 Web 上的资源,都可以由唯一的 URI 定义,语义明确、机器可读。显然,两条路都的终极目标都很遥远,第一条路技术上难以实现,而第二条路实施起来障碍太多。
我认为我们当前能够看得见摸得着的 Web 语义化,其实就是在往第二条路的方向上,迈出的一小步,即对已经有的被广泛认可的 HTML 标准做改进。我们刚开始意识到,我们必须回归内容本身,将内容本身的语义合理地表述出来,再为不同的用户代理设计不同的样式描述,也就是我们说的内容与样式分离。这样我们在提供内容的时候,首先要做的就是将内容本身进行合理的描述,暂时不用考虑它的最终呈现会是什么样子。
HTML 规范其实一直在往语义化的方向上努力,许多元素、属性在设计的时候,就已经考虑了如何让各种用户代理甚至网络爬虫更好地理解 HTML 文档。HTML5 更是在之前规范的基础上,将所有表现层(presentational)的语义描述都进行了修改或者删除,增加了不少可以表达更丰富语义的元素。为什么这样的语义元素是有意义的?因为它们被广泛认可。所谓语义本身就是对符号的一种共识,被认可的程度越高、范围越广,人们就越可以依赖它实现各种各样的功能。
1、什么是HTML语义化?
基本上都是围绕着几个主要的标签,像标题(H1~H6)、列表(li)、强调(strong em)等等,根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
2、为什么要语义化?
(1)通常语义化HTML会使代码变的更少,使页面加载更快。
(2)语义化HTML会使HTML结构变的清晰,有利于维护代码和添加样式。
(3)提升网页的可访问性和交互操作性(无障碍访问)
(4)提升搜索引擎优化(SEO)的效果:
1> 语义化的HTML元素标签通常带有一定样式,这些样式一定程度减少了我们的CSS工作量。虽然这并不是我们语义化HTML的目的。
2> 用不同的标签表示不同种类的元素,可以使我们可以轻松统一特定元素的样式。如改变段落的文字大小,我们就可以直接通过更改p标签的样式来实现。
3> 万维网的发明者曾经说过一句著名的话:“万维网的力量在于其普适性。让包括残障人士在内的所有人都可以访问万维网,是极为重要的一点。”HTML只是文本,不同用户获取的方式可能不同。例如,视力正常的人可以直接查看内容。而视力受损的人可能就需要屏幕阅读器。而屏幕阅读器有时会将周围HTML元素的类型读出来,让用户了解上下文;而且屏幕阅读器会重点识别标题,并朗读出来来让用户确定感兴趣内容。由此可见,对残障人士来说,好的语义产生多么大的影响。
4> 搜索引擎优化(SEO)效果也会得到改善,也就是说网页在搜索引擎中的排名会靠前。例如搜索引擎爬虫会比较重视由h1-h6标记的标题。如果标题中内容与搜索内容相关度高对排名就会有良性影响。
(5)便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
3、如何确定你的标签是否语义化良好?
判断网页标签语义化是否良好的一个简单方法是:去掉样式,看网页结构是否组织良好有序,是否仍然有好的可读性。语义良好的网页去掉样式后结构仍然是比较清晰的。尤其是在图片较少的网页中。
4、写HTML代码时应注意什么?
(1)尽可能少的使用无语义的标签div和span;
(2)在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;
(3)不要使用纯样式标签,如:b、font、u等,改用css设置。
(4)需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b),em是斜体(不用i);
(5)使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td;
(6)表单域要用fieldset标签包起来,并用legend标签说明表单的用途;
(7)每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
看过之后很多感触,唯有谢谢最简单也最真诚
整个看下来还是感觉迷迷糊糊的
这题有够坑的,老是错
UI设计发展前景怎么样
我想咨询下,如果是做产品经理,考研可以考哪些相关专业
设计行业没有个五六年经验都不好意思说自己是设计师