SlideShare uma empresa Scribd logo
1 de 18
Baixar para ler offline
HTML页面编辑规范化问题,[object Object],Noah,[object Object],2010-12-9,[object Object]
DIV+CSS的设计特点,[object Object],HTML为什么要规范化,[object Object],常见规范化问题,[object Object],目录,[object Object]
DIV+CSS的设计特点,[object Object]
DIV+CSS的设计特点,[object Object],HTML为什么要规范化,[object Object],常见规范化问题,[object Object],目录,[object Object]
HTML规范化的好处,[object Object],浏览器兼容性,[object Object],搜索引擎友好,[object Object],获得大多数现代浏览器支持,[object Object],搜索引擎能够正确读取和理解,[object Object]
DIV+CSS的设计特点,[object Object],HTML为什么要规范化,[object Object],常见规范化问题,[object Object],目录,[object Object]
1.标签和属性未小写,[object Object],<DIV class=“div-1”>我是一个层</DIV>,[object Object],<meta name="robots" Content="all">,[object Object],<div class=“div-2”>标签名应该小写</div>,[object Object]
2. 同名ID重复使用,[object Object],<div id=“div-1”>我是一个层</div>,[object Object],…,[object Object],<div id=“div-1”>我是另一个层</div>,[object Object],<div class=“div-1”>我是一个层</div>,[object Object],…,[object Object],<div class=“div -1”>我是另一个层</div>,[object Object]
成对标签:,[object Object],<div>…</div>,[object Object],<p>…</p>,[object Object],<a>…</a>,[object Object],<h1>…</h1>,[object Object],非成对标签,[object Object],<br/>,[object Object],<img />,[object Object],<input />,[object Object],3.成对标签嵌套错位,[object Object]
3.成对标签嵌套错位,[object Object],<div id=“div-1”><p>我是一个层</div> </p>,[object Object],<div id=“div-1”><p>我是一个层</p></div>,[object Object]
4.非成对标签无结束符号,[object Object],<p>我是一个段落<br></p>,[object Object],<imgsrc=“/images/pic.gif” width=“10” height=“10” alt=“我是一个图片”>,[object Object],<p>我是一个段落<br /></p>,[object Object],<imgsrc=“/images/pic.gif” width=“10” height=“10” alt=“我是一个图片” />,[object Object]
行内元素:,[object Object],span、strong、a,[object Object],块级元素,[object Object],div、p、div、p、ul、h1-h6等,[object Object],区别:,[object Object],行内元素是“软”性元素(气球?),[object Object],块级元素是“硬”性元素(盒子?),[object Object],5.行内元素包含块级元素,[object Object]
5.行内元素包含块级元素,[object Object],<span><p>我是一个段落</p></span>,[object Object],<a href=“”><p>我是一个链接</p></a>,[object Object],<p><span>我是一个层</span></p>,[object Object],<p><a href=“”>我是一个链接</a></p>,[object Object]
组合元素:,[object Object],无序列表<ul> <li></li> </ul>,[object Object],有序列表<ol> <li></li> </ol>,[object Object],定义列表<dl> <dt></dt> <dd></dd> </dl>,[object Object],6.组合标签错误使用,[object Object]
6.组合标签错误使用,[object Object],<ul>,[object Object],<p>我是一个段落</p>,[object Object],<li>我是列表</li>,[object Object],<li>我是列表</li>,[object Object],</ul>,[object Object],<ul>,[object Object],<li><p>我是列表中的段落</p></li>,[object Object],<li>我是列表</li>,[object Object],</ul>,[object Object]
7.图片<img>标签未加alt属性,[object Object],<imgsrc=”/images/pic.gif” width=”10” height=”10” />,[object Object],<imgsrc=”/images/pic.gif” width=”10” height=”10” alt=”alternative text” />,[object Object]
标签和属性应使用小写,[object Object],不重复使用ID,[object Object],成对标签层叠嵌套,[object Object],非成对标签应有结束标志,[object Object],行内元素不包含块级元素,[object Object],组合标签组合使用,[object Object],图片<img>标签必须有alt属性,[object Object],小结,[object Object]
Thank You!,[object Object]

