SlideShare una empresa de Scribd logo
1 de 26
Descargar para leer sin conexión
逍遥 HTML/CSS  规范(初稿) 张明 [email_address] 2010-12-20
提纲 ,[object Object],[object Object],[object Object]
缩写 ,[object Object],[object Object],[object Object],[object Object]
缩写之文档类型 ,[object Object],[object Object],<!doctype html>
缩写之文档类型 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<!doctype html  ... IE 浏览器读到这里时,就会使用标准模式渲染此页面
缩写之编码设置 ,[object Object],[object Object],<meta charset=&quot;utf-8&quot; /> <meta  http-equiv=&quot;Content-Type&quot; content=&quot;text/html;  charset=utf-8&quot; />
缩写之引入标签 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],参考资料: http://www.chencheng.org/blog/2010/01/15/ppt-detail-on-html-spec/ <link rel=&quot;stylesheet&quot; href=&quot;#&quot; type=&quot;text/css&quot; media=&quot;all&quot; /> <style type=&quot;text/css&quot;></style> <script type=&quot;text/javascript&quot; src=&quot;#&quot;></script>
小结 ,[object Object],<!doctype html> <html> <head> <meta charset=&quot;utf-8&quot; /> <title>the title</title> <link rel=&quot;stylesheet&quot; href=&quot;style.css&quot; /> <script src=&quot;script.js&quot;></script> </head> <body> <!-- the content --> </body> </html>
命名 ,[object Object],[object Object],[object Object],[object Object],[object Object]
逍遥统一代码 ,[object Object],[object Object],[object Object],注意  xoyo-  下的子级结构也需要加  xoyo-  ,如: <div class=&quot;xoyo-newslist&quot;> <div class=&quot;xoyo-hd&quot;> <h2 class=&quot;xoyo-title&quot;> 新闻列表 </h2> </div> <div class=&quot;xoyo-bd&quot;> <ul> <li><a href=&quot;#&quot;> 新闻内容 </a></li> </ul> </div> </div>
连词风格 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
连词风格 ,[object Object],CSS3 中有 “连字符选择符”(“ |=” ) ,用来匹配命名使用特定字符串起始、并以连字符分隔的元素。 用法: div[class|=xoyo]{ color:red } <div class=&quot;xoyo&quot;></div>  // 匹配 <div class=&quot;xoyo-news&quot;></div>  // 匹配 <div class=&quot;news-xoyo&quot;></div>  // 不匹配 <div class=&quot;xoyoNews&quot;></div>  // 不匹配 参考资料: http://tools.css3.info/selectors-test/test-attribute-hyphen.html#attribute-hyphen http://msdn.microsoft.com/en-us/library/aa358825(v=VS.85).aspx
CSS 分类 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
图片文件名 ,[object Object],# main  { background:url( main .png) repeat-y; } . news-list  { background:url( news-list .jpg) no-repeat; } . nav ul  { background:url( nav-ul .jpg) no-repeat; } . nav a:hover  { background:url( nav-a-hover .png) no-repeat; }
常用命名 ,[object Object],[object Object],包裹、容器: container, wrapper 页面: page 头部: header 尾部: footer 导航、菜单: nav, menu 内容: content 主内容: main 侧栏: sidebar 内容模块: section 侧栏模块: aside 模块头部: hd 模块内容: bd 模块尾部: ft 登录: login 登出: logout 注册: signup, reg, register 列表: list 提示信息: msg, tips 注释、提示: note, notice 摘要: summary 当前: current, cur 不要使用  banner(b, ban, bnr), ad*  等命名,防止被当作广告过滤。
常用命名 ,[object Object],[object Object],按钮: btn 文本: txt 容器: wrap ...
其他 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
注释 ,[object Object],[object Object],[object Object],<!-- Start CMS 文章详情模块  --> <div id=&quot;xoyoNews&quot; class=&quot;detail_con&quot;> ...... </div><!-- #xoyoNews, .detail_con --> <!-- End CMS 文章详情模块  --> 要有空格
注释 ,[object Object],[object Object],[object Object],/*! mingelz, 2010-12-17 17:46 */ /* global */ selector{} /* header */ selector{} /* cms: detail_con */ selector{}
Javascript 的加载 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
细节 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
缩进 ,[object Object],[object Object],[object Object],[object Object]
缩进 ,[object Object],[object Object],<div class=&quot;nav&quot;> <ul class=&quot;nav-list&quot;> <li class=&quot;t01&quot;><a href=&quot;#&quot;>Home</a></li> <li class=&quot;t02&quot;><a href=&quot;#&quot;>About</a></li> </ul> </div> .nav{ ... } .nav ul{ ... } .nav ul li{ ... } .nav ul li.t02{ ... } .nav ul li a{ ... } .nav{ ... } .nav-list{ ... } .nav-list li{ ... } .t02{ ... } .nav-list a{ ... }
CSS 书写格式 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS 书写格式 ,[object Object],[object Object],[object Object],.selector{property:value;property:value;} .selector1, .selector2, .selector3{property:value;property:value;} -moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;
CSS 书写格式 ,[object Object],height:20px;height:21px;*height:22px;_height:23px;

