前端基础第二天—

1.表格标签

1.1表格的主要作用：

1.2表格的基本语法：

1.3表头单元格标签

1.4表格属性（只做了解后面只通过CSS来设置表格，语法要记住）

1.5表格结构体标签和

1.6合并单元格

2.列表标签

2.1无序列表

2.2有序列表

2.3自定义列表

2.4列表总结

3.表单标签

3.1为什么需要表单

3.2表单的组成

3.3表单域

3.4表单控件（表单元素）

3.4.1输入表单元素

3.4.2绑定表单元素标签

3.4.3下拉列表标签

3.4.4文本框标签

1.表格标签<table></table>

表格是实际开发中非常常用的标签：

1.1表格的主要作用：

表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。

表格不是用来布局页面的，而是用来展示数据的。

1.2表格的基本语法：

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

1. <table> </table>是用于定义表格的标签。

2. <tr> </tr> 标签用于定义表格中的行，必须嵌套在<table></table>标签中。

3. <td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。

例子：

<!DOCTYPE html>  <!--文档类型声明,作用就是告诉浏览器使用那种HTML版本来显示网页-->
<!--这句话的意思是:当前页面采取的是HTML5版本来显示网页-->
<html lang="en"> <!--lang语言种类 en(英语) zh-CN(中文)--><head><!--文档的头部--><meta charset="UTF-8"> <!--字符集--><!--定义网页编码格式为 utf-8 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--X-UA-Compatible是IE8及以上新加的设置,在meta通过X-UA-Compatible可以设置指定网页的兼容性模式设置--><!--IE=edge告诉IE浏览器使用最新的引擎渲染网页--><meta name="viewport" content="width=device-width, initial-scale=1.0"><!--这告诉移动设备,将视区视为具有设备的物理宽度相同的宽度.(自调节)--><title>Document</title>  <!--文档的标题-->
</head><body><!--文档的主体--><table><tr><td>姓名</td><td>性别</td><td>成绩</td></tr><tr><td>张三</td><td>女</td><td>69</td></tr><tr><td>李四</td><td>男</td><td>70</td></tr><tr><td>王五</td><td>男</td><td>95</td></tr></table></body>
</html>

实现效果：

1.3表头单元格标签<th></th>

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示.

<th></th>标签表示HTML表格的表头部分（th：table head 的缩写）

 <table><tr><th>表头标签</th>...</tr>...
</table>

例子：

<!DOCTYPE html>  <!--文档类型声明,作用就是告诉浏览器使用那种HTML版本来显示网页-->
<!--这句话的意思是:当前页面采取的是HTML5版本来显示网页-->
<html lang="en"> <!--lang语言种类 en(英语) zh-CN(中文)--><head><!--文档的头部--><meta charset="UTF-8"> <!--字符集--><!--定义网页编码格式为 utf-8 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--X-UA-Compatible是IE8及以上新加的设置,在meta通过X-UA-Compatible可以设置指定网页的兼容性模式设置--><!--IE=edge告诉IE浏览器使用最新的引擎渲染网页--><meta name="viewport" content="width=device-width, initial-scale=1.0"><!--这告诉移动设备,将视区视为具有设备的物理宽度相同的宽度.(自调节)--><title>Document</title>  <!--文档的标题-->
</head><body><!--文档的主体--><table><tr><th>姓名</th> <th>性别</th> <th>成绩</th></tr><tr><td>张三</td> <td>女</td>  <td>69</td></tr><tr><td>李四</td> <td>男</td>  <td>70</td></tr><tr><td>王五</td> <td>男</td>  <td>95</td></tr></table></body>
</html>

实现效果：

注：表头单元格也是单元格，常用于第一行，突出重要性。

1.4表格属性（只做了解后面只通过CSS来设置表格，语法要记住）

例子：

