深入理解Web标准(网站标准)
深入理解Web标准(网站标准)
我觉得一名Web前端应该好好理解Web标准到底是什么,为什么要在我们的实际实践中遵循Web标准。
什么是Web标准。百度百科的解释是:
WEB标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM)、ECMAScript等。
Web标准 。
其他网站也有很多解释,这里不作过多赘述。我觉得我们遵循Web标准的目的不是为了标准而标准,不是因为它是这么要求的我们才去这么做。一名优秀的Web前端,应该是Write less,do more。就是用更少的代码,做更多的事。所以我觉得我们遵循Web标准的目的应该是让我们的代码效率更高更好,只有本着这个态度去理解Web标准才能体会其深入的内涵。
下面具体谈谈Web标准。我在网上看到的一道yahoo的面试题。题目是:
有这么一段html代码,请指出代码中的毛病。
1
|
<P> 我写的不是HTML代码,是寂寞。<br><br> 我说:<br>不要迷恋哥,哥只是一个传说 |
在这段代码当中,第一眼看上去没有明显的语法错误。是的,在html 4.01 strict下是完全正确的,但是在Web标准下,就是xhtml 1.0 strict下就是错误的,不合乎规范。xhtml有严谨的结构,所有标签必须关闭。如果是单独不成对的标签,在标签最后加一个"/"来关闭它。所以,代码中的<P>要匹配一个</p>,<br>要改成<br/>,其次所有标签必须小写,所以<P>也是错误的,要改成<p>;最后 空格符必须包含在容器当中,也是错误的。
考点1.html 4.01与Web标准xhtml 1.0的差别
起初,我以为如果能回答到上面所说的错误基本能拿满分了,其实不然,回答完上面的只能及格。Web标准要求的结构与表现分离,而考题当中运用了 控制缩进,是错误的,我们应该应用Css来控制文本的缩进,所以 应该删掉。
考点2.结构与表现分离
最后,还有一处错误,题目当中连续使用两个<br>来制造了两个段落,<br>是强制折行标签,这样做确实达到了两个段落的效果,但是后期段间距不易控制,我们应该合理运用标签。所以正确的做法是我们应该应用两个<p>标签来表示两个段落。
考点3.合理运用标签
所以,在xhtml标准下,正确的修改应该是:
1
|
<p>我写的不是HTML代码,是寂寞。</p><p>我说:<br/>不要迷恋哥,哥只是一个传说</p> |
这样就完美了吗?不是,还有加分点,为了更符合Web标准,我们应该适当的的运用标签语义化(关于什么是标签语义化,可移步:http://www.cnblogs.com/coco1s/p/3583082.html,我的上一篇博文,也是Web标准的一部分)。也就是“我"说的话,可以用<q>标签标注。
1
|
<p>我写的不是HTML代码,是寂寞。</p><p>我说:<br/><q>不要迷恋哥,哥只是一个传说</q></p> |
这样就足够了,标签语义化也应该合理的运用,过分使用也会显得太画蛇添足。当然,如果还要添加,“我”字可以用<cite>标注,“HTML”可以用<abbr>标注:
1
|
<p><cite>我</cite>写的不是<abbr title=”Hyper Text Markup Language”>HTML</abbr>代码,是寂寞。</p><p><cite>我</cite>说:<br/><q>不要迷恋哥,哥只是一个传说</q></p> |
加分点:标签语义化
综上,我们使用Web标准去编写代码,就像我前面说的,目的是write less,do more。我们的代码更加规范,更加合乎标准,我们的页面就更容易被搜索引擎抓取收录。
上面没有谈到具体的Web标准包括什么以及具体的采用Web标准的好处,因为这些其他网站很多很多,具体了解可以移步:
深入理解Web标准(网站标准)的更多相关文章
- 理解Web标准(网站标准)
我觉得一名Web前端应该好好理解Web标准到底是什么,为什么要在我们的实际实践中遵循Web标准. 什么是Web标准.百度百科的解释是: WEB标准不是某一个标准,而是一系列标准的集合.网页主要由三部分 ...
- WEB标准:标准定义、好处、名词解释、常用术语、命名习惯、浏览器兼容、代码书写规范
1. WEB标准是什么? “WEB标准”是一系列标准的总称.一般的误区经常把WEB标准说成DIV+CSS.准确的说法应该是:采用W3C推荐的WEB标准中的XHTML1.1结合CSS2.0 样式表制作页 ...
- IT兄弟连 HTML5教程 HTML5的靠山 RFC、WHATWG是什么WEB的新标准
RFC是什么 RFC文档也称请求注解文档(Requests for Comments,RFC),这是用于发布Internet标准和Internet其他正式出版物的一种网络文件或工作报告,内容和Inte ...
- Java Web之JSTL标准标签库总结
[文档整理系列] Java Web之JSTL标准标签库总结
- maven 创建web项目的标准目录结构
maven 创建web项目的标准目录结构 CreateTime--2018年4月18日21:05:37 Author:Marydon 1.标准目录介绍(开发目录) 2.在eclipse下,目录展示 ...
- HTML与CSS入门——第一章 理解Web的工作方式
知识点: 1.万维网的简史 2."网页"的含义,以及该术语不能反映所涉及的所有内容的原因 3.如何从你的个人计算机进入别人的浏览器 4.选择Web托管提供商的方法 5.不同的Web ...
- 理解Web应用程序的代码结构和运行原理(3)
1.理解Web应用程序的运行原理和机制 Web应用程序是基于浏览器/服务器模式(也称B/S架构)的应用程序,它开发完成后,需要部署到Web服务器上才能正常运行,与用户交互的客户端是网页浏览器. 浏览器 ...
- 快速理解web语义化
什么是Web语义化 Web语义化是指使用恰当语义的html标签.class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容.语义化的web页面一方面可以让机器在更少的人类干预 ...
- 深入理解 web 协议(一)- http 包体传输
本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/WlT8070LlrnSODFRDwZsUQ作者:吴越 开坑这个系列的原因,主要是在大前端学习的 ...
随机推荐
- POJ 1797 Heavy Transportation(最大生成树/最短路变形)
传送门 Heavy Transportation Time Limit: 3000MS Memory Limit: 30000K Total Submissions: 31882 Accept ...
- 如何防止应用因获取IDFA被AppStore拒绝
由于Appstore禁止不使用广告而采集IDFA的app上架,友盟提供IDFA版和不含IDFA版两个SDK,两个SDK在数据上并没有差异,采集IDFA是为了防止今后因为苹果可能禁止目前使用的openu ...
- Spring学习记录1--@Transactional Propagation
起因 学习Spring的时候就知道aop有一个应用是声明式注解..反正往Service上一丢@Transactional就完事了..不用自己去开启hibernate的session,很简单. 但是@T ...
- Oracle 查询语句(where,order by ,like,in,distinct)
select * from production;alter table production add productionprice number(7,2); UPDATE production s ...
- Excel文件转plist文件出现的文件编码问题
今天在测试时遇到了需要将大量整理好的Excel数据转换为plist文件的情况.百度了一下教程,发现虽然别人也遇到过类似的情况,但是有些讲的还是不够细致.所以做如下整理. 百度到的内容中有使用Mes ...
- JavaScript对象详解
JavaScript中的数据类型作为javascript的核心,我们经常要用到,也是最基础的. javascript中有非常复杂的数据类型:包括对象(Object)数据类型,还有五个基本数据类型(N ...
- apache 配虚拟主机转发到tomcat
我用的是apache2.4.23, 连接tomcat使用自带的 proxy-ajp,需要开启相关模块 引用 http://www.server110.com/apache/201404/10273.h ...
- 使用mysqlslap对mysql进行压测,观察Azure虚拟机cpu使用率
一直想做这个测试,原因很简单,很多人一直比较怀疑Azure的虚拟机性能,说相同的配置凭啥比阿里的虚拟机贵那么多,其实,我自己以前也怀疑过,但是接触Azure的几个月,确实发现Azure的虚拟机性能真的 ...
- 常用ubuntu命令
解压缩.7z sudo apt-get install p7zip-full 7z x PACKAGE.7z 查看图片 eog A.png 关闭打开触摸板(触点) sudo rmmod psmouse ...
- android Viewpager HorizontalScrollView 实现分页栏拖拽
源码:http://files.cnblogs.com/android100/ViewPaperDemo.rar首先我们先看一个效果: 前两个是网易的,它做的title不能拖拽,.不过点击动画效果挺 ...