狠狠撸

尊敬的朋友：在这快乐分享的时刻 , 思念好友的时刻 , 美梦成真的时刻 . 提前祝大家新春快乐，万事如意！此致敬礼杭州研发中心辛卯年 2011 Happy New Year

开始进入今天的话题前端的那些事儿 HTML + CSS 预告：下期 javascipt 的那些事儿辛卯年 2011 Happy New Year

一、 HTML HTML 作用 HTML 是用来描述网页的一种语言。 HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) 常见的标签有 html, body, div, p, h1-h6, span, ul, ol, li, dl, dt, dd, a, img, table, tr, td…… 只是在布局页面时最多的标签是 div ，流传出 div 布局

一、 HTML HTML （ 10 小记） 1. 一定要闭合 HTML 标签 { 如： <p></p> <img />} 2. 声明正确的文档类型 ( DocType ) { 推荐使用： <!DOCTYPE html> 淘宝 \163} 3. 不要使用嵌入式 CSS 样式 { 不要书写 style=“*”} 4. 在页面 head 标签中引入所有的样式表文件 { 在雅虎的开发过程中，我们发现，在 head 标签中引入样式表，会加快网页加载速度，因为这样可以使页面逐步渲染。 —— ySlow 团队 }

一、 HTML HTML （ 10 小记） 5. 在页面底部引入 javascript 文件 {<script src=/itsky365/2010-0107/“*”><script></body>} 6. 不要使用嵌入式 javascript- 监听事件 {<a onclick=“alert(‘html’)”>html</a>} 7. 使用小写的标记 { onclick=“*” ， onClick=“*” } 8. 压缩前端代码 { YUI Compressor v2.4.2 \ google-compiler } 9. 为所有的图片加上 alt 属性， a 加上 title 属性 { 为图片加上 alt 属性的好处是不言而喻的 —— 这样可以让禁用图片或者使用特殊设备的用户无障碍得了解你的信息，并且对图像搜索引擎友好 }

一、 HTML HTML （ 10 小记） 10. 学习每一个 HTML 标签，虽然有些 HTML 标签很少用到，但你依然应该了解它 { 比如“ del” 、“ sup”, “sub” 等，你必须学习它们以备不时之需 } 10.1. 必要时在线验证 html 10.2. 推荐使用 html 、 css 、 js 分离术 { html: 内容 , css: 样式 , js: 行为 } 方便管理和后期代码维护以及代码简洁

一、 HTML HTML 未来 html5 新建标记元素 header \ footer \ nav \ menu \ aside \ section \ article …… canvas 画布 <canvas> 是一个新的 HTML 元素，这个元素可以被 script 语言 ( 通常是 javascript) 用来绘制图形。如可以用它来画图、合成图象、或做简单的 ( 和不那么简单的 ) 动画

二、 CSS CSS 层叠样式表样式定义如何显示 HTML 元素样式通常存储在样式表中 {filename.css} 把外部样式添加到 HTML 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一个 { 减少 http 请求 } 还可以做缓存（第一次加载完成后，其他页面就直接从浏览器的缓存中读取，同一文件）

二、 CSS CSS 五则 1. 载入样式 1.1 浏览器缺省样式 { 一般要重置，也就是 css reset 重设浏览器的样式 } css-reset-yahoo.css 1.2. 内部样式表 { 位于 <head> 标签内部， <head><style></style></head>} 1.3. 内联样式表 / 行内样式 { 在 html 元素内部 } 1.4. 外部样式表 { 在 css 文件中 } 推荐 <link href=“” rel=“stylesheet” type=“text/css” />

二、 CSS CSS 五则 2. CSS 命名 { 骆峰法、连字符、下划线 } 2.1 css 命名可以依据团队而定 2.2 css 简写 margin / padding { 1: 全 , 2: 上下 - 左右 , 3: 上 - 左右 - 下 , 4: 上 - 右 - 下 - 左 } 数值为 0 时就直接为 0 ，不必加单位 ; font:15px/1.5 ‘ 宋体’ ;

二、 CSS CSS 五则 3. CSS 书写顺序 // 显示属性 display > list-style > position > float > clear // 自身属性 width > height > margin > padding > border > background // 文本属性 color > font > text-decoration > text-align > vertical-align > white-space > other > textcontent 扩展阅读： Mozilla suggested css order

