Html&css培训 舒克
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Html&css培训 舒克

  • 2,548 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,548
On Slideshare
2,370
From Embeds
178
Number of Embeds
6

Actions

Shares
Downloads
184
Comments
0
Likes
15

Embeds 178

http://wiki.ued.taobao.net 103
http://www.nodejser.com 68
http://old.unicac.cn 3
http://hpf1908.gotoip1.com 2
http://mzhou.me 1
http://cache.baidu.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 新人培训系列课程一 舒克
  • 2. HTML CSS
  • 3. 编辑器• DreamWeaver• Vim• Editplus/Notepad++• WebStrom/Aptana/Eclipse
  • 4. 主要内容 HTML 概述 标签&语义 代码规范 CSS 常用语法 CSS Sprites 技巧 制作流程 经验分享 图片质量
  • 5. Html 概述 标签&语义 代码规范
  • 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工作草案
  • 8. Html 概述 标签&语义 代码规范
  • 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 /> 不推荐: 推荐:
  • 15. Html 概述 标签&语义 代码规范
  • 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
  • 21. Cascading Style Sheet层叠样式表
  • 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} }
  • 24. 不同设备的样式
  • 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时,内部内容将垂直居中
  • 37. CSS 属性值display:none visibility:hidden
  • 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.扩展性差
  • 42. CSS Sprites:用还是不用 页面访问量 页面生命周期 开发所耗成本
  • 43. 如何解决维护成本高的问题 按模块 or 组件合成图片 按布局样式合成图片 repeat-x , repeat-y, no-repeat
  • 44. 模块化的结构和样式 分离  布局和模块的分离 不推荐 .col-sub .hd{…} 推荐 .module-new .hd {…}
  • 45. SASS:可编程的CSS 变量 http://sass-lang.com/
  • 46. SASS:可编程的CSS 嵌套 http://sass-lang.com/
  • 47. SASS:可编程的CSS 混合 http://sass-lang.com/
  • 48. SASS:可编程的CSS 继承 http://sass-lang.com/
  • 49. 快速编写结构代码• Zen Coding 结果代码 学习:http://www.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/ 利用其他工具的自动完成功能
  • 50. 技巧&经验 全局观 切图技巧 图片质量
  • 51. 全局观念 页面的构成元素  布局  模块  内容
  • 52. 布局
  • 53. 模块拆分
  • 54. 整理公用结构和样式左图右文字的内容布局
  • 55. 模块:标题+内容
  • 56. 页面制作流程 确定公用通览设计 寻找现有 模块 开始 布局 结构 稿 资源 拆分 工作 样式
  • 57. 技巧&经验 全局观+制作流程 切图技巧 图片质量
  • 58. 切图技巧 主要工具 Photoshop 选择 存储为 复制 新建图层 粘贴 区域 web格式  拷贝所选区域:Ctrl+Shift+C 和 Ctrl+C 的使用  制作CSS Sprites 合成图片时可打开辅助网格,用于快速拖 放图片到指定位置 。 快捷键 ctrl+’; 设定:编辑->首选项->参考线,网格和切片  利用PS的动作可以快捷的完成上述过程
  • 59. 技巧&经验 全局观 切图技巧 图片质量
  • 60. GIF JPG PNG
  • 61. 需要了解的图像知识 图形 VS 照片 真彩色图像VS调色板图像 透明 和 alpha通道(RGBA) 隔行扫描
  • 62. GIF Graphics Interchange Format 图像互换格式 调色板图像 透明:允许一个二进制类型的透明度 支持动画 无损 逐行扫描 (LZW压缩算法)
  • 63. JPG & JPEG Joint Photographic Expert Group 真彩色图像 不支持透明 不支持动画 有损 支持隔行扫描
  • 64. PNG PNG is Not GIF? Portable Network Graphics 便携式网络照片
  • 65. PNG 支持真彩色和调色板 支持完全的alpha透明 支持动画但无跨浏览器解决方案 无损 支持隔行扫描
  • 66. PNG PNG8 调色板色 PNG24 真彩色不包括alpha透明通道 PNG32 真彩色包括alpha透明通道Photoshop存储为WEB格式没有PNG32?http://www.deepbluesky.com/blog/-/the-difference-between-png24-and-png32_49/
  • 67. PNG的优化 去除PNG图像里面不必要的块信息 如:GAMMA块 工具  Pngcrush http://pmt.sourceforge.net/pngcrush/  PngOut http://advsys.net/ken/utils.htm  OptiPNG http://optipng.sourceforge.net
  • 68. JPG的优化 剥离JPG的元数据  注释  应用程序定义的内部信息  EXIF 工具  jpegtran http://jpegclub.org
  • 69. 感谢 TPS
  • 70. 参考资料 https://developer.mozilla.org/cn/HTML https://developer.mozilla.org/en/CSS_Reference 《高性能网站建设进阶指南》 - Steve Souders
  • 71. 感谢大家