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

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 {…}

SASS:可编程的CSS
变量

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

What's hot (20)

Similar to Html&css培训舒克

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

More from jay li

More from jay li (20)