目录
一、表格标签
表格不是用来布局页面的,而是用来展示数据的。
1.表格的基本语法
<table>
<tr>
<td>单元格内的文字<td>
...
</tr>
...
<table>
- <table> </table>是用于定义表格的标签
- <tr> </tr>标签用于定义表格中的行,必须嵌套在<table> </table>中。
- <td> <td>标签用于定义表格中的单元格,必须嵌套在 <tr> </tr>中。
- 字母td指表格数据(table date)及数据单元格中的内容。
2.表头单元格标签
一般表头 单元格位于表格的第一行或第一列, 表头单元格里面的文本内容加粗居中显示.
<th>标签表示HTML表格的表头部分(table head的缩写)
表头里的内容会加粗
3.表格属性
属性名 | 属性值 | 描述 |
align | left、center、right | 规定表格相对周围元素的对齐方式。 |
border | 1或"" | 规定表格单元是否拥有边框,默认为"", 表示没有边框 |
cellpadding | 像素值 | 规定单元边沿与其内容之间的空白,默认1像素。 |
cellspacing | 像素值 | 规定单元格之间的空白,默认2像素。 |
width | 像素值或百分比 | 规定表格的宽度。 |
4.表格的结构标签
<thead></thead>头部,必须拥有<tr>标签
<tbody></tbody>主体
5.合并单元格
- 跨行合并:rowspan=“合并单元格的个数”
- 跨列合并:colspan=“合并单元格的个数”
<tr=rowspan="2"> ... </tr> 合并结束记得要删除多余的单元格
二、列表标签
列表是用来布局的
可分为:无序列表、有序列表、自定义列表
标签名 | 定义 | 说明 |
<ul></ul> | 无序标签 | 里面只包含<li>,没有顺序,使用较多,<li>里面可以包含任何标签。 |
<ol></ol> | 有序标签 | 里面只包含<li>,有顺序,使用较少,<li>里面可以包含任何标签。 |
<dl></dl> | 自定义标签 | 里面只包含<dt>和<dd>,<dt>和<dd>可以包含任何标签。 |
1.无序列表(重点)
<ul>标签表示HTML页面中项目的无序列表, 一般会以项目符号呈现列表项,而列表项使用<li>标签定义。
例如:
- 无序列表的各个列表项之间没有顺序级别之分,是并列的。
- <ul> </ul>中只能嵌套<li></li> ,直接在<ul> </ul>标签中输入其他标签或者文字的做法是不被允许的。
- <li>与</li>之间相当于一个容器,可以容纳所有元素。
- 无序列表会带有自己的样式属性,但在实际使用时用css设置。
2.有序列表
<ol>标签表示HTML页面中项目的有序列表,<li>定义列表项
3.自定义列表 (重点)
在HTML标签中,<dl>标签用于定义描述列表(或定义列表),该标签与 <dt> (定义项目/名字)和<dd> (描述每一个项目名字) 一起使用。
多用于对术语或名词进行解释和描述,定义列表项前没有任何项目符号。
注意:
- <dl> </dl>里面只能包含<dt>和<dd>
- <dt> 和<dd>个数没有限制,经常是一个<dt> 对应多个<dd>
列如:
三、表单标签
在HTML中,一个完整的表单通常由表单域、表单控件(也称为表单元素)和提示信息三部分组成。
1.表单域
表单域是一个包含元素的区域
在HTML中,<form>标签用于定义表单域,以实现用户信息的收集和传递
<form>会把它范围内的表单元素信息提交给服务器
常见属性
属性 | 属性值 | 作用 |
action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
method | get/post | 用于设置表单元素的提交方式,其取值为get或post |
name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单域 |
2.表单控件
2-1 input输入表单元素(收集用户信息)
在<input>标签中,包含一个type属性,根据不同的type属性值,输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)。
<input type="属性值" />
- <input/>为单标签
- type属性设置不同的属性值来指定不同的控件类型
属性值 | 描述 |
button | 定义可点击按钮(多数情况下,用于通过JavaScript启动脚本)。 |
checkbox | 定义复选框。(多选) |
file | 定义输入字段和“浏览"按钮,供文件上传。 |
hidden | 定义隐藏的输入字段。 |
image | 定义图像形式的提交按钮。 |
password | 定义密码字段。该字段中的字符被掩码。 |
radio | 定义单选按钮。 |
reset | 定义重置按钮。重置按钮会清除表单中的所有数据。 |
submit | 定义提交按钮。提交按钮会把表单数据发送到服务器。 |
text | 定义单行的输入字段,用户可在其中输入文本。默认宽度为20个字符。 |
- name属性(name 是表单元素的名字)
当页面中有很多表单元素的时候,name用来区别不同的表单元素的值
- value属性,规定input元素的名称。
<form>
用户名:<input type="text" name="username" value="请输入用户名" > <br>
<form>
- checked (单选按钮和复选框可以设置checked属性,当页面打开的时候就可以默认选项中的这个按钮。)
- maxlength(正整数)规定选框中最大输入的长度。
<form>
<!-- text 文本框 用户可以输入任何文字 -->
用户名:<input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
密码:<input type="password"> <br>
<!-- name 是表单元素的名字 如这里的毕业和考研必须有相同的名字name 才可以是实现多选一 -->
<!-- checked (单选按钮和复选框可以设置checked属性,当页面打开的时候就可以默认选项中的这个按钮。 -->
毕业:考研 <input type="radio" name="毕业"> 就业<input type="radio" name="毕业" checked="checked"><br>
<!-- 提交1:<input type="submit" > -->
<!-- 点击了提交按钮,可以把表单域form里面的表单元素里面的值提交给后台服务器 -->
提交2:<input type="submit" value="确认注册"><br>
<!-- 重置按钮可以还原表单元素初始默认状态 -->
重置:<input type="reset" value="重新填写"> <br>
<!-- 普通按钮 button,后期搭配js使用 -->
普通按钮:<input type="button" value="发送验证码"> <br>
<!-- 文件域 file 上传文件时使用 -->
上传文件:<input type="file" value="头像">
</form>
2-1-1 label标签
<label>标签为input元素定义标注(标签)。
<label>标签用于绑定一个表单元素 当点击<label>标签内的文本时,浏览器就会自动将焦点(光标转到或者选择对应的表单元素上用来增加用户体验.
<label for="text">用户名:</label> <input type="text" id="text"><br>
<input type="radio" id="nan"><label for="nan">男</label>
<input type="radio" id="nv"><label for="nv">女</label><br>
2-2 <select>表单元素
在页面中如果有多个选项让用户选择,并且想要节约页面空间时,可以使用<select>标签控件标签定义下拉列表。
<select>
<option>喜羊羊</option>
<option>懒羊羊</option>
<option>暖羊羊</option>
<option>灰太狼</option>
</select>
默认选定状态:<option selected="selected">灰太狼</option>
<textarea>文本域
定义多行文本输入的控件(评论、意见......)
<h3>青青草原</h3>
<table width="500" >
<!-- 第一行 -->
<tr>
<td>物种:</td>
<td>
<input type="radio" name="物种" id="yang"><label for="yang">🐏</label>
<input type="radio" name="物种" id="lang"><label for="lang">不吃羊的狼</label><br>
</td>
</tr>
<!-- 第二行 -->
<tr>
<td>生日</td>
<td>
<select>
<option>--请选择月份--</option>
<option>3-4</option>
<option>5-6</option>
<option>7-8</option>
<option>9-10</option>
<option>11-12</option>
</select>
</td>
<td>
<select>
<option>--请选择日期--</option>
<option>11-20</option>
<option>21-30</option>
</select>
</td>
</tr>
<!-- 第三行 -->
<tr>
<td>住址:</td>
<td> <input type="tsxt" value="请输入地址"></td>
</tr>
<!-- 第四行 -->
<tr>
<td>你最喜欢的🐏/狼</td>
<td>
<input type="radio" name="yang" id="y1"><label for="y1">喜羊羊</label>
<input type="radio" name="yang" id="y2"><label for="y2">懒羊羊</label>
<input type="radio" name="yang" id="y3" checked="checked"><label for="y3">灰太狼</label>
</td>
</tr>
<!-- 第五行 -->
<tr>
<td>学历:</td>
<td><input type="text" value="请输入学历"></td>
</tr>
<!-- 第六行 -->
<tr>
<td>喜欢的食物</td>
<td>
<input type="radio" name="shiwu" id="luosifen"><label for="luosifen">螺蛳粉</label>
<input type="radio" name="shiwu" id="kaochang"><label for="kaochang">烤肠</label>
<input type="radio" name="shiwu" id="yufen"><label for="yufen">鱼粉</label>
<input type="radio" name="shiwu" id="xiangguo"><label for="xiangguo">香锅</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">以上说法均属实</td>
</tr>
<!-- 第十行 -->
<tr>
<td></td>
<td><a href="#">羊村</a></td>
</tr>
<!-- 结尾 -->
<tr>
<td></td>
<td>
<h3>我承诺:</h3>
<ul>
<li>12345</li>
<li>67890</li>
<li>11111</li>
</ul>
</td>
</tr>
</table>