二、 CSS CSS 五则 4. CSS hack 由于不同的浏览器，比如 IE6, IE7, IE8, (IE9), Firefox, Opera, Safari, Chrome 等对 CSS 的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的 CSS ，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。但这些有时也被说成了“ bug”

二、 CSS CSS 五则 4.CSS hack 主要对象是 IE 家族（ 6 ， 7 ， 8 ） IE6 _ * IE7 + * IE \9 所有 ie 浏览器 !important 所有浏览器扩展阅读： http://sofree.cc/ie6-ie7-ie8-firefox-css-hack/

二、 CSS CSS 五则 4.CSS hack 注意书写的顺序：现在浏览器的写法要写在最前面， IE6 的写法要写在最后面用于覆盖，其他浏览器写在中间。 ( 标前 6 后他中间 ) IE67 都能识别 * ，标准浏览器 ( 如 FF) 不能识别 * { 区分 IE67 和标准浏览器间的 hack} IE6 能识别 * ，也能识别 _ { 区分 IE6 和非 IE6} IE7 能识别 * ，也能识别 + { 区分 IE7 和非 IE7} 标准浏览器不能识别 * ，但能识别 !important { 区分 IE 和标准浏览器间的 hack}

二、 CSS 4. CSS hack * html p { color:#f00; }? 支持? IE6 ，不支持 FF?IE7?IE8+ *+ html p { color:#f00; }? 支持? IE7 ，不支持 FF?IE6 p { *color:#f00; }? 支持? IE6?IE7 ，不支持 FF?IE8+ 注：不管是什么方法，书写的顺序都是 firefox 的写在前面， IE7 的写在中间， IE6 的写在后面。如： { FF; ie8+ \9 ; * ie67; + ie7; _ ie6; }

二、 CSS CSS 五则 CSS hack 浏览器兼容一览表早期的版本请查看大图

二、 CSS CSS 五则 5. 样式元素权重、优先级所谓 CSS 优先级，即是指 CSS 样式在浏览器中被解析的先后顺序。文内选择符， ID 选择符， Class 选择符，元素选择符元素选择符 < 文内选择符 < Class 选择符 < ID 选择符 !import 权重更高

二、 CSS CSS 小常识 @A 的四种样式 CSS 属性的排列顺序 : L-V-H-A {:link > :visitive > :hover > :active} @IE6 的双倍边距 BUG display:inline @ 水平居中 margin:0 auto; @ 文字自动换行 { word-wrap:break-word; word-break:break-all; }

二、 CSS CSS 小常识 @clearfix 清除浮动 .clearfix:after { content:'', display:block; clear:both; height:0; visibility:hidden; } .clearfix { zoom:1; } @margin-top margin-bottom 设置外边界上下值时，会叠加（注 :padding 不会发生此现象）所以在写 CSS 不要让 margin 发生在相近的两个盒模形

二、 CSS CSS 小常识 @ 让层显示在 FLASH 之上给 FLASH 设置透明属性 <param name="wmode" value="transparent" /> 或者 <param name="wmode" value="opaque" /> @ 让一个层垂直居中于浏览器中 div { position:absolute; top:50%; left:50%; margin:-100px 0 0 -100px; width:200px; height:200px; border:1px solid red; } @ 文字垂直居中 height = line-height

三、前端小利器 Firefox firebug / Yslow css\js 压缩工具 YUI Compressor v2.4.2 \ google-compiler 生成 filename-min.js/css IE 开发人员工具 {F12 ( 同 FF)} \ IEtester 还有 Fiddler2 、 httpWatch…… firebug 、压缩工具推荐使用

Q & A Thanks 辛卯年 2011 Happy New Year

狠狠撸

2010 01-07周五分享前端的那些事儿-小米猪

Recommended

More Related Content

What's hot (18)

Viewers also liked (20)

Similar to 2010 01-07周五分享前端的那些事儿-小米猪 (20)

2010 01-07周五分享前端的那些事儿-小米猪

狠狠撸

2010 01-07周五分享 前端的那些事儿-小米猪

Recommended

More Related Content

What's hot (18)

Viewers also liked (20)

Similar to 2010 01-07周五分享 前端的那些事儿-小米猪 (20)

2010 01-07周五分享 前端的那些事儿-小米猪

2010 01-07周五分享前端的那些事儿-小米猪

Similar to 2010 01-07周五分享前端的那些事儿-小米猪 (20)

2010 01-07周五分享前端的那些事儿-小米猪