面向工程师的html
TRANSCRIPT
HTML for BE拔赤
http://jayli.github.com2010-07-20
•
前后端的分工•
HTML基础
•
工程师需要了解的•
扩展阅读
• 前后端的分工•
HTML基础
•
工程师需要了解的•
扩展阅读
YAHOO技术栈
FE & BE
UED角色
•
前后端的分工
• HTML基础•
工程师需要了解的
•
扩展阅读
网页的组成
• 内容–
Html
•
样式–
Css
•
交互–
Javascript
–
flash
HTML语言的版本
•
HTML 1.0 –
1993,IETF发布•
HTML 2.0 –
1995,发布
•
HTML 3.2 –
1996,W3C推荐标准•
HTML 4.0 –
1997,W3C推荐标准
• HTML 4.01 – 1999, W3C推荐标准•
HTML 5.0 –
2008,W3C工作草案
Doctype
•
HTML 4.01 标准doctype
•
另一种写法，兼容HTML5
<!DOCTYPE HTML PUBLIC "‐//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html>
Readmore:http://www.w3school.com.cn/tags/tag_doctype.asp
HTML和XHTML
http://www.w3school.com.cn/tags/html_ref_dtd.asp
标签 HTML 4 strict XHTML1.1<col> 支持 不支持
<map> 支持 不支持<area> 支持 不支持
<tbody> 支持 不支持<tfoot> 支持 不支持<thead> 支持 不支持
HTML常用标签
标签 名称 注意<!DOCTYPE> 文档头 必须在首行
<a> 链接/锚点<b> 定义粗体字
<br
/> 换行 不能使用<br><button> 按钮 默认type=button
<dl> 定义列表 配合dd,dt等使用<p> 段落 块级元素
<input> 输入控件 要定义type
HTML常用标签
标签 名称 注意<div> 层 块级元素<em> 强调 行内元素
<form> 表单<h1> to <h6> 标题
<img
/> 图片 没有</img><span> 文档中的节 内联元素<table> 表格 和tr,td一起使用<ul><li> 列表
http://www.w3school.com.cn/tags/index.asp
使用语义化的html标签
•
不推荐
•
推荐
•
http://www.w3school.com.cn/h.asp
<div class="title">标题</div>
<h1>标题</h1>
URL编码 - RFC 1731
•
http://www.ietf.org/rfc/rfc1738.txt
•
非法的URL
•
合法的URL
http://www.baidu.oom/?wd=淘宝
http://www.baidu.oom/?wd=%CC%D4%B1%A6
中文相关的URL编码
•
RFC 1738文档很粗糙。实际url编码标准和 操作系统、浏览器以及web应用有关；
•
ff对非ascII
码的url进行编码，编码方式和 操作系统默认编码一致
•
IE不对非ascII码的url进行编码，直接根据 操作系统编码的裸码发送url请求
•
IE不遵循RFC 1738，或者说ie对URL的转 码实现有bug。
结构和样式的分离
•
不推荐
•
推荐
<span color="blue" style="line‐height:20px;"> 标题</span>
<style>.title {font‐color:blue;line‐height:20px;}</style><h1><span class="title">标题</span></h1>
•
前后端的分工•
HTML基础
• 工程师需要了解的•
扩展阅读
工程师在套页面过程中容易遇 到的问题
标签嵌套正确
•
正确
•
错误
<p>淘宝<em>彩票</em>.</p>
<p>淘宝<em>彩票</p>.</em>
元素名小写
•
正确
•
错误
<a href="http://www.taobao.com">淘宝</a>
<A
HREF="http://www.taobao.com">淘宝</A>
标签属性必须在引号内
•
正确
•
错误
<input type="text" />
<input type=text
/>
标签配对
•
正确
•
错误
<p>淘宝</p><p>淘宝</p>
<p>淘宝<p>淘宝
标签闭合•
正确
•
错误
<meta charset="gbk" /><input name="q" value="" /><img src="pic.png" /><br /><hr />
<meta charset="gbk"><input name="q" value=""><img src="pic.png"><br><hr>
正确的doctype
•
正确–
Doctype须在文件首行
•
错误
1.<!DOCTYPE html>2.<html>3. ...
1.2.<!DOCTYPE html>3.<html>4. ...
转义字符
•
http://www.w3school.com.cn/tags/htm l_ref_symbols.html
•
正文使用转义字符
空格
<
<
>
>&
&
"
"...
完整的table•
正确
•
错误 –工程师在循环输出tr的时候需要注意
<table><tbody>
<tr><td>标题</td><td>淘宝</td></tr></tbody>
</table>
<table><tbody>
<tr><span>序号</span><td>标题 </td><td>淘宝</td></tr>
</tbody></table>
正确的input type•
正确
•
错误
<form action="url" method="POST"><input type="hidden" name="p1" /><input type="text" name="p2" /><button type="submit">提交</button><button type="reset">重置</button>
</form>
<form action="url" method="POST"><input name="p1"><!‐‐没有type‐‐><input type="text" name="p2"><!‐‐没有闭合‐‐><button>提交</button><!‐‐点击无行为‐‐><button type="reset">重置</button>
</form>
重复的id
•
页面中id不能重复•
正确
•
错误<div id="J_hook"></div><span id="J_hook"></span>
<div id="J_hook"></div>
文件编码
•
页面的文件编码是gbk，不能是utf8•
同时要加上标签
•
Ajax接口的编码为utf-8
<meta charset="gbk" />
完整的a标签
•
href不能为空•
使用“javascript:void(0);”代替空值
•
正确
•
错误
<a href="javascript:void(0);">淘宝</a>
<a href="">淘宝</a>
•
前后端的分工•
HTML基础
•
工程师需要了解的
• 扩展阅读
常用调试工具
•
Firefox–
Firebug
调试页面
–
Yslow
监测性能–
Livehttpheader
抓包
–
flushDNS
清空DNS缓存•
IE–
Internet Explore Developer Toolbar
查找tag配对 –vim插件
Matchit
http://www.vim.org/scripts/script.php?script_id=39
Tips
•
Firefox会补全丢失的标签，一定要在ie下 检查样式是否正确
Tips
•
保持整洁的HTML会大大减少出错概率
保持整洁的缩进
阅读注释
•
帮助你阅读 html
•
帮助你找到结 束标签
http://developer.yahoo.com/yui/3/
YUI 体系
YUI 2.x YUI 3.x
YUI Compressor Combo Handler
YUI PHP Loader YUI Builder
YUI Test Yslow
http://wiki.ued.taobao.net/doku.php?id=milktea:index
珍珠奶茶帮发起于2009年11月20日
每两周举行一次
Q & A