前端学习记录 —— HTML篇（下）

一、表格标签 table，tr，td
- 1. 表格标题 $< c a p t i o n > < / c a p t i o n >$
- 2. 表头单元格标签 $< t h > < / t h >$
- 3. 表格属性 border、cellpadding、align
- 4. 表格结构标签 $< t h e a d > < / t h e a d >, < t b o d y > < / t b o d y >$
- 5. 合并单元格 clospan、rowspan
- 6. 表格总结
二、列表标签
- 1. 无序列表 ul，li
- 2. 有序列表 ol，li
- 3. 自定义列表 dl，dt，dd
三、表单标签
- 1. 表单的使用场景与使用目的
- 2. 表单的组成（表单控件、提示信息、表单域）
- 3. 表单域 form
- - GET 和 POST 的区别
- 4. 表单控件（表单元素标签）
- - （一）input 标签的使用
  - - type属性
    - value 属性
    - name属性
    - checked 属性
    - 实例代码
    - （1）input标签无属性格式
    - （2） input标签，添加type属性，
    - （3）input标签，单选框radio的运用
    - （4）input标签，type="checkbox" 复选框
  - （二）label 标签：
  - （三）下拉列表形式 select，option
  - （四）定义多行文本输入框 textarea
  - - 文本框和文本域区别
四、frameset框架集
- 书写规范与查阅文档

一、表格标签 table，tr，td

常用于表格第一行，突出重要性，表头单元格中的文字会加粗居中显示，但不是用来布局，常见显示、展示表格式数据。因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候表格运用是否熟练就显得很重要。

<table><tr><td>单元格内的文字</td>...</tr>...
</table>

table、tr、td，是创建表格的基本标签，缺一不可

table用于定义一个表格标签。
tr标签用于定义表格中的行，必须嵌套在 table标签中。
td 用于定义表格中的单元格，必须嵌套在标签中。
字母 td 指表格数据（table
data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的。td像一个容器，可以容纳所有的元素。

<body><table><tr><th>姓名</th>  <th>性别</th> <th> 年龄 </th></tr><tr><td>小华</td>  <td>男</td> <td> 56 </td></tr><tr><td>周杰伦</td>  <td>男</td> <td> 38 </td></tr><tr><td>郭富城</td>  <td>男</td> <td> 51 </td></tr><tr><td>小明</td>  <td>男</td> <td> 57 </td></tr></table>
</body>

注意：表格属性在开发中不常用，后面常用 css

1. 表格标题 $< c a p t i o n > < / c a p t i o n >$

表格标题caption通常这个标题会被居中且显示于表格之上。caption 标签必须紧随 table 标签之后。这个标签只存在表格里面才有意义。

<table><caption>我是表格标题</caption>
</table>

2. 表头单元格标签 $< t h > < / t h >$

表头单元格标签th:一般表头单元格位于表格的第一行或第一列，并且文本加粗居中,只需用表头标签 $< t h > < / t h >$ 替代相应的单元格标签 $< t d > < / t d >$ 即可。

3. 表格属性 border、cellpadding、align

表格标签属性实际开发中不常用，后面通过 CSS 来设置

这些标签要写到 table 里面去， cellpadding 单元格与内容之间的空白距离；
cellspacing 规定单元格之间的空白，默认值为2，导致单元格之间会有分隔

技巧：三参为0，平时开发的我们这三个参数 border cellpadding cellspacing 为 0

<table align="center" border="0" cellpadding="0" cellspacing="0" width="500" height="249"><caption>人员表</caption><tr><th>姓名</th>  <th>性别</th> <th> 年龄 </th></tr><tr><td>小华</td>  <td>男</td> <td> 56 </td></tr><tr><td>周杰伦</td>  <td>男</td> <td> 58 </td></tr><tr><td>郭富城</td>  <td>男</td> <td> 51 </td></tr><tr><td>小明</td>  <td>男</td> <td> 57 </td></tr>
</table>

