More Related Content
Viewers also liked (6)
Similar to Web Rebuild (20)
Web Rebuild
- 3. table
- 4. The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells.W3C :http://www.w3.org/TR/html401/struct/tables.html#h-11.1
- 5. 整理数据很方便
- 6. 罢补产濒别布局
- 8. W3C：Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media.?…To minimize these problems, authors should use?style sheets?to control layout rather than tables.
- 9. 是表格而非栅格
- 12. 顿颈惫和厂辫补苍
- 13. The?DIV?and?SPAN?elements, in conjunction with the?id?and?class?attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with?style sheets, the?lang?attribute, etc., to tailor HTML to their own needs and tastes.http://www.w3.org/TR/html401/struct/global.html#h-7.5.4
- 14. 每个丑迟尘濒标签都有其特有含义
- 17. <h3>标题</h3><img /><h4>小标题</h4><p>内容</p> <ul> <li></li></ul><h3>标题</h3><table>表格</table><h3>标题</h3><fieldset> <form> <input /> </form></fieldset>还原语义，从代码上理解网页
- 18. 基本贬罢惭尝结构
- 19. 1.Html版本信息—文档类型(doctype)2.Html元素3.文档头head标签4.文档内容body标签<!DOCTYPE html><html> <head> <title></title> </head> <body> </body></html>
- 22. 好的结构是一切的基础
- 23. <!DOCTYPE html><html> <head> <title>文档标题</title> </head> <body><h3>标题</h3><img /><h4>小标题</h4><p>内容</p> <ul> <li></li></ul><h3>标题</h3><table>表格</table><h3>标题</h3><fieldset> <form> <input /> </form></fieldset> </body></html>
- 24. 分离表现<h3 style=“border:1px dashed #f00”>标题</h3>to<style> h3{ border:1px dashed #f00; }</style><h3>标题</h3>
- 25. 分离脚本<button onclick=“javascript:alert(‘hello world’)”>hello world</button>to<button id=“someid” >hello world</button><script>document.getElementById(‘someid’).onclick = function(){ alert(‘hello world’); }</script>
- 26. <!DOCTYPE html><html> <head> <title>文档标题</title> <style> h3{color:#f00} </style> </head> <body><h3>标题</h3><img /><h4>小标题</h4><p>内容</p> <ul> <li></li></ul><h3>标题</h3><table>表格</table><h3>标题</h3><fieldset> <form> <input id=“someid” /> </form></fieldset><script> document.getElementById(‘someid’).onclick=function(){Some coding…}<script> </body></html>
- 27. 将表现和脚本分离到外部文件
- 28. <!DOCTYPE html><html> <head> <title>文档标题</title> <link type=“text/css” rel=“stylesheet” href=“style.css” /> </head> <body><h3>标题</h3><img /><h4>小标题</h4><p>内容</p> <ul> <li></li></ul><h3>标题</h3><table>表格</table><h3>标题</h3><fieldset> <form> <input id=“someid” /> </form></fieldset><script src=/slideshow/web-rebuild-2949163/2949163/“code.js” type=“text/javascript” ></script> </body></html>
- 35. 路漫漫其修远兮……
- 36. THX!