跟着pink老师学前端HTML-D2

1. 表格标签

不用来布局，主要用于展示、显示数据。

1.1 基本格式

<table><tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr><tr><td>riki</td> <td>男</td> <td>27</td></tr><tr><td>daniel</td> <td>男</td> <td>19</td></tr>
</table>
//<th></th>为表头标签，文字会居中加黑

1.2 属性

属性写在

标签内（实际上用CSS实现样式）

属性名	属性值	描述
align	left、center、right	表格相对周围元素对齐方式
border	1或""	默认无边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	表格宽度

<table align="center" border=1 cellpadding="10" cellspacing="0" width="500" height="260"><thead><tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr></thead><tbody><tr><td>riki</td> <td>男</td> <td>27</td></tr><tr><td>daniel</td> <td>男</td> <td>19</td></tr></body>
</table>
//为了使表格有更好的语义，表格<table>标签下又可以分为表头区域和表体区域。

1.3 合并单元格

目标单元格：在目标单元格中写合并代码。

跨行合并（rowspan=“合并单元格的个数”）：最上面的单元格作为目标单元格。
跨列合并（colspan=“合并单元格的个数”）：最左侧的单元格作为目标单元格。

步骤：

确定是跨行合并还是跨列合并。
在目标单元格中写合并代码。

删除多余的单元格。

<table width="500" height="260" border="1" cellspacing="0"><tr><td></td><td colspan="2"></td>    //（1，2）为目标单元格，跨列合并//<td></td>删除（1，3）单元格，合并（1，2）（1，3）单元格完成</tr><tr><td rowspan="2"></td>    //（2，1）为目标单元格，跨行合并<td></td><td></td></tr><tr>//<td></td>删除（3，1）单元格，合并（2，1）（3，1）单元格完成<td></td><td></td></tr>
</table>

2. 列表标签

列表是用来布局的，特点是整齐、简洁、有序。

2.1 无序列表

< ul>标签表示html页面中的项目的无序列表，列表项使用< li>标签定义。

<h4>您喜欢的食物？</h4>
<ul><li>火锅</li><li>麻辣香锅</li><li>麻辣拌</li>
</ul>

p.s. < ul>标签中只能放< li>标签，不允许放其他标签或文字。但是< li>标签中可以放其他元素。列表项前面会有小黑点。

2.2 有序列表

<h4>粉丝排行榜</h4>
<ol><li>近田力丸</li><li>rikimaru</li><li>ricky</li>
</ol>

p.s. ol标签中只能放li标签，但是< li>标签中可以放其他元素。列表项前面会自动加上序号。

2.3 自定义列表

< dl>标签用于定义描述列表，该标签会与< dt>（定义项目/名字）和< dd>（描述每一个项目/名字）一起使用。dd解释说明dt。

<dl><dt>关注我们</dt><dd>新浪微博</dd><dd>官方微信</dd><dd>联系我们</dd>
</dl>

p.s. < dl>标签中只能出现< dt>和< dd>标签。

3. 表单标签

表单标签用于用户注册账号时填写一系列信息时。一个完整的表单通常由表单域、表单控件（表单元素）和提示信息3部分构成。

3.1 表单域

包含表单元素的区域。< form>会把它范围内的表单元素信息提交给服务器。

3.2 提示信息

提示用户输入内容的文字。

3.3 表单控件（元素）

1. < input>表单元素

为单标签。

<form><!-- text文本框 用户可以输入文字 --><!-- maxlength规定最多可以输入的字符数 -->用户名：<input type="text" name="username" value="请输入用户名" maxlength="8"> <br><!-- password 密码框 用户看不见输入的密码 -->密码：<input type="password" name="pwd"> <br><!-- radio单选框 可以实现多选 --><!-- 单选按钮和复选框可以设置checked属性，当页面打开时默认选中这个按钮 --><!-- name是表单元素名字，性别单选按钮必须有相同的名字才可以实现单选 -->性别：男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女" checked="checked"> <br><!-- checkbox复选框 -->爱好：Rikimaru <input type="checkbox" name="hobby" value="riki"> Daniel <input type="checkbox" name="hobby" value="name"><!-- submit提交按钮 将表单域中表单元素里的值提交给后台服务器 --><input type="submit" value="免费注册"><!-- reset重置按钮 还原表单元素的初始默认状态 --><input type="reset" value="重新填写"><!-- button普通按钮 -后期结合JS搭配使用--><input type="button" value="获取短信验证码"> <br><!-- file文件域 上传文件使用 -->上传头像：<input type="file"> <br>
</form>

