WEB标准学习实践（一）
首先说明，WEB标准即通俗意义上讲的DIV+CSS网页布局。
之所以学习WEB标准，没有任何理由，完全是兴趣。以前也有过学习的冲动，但总是限于时间和个人的原因没有实际操作。换了东家之后，大把的时间咱可不能浪费了。。。。。。
利用每天上班的片段时间，零零散散的看了一些基础知识，发现入门还是比较简单的。但是要做出布局复杂、样式绚丽的效果来，却需要很深的功力。稳重错误请大家指正，省的我走火入魔。。
有关WEB标准相关内容，可移步http://www.w3school.com.cn/。
闲言少叙，今天开始WEB标准实践（一）
1、WEB页面分析
当我们查看网页的源代码信息时，会发现大概的结构式这样的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Page</title>
</head>
<body>
<div>I'm EddyPeng</div>
</body>
</html>
下面我们就来一一分析
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这段文字，说明了该文档属于过渡型文档。DOCTYPE即document type的意思，Transitional表明采用XHTML过渡，transitional.dtd为解释页面代码的依据。因为XHTML相较于HTML来说更加严格，比如标签必须小写，必须闭合等要求，所以为避免一刀切的现象发生，在现阶段一般都采用过渡型。还有其他两个类型是严格型和框架型。
<html xmlns="http://www.w3.org/1999/xhtml" >
xmlns即xml namespace的缩写。因为xml标签是可以自定义的，而每个自定义的标签都要有一个命名空间。这里指的是xhtml符合http://www.w3.org/1999/xhtml国际标准。
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
表明该文档的语言编码是gb2312（简体中文编码）。这里不涉及过多编码的知识，但有一点要注意，该文档包含的css文件或其他文件的编码必须与该文档一致，否则会产生乱码。
<title>Untitled Page</title>
页面的名字
<body>
<div>I'm EddyPeng</div>
</body>
这里就是我们千变万化的WEB页面内容了。
2、html标签
html标签在页面中都必须结束。成对的标签以“/标签名”结束，有些单一的标签在本身的结尾打上/来结束，这是xhtml代码编写的规范。
成对标签
<html>...</html>
<head>...</head>
单一标签
<img src="" />
<br />
3、CSS加载方式
加载CSS样式有四种方式，优先级依次为内联样式->内部样式->外部样式/链接样式：
•内联样式：以style属性方式写在标签内内部的样式，只对该标签有效。如<p style="font-size:13px;">内部样式</p>
•内部样式：以<style>开始，</style>结尾，写在页面内的head标签内，只能针对本页有效。如<style>h2 { color:#fff;}< /style>
•外部样式：以文件的形式存在，在页面内以link的形式引入，可以针对多个页面，只要引用即可。如<link href="demo.css" rel="stylesheet" type="text/css" />
•链接样式：以@import url标记所链接的外部样式表，它一般常用在另一个样式表内部。常用在全局公用的样式表文件被其他样式表文件引用的情况。如@import url("/css/global.css")
4、CSS几种主要选择器
•派生选择器：为存在上下文关系的html元素指定样式。如 h2 string{color:blue}，那么受影响的为<h2>normal<strong>blue</strong></h2>
•id选择器：为特定id的html元素指定样式。以"#"号定义。如#IDSelector{color:red;}，那么下面的元素将受影响：<p id="IDSelector">红色。</p>。同时id选择器也可以结合派生选择器。如#IDSelector span{color:red;}，那么下面的元素将受影响：<p id="IDSelector"><span>I'm Span</span></p>中的span。
•类选择器：以"."号定义。如.center {text-align: center}，那么下面的元素将受影响：<p class="center">I'm class selector</p>。同时类选择器也可以结合派生选择器。如.center {text-align: center} span{color:red;}，那么下面的元素将受影响：<p class="center"><span>I'm Span</span></p>中的span。
•属性和值选择器：可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。目前在IE7及以上版本支持。如：
input[type="text"]{width:150px; display:block; margin-bottom:10px;background-color:yellow; font-family: Verdana, Arial;}。那么所有的文本输入框将都会受到影响。
5、CSS优先级
•id优先级高于class
•后面的样式覆盖前面的
•指定的高于继承
•行内样式高于内部或外部样式
终于把CSS相关的基础知识写的差不多了，这一片文字比较多，下一篇争取图文并茂，让大家看起来舒服一些。
最后再补充一个html元素的知识。在整个WEB标准的学习实践过程中，要不断的遇到。就是块元素和内联元素。下面是两种类型元素的特点
块元素：总是另起一行开始；高度，行高以及顶、底边距都可控制；宽度缺省是它所在容器的100%，除非设定一个宽度。
内联元素:和其它元素都在一行上；高度，行高以及顶、底边距不可改变；宽度就是它所容纳的文字或图片的宽度，不可改变。
两种元素可以通过display：block和display：inline的方式进行转换。
好了，先到这吧，去喝点水先。写博客真累，不过写完的东西在脑中更清晰了，值得。
