深入理解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代码,请指出代码中的毛病。

<P>  我写的不是HTML代码,是寂寞。<br><br>  我说:<br>不要迷恋哥,哥只是一个传说 

在这段代码当中,第一眼看上去没有明显的语法错误。是的,在html 4.01 strict下是完全正确的,但是在Web标准下,就是xhtml 1.0 strict下就是错误的,不合乎规范。xhtml有严谨的结构,所有标签必须关闭。如果是单独不成对的标签,在标签最后加一个"/"来关闭它。所以,代码中的<P>要匹配一个</p>,<br>要改成<br/>,其次所有标签必须小写,所以<P>也是错误的,要改成<p>;最后&nbsp;空格符必须包含在容器当中,也是错误的。

考点1.html 4.01与Web标准xhtml 1.0的差别

起初,我以为如果能回答到上面所说的错误基本能拿满分了,其实不然,回答完上面的只能及格。Web标准要求的结构与表现分离,而考题当中运用了&nbsp;控制缩进,是错误的,我们应该应用Css来控制文本的缩进,所以&nbsp;应该删掉。

考点2.结构与表现分离

最后,还有一处错误,题目当中连续使用两个<br>来制造了两个段落,<br>是强制折行标签,这样做确实达到了两个段落的效果,但是后期段间距不易控制,我们应该合理运用标签。所以正确的做法是我们应该应用两个<p>标签来表示两个段落。

考点3.合理运用标签

所以,在xhtml标准下,正确的修改应该是:

<p>我写的不是HTML代码,是寂寞。</p><p>我说:<br/>不要迷恋哥,哥只是一个传说</p> 

这样就完美了吗?不是,还有加分点,为了更符合Web标准,我们应该适当的的运用标签语义化(关于什么是标签语义化,可移步:http://www.cnblogs.com/coco1s/p/3583082.html,我的上一篇博文,也是Web标准的一部分)。也就是“我"说的话,可以用<q>标签标注。

<p>我写的不是HTML代码,是寂寞。</p><p>我说:<br/><q>不要迷恋哥,哥只是一个传说</q></p> 

 这样就足够了,标签语义化也应该合理的运用,过分使用也会显得太画蛇添足。当然,如果还要添加,“我”字可以用<cite>标注,“HTML”可以用<abbr>标注:

<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标准入门

 

本文到此结束,若有不正之处,万望告知。


本文转自ChokCoco博客园博客,原文链接:http://www.cnblogs.com/coco1s/p/3588716.html

目录
相关文章
|
3月前
|
Web App开发 前端开发 JavaScript
Web开发者必收藏的10个实用网站,你还没收藏吗?
将这些网站收藏起来,定期访问,使它们成为您日常工作的一部分,助您在快速发展的 Web 开发领域保持领先。
150 2
Web开发者必收藏的10个实用网站,你还没收藏吗?
|
2月前
|
人工智能 搜索推荐 PHP
PHP在Web开发中的璀璨星辰:构建动态网站的幕后英雄###
【10月更文挑战第25天】 本文将带您穿越至PHP的宇宙,揭示其作为Web开发常青树的奥秘。通过生动实例与深入解析,展现PHP如何以简便、高效、灵活的姿态,赋能开发者打造动态交互式网站,同时不忘探讨其在新时代技术浪潮中面临的挑战与机遇,激发对技术创新与应用的无限思考。 ###
40 1
|
8月前
|
存储 缓存 前端开发
揭秘Web缓存:提升网站性能与用户体验
揭秘Web缓存:提升网站性能与用户体验
|
8月前
|
SQL 云安全 安全
常见的web漏洞,网站漏洞该怎么办
随着互联网的发展,网站安全成为企业和个人关注焦点,尤其网站漏洞可能导致数据泄露、系统崩溃等严重后果。本文介绍了四种常见网站漏洞:XSS、SQL注入、文件包含和CSRF,以及它们的危害。为解决这些问题,建议加强代码审查、输入验证、使用安全API和库、访问控制等措施。此外,德迅云安全的漏洞扫描VSS服务可在Web漏洞扫描、弱密码扫描和中间件扫描等场景中发挥作用,帮助企业及时发现并处理安全问题,保障网站安全。
WK
|
2月前
|
安全 Java 编译器
C++和Java哪个更适合开发web网站
在Web开发领域,C++和Java各具优势。C++以其高性能、低级控制和跨平台性著称,适用于需要高吞吐量和低延迟的场景,如实时交易系统和在线游戏服务器。Java则凭借其跨平台性、丰富的生态系统和强大的安全性,广泛应用于企业级Web开发,如企业管理系统和电子商务平台。选择时需根据项目需求和技术储备综合考虑。
WK
122 0
|
8月前
|
缓存 前端开发 JavaScript
使用Web前端性能优化提高网站加载效率
前端性能优化关键在于提高用户体验和降低资源消耗,Webpack是重要工具。基础优化策略包括减少HTTP请求、资源压缩与缓存、异步加载。Webpack优化配置涉及Tree Shaking、代码分割。高级策略涵盖Long-term Caching、缓存提升和插件优化。打包部署时,自动化流程和环境管理也至关重要。通过这些方法,可提升Web应用速度和体验。
192 0
|
5月前
|
存储 前端开发 搜索推荐
Web前端网站(三)- 记事本
【8月更文挑战第8天】多种颜色搭配的动态粒子背景特效(粒子会随着鼠标的移动进行吸附,好看又好玩),左右摆动的文字特效,并且使用localStorage进行数据的持久化存储,使记事本的内容可以长期的保存在浏览器中,功能包括添加留言、显示留言、删除留言。每一行代码都有详细注释~~~大家可以尽情创作
79 5
Web前端网站(三)- 记事本
|
5月前
|
前端开发 搜索推荐 JavaScript
Web前端网站(四)- 音乐播放器
【8月更文挑战第9天】页面整体色调背景采用柔和渐变的方式呈现,与主页面的“毒药水式”色彩搭配形成了强烈的对比;周边花瓣缓缓飘落到水面之上形成涟漪。整体给人一种温馨、浪漫的感觉,还可以通过中间的3个按钮来控制音乐的切换和播放效果。每一行代码都有详细注释~~~大家可以尽情创作
56 2
Web前端网站(四)- 音乐播放器
|
5月前
|
前端开发 安全 JavaScript
PHP与现代Web开发:探索PHP在构建动态网站中的角色和优势
【8月更文挑战第29天】 在数字时代的浪潮下,PHP以其独特的灵活性、易用性以及强大的社区支持,持续成为Web开发领域的重要力量。本文将深入探讨PHP如何适应现代Web开发的需求,通过具体示例揭示PHP的实际应用,并分析其在面对新兴技术挑战时的应对策略。我们将一探究竟,PHP如何在众多编程语言中脱颖而出,成为许多开发者和企业的首选。
|
7月前
|
前端开发 搜索推荐 JavaScript
Web前端网站(二)- 主页
页面星空是可动的哦~~~毒药水特效的颜色搭配,文字渐变的动态效果,图片360度旋转展示特效等等等;每一次的按钮点击都是满满的惊艳 ~ ~ ~
58 4
Web前端网站(二)- 主页