前言
本笔记是b站黑马程序员前端入门教程的听课笔记，主观性较强，初衷是与大家共同交流，一起进步。
目录
表格标签
1.表格的主要作用
作用：用于显示、展示数据（不是用来布局页面的）
2.表格的基本语法
<table>
<tr>
<td>单元格内的文字</td>
...
</tr><!--用于定义表格的行，必须嵌套在<table></table>中-->
...
</table> <!--用于定义表格的标签-->
< tr >< /tr >用于定义表格的行，必须嵌套在< table>< /table>中
< td >< /td >用于定义表格中的单元格，必须嵌套在< tr >< /tr >中
3.表头单元格标签
表头单元格位于表格的第一行或第一列，表头单元格内的文本内容加粗居中显示
< th >标签表示HTML表格的表头部分
<table>
<tr>
<th>姓名</th>
...
</tr>
...
</table>
4.表格相关属性
表格属性在实际开发中并不常用，后面常通过CSS来设置。
allgn：规定表格相对周围元素的对齐方式
border：规定表格单元是否拥有边框，默认无边框
cellpadding：规定单元边沿与其内容之间的空白，默认1像素
cellspacing：规定单元格之间的空白，默认2像素
wigth：规定表格的宽度
5.表格结构标签
为了更好地表示表格的语义，可以将表格分割成表格头部和表格主体两个部分。
分别使用< thead>表示表格头部，< tbody>表示表格的主题区域。
注意：th和thead完全不同，thead的区域更广。thead内部必须含有< th>标签。
6.合并单元格
合并单元格的方式：
- 跨行合并：rowspan=“合并单元格的个数”
- 跨列合并：colspan=“合并单元格的个数”
目标单元格：
- 跨行合并：最上侧单元格为目标单元格，写合并代码
- 跨列合并：最左侧单元格为目标单元格，写合并代码
合并单元格的步骤
- 确定合并方式
- 找到目标单元格并写上合并方式，e.g. < td colspan=“2”>< /td>
- 删除多余的单元格
列表标签
列表标签是用来布局的。
列表分类：无序列表、有序列表、自定义列表
1.无序列表
< ul>标签表示HTML项目中的无序列表，列表项由< li>标签定义。
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
注意事项：
- 无序列表的各个列表项无顺序之分，是并列的。
- < ul>< /ul>中只能嵌套< li>< /li>。
- < li>< /li>相当于一个容器，可以容纳所有的元素。
- 无序列表自带样式属性，实际应用中，使用CSS来设置。
2.有序列表
< ol>标签表示HTML项目中的有序列表，列表项由< li>标签定义。
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
注意事项：
5. < ol>< /u\ol>中只能嵌套< li>< /li>。
6. < li>< /li>相当于一个容器，可以容纳所有的元素。
7. 有序列表自带样式属性，实际应用中，使用CSS来设置。
3.自定义列表
自定义列表常用语对属于或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
< dl>用于定义描述列表，该标签毁于< dt>（定义项目/名字）和< dd>（描述每一个项目/名字）一起使用。
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
注意事项：
- < dl>< /dl>里面只能包含< dt>和< dd>
- < dt>和< dd>没有个数限制，经常是一个< dt>对应多个< dd>
表单标签
1.表单的使用场景以及分类
使用表单的目的是手机用户信息。
表单由表单域、表单控件（表单元素）和提示信息3个部分组成。
2.表单域
定义：包含表单元素的区域。
在HTML标签中，< form>标签用于定义表单域。
< form>会把它范围内的表单信息提交给服务器。
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
action：用于接收并处理表单数据的服务器程序的url地址。
method：用于设置表单数据的提交方式，其取值为get或post。
name：用于指定表单的名称，以区分同一页面中的多个表单域。
3.表单控件（表单元素）
表单元素：允许用户在表单中输入或者选择的内容控件。
< input >表单元素
< input >表单元素用于收集用户信息，是个单标签。
在< input >标签中，包含一个type属性，根据不同的type属性，输入字符安有很多不同的形式。
<input type="属性值" />
<form>
<!--文本框输入内容-->
<!--value内容会在文本框中显示-->
<!--maxlength会限制输入的最大数量-->
用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"><br>
<!--密码输入内容-->
密码：<input type="password" name="password"><br>
<!--单选按钮-->
<!--单选按钮必须有相同的名字，才可以实现多选一-->
<!--单选按钮和复选框可以设置check属性，当页面打开的时候就可以默认选中这个按钮-->
性别：男 <input type="radio" name="sex" value="男">
女 <input type="radio" name="sex" value="女"checked="checked"> <br>
<!--多选框-->
<!--多选框也要有相同的名字-->
爱好：吃饭 <input type="checkbox" name="hobby" value="吃饭">
睡觉 <input type="checkbox" name="hobby" value="睡觉">
打游戏 <input type="checkbox" name="hobby" value="打游戏">
<!--提交框，点击了提交按钮，可以把表单域里的元素值提交-->
<input type="submit" value="免费注册">
<!--重置按钮，点击了重置按钮，可以恢复到默认初始状态-->
<input type="reset" value="重新填写">
<!--普通按钮，后期结合js搭配使用-->
<input type="button" value="获取短信验证码">
<!--文件域，点击后可以上传文件-->
上传头像：<input type="file">
</form>
注意事项：
- name和value是每个表单元素都应该有的属性值，供后台人员分析使用。
- name是每个表单元素的名字，单选按钮和复选框都要有相同的name值。
- checked属性主要针对与单选按钮和复选框，要求一打开页面，就可默认选中某个元素。
< label >标签
< label >标签为input元素定义标注（标签）。
< label >标签可绑定一个表单元素，当点击< label >内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
< selelct >表单元素
使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用< select >标签控件定义下拉列表。
<select>
<!--至少包含一对<option>-->
<option>选项1</option>
<option>选项2</option>
<option selected="selected">选项3</option>
<!--selected选中的选项是默认展示的选项-->
...
</select>
< textarea >表单元素
使用场景：用户输入内容较多的情况下
<textarea rows="3" cols="20">
默认展示的文本内容
</textarea>
注意事项：
1.rows=“行数” cols=“列数”，一般不常用，而是用CSS来修改。
4.综合案例
根据课程内容，我尝试自己写了一个小界面，最终展示如下：
代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册界面</title>
</head>
<body>
<form>
<table>
<thead>
<tr>
<th colspan="2"><strong>青春不常在，抓紧谈恋爱</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="man" id="man">
<label for="man">男</label>
<input type="radio" name="sex" value="woman" id="woman">
<label for="woman">女</label>
</td>
</tr>
<tr>
<td>生日</td>
<td>
<select>
<option selected="selected">--请选择年--</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
<select>
<option selected="selected">--请选择月--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select>
<option selected="selected">--请选择日--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
</td>
</tr>
<tr>
<td>所在地区</td>
<td><input type="text" name="place" value="北京"></td>
</tr>
<tr>
<td>婚姻状况</td>
<td>
<input type="radio" name="marriege" id="weihun" value="weihun">
<label for="weihun">未婚</label>
<input type="radio" name="marriege" id="yihun" value="yihun">
<label for="yihun">已婚</label>
<input type="radio" name="marriege" id="lihun" value="lihun">
<label for="lihun">离婚</label>
</td>
</tr>
<tr>
<td>学历</td>
<td><input type="text" name="xueli" value="幼儿园"></td>
</tr>
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox" name="favor" id="wumeide" value="wumeide">
<label for="wumeide">妩媚的</label>
<input type="checkbox" name="favor" id="cute" value="cute">
<label for="cute">可爱的</label>
<input type="checkbox" name="favor" id="xiaoxianrou" value="xiaoxianrou">
<label for="xiaoxianrou">小鲜肉</label>
<input type="checkbox" name="favor" id="laolarou" value="laolarou">
<label for="laolarou">老腊肉</label>
<input type="checkbox" name="favor" id="all" value="all">
<label for="all">都喜欢</label>
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<textarea rows="3" cols="30">请输入你的自我介绍</textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="免费注册">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" name="agree" id="agree" value="agree">
<label for="agree">我同意注册条款和会员加入标准</label>
</td>
</tr>
<tr>
<td></td>
<td>
<a href="#">我是会员，立即登录</a>
</td>
</tr>
<tr>
<td></td>
<td>
<ul>
<li>我承诺</li>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
扫一扫
813
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