![在这里插入图片描述](https://img-blog.csdnimg.cn/4a739adaa1c341088077d800a75e1a01.png?x-oss-process=image /watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5L2V5Li6eGw=,size_20,color_FFFFFF,t_70,g_se,x_16)

4. 表格结构标签 $< t h e a d > < / t h e a d >, < t b o d y > < / t b o d y >$

对于比较复杂的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注，这样更好的分清表格结构。

注意：

$< t h e a d > < / t h e a d >$ ：用于定义表格的头部。用来放标题之类的东西。 $< t h e a d >$ 内部必须拥有 $< t r >$ 标签！
$< t b o d y > < / t b o d y >$ ：用于定义表格的主体。放数据本体。
$< t f o o t > < / t f o o t >$ ：放表格的脚注之类。
以上标签都是放到table标签中。

示例代码：

<body><table align="center" width="500" height="249" border="1" cellspacing="0"><thead><tr><th>排名</th><th>关键词</th><th>趋势</th><th>进入搜索</th><th>最近七日</th><th>相关链接</th></tr></thead><tbody><tr><td>1</td><td>鬼吹灯</td><td><img src="down.jpg"></td><td>456</td><td>123</td><td> <a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td></tr></tbody>
</table>

排名	关键词	趋势	进入搜索	最近七日	相关链接
1	鬼吹灯		456	123	贴吧图片百科

5. 合并单元格 clospan、rowspan

clospan 和 rowspan 合并属性用来合并单元格的

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”

eg：

<td rowspan="2"></td>

示例代码：

<table width="500" height="249" border="1" cellspacing="0"><tr><td></td><td colspan="2"></td>           </tr><tr><td rowspan="2"></td><td></td><td></td></tr><tr>          <td></td><td></td></tr></table>

效果显示：

6. 表格总结

标签名	定义	说明
$< t a b l e > < / t a b l e >$	表格标签	就是一个四方的盒子
$< t r > < / t r >$	表格行标签	行标签要再table标签内部才有意义
$< t d > < / t d >$	单元格标签	单元格标签是个容器级元素，可以放任何东西
$< t h > < / t h >$	表头单元格标签	它还是一个单元格，但是里面的文字会居中且加粗
$< c a p t i o n > < / c a p t i o n >$	表格标题标签	表格的标题，跟着表格一起走，和表格居中对齐

<!--
定义表格的开始和结束
cellpadding：单元格边框和内容之前的距离
cellspacing：单元格和单元格之间的距离-->
<table border="0" cellspacing="0"><!-- 定义表格的标题 --><caption>我喜欢的NBA球队</caption><!-- 定义表格头 --><thead><!-- 定义表格行，该元素内只能包含th标签和td标签 --><tr><!-- 定义表格页眉的单元格 --><th>球队名称</th><th>老板</th><th>当家球星</th></tr></thead><!-- 定义表格的主体 --><tbody><tr><!--定义单元格，包含两个主要的属性colspan：单元格跨多少列rowspan：单元格跨多少行--><td>骑士</td><td>丹尼尔·吉尔伯特</td><td>勒布朗·詹姆斯</td></tr><tr><td>勇士</td><td>乔·拉科布</td><td>斯蒂芬·库里</td></tr><tr><td>马刺</td><td>皮特·霍尔特</td><td>科怀·伦纳德</td></tr></tbody><!-- 定义表格尾部 --><tfoot><tr><td colspan="3">总计3支球队</td></tr></tfoot>
</table>

我喜欢的NBA球队
球队名称	老板	当家球星
骑士	丹尼尔·吉尔伯特	勒布朗·詹姆斯
勇士	乔·拉科布	斯蒂芬·库里
马刺	皮特·霍尔特	科怀·伦纳德
总计3支球队

二、列表标签

列表用于布局

1. 无序列表 ul，li

ul 标签里面只能放 li 标签，不能放其他标签

<ul><li>榴莲</li><li>臭豆腐</li><li>鲱鱼罐头</li><li><p>123</p></li>
</ul>

榴莲
臭豆腐
鲱鱼罐头
123

2. 有序列表 ol，li

有序列表会带有自己的样式属性，但是常用css来设置

    <h4>粉丝排行榜</h4><ol><li>刘德华 10000</li><li>刘若英 1000</li><li>pink老师 1</li></ol>

<ol><li>刘德华 10000</li><li>刘若英 1000</li><li>pink老师 1</li>
</ol>

3. 自定义列表 dl，dt，dd

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd>...<dt>名词2</dt><dd>名词2解释1</dd><dd>名词2解释2</dd>...
</dl>

使用场景

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

关注我们: 新浪微博; 官方微信; 联系我们

三、表单标签

1. 表单的使用场景与使用目的

在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。

网页中，需要跟用户进行交互，收集用户资料，表单目的是为了收集用户信息。

表单使用场景：

2. 表单的组成（表单控件、提示信息、表单域）

在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。

表单控件：
包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息：
一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
表单域：
它相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

3. 表单域 form

收集的用户信息怎么传递给服务器？
```
 通过form表单域
```
目的：
在HTML中，form 标签被用于定义表单域，以实现用户信息的收集和传递，form 中的所有内容都会被提交给服务器。

<form action="url地址" method="提交方式" name="表单名称">各种表单控件
</form>

常用属性：
每个表单都应该有自己表单域。后面学 ajax 后台交互的时候，必须需要form表单域。

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址。
method	get/post	用于设置表单数据的提交方式，其取值为get或post。
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单。

GET 和 POST 的区别

GET在浏览器回退时是无害的，而POST会再次提交请求。
GET请求会被浏览器主动cache，而POST不会，除非手动设置。
GET请求只能进行url编码，而POST支持多种编码方式。
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
GET请求大小一般是(1024字节)，http协议并没有限制，而与服务器，操作系统有关，POST理论上来说没有大小限制，http协议规范也没有进行大小限制，但实际上post所能传递的数据量根据取决于服务器的设置和内存大小。
对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。

4. 表单控件（表单元素标签）

标签中通常会有很多子元素，用来定义各种交互控件（文本字段、复选框、单选框、提交按钮等等），比如< input>、< button>、< select>、< textarea>等标签。

（一）input 标签的使用

常用属性：

type属性

<input type="属性值" value="你好">

type属性设置不同的属性值用来指定不同的控件类型

    type属性：type="text" 定义单行文本输入框type="password" 定义密码输入框type="radio" 定义单选框type="checkbox" 定义复选框type="file" 定义上传文件     form表单需要加上属性enctype="multipart/form-data"type="submit" 定义提交按钮type="reset" 定义重置按钮type="button" 定义一个普通按钮

用户名: <input type="text" />
密  码：<input type="password" />

注意：使用单选框时，对应的 input 标签的 name 属性必须相同，只有这样才能实现多选一

value 属性

value 默认的文本值。有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置。

用户名:<input type="text"  name="username" value="请输入用户名">

name属性

name 表单的名字，这样，后台可以通过这个name属性找到这个表单。页面中的表单很多，name主要作用就是用于区别不同的表单。
name 属性后面的值，是我们自己定义的。
radio 如果是一组，我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个啦
name 属性，我们现在用的较少，但是，当我们学ajax 和后台的时候，是必须的。

<input type="radio" name="sex"  />男
<input type="radio" name="sex" />女

checked 属性

表示默认选中状态。 较常见于 单选按钮和复选按钮。

性    别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女

实例代码

（1）input标签无属性格式

<!DOCTYPE html>
<html><body style="background-color: bisque;"><form><input    /></form></body>
</html>

（2） input标签，添加type属性，

type=“submit” 定义提交按钮
type=“reset” 定义重置按钮
type=“button” 定义一个普通按钮

<!DOCTYPE html>
<html><body style="background-color: bisque;"><form><input    />    只有input标签<br/><input   type = 'text' name = 'username' value = '00'/><input   type = 'password' name = 'password' value = '123456' />      有value默认值<br/><input   type = 'text' name = 'username' value = '' placeholder='请输入用户名'/> <!-- placeholder:提示信息 --><!-- 输入时默认信息消失通过js --><input   type = 'password' value = 'password' value = '111' placeholder='请输入密码...'/><!-- value:默认值 --><br/><input   type = 'submit' value = '提交按钮' ><!-- type="submit" 定义提交按钮 --><input   type = 'reset' value = '重置按钮' ><!-- type="reset" 定义重置按钮 --><input   type = 'button' value = '普通按钮' ><!-- type="button" 定义一个普通按钮 --></form></body>
</html>

（3）input标签，单选框radio的运用

注意：使用单选框时，对应的input 标签的 name 属性必须相同

<!DOCTYPE html>
<html><body style="background-color: bisque;"><h2> 单选框 <h2/>性别：  <input  type = 'radio' name='' value=''/>男<input  type = 'radio' name='' value=''/>女<!-- 没有添加name属性值 --><br/>性别：  <input  type = 'radio' name='sex' value=''/>男<input  type = 'radio' name='sex' value=''/>女<!-- 添加了name属性值，并且属性值相同时可以选择进行单选 --></body>
</html>

第一行的性别选项未设置 name属性，所以无法进行单选
第一行的性别选项设置了 name属性，且‘男’、‘女’的name属性值相同，故可以进行单选

（4）input标签，type=“checkbox” 复选框

<!DOCTYPE html>
<html><body style="background-color: bisque;"><form><input  type = 'checkbox' name= '' value = '' checked>苹果<input  type = 'checkbox' name= '梨' value = '梨'>梨<input  type = 'checkbox' name= '葡萄' value = '葡萄'>葡萄<input  type = 'checkbox' name= '香蕉' value = '香蕉'>香蕉<!-- checked设置为默认选项 --></form></body>
</html>

单选按钮 radio 必须取相同的那么属性才能实现多选一

点击 submit 提交按钮，可以将数据发送给服务器

button 后期配合 js 使用

（二）label 标签：

label 标签为 input 元素定义标注（标签）。
label标签主要目的是为了提高用户体验。为用户提高最优秀的服务。

作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

核心：label 标签里面的 for 属性的值，必须和相关元素里面 id 属性相同

第一种<label> 用户名： <input type="radio" name="usename" value="请输入用户名">   </label>第二种<label for="sex">男</label><input type="radio" name="sex"  id="sex">

示例代码

<body><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>
</body>

（三）下拉列表形式 select，option

如果有多个选项让用户选择，为了节约空间，我们可以使用select控件定义下拉列表；
在option 中定义 selected =" selected "时，当前项即为默认选中项

name:表单提交项的键.
size：选项显示个数
multiple：多选项
$< o p t i o n > < o p t i o n / >$ 下拉选中的每一项属性：
value:表单提交项的值.
selected: selected下拉选默认被选中
$< o p t g r o u p >$ 为每一项加上分组

<!DOCTYPE html>
<html><body style="background-color: bisque;"><form><h3>下拉框<h3/><select name="address"><option value="1">山东省</option><option value="2" selected="selected">北京市</option><option value="3">河北省</option><option value="4">河南省</option><select/><!-- selected="selected",默认显示,不选择,不提交 --><br/><br/><select name="address" multiple="multiple" size="2"><option value="1">山东省</option><option value="2" >北京市</option><option value="3">河北省</option><option value="4">河南省</option><select/><!-- select name="un" multiple="multiple"size="2" --><!-- multiple="multiple"可以多选; size显示的数量 --></form></body>
</html>

（四）定义多行文本输入框 textarea

应用场景：常用语留言板，反馈等。

name: 表单提交项的键.
cols: 文本域默认有多少列
rows: 文本域默认有多少行

textarea 的 col， row 常使用css 设定。

<!DOCTYPE html>
<html><body><h3>textarea标签使用<h3/><textarea  cols = '30' rows = '20' style = "resize:none;"></textarea></body>
</html>

文本框和文本域区别

表单	名称	区别	默认值显示	用于场景
input type=“text”	文本框	只能显示一行文本	单标签，通过value显	示默认值
textarea	文本域	可以显示多行文本	双标签，默认值写到标签中间	留言板

四、frameset框架集

创建框架页面的步骤：

创建各个子窗口对应的html文件
创建整个框架文件，分别引用子窗口文件

框架的使用

<!--
frameset：框架集标签，不能与body标签同时使用，除非与noframes标签联合使用时
将浏览器分割成多个框架页，来加载多个html页面
frame：框架标签
cols：pixels, %, * 定义框架集中列的数目和尺寸
rows：pixels, %, * 定义框架集中行的数目和尺寸
noresize：设置框架尺寸不可调整
border：设置框架边框宽度
-->
<frameset rows="25%,*" border="1" noresize="noresize"><frame src="top.html">上边/frame><frameset cols="25%,*"><!-- 如果希望点击左边框架的超链接，右边框架显示超链接内容，可以将左边超链接a标签的target设置成右边框架的名称即可 --><frame src="left.html" name="leftFrame">左边</frame><frame src="right.html" name="rightFrame">右边</frame></frameset><!-- noframe标签为那些不支持框架的浏览器显示文本，noframes元素位于frameset内部 --><noframes><body>您的浏览器无法处理框架！</body></noframes>
</frameset>

iframe内嵌框架

    <!--iframe：内嵌框架，在body标签内部frameborder：0, 1 规定是否显示框架周围的边框name：规定iframe的名称scrolling：yes(显示), no(不显示), auto(内容超过框架则显示，否则不显示) 规定是否在iframe中显示滚动条scr：规定在iframe中显示的文档的urlwidth：框架宽度height：框架高度--><body><!-- <iframe src="引用页面地址" name="框架标识名" frameborder="边框" scrolling="是否显示滚动条"> --><!-- 和frameset类似，如果希望点击iframe外的超链接，iframe中显示相应的网页，可以将超链接a标签的target设置成iframe的名称即可 --><iframe src="http://www.baidu.com" name="contentFrame" width="100%" height="400px"></iframe><p><a href="http://www.sina.com.cn/" target="contentFrame">新浪</a></p><p><a href="http://www.baidu.com/" target="contentFrame">百度</a></p></iframe></body>

书写规范与查阅文档

团队约定：

元素属性值使用双引号语法
元素属性值可以写上的都写上

推荐
<input type="text" />
<input type="radio" name="name" checked="checked" />

网址：https://www.w3school.com.cn/

参考博文：https://mp.weixin.qq.com/s?__biz=MzU0Mjg0MzI1Nw==&mid=2247483896&idx=1&sn=65cbc2fed96ac5bb44a439aa732d98e9&chksm=fb15c9eecc6240f8d1dc692fd39811edf2f727c751aaada55160ceceb704cc2c51f7e2c4f24b&scene=178&cur_album_id=1506739374313537537#rd