Web教程2
- 2. 什么是 web2.0 标准？
• web 标准不是一个，而是一组标准，网页是由结构
（ html4.0 xhtml1.0 ）样式（ css 2.0 ） , 行为
（ javascript ） , 三者构成的
• 一个遵循 web2.0 的网站首先应该做到结构，样式，行为
的分离，我修改样式而不会影响到结构和行为的变化，这
样就达到了一个完全遵循 web2.0 的标准网站 ..
- 3. 什么是 Doctype?
• Doctype 是 document type 的简写，是在页面中为了指定也就是
告诉浏览器将要以哪种规则来解析页面，只有确定此类型，才能使
浏览器正常的识别和渲染 html 和 css ，（注：昨天的例子没有写这些 , 首
先是因为如果不写的话浏览器会按着一个默认的类型来解析，而且是为了让你们快速
实现效果，在正常网页开发中， doctype 是必须指定的）
• Doctype 有多种解析模式类型
过渡型： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
过渡型是用的最多的类型，现在咱们 baiti 的页面都是用这个过渡
型的，因为他的要求编码不是很严格，方便开发人员使用
- 4. • 不过近些年由于 html5 的兴起，现在好多大网站已经改变他们的解析
类型了，比如淘宝，支付宝，新浪 weibo 等 .. 他们的 doctype 已经
转变为 html5 的解析类型写法，由于 html5 主张简单，所以他的
doctype 很简单，举个栗子吧，如图为淘宝首页的 doctype 类型：
• 由于在 ie8 以及之前和一些国产的浏览器包括 360 ，搜狗等他们都不
支持 html5 ，不过有一些解决办法，所以以后的网页会倾向于 html5
的写法，简单方便嘛！！
- 6. • 第一步首先要指定 doctype 类型好让浏览器知道你是以哪
种规范来解析标签的（注：这就不是成对出现鸟）
• 接下来是一对 <html> </html> 他是指定此时是 html 语
言的标记，基本只要你写网页都要写，如果你不写这些就
像我们昨天的例子，其实浏览器会自动给你加上的，但是
为了规范还是要写的
• 然后是 <head></head><body></body> 顾名思义 head 是头
部的意思也就是指明网页的一些信息，比如 title 啦，编
码方式啦（防止乱码，因为有很多种编码方式例子中的
meta 标签他的一个属性为 charset 就是制定网站的编码方
式为 utf-8 的方式），引用外部文件啦，等 都需要在
head 里面定义，
• 最后我们要写网页内容的正文都需要写在 body 里面，如
果写在 head 里面是不会显示的（我未做测试，不推荐这
么写）
- 8. • 但是发现没有指定 doctype 类型如果你自己没指定浏览器
会认为你最低级模式也就是 quick 模式，强烈推荐别这么
写，他会造成在各个浏览器的不兼容，以及解析误差，也
就是所谓的不兼容，跑版，各个浏览器样式不一致等，诸
多问题，所以才有我这个职业的由来，这个要说都又扯远
了，记得一定要指定 doctype
• 很多浏览器不兼容，少数是因为 doctype 没指定，或指定
错误（如写错字母等），还有就是标签元素本身，在各个
浏览器下解析的误差，这个是很重要的一块，以后会慢慢
补上
- 9. 什么是 c s s ？
• CSS 是 Cascading Style Sheets( 层叠样式表 ) 的缩写。
• 是一种对 web 文档添加样式的简单机制，属于表现层的布
局语言。（ lyj: 我复制的）
• 语法为 : 选择器 { 属性名：属性值； }
• 选择器可以为好多种昨天说的只是其中一种 class 选择器
，当然还有 id 选择器，标签选择器等，看个例子就明白
鸟
• <p class="style" id="ele"> 亲，包邮哟 !!</p>
• 其中我们要给 p 标签写样式有几种写法：
• class 选择器需要用点来获得 : .style{color:red;}
• id 选择器需要用 # 来取得 : #ele{color:green;}
• 标签选择器： p{color:black;}
• 这三种都能取得那我们应该用那种呢， 这个看具体应用
场景了但是他们是有权重的 : id 选择器最高其次为
class 最后为标签 所以最后的 p 标签的颜色应为 green
色
- 10. 怎么往网页里引入 c s s 文件
• 昨天我们的例子 css 是写在网页中的，那如果一个网站的
css 很多那就会很难维护，比如多个页面都需要这个样式
，于是就把 css 单独作为一个文件引入 就行了 ，在 html
中有个专门作为引入 css 文件的标签 link ，前面也说
了，引入文件啥的 都放到 head 里面，也就是说 我们要
在 head 里面写上 :
• <link href="css 文件名字 " rel="stylesheet"
type="text/css" />
• 其中 rel 和 type 是固定的，就是为了指明为引入为 css
文件， href 则为文件路径，我们可以建立一个 txt 文件
然后把后缀名改为 .css 就可以了 ( 注： .html 文件和 .css 文
件必须在同一目录下 ) 还是用刚才的例子，把样式写到一个
css 文件中 然后引入 css 文件，这就是一般的工作模式
- 12. • s tyle .c s s 文件目录结构
下载完整源代码
