1.表格
table：表格
tr：table row，行
td: table dock，单元格
-
嵌套关系为table>tr>td， 快捷键
table>tr>td*3，加tab键，创建一个一行三列的表。table>(tr>td*3)*3，加tab键，创建一个三行三列的表格。<!-- 表格 --> <table border="1"> <tr> <td>第一行第一列</td> <td>第一行第二列</td> <td>第一行第三列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> <td>第二行第三列</td> </tr> <tr> <td>第三行第一列</td> <td>第三行第二列</td> <td>第三行第三列</td> </tr> </table>
-
th: table header 表头，将第一行的td换成th即可，当然，用快捷键也是可以的，但是要理解他们的层级：
table>((tr>th*3)+(tr>td*3)*3)，加tab键<table border="1"> <tr> <th>一</th> <th>二</th> <th>三</th> </tr> <tr> <td>第一行第一列</td> <td>第一行第二列</td> <td>第一行第三列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> <td>第二行第三列</td> </tr> <tr> <td>第三行第一列</td> <td>第三行第二列</td> <td>第三行第三列</td> </tr> </table>
1.合并单元格
rowspan：合并行
colspan：合并列
属性值为数字，是几表示合并几个单元格
如下图：
布局方面，按照行从上到下，列从左到右的顺序来布局，已经设置过的自动跳过，比如1，既属于第一行，也占据了第二行，所以，第一行设置了之后，第二行再设置时，跳过，直接设置5即可，其他类似。
1.先设置4行：table>tr*4
<table>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
2.设置第一行，有4列：td*4，设置1，2，3，4。因为第一行第一列与二行第一列合并了两行，所以需要添加rowspan="2"
<table>
<tr>
<td rowspan="2">1</td>
<td colspan="2">2</td>
<td>3</td>
<td>4</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
2.设置第二行，也有4列（第一列在第一行时已经设置过了）：td*4，设置5，6，7，8
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
3.设置第三行，有3列（其中两列是合并后的）：td*3，设置9，10，11
<tr>
<td>9</td>
<td colspan="3">10</td>
<td>11</td>
</tr>
4.设置第四行，有2列（其中两列是合并后的）：td*3，设置12，13
<tr>
<td colspan="2">12</td>
<td colspan="3">13</td>
</tr>
5.最后，为了好区分，我们加上边框，并设置单元格宽度
<head>
<style type="text/css">
th,td{
width: 100px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">1</td>
<td colspan="2">2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td colspan="3">10</td>
<td>11</td>
</tr>
<tr>
<td colspan="2">12</td>
<td colspan="3">13</td>
</tr>
</table>
</body>
2.表格分区
- 标题：caption
- 表头：thread
- 主体：tbody
大概结构如下：
<table>
<caption>标题</caption>
<thead>
tr>th
</thead>
<tbody>
tr>td
</tbody>
</table>
我们把上文的表格改造一下：
<!-- 表格分区 -->
<table border="1">
<caption>标题</caption>
<thead>
<tr>
<th>一</th>
<th>二</th>
<th>三</th>
</tr>
</thead>
<tbody>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
<td>第三行第三列</td>
</tr>
</tbody>
</table>
3.表格综合实践案例
如下图，是我写的一个简单项目评估：
1.有标题：VIB项目评估
2.有表头：模块，功能，时间，备注
3.有单元格的合并
4.文字的居中先不用考虑
-
代码实例：
<table border="1"> <caption>VIB项目评估</caption> <thead> <tr> <th>模块</th> <th colspan="2">功能</th> <th>时间</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td rowspan="7">首页</td> <td>首页</td> <td></td> <td>0.5</td> <td></td> </tr> <tr> <td rowspan="6">资产</td> <td>资产</td> <td>1</td> <td>待确认</td> </tr> <tr> <td>兑换</td> <td>0.5</td> <td></td> </tr> <tr> <td>兑换记录</td> <td>0.25</td> <td></td> </tr> <tr> <td>记录详情</td> <td>0.25</td> <td></td> </tr> <tr> <td>转账</td> <td>0.25</td> <td></td> </tr> <tr> <td>收款</td> <td>0.25</td> <td></td> </tr> <tr> <td rowspan="3">登录注册</td> <td>注册</td> <td></td> <td>0.5</td> <td>待沟通</td> </tr> <tr> <td>登录</td> <td></td> <td>0.5</td> <td></td> </tr> <tr> <td>忘记密码</td> <td></td> <td>0.25</td> <td></td> </tr> </tbody> </table>
2.表单
网页上供用户输入和选择的一些控件
1.form
- <form></form>
- 我们所有表达元素都需要写在form标签内部，不是一个结构性标签，而是一个功能性标签。
- 规定我们提交的数据发送到哪里，发送的方法是哪种
- method：post，get...
- action：提交的位置
2.文本框
- <input type="" name=""> 输入
- type：根据不同的type的值的不同，input标签代表的不同的表单元素
- value：默认文字
<1>普通文本type值为text
<input type="text" value="请输入内容">
<2>密码框为password
<input type="password">
<3> 按钮
按钮有三种：
- 普通type值：button
<input type="button" value="普通按钮"> - 提交：submit
<input type="reset" value="重置"> - 重置：reset
<input type="submit" value="提交">
<4> 单选框
type值为radio：收音机，同时只能选一个
需要设置name属性为相同，name值不一样，不能起到单选的作用
<input type="radio" name="sex">男
<5> 多选框
type值为checkbox：同一组内进行多选，分组不强求，但是尽量分组
<input type="checkbox" name="skill">Swift
<6> 文本域
可以输入多行文本
- rows：多少行
- cols：多少字节
<textarea rows="5" cols="30">多行内容</textarea>
<7> 下拉菜单
是一组标签，必须同时出现，为嵌套关系，select>option*5
- select：选择
- option：选项
<select name="" id=""><option value=""></option></select>
完整事例
<h2>表单</h2>
<!-- 表单 -->
<form method="post">
<p>
普通文本框：
<input type="text" value="请输入内容">
</p>
<p>
密码框：
<input type="password">
</p>
<p>
性别：
<input type="radio" name="sex">男
<input type="radio" name="sex">女
<input type="radio" name="sex">保密
</p>
<p>
技能：
<input type="checkbox" name="skill">Objective-C
<input type="checkbox" name="skill">Swift
<input type="checkbox" name="skill">HTML
<input type="checkbox" name="skill">其他
</p>
<p>
简介：
<textarea rows="5" cols="30">秋天来临了天空像一块覆盖大地的蓝宝石。村外那个小池塘睁着碧澄澄的眼睛，凝望着这美好的天色。一对小白鹅侧着脑袋欣赏自己映在水里的影子。山谷里枫树的叶子，不知是否喝了过量的酒，红的像一团火似的。村前村后的稻子，低着头弯着腰，在秋风中默默地等待着人们去收割，半空中，排着“人”字形的雁群，高兴的唱着歌，告别人们，向天边慢慢飞去……</textarea>
</p>
<p>
简介：
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>其他</option>
</select>
</p>
<p>
<input type="button" value="普通按钮">
<input type="reset" value="重置">
<input type="submit" value="提交">
</p>
</form>
3.其他
1.注释
<!-- 其他 -->
- 快捷键：command + /
1.字符实体
一些特殊符号，比如标签，想要在文本中显示，需要借助转义字符，即字符实体
例如：
小于<: less than。<
大于>: greater than。>
-
空格 : non-breaking space。 
<p>显示一个p标签：<p></p> <p>中间显示多个空格 结尾</p>
1.废弃标签
也不是完全废弃，还可以使用，但是已有可替代的
<font>文字</font>
<b>加粗</b>
<i>倾斜</i>
<u>下划线</u>
<del>删除线</del>
<strong>strong标签,加强，也有加粗效果</strong>
<em>em标签，加强，也有倾斜效果</em>
<br>换行
<hr>水平分割线
