Download pdf - Html&css培训舒克

新人培训系列课程一舒克

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

嵌套



混合



继承



快速编写结构代码

• Zen Coding

结果代码

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

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

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的优化

http://pmt.sourceforge.net/pngcrush/

http://advsys.net/ken/utils.htm

http://optipng.sourceforge.net/

剥离JPG的元数据

注释

应用程序定义的内部信息

EXIF

工具

jpegtran http://jpegclub.org

JPG的优化

感谢 TPS

https://developer.mozilla.org/cn/HTML


《高性能网站建设进阶指南》 - Steve Souders

参考资料






感谢大家

Download pdf - Html&css培训 舒克

Download pdf - Html&css培训舒克