狠狠撸

新人培训系列课程一
舒克

编辑器

? 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 布之后被宣布已经过时

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工作草案

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>

<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

Oh, No!
? 不推荐使用的标签
? b , i , u, big , small
? 不能使用的标签
? center , menu , layer , marquee , font
? 不能使用的属性
? align , bgcolor , bgsound ,link , alink , vlink

标签和属性
? label 和 input 组合

? 按钮 <button> <input />
不推荐:

推荐:

标签嵌套规则
? 概念
? 块级元素 (block)
div h1~h6 ul ol li dt dd dl form p …

? 行内(内联)元素 (inline)
span strong em a img input button select …

嵌套规则
? 基本原则
? 块级元素能嵌套所有内联元素
? 行内元素不能嵌套块级元素
? 注意：
? 以下块级元素不要再嵌套块级元素
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

代码书写规范
? 标签和属性名称采用小写
<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
? 概述
? 语法
? Css Sprites

Cascading Style Sheet
层叠样式表

CSS概述
? 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}
}

层叠
? 层叠Cascading
? 浏览者自定义样式
? 内部样式表
? 外部样式表
? 浏览器缺省设置

CSS语法
? 选择器 Selector
? 属性 Property
? 属性值 Value
? selector { property:value; }

CSS Selector
? 选择器 Selector
? 元素选择器 h1
? 类选择器 .classname
? id选择器 #id
? 全局选择器 *
? 继承选择器 div p
? 选择器分组 h1,h2
? 伪类选择器 :hover
? CSS 属性选择器 input[type=“button”] ie6

CSS Selector
? 选择器优先级

表格中A、B、C、D分别代表四个等级A为最高级，D为最底级。
也可以理解为数学中的千位，百位，十位，个位，D就代表个位。

CSS 属性
? 属性 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
良好结构的代码不需要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支持 */
}

CSS Sprites
? 优点
1.减少HTTP请求,降低服务器负担
2.文件体积更小 1+1 < 2

? 缺点
1.开发/维护成本高
2.扩展性差

CSS Sprites:用还是不用

? 页面访问量
? 页面生命周期
? 开发所耗成本

如何解决维护成本高的问题
? 按模块 or 组件合成图片

? 按布局样式合成图片
repeat-x , repeat-y, no-repeat

模块化的结构和样式
? 分离
? 布局和模块的分离
不推荐 .col-sub .hd{…}
推荐 .module-new .hd {…}

厂础厂厂:可编程的颁厂厂
变量

http://sass-lang.com/

嵌套


混合


继承


快速编写结构代码
? Zen Coding

结果代码

学习：http://www.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/

? 利用其他工具的自动完成功能

技巧&经验
? 全局观
? 切图技巧
? 图片质量

全局观念
? 页面的构成元素
? 布局
? 模块
? 内容

整理公用结构和样式

左图右文字的内容布局

页面制作流程

确定公用
通览设计寻找现有模块开始
布局结构
稿资源拆分工作
样式

技巧&经验
? 全局观+制作流程
? 切图技巧
? 图片质量

切图技巧
? 主要工具 Photoshop

选择存储为
复制新建图层粘贴
区域 web格式

? 拷贝所选区域：Ctrl+Shift+C 和 Ctrl+C 的使用
? 制作CSS Sprites 合成图片时可打开辅助网格，用于快速拖
放图片到指定位置。
快捷键 ctrl+’;
设定:编辑->首选项->参考线,网格和切片

? 利用PS的动作可以快捷的完成上述过程

需要了解的图像知识
? 图形 VS 照片
? 真彩色图像VS调色板图像
? 透明和 alpha通道(RGBA)
? 隔行扫描

GIF
? Graphics Interchange Format
图像互换格式
? 调色板图像
? 透明：允许一个二进制类型的透明度
? 支持动画
? 无损
? 逐行扫描 (LZW压缩算法)

JPG & JPEG
? Joint Photographic Expert Group
? 真彩色图像
? 不支持透明
? 不支持动画
? 有损
? 支持隔行扫描

PNG

? 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

JPG的优化
? 剥离JPG的元数据
? 注释
? 应用程序定义的内部信息
? EXIF
? 工具
? jpegtran http://jpegclub.org

参考资料
? https://developer.mozilla.org/cn/HTML
? https://developer.mozilla.org/en/CSS_Reference
? 《高性能网站建设进阶指南》 - Steve Souders

狠狠撸

Html&css培训舒克

Recommended

More Related Content

What's hot (20)

Similar to Html&css培训舒克 (20)

More from jay li (20)

Html&css培训舒克

狠狠撸

Html&css培训 舒克

Recommended

More Related Content

What's hot (20)

Similar to Html&css培训 舒克 (20)

More from jay li (20)

Html&css培训 舒克

Html&css培训舒克

Similar to Html&css培训舒克 (20)

Html&css培训舒克