Más contenido relacionado

Destacado

詹剑锋:Big databench—benchmarking big data systems
詹剑锋:Big databench—benchmarking big data systems詹剑锋:Big databench—benchmarking big data systems
詹剑锋:Big databench—benchmarking big data systemshdhappy001
 
Kafka文件系统设计
Kafka文件系统设计Kafka文件系统设计
Kafka文件系统设计志涛 李
 
CVLinkedIn
CVLinkedInCVLinkedIn
CVLinkedInJun Ma
 
Dpdk Validation - Liu, Yong
Dpdk Validation - Liu, YongDpdk Validation - Liu, Yong
Dpdk Validation - Liu, Yongharryvanhaaren
 
Zejia_CV_final
Zejia_CV_finalZejia_CV_final
Zejia_CV_finalZJ Zheng
 
Research Park: Year in Review 2014
Research Park: Year in Review 2014Research Park: Year in Review 2014
Research Park: Year in Review 2014UIResearchPark
 
Cheng_Wang_resume
Cheng_Wang_resumeCheng_Wang_resume
Cheng_Wang_resumeCheng Wang
 
Wei_Zhao_Resume
Wei_Zhao_ResumeWei_Zhao_Resume
Wei_Zhao_ResumeWei Zhao
 
Resume_Yilun Chong_EN
Resume_Yilun Chong_ENResume_Yilun Chong_EN
Resume_Yilun Chong_ENYilun Chong
 
冯宏华:H base在小米的应用与扩展
冯宏华:H base在小米的应用与扩展冯宏华:H base在小米的应用与扩展
冯宏华:H base在小米的应用与扩展hdhappy001
 
台湾趴趴走
台湾趴趴走台湾趴趴走
台湾趴趴走Limbo Wong
 
CV_Shilidong
CV_ShilidongCV_Shilidong
CV_Shilidong?? ?
 

Destacado (16)

詹剑锋:Big databench—benchmarking big data systems
詹剑锋:Big databench—benchmarking big data systems詹剑锋:Big databench—benchmarking big data systems
詹剑锋:Big databench—benchmarking big data systems
 
Kafka文件系统设计
Kafka文件系统设计Kafka文件系统设计
Kafka文件系统设计
 
CVLinkedIn
CVLinkedInCVLinkedIn
CVLinkedIn
 
Dpdk Validation - Liu, Yong
Dpdk Validation - Liu, YongDpdk Validation - Liu, Yong
Dpdk Validation - Liu, Yong
 
Zejia_CV_final
Zejia_CV_finalZejia_CV_final
Zejia_CV_final
 
Research Park: Year in Review 2014
Research Park: Year in Review 2014Research Park: Year in Review 2014
Research Park: Year in Review 2014
 
Cheng_Wang_resume
Cheng_Wang_resumeCheng_Wang_resume
Cheng_Wang_resume
 
Lichang Wang_CV
Lichang Wang_CVLichang Wang_CV
Lichang Wang_CV
 
Wei_Zhao_Resume
Wei_Zhao_ResumeWei_Zhao_Resume
Wei_Zhao_Resume
 
Paradigm Shifts
Paradigm ShiftsParadigm Shifts
Paradigm Shifts
 