<!DOCTYPE html>  <!--文档类型声明,作用就是告诉浏览器使用那种HTML版本来显示网页-->
<!--这句话的意思是:当前页面采取的是HTML5版本来显示网页-->
<html lang="en"> <!--lang语言种类 en(英语) zh-CN(中文)--><head><!--文档的头部--><meta charset="UTF-8"> <!--字符集--><!--定义网页编码格式为 utf-8 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--X-UA-Compatible是IE8及以上新加的设置,在meta通过X-UA-Compatible可以设置指定网页的兼容性模式设置--><!--IE=edge告诉IE浏览器使用最新的引擎渲染网页--><meta name="viewport" content="width=device-width, initial-scale=1.0"><!--这告诉移动设备,将视区视为具有设备的物理宽度相同的宽度.(自调节)--><title>Document</title>  <!--文档的标题-->
</head><body><!--文档的主体--><table align="center" border="1" cellpadding="20" cellspacing="0" width="300" hight="150"><tr><th>姓名</th> <th>性别</th> <th>成绩</th></tr><tr><td>张三</td> <td>女</td>  <td>69</td></tr><tr><td>李四</td> <td>男</td>  <td>70</td></tr><tr><td>王五</td> <td>男</td>  <td>95</td></tr></table></body>
</html>

实现效果：

案例练习：

<!DOCTYPE html>  <!--文档类型声明,作用就是告诉浏览器使用那种HTML版本来显示网页-->
<!--这句话的意思是:当前页面采取的是HTML5版本来显示网页-->
<html lang="en"> <!--lang语言种类 en(英语) zh-CN(中文)--><head><!--文档的头部--><meta charset="UTF-8"> <!--字符集--><!--定义网页编码格式为 utf-8 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--X-UA-Compatible是IE8及以上新加的设置,在meta通过X-UA-Compatible可以设置指定网页的兼容性模式设置--><!--IE=edge告诉IE浏览器使用最新的引擎渲染网页--><meta name="viewport" content="width=device-width, initial-scale=1.0"><!--这告诉移动设备,将视区视为具有设备的物理宽度相同的宽度.(自调节)--><title>Document</title>  <!--文档的标题-->
</head><body><!--文档的主体--><table align="center" border="1" cellpadding="0" cellspacing="0" width="500" hight="150"><tr><th>排名</th> <th>关键词</th>   <th>照片</th>                                            <th>今日搜索</th>   <th>最近7日</th>    <th>相关链接</th>       </tr><tr><td>1</td>    <td>晴天</td>     <td><img src=img1.jpg wight="30" height="30"></td>     <td>169</td>       <td>450</td>      <td><a href="https://baike.baidu.com/item/%E5%91%A8%E6%9D%B0%E4%BC%A6/129156?fr=aladdin" target="_blank">周杰伦</a></td>    </tr><tr><td>2</td>   <td>七里香</td>   <td><img src=img1.jpg wight="30" height="30"></td>      <td>120</td>        <td>360</td>        <td><a href="https://baike.baidu.com/item/%E5%91%A8%E6%9D%B0%E4%BC%A6/129156?fr=aladdin" target="_blank">周杰伦</a></td>       </tr><tr><td>3</td>    <td>生化危机</td>  <td><img src=img2.jpg wight="30" height="30"></td>     <td>65</td>         <td>245</td>         <td><a href="https://baike.baidu.com/item/%E7%94%9F%E5%8C%96%E5%8D%B1%E6%9C%BA/5043882?fr=aladdin" target="_blank">生化危机</a></td>  </tr><tr><td>4</td>    <td>小狗</td>  <td><img src=img.jpg wight="30" height="30"></td>          <td>50</td>        <td>145</td>          <td><a href="https://baike.baidu.com/item/%E7%8B%97/85474?fr=aladdin" target="_blank">小狗</a></td>   </tr></table></body>
</html>

实现效果：

1.5表格结构体标签`<thead>` `</thead>` 和<tbody></tbody>

表格结构体标签可以更好分清表格结构。

<thead></thead>标签用于表示表格的头部区域，<thead></thead>内部必须拥有<tr></tr>标签。

<tbody></tbody>标签用于表示表格的主体区域。

<thead></thead>和<tbody></tbody>标签必须都在<table></table>标签内部。

1.6合并单元格

合并单元格方式：

跨行合并：rowspan= “合并单元格的个数”。最上侧单元格为目标单元格, 写合并代码。并删除多余单元格。

跨列合并：colspan=“合并单元格的个数”。最左侧单元格为目标单元格, 写合并代码。并删除多余单元格。

例子：

