面向工程师的HTML

HTML for BE
拔赤 bachi@taobao.com
http://jayli.github.com
2010-07-20

• 前后端的分工
• 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
<!DOCTYPE HTML PUBLIC "‐//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

• 另一种写法，兼容HTML5

<!DOCTYPE html>

Readmore:http://www.w3school.com.cn/tags/tag_doctype.asp

HTML和XHTML
标签 HTML 4 strict XHTML1.1
<col> 支持不支持
<map> 支持不支持
<area> 支持不支持
<tbody> 支持不支持
<tfoot> 支持不支持
<thead> 支持不支持

http://www.w3school.com.cn/tags/html_ref_dtd.asp

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标签
• 不推荐
<div class="title">标题</div>

• 推荐

<h1>标题</h1>

• http://www.w3school.com.cn/h.asp

URL编码 - RFC 1731
• http://www.ietf.org/rfc/rfc1738.txt

• 非法的URL
http://www.baidu.oom/?wd=淘宝

• 合法的URL
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>

工程师在套页面过程中容易遇
到的问题

标签嵌套正确
• 正确

<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
• 正确
<table>
<tbody>
<tr><td>标题</td><td>淘宝</td></tr>
</tbody>
</table>

• 错误 –工程师在循环输出tr的时候需要注意
<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>

• 错误
<div id="J_hook"></div>
<span id="J_hook"></span>

文件编码
• 页面的文件编码是gbk，不能是utf8
• 同时要加上标签
<meta charset="gbk" />

• Ajax接口的编码为utf-8

完整的a标签
• href不能为空
• 使用“javascript:void(0);”代替空值
• 正确
<a href="javascript:void(0);">淘宝</a>

• 错误
<a href="">淘宝</a>

常用调试工具
• Firefox
– Firebug 调试页面
– Yslow 监测性能
– Livehttpheader 抓包
– flushDNS 清空DNS缓存
• IE
– Internet Explore Developer Toolbar

查找tag配对 –vim插件

Matchit
http://www.vim.org/scripts/script.php?script_id=39

查找tag配对 - Editplus

http://www.editplus.com/

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

珍珠奶茶帮发起于2009年11月20日
每两周举行一次

http://wiki.ued.taobao.net/doku.php?id=milktea:index

面向工程师的HTML

Recommended

Recommended

More Related Content

Similar to 面向工程师的HTML

Similar to 面向工程师的HTML (10)

More from jay li

More from jay li (20)

面向工程师的HTML