name和value是每个表单元素都有的属性值，主要给后台人员使用。
name表单元素的名字，要求单选按钮和复选框要有相同的name值。
选按钮和复选框可以设置checked属性，当页面打开时默认选中这个按钮。
maxlength规定最多可以输入的字符数，一般较少使用。

2.< label>标签

label标签为input元素定义标注。label标签用于绑定一个表单元素，当点击label标签内的文本时，浏览器就会自动将光标转到或者选择对应的表单元素上，用来增加用户体验。

<label for="text"> 用户名：</label> <input type="text" id="text">
<input type="radio" id="nan" name="sex"> <label for="nan">男</label>
<input type="radio" id="nv" name="sex"> <label for="nv">女</label>

for中的值对应id中的值。

3.< select>表单元素

<form>籍贯：<select><option select="selected">河南</option><option>山东</option><option>北京</option><option>天津</option><option>河北</option></select>
</form>

select中至少包含一对option。
在option中可以设置select="selected"设置默认选项。

4.< textarea>表单元素

当用户需要输入文字较多时，使用文本域表单元素。

<form>今日反馈：<br><textarea>hello!</textarea>
</form>

4. 注册页面综合案例

<body><table width="500"><thead><h4>青春不常在，抓紧谈恋爱</h4></thead><tbody><tr><!-- 单选框 --><td>性别</td><td><input type="radio" name="sex" id="nan"> <label for="nan"><img src="nan.png" width="20"> 男</label><input type="radio" name="sex" checked="checked" id="nv"><label for="nv"><img src="nv.png" width="20"> 女</label></td></tr><tr><!-- 下拉列表 --><td>生日</td><td><select><option>-请选择年份-</option><option>2000</option><option>2001</option><option>2002</option></select><select><option>-请选择月份-</option><option>1</option><option>2</option><option>3</option></select><select><option>-请选择日期-</option><option>1</option><option>2</option><option>3</option></select></td></tr><tr><!-- 文本框 --><td>所在地区</td><td><input type="text" name="szdq" value="北京"></td></tr><tr><!-- 单选框 --><td>婚姻状况</td><td><input type="radio" name="hyzk" id="wh"><label for="wh">未婚</label><input type="radio" name="hyzk" id="yh"><label for="yh">已婚</label><input type="radio" name="hyzk" id="lh"><label for="lh">离婚</label></td></tr><tr><!-- 文本框 --><td>学历</td><td><input type="text" name="xl" value="幼儿园"></td></tr><tr><!-- 多选框 --><td>喜欢的类型</td><td><input type="checkbox" name="like" id="wmd"> <label for="wmd">妩媚的</label><input type="checkbox" name="like" id="kad"><label for="kad">可爱的</label><input type="checkbox" name="like" id="xxr"><label for="xxr">小鲜肉</label><input type="checkbox" name="like" id="llr"><label for="llr">老腊肉</label><input type="checkbox" name="like" id="all"><label for="all">都喜欢</label></td></tr><tr><!-- 文本域 --><td>自我介绍</td><td><textarea>自我介绍</textarea></td></tr><!-- 提交按钮 --><tr><td></td><td><input type="submit" value="免费注册"></td></tr><!-- 同意条款 --><tr><td></td><td><input type="checkbox" checked="checked" name="sure" id="sure"><label for="sure">我同意注册条款和会员加入标准</label></td></tr><tr><td></td><td><a href="#">我是会员，立即登录</a></td></tr><tr><td></td><td><h3>我承诺</h3><ul><li>年满18岁</li><li>单身</li><li>真诚寻找另一半</li></ul></td></tr></tbody></table>
</body>

5. 查阅文档

W3C：http://www.w3school.com.cn/

MDN：https://developer.mozilla.org/zh-CN/