<!DOCTYPE html>  <!--文档类型声明,作用就是告诉浏览器使用那种HTML版本来显示网页-->
<!--这句话的意思是:当前页面采取的是HTML5版本来显示网页-->
<html lang="en"> <!--lang语言种类 en(英语) zh-CN(中文)--><head><!--文档的头部--><meta charset="UTF-8"> <!--字符集--><!--定义网页编码格式为 utf-8 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--X-UA-Compatible是IE8及以上新加的设置,在meta通过X-UA-Compatible可以设置指定网页的兼容性模式设置--><!--IE=edge告诉IE浏览器使用最新的引擎渲染网页--><meta name="viewport" content="width=device-width, initial-scale=1.0"><!--这告诉移动设备,将视区视为具有设备的物理宽度相同的宽度.(自调节)--><title>Document</title>  <!--文档的标题-->
</head><body><!--文档的主体--><table align="center" border="1" cellpadding="30" cellspacing="0" width="500" hight="150"><tr><td></td>    <td></td>     <td colspan="3"></td>         <td></td>    </tr><tr><td></td>   <td></td>   <td></td>      <td></td>        <td></td>        <td></td>       </tr><tr><td></td>    <td></td>  <td></td>     <td></td>         <td></td>         <td></td>  </tr></table></body>
</html>

实现效果：

2.列表标签

表格是用来显示数据的，那么列表就是用来布局的。

列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。

根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列。

无序列表有序列表自定义列表

2.1无序列表 <ul> </ul>

<ul> </ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 <li> 标签定义。

语法：
<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li><li>列表项4</li>...
</ul>
注：1.无序列表的各个列表选项之间没有顺序之分，是并列的。

2.<ul></ul>标签中只能放<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。

3.<li></li>之间相当于一个容器，可以容纳所有的元素。

4.无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。

例子：
<!DOCTYPE html>  

<html lang="en"> <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>Document</title>  
</head><body><h3>你最喜欢的食物？</h3><ul><li>烤鱿鱼</li><li>火锅</li><li>北京烤鸭</li></ul></body>
</html>
实现效果：

2.2有序列表<ol> </ol>

有序列表即为有排列顺序的列表，其各个列表会按照一定的顺序排列来定义。

<ol> </ol> 在html标签中表示有序列表，列表排序以数字来显示，并且使用<li></li>标签来定义列表项。

语法：
<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li><li>列表项4</li>...
</ol>
注：1.<ol></ol>中只能嵌套<li></li>。

2.<li>与</li>之间相当于一个容器，可以容纳所有的元素。

3.有序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。

例子：
<!DOCTYPE html>  

<html lang="en"> <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>Document</title>  
</head><body><h3>奖牌排行榜</h3><ol><li>中国10000</li><li>英国1000</li><li>美国200</li></ol></body>
</html>
实现效果：

2.3自定义列表 <dl></dl>

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

<dl></dl>在html标签中表示自定义列表，该标签会与<dt></dt>（定义项目/名字）和<dd></dd>（描述每一个项目/名字）一起使用。

语法：
<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd>
<dl>
注：1.<dl></dl>里面只能包含<dt></dt>和<dd></dd>，不能包含其他标签。

2.<dt></dt>和<dd></dd>个数没有限制，经常是一个<dt></dt>对应多个<dd></dd>。

例子：
<!DOCTYPE html>  

<html lang="en"> <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>Document</title>  
</head><body><dl><dt>帮助中心</dt><dd>密码找回</dd><dd>账户管理</dd><dd>在线客服</dd><dt>帮助中心</dt><dd>密码找回</dd><dd>账户管理</dd><dd>在线客服</dd><dl></body>
</html>
实现效果：

2.4列表总结

3.表单标签

3.1为什么需要表单

使用表单目的是为了收集用户信息。

在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单。

3.2表单的组成

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

3.3表单域<form></form>

表单域是一个包含表单元素的区域。

<form></form>在html标签中表示表单域标签，用于实现用户信息的收集和传递。

<form></form>会把它范围内的表单元素信息提交给服务器。

语法：
<form action=“url地址” method=“提交方式” name=”表单域名称“>
各种表单元素控件
</form>
常用属性：

3.4表单控件（表单元素）

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。

3.4.1输入表单元素<input/>

<input/>标签用于收集用户信息。

在<input/>标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

语法：
<input type="属性值" />
注：1.<input/>为单标签。

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

type属性的属性值及其描述如下：

除type属性外，<input/>标签还有其他很多属性，其常用属性如下：

