More Related Content Similar to Html&css培训 舒克 (20) Html&css培训 舒克3. 编辑器
• DreamWeaver
• Vim
• Editplus/Notepad++
• WebStrom/Aptana/Eclipse
4. 主要内容
HTML
概述 标签&语义 代码规范
CSS
常用语法 CSS Sprites
技巧
制作流程 经验分享 图片质量
6. HTML
• 超文本标记语言( HyperText Mark-up Language)
• 元素(element)
• 属性(attribute,property)
7. HTML 版本
• 在1993年6月发为互联网工程工作小组 (IETF)工作草案发布
HTML 1.0 (并非标准)
• 1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发
HTML 2.0 布之后被宣布已经过时
HTML 3.2 •1996年1月14日,W3C推荐标准
HTML 4.0 •HTML 4.0 – 1997, W3C推荐标准
HTML 4.01 •1999年12月24日
XHTML 1.0 •发布于2000年1月26日
XHTML 1.1 •于2001年5月31日发布
HTML 5.0 •201*,W3C工作草案
9. Doctype
• <!DOCTYPE HTML PUBLIC "‐//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01
标准doctype
兼容HTML5
•<!DOCTYPE html>
10. <head></head>
title
必需且唯一
charset
<meta charset="gbk" />
<link /> <script></script> <style></style>
关注 网页渲染课程
base
<base target=“_blank”>
11. 语义化
概念
用合理HTML标记以及其特有的属性去格式化
文档内容
优点
提升可访问性
搜索引擎优化(SEO)
12. 语义化标签
列表元素
dl > dt , dd ; ul , ol > li
表格
table > thead,tfoot ,tbody > tr > th,td
标题 段落
h1~h6 , p
13. Oh, No!
不推荐使用的标签
b , i , u, big , small
不能使用的标签
center , menu , layer , marquee , font
不能使用的属性
align , bgcolor , bgsound ,link , alink , vlink
14. 标签和属性
label 和 input 组合
按钮 <button> <input />
不推荐:
推荐:
16. 标签嵌套规则
概念
块级元素 (block)
div h1~h6 ul ol li dt dd dl form p …
行内(内联)元素 (inline)
span strong em a img input button select …
17. 嵌套规则
基本原则
块级元素能嵌套所有内联元素
行内元素不能嵌套块级元素
注意:
以下块级元素不要再嵌套块级元素
h1~h6 p dt address
附:(X)HTML Strict 下的嵌套规则
http://www.junchenwu.com/2007/01/allowed_nesting_of_elements_in_html_4_strict_and_xhtml_10_strict.html
18. 代码书写规范
标签和属性名称采用小写
<h1></h1> <H1></H1>
属性值用引号 ,自定义属性用”data-”开头
<a href=“http://www.taobao.com”></a>
<a href=http://www.taobao.com></a>
标签必须闭合
<li>Text</li>
<li>Text
<br/>
<br>
19. 注释
模块前后注释
注释内容不能以>或->开头,也不能包含两个连续的中划线--
注释占用文件大小,请不要使用大篇幅的注释
(as short as possible, as long as necessary.)
代码变更的注释
20. CSS
概述
语法
Css Sprites
22. CSS概述
CSS 历史
CSS 1 1996.12成为推荐标准(字体,颜色、空白边)
CSS 2 1998.5成为推荐标准 (浮动,定位,选择器)
CSS 2.1 2002年修订(伪类,属性选择器)
CSS3 未正式发布
23. 针对不同设备的CSS代码
Link标签的media属性
<link media=“screen” />
样式表内的写法
@media print
{
#header{border:1px solid #000}
}
25. 层叠
层叠Cascading
浏览者自定义样式
内部样式表
外部样式表
浏览器缺省设置
26. CSS
概述
语法
Css Sprites
27. CSS语法
选择器 Selector
属性 Property
属性值 Value
selector { property:value; }
28. CSS Selector
选择器 Selector
元素选择器 h1
类选择器 .classname
id选择器 #id
全局选择器 *
继承选择器 div p
选择器分组 h1,h2
伪类选择器 :hover
CSS 属性选择器 input[type=“button”] ie6
29. CSS Selector
选择器优先级
表格中A、B、C、D分别代表四个等级A为最高级,D为最底级。
也可以理解为数学中的千位,百位,十位,个位,D就代表个位。
30. CSS 属性
属性 Prperty
继承 inheritance
Text-related properties that are inherited
文本样式相关的属性会继承
List-related properties that are inherited
列表样式相关属性会继承
The color property is inherited
颜色属性会继承
31. 常用会继承的CSS属性
border-collapse, border-spacing, caption-side, color,
cursor, direction, empty-cells, font-family, font-size,
font-style, font-variant, font-weight, font, letter-
spacing, line-height, list-style-image, list-style-
type, list-style, orphans, pitch-range, pitch, quotes, text-
align, text-indent, text-decoration, visibility,
white- space, word-spacing
32. CSS 属性值
属性值 Value
默认值 width:auto;
预定值 color:red;
设定值 color:#f60;
33. CSS 属性值
属性值 Value
font-size和line-height : em ,px ,%
padding,margin,border-width缩写
(top, right, bottom, left)
font的缩写 (必有项font-size,font-family)
34. CSS 属性值
position and z-index属性
static 默认值
relative 相对定位
absolute 绝对定位
fixed 可视区域定位/屏幕定位
35. CSS 属性值
overflow属性
visible 始终可见 (默认值)
hidden 溢出隐藏 (子元素有绝对定位时慎用)
auto 自动 ,溢出时出现滚动条
scroll 始终出现滚动条
36. CSS 属性值
vertical-align属性
垂直居中对齐
用于inline-block元素时,该元素后的
inline元素将对该元素垂直居中
用于th,td时,内部内容将垂直居中
38. CSS 属性值
CSS属性值参考
https://developer.mozilla.org/en/CSS_Reference
39. CSS hack
良好结构的代码不需要HACK
当**不可避免的时候: 闭上眼,享受!
#test{
color:red; /* 所有浏览器都支持 */
color:red !important;/* Firefox、IE7+支持 */
_color:red; /* IE6支持 */
*color:red; /* IE6、IE7支持 */
*+color:red; /* IE7支持 */
color:red0; /* IE8支持 */
color:red9; /* IE6、IE7、IE8 、IE9支持 */
}
40. CSS
概述
语法
Css Sprites
41. CSS Sprites
优点
1.减少HTTP请求,降低服务器负担
2.文件体积更小 1+1 < 2
缺点
1.开发/维护成本高
2.扩展性差
43. 如何解决维护成本高的问题
按模块 or 组件合成图片
按布局样式合成图片
repeat-x , repeat-y, no-repeat
44. 模块化的结构和样式
分离
布局和模块的分离
不推荐 .col-sub .hd{…}
推荐 .module-new .hd {…}
49. 快速编写结构代码
• Zen Coding
结果代码
学习:http://www.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/
利用其他工具的自动完成功能
51. 全局观念
页面的构成元素
布局
模块
内容
57. 页面制作流程
确定公用
通览设计 寻找现有 模块 开始
布局 结构
稿 资源 拆分 工作
样式
59. 切图技巧
主要工具 Photoshop
选择 存储为
复制 新建图层 粘贴
区域 web格式
拷贝所选区域:Ctrl+Shift+C 和 Ctrl+C 的使用
制作CSS Sprites 合成图片时可打开辅助网格,用于快速拖
放图片到指定位置 。
快捷键 ctrl+’;
设定:编辑->首选项->参考线,网格和切片
利用PS的动作可以快捷的完成上述过程
62. 需要了解的图像知识
图形 VS 照片
真彩色图像VS调色板图像
透明 和 alpha通道(RGBA)
隔行扫描
63. GIF
Graphics Interchange Format
图像互换格式
调色板图像
透明:允许一个二进制类型的透明度
支持动画
无损
逐行扫描 (LZW压缩算法)
64. JPG & JPEG
Joint Photographic Expert Group
真彩色图像
不支持透明
不支持动画
有损
支持隔行扫描
65. PNG
PNG is Not GIF?
Portable Network Graphics
便携式网络照片
66. PNG
支持真彩色和调色板
支持完全的alpha透明
支持动画但无跨浏览器解决方案
无损
支持隔行扫描
67. PNG
PNG8 调色板色
PNG24 真彩色不包括alpha透明通道
PNG32 真彩色包括alpha透明通道
Photoshop存储为WEB格式没有PNG32?
http://www.deepbluesky.com/blog/-/the-difference-between-png24-and-png32_49/
68. PNG的优化
去除PNG图像里面不必要的块信息
如:GAMMA块
工具
Pngcrush http://pmt.sourceforge.net/pngcrush/
PngOut http://advsys.net/ken/utils.htm
OptiPNG http://optipng.sourceforge.net
69. JPG的优化
剥离JPG的元数据
注释
应用程序定义的内部信息
EXIF
工具
jpegtran http://jpegclub.org
71. 参考资料
https://developer.mozilla.org/cn/HTML
https://developer.mozilla.org/en/CSS_Reference
《高性能网站建设进阶指南》 - Steve Souders