HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。
浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！(例：djangomoan模版引擎)
HTML文档
文档树
Doctype
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档
有和无的区别
- BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
- CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。如果你的页面添加了那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。
有，用什么？
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档, dtd文件则包含了标记、attributes 、properties、约束规则。
Meta(metadata information)
提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
- 页面编码（告诉浏览器是什么编码）
< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
- 刷新和跳转
< meta http-equiv=“Refresh” Content=“30″>
< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />
- 关键词
< meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >
- 描述
例如：cnblogs
- X-UA-Compatible
微软的IE6是通过XP、Win2003等操作系统发布出来，作为占统治地位的桌面操作系统，也使得IE占据了通知地位，许多的网站开发的时候，就按照IE6的标准去开发，而IE6自身的标准也是微软公司内部定义的。到了IE7出来的时候，采用了微软公司内部标准以及部分W3C的标准，这个时候许多网站升级到IE7的时候，就比较痛苦，很多代码必须调整后，才能够正常的运行。而到了微软的IE8这个版本，基本上把微软内部自己定义的标准抛弃了，而全面的支持W3C的标准，由于基于对标准彻底的变化了，使得原先在早期IE8版本上能够访问的网站，在IE8中无法正常的访问，会出现一些排版错乱、文字重叠，显示不全等各种兼容性错误。
与任何早期浏览器版本相比，Internet Explorer 8 对行业标准提供了更加紧密的支持。 因此，针对旧版本的浏览器设计的站点可能不会按预期显示。 为了帮助减轻任何问题，Internet Explorer 8 引入了文档兼容性的概念，从而允许您指定站点所支持的 Internet Explorer 版本。 文档兼容性在 Internet Explorer 8 中添加了新的模式；这些模式将告诉浏览器如何解释和呈现网站。 如果您的站点在 Internet Explorer 8 中无法正确显示，则可以更新该站点以支持最新的 Web 标准（首选方式），也可以强制 Internet Explorer 8 按照在旧版本的浏览器中查看站点的方式来显示内容。 通过使用 meta 元素将 X-UA-Compatible 标头添加到网页中，可以实现这一点。
当 Internet Explorer 8 遇到未包含 X-UA-Compatible 标头的网页时，它将使用 指令来确定如何显示该网页。 如果该指令丢失或未指定基于标准的文档类型，则 Internet Explorer 8 将以 IE5 模式（Quirks 模式）显示该网页。更多
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Title
网页头部信息
Link
- css
< link rel="stylesheet" type="text/css" href="css/common.css" >
- icon
< link rel="shortcut icon" href="image/favicon.ico">
Style
在页面中写样式
例如： < style type="text/css" >
Script
- 引进文件
< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >
- 写js代码
< script type="text/javascript" > ... </script >
常用标签
标签一般分为两种：块级标签（有多少占多少） 和 行内标签(占一行)
- a、span、select 等
- div、h1、p 等
注意：特殊符号有时没法显示，比如>、<,如果想表达的话只能>、<,空格的表示方法：
各种符号
div和span是最纯洁的标签，以后常用
p 和 br
p表示段落，默认段落之间是有间隔的！
br 是换行
a标签
< a href="http://www.autohome.com.cn"> </a>
1、target属性，_black表示在新的页面打开
2、锚
<a href="#i1">第一章</a> #是必须有的，#后的名字随便起，对应是名字要相符合。
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<div id="i1" style="height: 900px;"></div>
<div id="i2" style="height: 900px;"></div>
<div id="i3" style="height: 900px;"></div>
H 标签
H1
H2
H3
H4
H5
H6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>李文强</title>
</head>
<body>
<div><label for="user">用户名：</label><input id="user" type="text"/></div> <!--label标签就是为了获取焦点，如果在input中定义了id，并且label中有指明，就会聚焦。-->
<div>密码：<input type="password"/></div>
<div>邮箱：<input type="email"/></div>
<div>性别：
<div>男 <input type="radio" name="ge"/></div> <!--单选的话，就要通过name做互斥-->
<div>女 <input type="radio" name="ge"/></div>
</div>
<div>爱好：男<input type="checkbox"/> 女<input type="checkbox"/> 篮球<input type="checkbox"/></div> <!--多选-->
<div>
上传：<input type="file" />
</div>
<div>
城市：
<select> <!--单选-->
<option>上海</option>
<option>北京</option>
<option>内蒙古</option>
<option>包头</option>
</select>
<select multiple size="10"> <!--多选--,size表示显示的个数-->
<optgroup label="河北"> <!--分组-->
<option>石家庄</option>
<option>沙河</option>
</optgroup>
<option>上海</option>
<option>北京</option>
<option>内蒙古</option>
<option>包头</option>
</select>
</div>
<div>
简介：
<textarea></textarea>
</div>
</body>
</html>
input标签中，text属性如果写成disabled时，表示不可编辑<input / type='text' disabled>
将鼠标标志变为小手：
cursor：pointer
select 标签
上海 北京 广州
石家庄 邯郸 太原 平遥
Checkbox
redio
男
男 保密
password
button
file
提交文件时： enctype='multipart/form-data' method='POST'
textarea
label
姓名：
婚否：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>李文强</title>
</head>
<body style="margin: 0"> <!--无边框-->
<div style="height: 48px;background-color: #5e4b7c;"></div>
<div>
<form action="http://www.baidu.com" method="POST" enctype="multipart/form-data"> <!--包裹，将要提交的东西包裹起来，action代表动作，将内容提交到某个地方,method制定提交方式,enctype是专门用来提交文件时用的-->
<h2>用户登录</h2>
<input type="file" name="upload"/>
<p>用户名：<input type="text" name="username"/></p> <!--必须以特定的格式提交，此处是以字典的形式提交的，所以此处必须加name-->
<p>密码：<input type="password" name="pwd"/></p>
<input type="button" value="提交"/> <!--按钮，显示，无特殊功能-->
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</form>
</div>
<div>性别：
<div>男 <input type="radio" name="ge" value="0"/></div> <!--单选的话，就要通过name做互斥，通过name和value做字典对应-->
<div>女 <input type="radio" name="ge" value="1"/></div>
</div>
<div>爱好：男<input type="checkbox" name="hobby" value="11"/>
女<input type="checkbox" name="hobby" value="22"/>
篮球<input type="checkbox" name="hobby" value="33"/></div> <!--多选,此时提交时hobby就是对应的列表-->
<div>
城市：
<select name="city1"> <!--单选-->
<option value="88">上海</option>
<option value="99">北京</option>
<option value="77">内蒙古</option>
<option value="66">包头</option>
</select>
</div>
<div>
城市：
<select name="city2"> <!--单选-->
<option value="88">上海</option>
<option value="99">北京</option>
<option value="77">内蒙古</option>
<option value="66">包头</option>
</select>
</div>
<textarea name="qqqq"></textarea>
</body>
</html>
标签默认值得书写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>李文强</title>
</head>
<body style="margin: 0"> <!--无边框-->
<div style="height: 48px;background-color: #5e4b7c;"></div>
<div>
<form action="http://www.baidu.com" method="POST" enctype="multipart/form-data"> <!--包裹，将要提交的东西包裹起来，action代表动作，将内容提交到某个地方,method制定提交方式,enctype是专门用来提交文件时用的-->
<h2>用户登录</h2>
<input type="file" name="upload"/>
<p>用户名：<input type="text" name="username" placeholder="请输入用户名"/></p> <!--必须以特定的格式提交，此处是以字典的形式提交的，所以此处必须加name-->
<p>密码：<input type="password" name="pwd"/></p>
<input type="button" value="提交"/> <!--按钮，显示，无特殊功能-->
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</form>
</div>
<div>性别：
<div>男 <input type="radio" name="ge" value="0" checked="checked"/></div> <!--单选的话，就要通过name做互斥，通过name和value做字典对应-->
<div>女 <input type="radio" name="ge" value="1"/></div>
</div>
<div>爱好：男<input type="checkbox" name="hobby" value="11"/>
女<input type="checkbox" name="hobby" value="22"/>
篮球<input type="checkbox" name="hobby" value="33"/></div> <!--多选,此时提交时hobby就是对应的列表-->
<div>
城市：
<select name="city1"> <!--单选-->
<option value="88" selected="selected">上海</option>
<option value="99">北京</option>
<option value="77">内蒙古</option>
<option value="66">包头</option>
</select>
</div>
<div>
城市：
<select name="city2" multiple> <!--单选-->
<option value="88" selected="selected">上海</option>
<option value="99" selected="selected">北京</option>
<option value="77">内蒙古</option>
<option value="66">包头</option>
</select>
</div>
<textarea name="qqqq"></textarea>
</body>
</html>
input中也可以写入value=“”
ul ol dl
ul
ol
dl
邯郸
石家庄
山西省
太原
平遥
table
1 | 2 | 3 |
1 | 2 | 3 |
1 | 2 | 3 |
1 | ||
1 | 2 | 3 |
1 | 2 | 3 |
1 | 2 | 3 |
1 | 2 | 3 |
1 | 3 | 3 |
3 | 3 | |
3 | 3 | |
3 | 3 | 3 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>李文强</title>
</head>
<body>
<img src="image/1.png" alt="我是图片" title="把鼠标给我拿走"> <!--alt表示当图片不存在是显示的内容，title表示把鼠标放在图片上显示的内容-->
<ul> <!--ul表示出现点儿,ol表示序号-->
<li>李文强</li>
<li>何少川</li>
<li>王腾</li>
</ul>
<ol>
<li>李文强</li>
<li>何少川</li>
<li>王腾</li>
</ol>
<dl>
<dt>liwenqiang</dt> <!--dt表示标题，dd表示内容-->
<dd>heshaochuan</dd>
</dl>
<table border="1"> <!--border为1表示加边框，thead表头，表头中可以用th代替td，这样字体可以加粗tr表示行，td表示列-->
<thead>
<tr>
<th>序号</th>
<th>用户名</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td colspan="2">wangteng</td> <!--colspan列合并，rowspan行合并-->
</tr>
<tr>
<td>2</td>
<td rowspan="2">liwenqiang</td>
<td>222222</td>
</tr>
<tr>
<td>3</td>
<td>333333</td>
</tr>
</tbody>
</table>
</body>
</html>
fieldset
登录
用户名：
密码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<fieldset>
<legend>登录</legend>
<p>用户名：</p>
<p>密码</p>
</fieldset>
</body>
</html>
form 表单
文件:enctype='multipart/form-data' method='POST'
1.网页基本知识（标红的需牢记）
标签：html、head、body
属性写在标签括号内部,形式：<a 属性1 属性2> </a>。如：<a href="http://www.baidu.com" target="_blank"></a>
1 <!DOCTYPE html>
2 <!-- 类似html这种格式,就称为标签，html标签 ：<html>fasdfasdf</html> 3 # 标签内部的属性--> 4 <html lang="en"> <!--# html标签开始，lang="en"叫做标签的属性--> 5 <head> <!-- 头部--head标签包括一下主要标签：meta、title、link、style、script--> 6 <meta charset="UTF-8"> <!--设置网页编码，meta是自闭合标签，就是不需要/meta --> 7 <!--<meta http-equiv="Refresh" Content="3">，设置页面每3秒自动刷新--> 8 <!--<meta http-equiv="Refresh" Content="3;Url=http://www.autohome.com.cn">设置页面每3秒自动跳转--> 9 <meta name="keywords" content="汽车,汽车之家,汽车网,汽车报价,俱乐部"/> <!-- 关键字，让搜索引擎搜索用的--> 10 <meta name="description" content="汽车之家是提供信息最快最全的中国汽车网站。"/><!-- 网站描述--> 11 12 <link rel="shortcut icon" href="image/favicon.ico"> <!-- rel="shortcut icon"表示要设置图标，href是图标所在路径--> 13 <title>老男孩</title> 14 15 </head> 16 <body> 17 <!--<a href="http://www.oldboyedu.com">李 （空格符）>（大于符）<（小于符）a>杰</a>--> 18 19 <div></div> 20 21 <a href="http://www.oldboyedu.com">老男孩</a> 22 </body> 23 </html> #结束
[强制] 元素id 必须保证页面唯一。
解释：
同一个页面中，不同的元素包含相同的 id，不符合 id 的属性含义。并且使用 document.getElementById 时可能导致难以追查的问题。
[建议]id- 分隔。同项目必须保持风格一致。
[建议]id、class 命名，在避免冲突并描述清楚的前提下尽可能短。
示例：
<!-- good -->
<div id="nav"></div> <!-- bad --> <div id="navigation"></div> <!-- good --> <p class="comment"></p> <!-- bad --> <p class="com"></p> <!-- good --> <span class="author"></span> <!-- bad --> <span class="red"></span>2.
1 <!DOCTYPE html>
2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Title</title> 6 </head> 7 <body> 8 <p>12asdfasdfasdfasdfa<br />sdfasdfasdfasdf3</p> <!--p:段落 br：换行符--> 9 <p>123</p> 10 11 <h1>Alex</h1> <!--h1 到h6 ：设置标题，h1最大。h系列（字体加大加粗），p系列叫块标签（段落与段落之间有间距），一个块标签占一行--> 12 <h2>Alex</h2> 13 <h3>Alex</h3> 14 <h4>Alex</h4> 15 <h5>Alex</h5> 16 <h6>eric</h6> 17 18 <span>hello</span> <!-- span为行内标签或内联标签，span为白板，没有特性，行内标签不会换行--> 19 <span>hello</span> 20 <span>hello</span> 21 <span>hello</span> 22 23 <div>1</div> <!--div标签是块标签，没有任何属性，是白板，但是和其他块标签一样会换行。标签之间可以嵌套 --> 24 <div>2</div> 25 <div>3</div> 26 27 <!--<a href="http://www.oldboyedu.com">李 （空格符）>（大于符）<（小于符）a>杰</a>--> 28 </body> 29 </html>
3.
| HTML特殊字符编码大全：往网页中输入特殊字符，需在html代码中加入以&开头的字母组合或以&#开头的数字。下面就是以字母或数字表示的特殊符号大全。 | |
| | |
| | |
| HTML常用特殊字符：只要你认识了 HTML 标记，你便会知道特殊字符的用处。 | |
|
| | | | | | | | | |
´ | ´ | © | © | > | > | µ | µ | ® | ® |
& | & | ° | ° | ¡ | ¡ | | | » | » |
¦ | ¦ | ÷ | ÷ | ¿ | ¿ | ¬ | ¬ | § | § |
• | • | ½ | ½ | « | « | ¶ | ¶ | ¨ | ¨ |
¸ | ¸ | ¼ | ¼ | < | < | ± | ± | × | × |
¢ | ¢ | ¾ | ¾ | ¯ | ¯ | “ | " | ™ | ™ |
€ | € | £ | £ | ¥ | ¥ | | | | |
„ | „ | … | … | · | · | › | › | ª | ª |
ˆ | ˆ | “ | “ | — | — | ’ | ’ | º | º |
† | † | ‹ | ‹ | – | – | ‚ | ‚ | ” | ” |
‡ | ‡ | ‘ | ‘ | ‰ | ‰ | | ­ | ˜ | ˜ |
≈ | ≈ | ⁄ | ⁄ | ← | ← | ∂ | ∂ | ♠ | ♠ |
∩ | ∩ | ≥ | ≥ | ≤ | ≤ | ″ | ″ | ∑ | ∑ |
♣ | ♣ | ↔ | ↔ | ◊ | ◊ | ′ | ′ | ↑ | ↑ |
↓ | ↓ | ♥ | ♥ | − | − | ∏ | ∏ | ‍ | |
♦ | ♦ | ∞ | ∞ | ≠ | ≠ | √ | √ | ‌ | |
≡ | ≡ | ∫ | ∫ | ‾ | ‾ | → | → | | |
α | α | η | η | μ | μ | π | π | θ | θ |
β | β | γ | γ | ν | ν | ψ | ψ | υ | υ |
χ | χ | ι | ι | ω | ω | ρ | ρ | ξ | ξ |
δ | δ | κ | κ | ο | ο | σ | σ | ζ | ζ |
ε | ε | λ | λ | φ | φ | τ | τ | | |
Α | Α | Η | Η | Μ | Μ | Π | Π | Θ | Θ |
Β | Β | Γ | Γ | Ν | Ν | Ψ | Ψ | Υ | Υ |
Χ | Χ | Ι | Ι | Ω | Ω | Ρ | Ρ | Ξ | Ξ |
Δ | Δ | Κ | Κ | Ο | Ο | Σ | Σ | Ζ | Ζ |
Ε | Ε | Λ | Λ | Φ | Φ | Τ | Τ | ς | ς |
4.创建一个简单的前后台交互
前端：
1 <!DOCTYPE html>
2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <form action="http://192.168.1.31:8888/index" method="POST"> <!--form表单标签，提交方式有GET和POST两种。GET：将输入的内容放到url上给后台，在url上能看到，POST：将输入的内容放到body里给后台。 action指定后台程序的位置，'index'是后台程序定义的--> 9 <input type="text" name="user" /> <!--输入框--> 10 <input type="text" name="email"/> <!--输入框--> 11 <input type="password" name="pwd"/> <!--密码专用输入框--> 12 <!--{'user': '用户输入的用户','email': '用户输入的'email, 'pwd': '用户输入的密码' }给后台提交的数据是字典形式--> 13 <input type="button" value="登录1"/> 14 <input type="submit" value="登录2"/> <!--submit按钮 提交表单数据--> 15 </form> 16 <br/> 17 <form> 18 <input type="text" /> 19 <input type="password" /> 20 <input type="button" value="登录1"/> 21 <input type="submit" value="登录2"/> 22 </form> 23 </body> 24 </html>
后台程序：
1 import tornado.ioloop
2 import tornado.web 3 4 5 # pip3 install tornado 6 7 class MainHandler(tornado.web.RequestHandler): 8 def get(self): #前台以get方式提交数据，执行get函数 9 print(111) 10 u = self.get_argument('user') #获取user，跟前台form里定义的名字要一样 11 e = self.get_argument('email') #获取email，跟前台form里定义的名字要一样 12 p = self.get_argument('pwd') #获取pwd，跟前台form里定义的名字要一样 13 14 if u == 'wt' and p == '1' and e == 'alex@126.com': 15 self.write("OK") # self.write会将ok直接打印在网页上 16 else: 17 self.write("滚") 18 19 def post(self, *args, **kwargs): #前台以POST方式提交数据，执行post函数 20 u = self.get_argument('user', None) 21 e = self.get_argument('email', None) 22 p = self.get_argument('pwd', None) 23 print(u, e, p) 24 self.write('正在重启，请稍后') 25 26 27 application = tornado.web.Application([ 28 (r"/index", MainHandler), #这里定义了访问路径为index，所以前端访问后台时也要指定为index 29 ]) 30 if __name__ == "__main__": 31 application.listen(8888) 32 tornado.ioloop.IOLoop.instance().start()
5.input属性
相关用法介绍：
body标签
- 图标， 空格 > > < <
- p标签，段落
- br，换行
======== 小总结 =====
所有标签分为：
块级标签： div（白板），H系列（加大加粗），p标签（段落和段落之间有间距）
行内标签： span（白板）
标签之间可以嵌套
标签存在的意义，css操作，js操作
ps:chorme审查元素的使用
- 定位
- 查看样式
- h系列
- div
- span
- input系列 + form标签 input系列都可以给后台送数据，只有一下三种可以跟后台送数据
input type='text' - name属性，value="赵凡" （type为字典的key，value=为在按钮上显示的字） 送给后台的数据形式：name:value input type='password' - name属性，value="赵凡" （value=为在按钮上显示的字） input type='submit' - value='提交'（value=为在按钮上显示的字） 提交按钮，表单 input type='button' - value='登录' （value=为在按钮上显示的字）按钮 <input type='radio' name='gender' value='1'(不同的框可以弄不同的值，作为字典的value)/> - 单选框 value，checked="checked"（checked表示默认选中），name属性（name相同则互斥） input type='checkbox' - 复选框 value, checked="checked"，name属性（批量获取数据） input type='file' - 依赖form表单的一个属性 enctype="multipart/form-data"，有了转让个人属性，文件才会一点一点上传 用法：<input type='file' enctype="multipart/form-data"> input type='rest' - 重置，将输入框中的内容清空，并且不会将数据发送给后台，也就是网页刚打开时的状态 <textarea name='task'>默认值value</textarea> - name属性 textarea可以跟后台送数据 送给后台的数据形式：name:value select标签 下拉框 select可以跟后台送数据 送给后台的数据形式：name:value - name,内部option value, 提交到后台，size，multiple 2.设置两个div的上下边距 <div style="margin-bottom:10px;">设下边距为10像素</div>;<div style="margin-top:10px;">设上边距为10像素</div>;此外，还可以用padding(内边距)来定义，padding-top:10px; padding-bottom:10px; 定义上（下）边距为10px； 此法的好处是，当有浮动存在的时候，可以解决ie6的双边距问题。 3.设置两个div的左右边距 <div style="margin-left:10px;">设左边距为10像素</div>;<div style="margin-right:10px;">设右边距为10像素</div>;
例子：
1 <!DOCTYPE html>
2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <form enctype="multipart/form-data"> <!--设置可以上传文件，不加enctype属性，则不能上传文件--> 9 <div> 10 11 <textarea name="meno" >asdfasdf</textarea> #提交给后台的数据是：meno=asdfasdf 12 13 <select name="city" size="10" multiple="multiple"> #size框的高度，默认为1,；multiple可以多选，按住crtl 14 <option value="1">北京</option> #提交给后台的数据是city=1 15 <option value="2">上海</option> 16 <option value="3" selected="selected">南京</option> #默认选中南京 17 <option value="4">成都</option> 18 </select> 19 20 21 <input type="text" name="user" /> 22 <p>请选择性别： 单选框</p> 23 男：<input type="radio" name="gender" value="1" /> <!--有3个性别，（name相同则互斥），name是返回给后台字典的key，value是返回给后台字典的值--> 24 女：<input type="radio" name="gender" value="2" checked="checked"/> #提交给后台的数据是：name=2 25 Alex：<input type="radio" name="gender" value="3"/> 26 <p>爱好 复选框</p> 27 篮球：<input type="checkbox" name="favor" value="1" /> 28 足球：<input type="checkbox" name="favor" value="2" checked="checked" /> 29 皮球：<input type="checkbox" name="favor" value="3" /> 30 台球：<input type="checkbox" name="favor" value="4" checked="checked"/> 31 网球：<input type="checkbox" name="favor" value="5" /> 32 <p>技能 复选框</p> 33 撩妹：<input type="checkbox" name="skill"
