form
Create table
Tables are used to display data to make the data more tidy and standardized
- table: table label
- tr: row labels can only be nested within table labels
- td: cell label is used to store data and can only be nested in tr td can nest any label
Table attributes
<table border="1" height="200" width="200" cellspacing="0" cellpadding="5">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>尧子陌</td>
<td>男</td>
<td>24</td>
</tr>
<tr>
<td>惊鸿</td>
<td>男</td>
<td>24</td>
</tr>
</table>
Header cell label
The header cell label is generally located in the first row or the first column of the table, and is represented by the label th, which is the same as td but makes the font bold and centered.
<body>
<table border="1" height="200" width="200" cellspacing="0" cellpadding="5">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>尧子陌</td>
<td>男</td>
<td>24</td>
</tr>
<tr>
<td>惊鸿</td>
<td>男</td>
<td>24</td>
</tr>
</table>
</body>
Table title tag
The table title tag must be located in the table to make sense. It is represented by caption and the table title will move with the table.
<table height="315" width="500" border="1" cellspacing="0" cellpadding="2" align="center">
<caption>个人信息表</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>尧子陌</td>
<td>男</td>
<td>24</td>
</tr>
<tr>
<td>惊鸿</td>
<td>男</td>
<td>24</td>
</tr>
</table>
Form case
<body>
<table border="1" cellspacing="0" cellpadding="0" align="center" height="300" width="500">
<caption><h2>小说排行耪</h2></caption>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="./images/down.jpg" alt=""></td>
<td>345</td>
<td>123</td>
<td>
<a href="#">贴吧</a>
<a href="#">百度</a>
<a href="#">图片</a>
</td>
</tr>
<tr>
<td>2</td>
<td>盗墓笔记</td>
<td><img src="./images/up.jpg" alt=""></td>
<td>34555</td>
<td>123444</td>
<td>
<a href="#">贴吧</a>
<a href="#">百度</a>
<a href="#">图片</a>
</td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td><img src="./images/up.jpg" alt=""></td>
<td>24555</td>
<td>13444</td>
<td>
<a href="#">贴吧</a>
<a href="#">百度</a>
<a href="#">图片</a>
</td>
</tr>
<tr>
<td>4</td>
<td>东游记</td>
<td><img src="./images/up.jpg" alt=""></td>
<td>3455</td>
<td>3444</td>
<td>
<a href="#">贴吧</a>
<a href="#">百度</a>
<a href="#">图片</a>
</td>
</tr>
<tr>
<td>5</td>
<td>甄嬛传</td>
<td><img src="./images/up.jpg" alt=""></td>
<td>3555</td>
<td>1444</td>
<td>
<a href="#">贴吧</a>
<a href="#">百度</a>
<a href="#">图片</a>
</td>
</tr>
<tr>
<td>6</td>
<td>水浒传</td>
<td><img src="./images/up.jpg" alt=""></td>
<td>355</td>
<td>12344</td>
<td>
<a href="#">贴吧</a>
<a href="#">百度</a>
<a href="#">图片</a>
</td>
</tr>
<tr>
<td>7</td>
<td>三国演义</td>
<td><img src="./images/up.jpg" alt=""></td>
<td>3555</td>
<td>13444</td>
<td>
<a href="#">贴吧</a>
<a href="#">百度</a>
<a href="#">图片</a>
</td>
</tr>
</table>
Cell merge
The order of cell merging: top then bottom first left then right
Cell Merge Trilogy
- Make sure to merge across rows and columns
- Find the merged target cell according to the order of top and bottom, left and right
- Delete extra cells
<table border="1" cellspacing="0" cellpadding="0" width="500" height="300" align="center">
<caption>个人信息表</caption>
<tr>
<td colspan="3" rowspan="3"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Table partition structure
<body>
<table border="1" cellspacing="0" cellpadding="0" width="600" height="200">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>尧子陌</td>
<td>女</td>
<td>26</td>
</tr>
<tr>
<td>惊鸿</td>
<td>男</td>
<td>28</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>地址</td>
<td colspan="2">地球村</td>
</tr>
</tfoot>
</table>
</body>
List
The list is used for layout to make the layout more tidy and unified, free to match and higher
A form in which the container is loaded with text or pictures with the same structural style is called a list
Unordered list
无序列表指的是没有顺序的列表 由<ul></ul> <li></li>组成
Precautions
- Only li tags can be stored in ul tags
- The li label is like a container that can store any label
- The list has its own style and is handled by css
<ul>
<li>香蕉</li>
<li>凤梨</li>
<li>苹果</li>
<li>火龙果</li>
<li>丑橘</li>
<li>菠萝</li>
</ul>
Ordered list
有顺序的列表 简称有序列表 由<ol></ol> <li></li>两组标签组成
<h2>国家排行榜</h2>
<ol>
<li>美国</li>
<li>中国</li>
<li>俄罗斯</li>
<li>英国</li>
<li>法国</li>
<li>意大利</li>
</ol>
Custom list
对术语或者名词进行解释的列表 简称自定义列表 由<dl></dl> <dt></dt> <dd></dd>组成
<dl>
<dt>名词</dt>
<dd>名词解释1</dd>
<dd>名词解释2</dd>
<dd>名词解释3</dd>
</dl>
Form
The role of the form: collect user information
Three parts of the form: form control prompt information form field
input type
Precautions
1. <input />标签为单标签
2. type属性设置不同的属性值表示不同的控件类型
3. 除了type属性外 input还有别的属性
4. value指表单打开要显示的文字
value
The text displayed by default in the form value form
name
name: The name of the form in order to distinguish between different forms
checked attribute
The checked attribute represents the default selected state
to sum up
<body>
<p>账号：<input type="text" value="请输入账号" name="username"></p>
<p>密码：<input type="password" value="请输入密码" name="password"></p>
<p>性别：<input type="radio" name="sex">男<input type="radio" name="sex">女<input type="radio" name="sex">人妖</p>
<p>爱好：<input type="checkbox" name="hobby">篮球<input type="checkbox" name="hobby">足球<input type="checkbox" name="hobby">乒乓球</p>
<p>搜索：<input type="button" value="搜索"></p>
<p>文件：<input type="file"></p>
<pre><input type="submit"> <input type="reset"> </pre>
</body>
label
When clicking on the text of the label tag, the cursor will jump to the bound form element
the first method
Use label directly to wrap
<label > 账号：<input type="text" value="请输入账号"> </label>
The second method
Directly use for id to achieve
<label for="password">账号：</label> <input type="text" name="password" id="password">
Textarea
textarea: The text area is used to enter multiple lines of text, which is a double label and can be used as a message board
<h2>留言板</h2>
<textarea name="" id="" cols="30" rows="10">
</textarea>
Drop-down menu
select: drop-down menu
Precautions
- The select tag contains at least a pair of option tags
- The option tag defines the selected tag as the selected default value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select name="" id="">
<option value="" >请选择当前的省</option>
<option value="" selected>北京</option>
<option value="">上海</option>
<option value="">浙江</option>
<option value="">广东</option>
<option value="">河南</option>
</select>
<select name="" id="">
<option value="">请选择当前的市</option>
<option value="">南阳市</option>
<option value="">商丘市</option>
<option value="">驻马店市</option>
<option value="">信阳市</option>
<option value="">郑州市</option>
</select>
</body>
</html>
form field
form: The form field collects and transmits user information. The form will submit all the contents of the form to the server
<form action="Yao.php" method="POST" name="sheet">
<p>账号:<input type="text" name="username"/></p>
<p>密码:<input type="password" name="password"/></p>
<pre><input type="submit"> <input type="reset"></pre>
</form>
Comprehensive case
<body>
<table width="600" align="center">
<caption>
<h4>青春不常在 抓紧谈恋爱</h4>
</caption>
<!-- 第一行 -->
<tr>
<td>性别</td>
<td>
<img src="./images/man.jpg" />
<input type="radio" name=sex />男
<img src="./images/women.jpg" alt="">
<input type="radio" name="sex">女
</td>
</tr>
<!-- 第二行 -->
<tr>
<td>生日</td>
<td>
<select name="" id="">
<option value="">请选择年</option>
<option value="">1996</option>
<option value="">1997</option>
<option value="">1998</option>
</select>
<select name="" id="">
<option value="">请选择月</option>
<option value="">12</option>
<option value="">11</option>
<option value="">10</option>
</select>
<select name="" id="">
<option value="">请选择日</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
</td>
</tr>
<!-- 第三行 -->
<tr>
<td>所在地区</td>
<td>
<lable> <input type="text"></lable>
</td>
</tr>
<!-- 第四行 -->
<tr>
<td>婚姻状况</td>
<td>
<input type="radio" name="matrimony">未婚
<input type="radio" name="matrimony">已婚
<input type="radio" name="matrimony">离异
</td>
</tr>
<!-- 第五行 -->
<tr>
<td>学历</td>
<td><input type="text" value="高中"></td>
</tr>
<!-- 第六行 -->
<tr>
<td>月薪</td>
<td><input type="text" value="5000~10000"></td>
</tr>
<!-- 第七行 -->
<tr>
<td>手机号</td>
<td><input type="text" value=""></td>
</tr>
<!-- 第八行 -->
<tr>
<td>呢称</td>
<td><input type="text" value=""></td>
</tr>
<!-- 第九行 -->
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox" name="genre"> 御姐
<input type="checkbox" name="genre"> 萝莉
<input type="checkbox" name="genre"> 宅女
<input type="checkbox" name="genre"> 傻白甜
</td>
</tr>
<!-- 第十行 -->
<tr>
<td>自我介绍</td>
<td><textarea name="" id="" cols="30" rows="10"></textarea></td>
</tr>
<!-- 第十一行 -->
<tr>
<td></td>
<td><img src="./images/btn(1).png" alt=""></td>
</tr>
<!-- 第十二行 -->
<tr>
<td></td>
<td><input type="checkbox" name="agree">我同意注册条款和会员加入标准</td>
</tr>
<!-- 第十三行 -->
<tr>
<td></td>
<td><a href="#">我是会员 立即登录</a></td>
</tr>
<!-- 第十四行 -->
<tr>
<td></td>
<td>
<h5>我承诺</h5>
<ul>
<li>未满18岁</li>
<li>抱着恋爱的态度</li>
<li>真诚为了另一半</li>
</ul>
</td>
</tr>
</table>
![[External link image transfer failed, the source site may have an anti-leech link mechanism, it is recommended to save the image and upload it directly (img-wAQ2KmSX-1606049808118)(/img/bVbKCTo)]](https://img-blog.csdnimg.cn/20201122211141893.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTQxOTEyNw==,size_16,color_FFFFFF,t_70#pic_center)