Mais conteúdo relacionado

Semelhante a Html规范常见问题举例

[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am iTwinsen Liang
 
快速定位开发常见的前端问题
快速定位开发常见的前端问题快速定位开发常见的前端问题
快速定位开发常见的前端问题taobao.com
 
网站重构&Web标准设计第二版
网站重构&Web标准设计第二版网站重构&Web标准设计第二版
网站重构&Web标准设计第二版志勇 孙
 
Html&css培训 舒克
Html&css培训 舒克Html&css培训 舒克
Html&css培训 舒克jay li
 
前端開發學習簡介
前端開發學習簡介前端開發學習簡介
前端開發學習簡介peterju
 
重新认识Html5
重新认识Html5重新认识Html5
重新认识Html5Adam Lu
 
CSS 入門 - 前端工程開發實務訓練
CSS 入門 - 前端工程開發實務訓練CSS 入門 - 前端工程開發實務訓練
CSS 入門 - 前端工程開發實務訓練Joseph Chiang
 
HTML & JavaScript
HTML & JavaScriptHTML & JavaScript
HTML & JavaScriptSanji Zhang
 
Inside the-browser
Inside the-browserInside the-browser
Inside the-browserjy03845581
 
Inside the-browser
Inside the-browserInside the-browser
Inside the-browserjy03845581
 
Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)ziggear
 
給高中生的Web Programming教材
給高中生的Web Programming教材給高中生的Web Programming教材
給高中生的Web Programming教材Shang-Pin Ma
 
凌網-網頁設計新規格簡介
凌網-網頁設計新規格簡介凌網-網頁設計新規格簡介
凌網-網頁設計新規格簡介Veela Tseng
 
建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)Joseph Chiang
 

Semelhante a Html规范常见问题举例 (20)

[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am i
 
Div+css布局
Div+css布局Div+css布局
Div+css布局
 
快速定位开发常见的前端问题
快速定位开发常见的前端问题快速定位开发常见的前端问题
快速定位开发常见的前端问题
 
Div+css培训
Div+css培训Div+css培训
Div+css培训
 
日新培训
日新培训日新培训
日新培训
 
网站重构&Web标准设计第二版
网站重构&Web标准设计第二版网站重构&Web标准设计第二版
网站重构&Web标准设计第二版
 
Html&css培训 舒克
Html&css培训 舒克Html&css培训 舒克
Html&css培训 舒克
 
前端開發學習簡介
前端開發學習簡介前端開發學習簡介
前端開發學習簡介
 
重新认识Html5
重新认识Html5重新认识Html5
重新认识Html5
 
S_E_O
S_E_OS_E_O
S_E_O
 
Html&css基础
Html&css基础Html&css基础
Html&css基础
 
CSS 入門 - 前端工程開發實務訓練
CSS 入門 - 前端工程開發實務訓練CSS 入門 - 前端工程開發實務訓練
CSS 入門 - 前端工程開發實務訓練
 
HTML & JavaScript
HTML & JavaScriptHTML & JavaScript
HTML & JavaScript
 
Web教程2
Web教程2Web教程2
Web教程2
 
Inside the-browser
Inside the-browserInside the-browser
Inside the-browser
 
Inside the-browser
Inside the-browserInside the-browser
Inside the-browser
 
Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)
 
給高中生的Web Programming教材
給高中生的Web Programming教材給高中生的Web Programming教材
給高中生的Web Programming教材
 
凌網-網頁設計新規格簡介
凌網-網頁設計新規格簡介凌網-網頁設計新規格簡介
凌網-網頁設計新規格簡介
 
建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)
 

Html规范常见问题举例

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.