Resume_Yilun Chong_EN
Resume_Yilun Chong_ENResume_Yilun Chong_EN
Resume_Yilun Chong_EN
 
冯宏华:H base在小米的应用与扩展
冯宏华:H base在小米的应用与扩展冯宏华:H base在小米的应用与扩展
冯宏华:H base在小米的应用与扩展
 
台湾趴趴走
台湾趴趴走台湾趴趴走
台湾趴趴走
 
dpdp
dpdpdpdp
dpdp
 
CV_Shilidong
CV_ShilidongCV_Shilidong
CV_Shilidong
 
Cv 12112015
Cv 12112015Cv 12112015
Cv 12112015
 

Similar a 前端规范(初稿)

Aspetos gerais de desenvolvimento web.
Aspetos gerais de desenvolvimento web.Aspetos gerais de desenvolvimento web.
Aspetos gerais de desenvolvimento web.Corcioli
 
面向工程师的HTML
面向工程师的HTML面向工程师的HTML
面向工程师的HTMLjay li
 
Chico-UI en escuela DaVinci
Chico-UI en escuela DaVinciChico-UI en escuela DaVinci
Chico-UI en escuela DaVinciNatan Santolo
 
第2章 asp
第2章  asp第2章  asp
第2章 aspbillao
 
HTML&CSS 1 - Introduction to HTML
HTML&CSS 1 - Introduction to HTMLHTML&CSS 1 - Introduction to HTML
HTML&CSS 1 - Introduction to HTMLDinis Correia
 
20 种提升网页速度的技巧
20 种提升网页速度的技巧20 种提升网页速度的技巧
20 种提升网页速度的技巧wensheng wei
 
Einfuehrung in YAML (2010)
Einfuehrung in YAML (2010)Einfuehrung in YAML (2010)
Einfuehrung in YAML (2010)Jens Grochtdreis
 
04 practical symfony 4дөх
04 practical symfony 4дөх04 practical symfony 4дөх
04 practical symfony 4дөхtuvshinmgl
 
Komplexe Sites sauber aufbauen
Komplexe Sites sauber aufbauenKomplexe Sites sauber aufbauen
Komplexe Sites sauber aufbauenJens Grochtdreis
 
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖!
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖!WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖!
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖!hokori matu
 
Wap的前世今生
Wap的前世今生Wap的前世今生
Wap的前世今生Tony Deng
 

Similar a 前端规范(初稿) (14)

Aspetos gerais de desenvolvimento web.
Aspetos gerais de desenvolvimento web.Aspetos gerais de desenvolvimento web.
Aspetos gerais de desenvolvimento web.
 
初识 Html5
初识 Html5初识 Html5
初识 Html5
 
面向工程师的HTML
面向工程师的HTML面向工程师的HTML
面向工程师的HTML
 
Chico-UI en escuela DaVinci
Chico-UI en escuela DaVinciChico-UI en escuela DaVinci
Chico-UI en escuela DaVinci
 
Html Frameset
Html FramesetHtml Frameset
Html Frameset
 
第2章 asp
第2章  asp第2章  asp
第2章 asp
 
HTML&CSS 1 - Introduction to HTML
HTML&CSS 1 - Introduction to HTMLHTML&CSS 1 - Introduction to HTML
HTML&CSS 1 - Introduction to HTML
 
20 种提升网页速度的技巧
20 种提升网页速度的技巧20 种提升网页速度的技巧
20 种提升网页速度的技巧
 
Einfuehrung in YAML (2010)
Einfuehrung in YAML (2010)Einfuehrung in YAML (2010)
Einfuehrung in YAML (2010)
 
04 practical symfony 4дөх
04 practical symfony 4дөх04 practical symfony 4дөх
04 practical symfony 4дөх
 
Wordpress avançat
Wordpress avançatWordpress avançat
Wordpress avançat
 
Komplexe Sites sauber aufbauen
Komplexe Sites sauber aufbauenKomplexe Sites sauber aufbauen
Komplexe Sites sauber aufbauen
 
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖!
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖!WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖!
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖!
 
Wap的前世今生
Wap的前世今生Wap的前世今生
Wap的前世今生
 

前端规范(初稿)

  • 1. 逍遥 HTML/CSS 规范(初稿) 张明 [email_address] 2010-12-20
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.