value现在不推荐使用，请使用placeholder更好。placeholder不占用文本框的字符数，只用于提示文本框。而value提示的文字需要用户自己删除；placeholder不用，该提示会在用户输入值之前显示在输入字段中。

注：1.name和value是每个表单元素都有的属性值，主要给后台人员使用。

2.name表单元素的名字，要求单选按钮和复选框要有相同的name值。

3.checked属性主要针对于单选按钮和复选框，主要作用一打开页面，就可以默认选中某个表单元素。

4.maxlength是用户可以在表单元素输入的最大字符数，一般比较少使用。

value实现效果：

placeholder实现效果：

总结：(1)有些表单元素想刚打开页面就默认显示几个文字怎么做？

答：使用value属性=“值”，不推荐使用value，使用placeholder更好。
用户名:<input type="text" placeholder="请输入密码"/>
（2）页面中的表单元素很多，如何区别不同的表单元素？

答：使用name属性：当前表单的名字，后台可以通过这个name属性找到这个表单。页面中的表单很多，name的主要作用就是用于区别不同的表单。
 用户名:<input type="text"  placeholder="请输入密码" name="username"/>
name属性后面的值，是自定义的

radio或者checkbox如果是一组，我们必须给他们命名相同的名字
 性别:男<input type="radio" name="sex"/> 女<input type="radio" name="sex"/> 爱好:看书<input type="checkbox" name="like" > 睡觉<input type="checkbox"  name="like" >  上网<input type="checkbox"  name="like" >
（3）如果页面一打开就让某个单选按钮或者复选框是选中状态？

答：使用checked属性：表示默认选中状态。用于单选按钮和复选按钮。
 性别:男<input type="radio" name="sex" checked="checked"/> 女<input type="radio" name="sex"/> 
（4）如何让input表单元素展示不同的形态？比如单选按钮和文本框

答：使用type属性：type属性可以让input表单元素设置不同的形态。
 用户名:<input type="text" name="username"  placeholder="请输入密码" maxlength="20"/> 
密码:<input type="password" name="password"/> 
<input/>综合例子：
<!DOCTYPE html>  

<html lang="en"> <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>Document</title>  
</head><body><form action="xxx.php" method="get"> 用户名:<input type="text" name="username"  placeholder="请输入密码" maxlength="20"/>   <br>密码:<input type="password" name="password"/>   <br>性别:男<input type="radio" name="sex" checked="checked"/> 女<input type="radio" name="sex"/>  <br>爱好:看书<input type="checkbox"> 睡觉<input type="checkbox">  上网<input type="checkbox" checked="checked"> <br><input type="submit" value="免费注册"><input type="reset" value="重新填写"><input type="button" value="获取短信验证码"><br>上传头像:<input type="file" ></form></body>
</html>
实现效果：

3.4.2绑定表单元素标签<label></label>

<label> </label>标签为 input 元素定义标注（标签）。

<label> </label>标签用于绑定一个表单元素, 当点击<label> </label>标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验。

语法：
<label for="sex">男</label>
<input type="radio" id="sex">
核心：<label>标签的for属性应当与相关元素的id属性相同

3.4.3下拉列表标签<select></select>

使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select></select>标签控件定义下拉列表。

语法：
<select><option>选项1</option><option>选项2</option><option>选项3</option>
....
</select>
注：1.<select></select>标签中至少包含一对<option></option>。

2.在<option></option>中定义 selected=“selected”时，当前项即为默认选中项。

例子：
<!DOCTYPE html>  

<html lang="en"> <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>Document</title>  
</head><body>籍贯:<select><option>上海</option><option>北京</option><option selected="selected">广州</option><option>山东</option><option>广西</option><option>河南</option><option>湖南</option><option>四川</option><option>云南</option><option>贵州</option><option>重庆</option><option>海南</option><option>西藏</option><option>新疆</option><option>河北</option><option>黑龙江</option></select></body>
</html>
实现效果：

3.4.4文本框标签<textarea></textarea>

使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 <textarea></textarea>标签。

在表单元素中，

标签是用于定义多行文本输入的控件。

使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。

语法：
<textarea row="3" cols="20">
文本内容
</textarea>
注：

1.通过<textarea></textarea> 标签可以轻松地创建多行文本输入框。cols=“每行中的字符数” ，rows=“显示的行数”。

2.我们在实际开发中不会使用，都是用 CSS 来改变大小。