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