前端开发中你清楚知道这几个概念吗？

1.Web标准
Web标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由万维网联盟（外语缩写：W3C）起草和发布，也有一些是其他标准组织制订的ECMA（European Computer Manufacturers Association）的ECMAScript标准。Web标准大大提高了不同人写的代码在不同浏览器上的兼容性，作为统一规范，提高代码的复用率。Web标准同时也被大多数刚入门的前端开发者所忽略。

2.可用性、可访问性可访问性就是对所有人一视同仁，无论他们是否有残障。网站的用户类型：身体健康的用户；盲人或严重视觉障碍者，他们使用屏幕阅读器来听取网站，或者通过点字显示器来感知网页；近视者，需要将字体大小放大到200%；患有运动性残疾，因此无法用手操作鼠标，而用点击棒来操作键盘，或通过视线点击器来操作网站的用户；使用移动设备如常用的手机，或使用跟踪球等不常见的计算机控制设备的用户。
实现可用性、可访问性的方法逐步强化你的网站功能，同时对支持性进行测试。运用“渐进增强”和“平稳退化”原则开发网站。允许用户关闭有问题的增强功能。提供相同内容或功能的替代版本。就客户端需要支持的技术向你的客户提出建议，并举例说明哪些公司的产品支持这些技术。
可访问性良好网页的特征HTML语义化、结构化：HTML语义结构提供了网页的整体框架，提示他们在文件层级中所处的位置，还有他们可以如何与各种页面元素进行交互，以及在适当的地方对文本内容进行强调，帮助用户获得大量重要信息。如导航菜单例子：

Menu Item 1

Menu Item 2

Menu Item 3

通过将导航菜单构造为列表，就能很容易地让那些使用屏幕阅读器、同时无法看到列表的人知道这是个列表。因为他们的屏幕阅读器会告诉他们这是一张列表。如果你没有使用列表标记，屏幕阅读器就没办法知道这是列表，因此也就不能告诉使用者了。

替代内容：文本可以作为页面内容的通用替代内容，如img标签的alt属性值、a标签的title属性值。

<a href="http://www.alimama.com" title="阿里妈妈">
<img alt="sale" src="images/app/sale.jpg"/>
</a>

说明：文本内容可以很方便地由屏幕阅读器朗读出来，也可以放大或缩小，还可以方便地改变其对比度，或者进行其他许多变形操作。alt 属性包含了对该图片的简短描述，以便无法准确看到该图片的用户（或搜索引擎）使用，title属性负责对链接地址的详细文本描述。
HTML定义基本交互：实现tab选项卡搜索功能Search within:

Dogs

Cats

Fish

说明：先考虑基本交互（而不是仅仅只加载视觉效果的部分）的话，你就可以简化实现tab搜索效果。现在我们可以只用一个表单来进行所有的搜索，而同时仍然能实现tab选项卡效果（虽然这需要一点样式和脚本）。通过 AJAX 来插入页面内容，那禁用javascript的用户将无法使用。

四个可访问性标准（WCAG 2.0）：可感知：人们可以通过适合自己的媒体来获知网页内容。比如应当让盲人得以收听页面内容。例如，图像应该有文本对应体。可操作：人们可以与 web 应用程序或内容进行交互。例如，用户应该可以不用鼠标也能与某个网站进行交互，并且可以通过屏幕阅读器来进行导航。可理解：使用者可以弄懂页面内容和用户界面。例如，正文不应该比它需要的更加复杂，且网站应以可预测的方式来运行。健壮性：所提供的一切服务都应当不受平台或操作系统的限制。这样就可以避免人们提供一些不太完善的服务，这些服务会因为硬件/软件的限制而导致大多数人都无法使用。例如，不同设备上的浏览器能够一起使用网站，且导航应该是一致的。网站并不是必须满足全部这些要求，要视网站用户类型而定，但为了实现可访问性，网站应当确保其页面可以用一般的屏幕阅读技术读取。

可访问性是网站开发质量的一个衡量标准。如果你在开发网站的时候（以及开始开发前）顾及你的使用用户的话，你就能创建可用性、可访问性更好、更符合web标准的网页，并且享受它所带来的一切好处。

3.标准文档流。

我相信这个是大多数新人不知道或者说很模糊的。
标准文档流是指不使用其他与排列和定位相关的特殊CSS规则时，各种元素的排列规则。也就是，不添加任何定位属性例如float,postion的时候，元素默认的排列方式。

4.行内元素和块元素
块元素(block)：块元素会占据一个矩形区域，相邻的块元素竖直排列，不会排在同一行中。块元素包括：<p>、<ul>、<h1>、<li>、<div>等等。

行内元素(inline)：行内元素之间横向排列，到最右自动折行。行内元素包括：<strong>、<em>、<span>等等。

通过属性display可以设置元素属性为inline或者block。

5.老生常谈的盒子模型我相信这是CSS教材中说的最多的了，这里也顺便普及一下吧。什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页开发中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。那么内容（CONTENT）就是盒子里装的东西；而填充(PADDING)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框(BORDER)就是盒子本身了；至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。（来自百度百科）每个HTML标记都可看作一个盒子；
每个盒子都有：边界、边框、填充、内容四个属性；
每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；



大牛看了别见笑，只要有人能学到东西就好，以后想到还会来更新的。

本文出自 “hobsonchan” 博客，转载请与作者联系！