HTML基础语法（二）

（接上文：HTML基础语法（一）-CSDN博客）

3.2.5）表格标签

一种布局，当数据需要以行列形式呈现时使用，看起来整齐（CSS为表格设置样式；CSS也有一些其他的常用布局）。

<table></table>：表格
<tr>：行
<td>：单元格
<th>：表头单元格（默认加粗、居中）
<rowspan></rowspan>：行合并（竖长条是行合并）
<colspan></colspan>：列合并（横长条是列合并）

应用举例：

<table border="1px" cellspacing="0px" width="400px" height="300px" bgcolor="darkseagreen" >
        <tr bgcolor="bisque">
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>成绩</th>
        </tr>
        <tr>
                <td align="center">1001</td>
                <td>小绿</td>
                <td>19</td>
                <td rowspan="3">90.5</td>
        </tr>
        <tr>
                <td colspan="2" align="center">2006</td>
                <td>30</td>
        </tr>
        <tr>
                <td>3007</td>
                <td>小明</td>
                <td>18</td>
        </tr>
</table>

<!--表格：4行4列  border:设置边框大小 cellspacing：设置单元格和边框之间的空隙
align="center"  设置居中 background 设置背景图片 background="img/ss.jpg"
bgcolor :设置背景颜色  备注：HTML5不再推荐使用align、background和bgcolor属性，而推荐使用CSS来设置这些样式和属性；
不再支持<bgcolor>属性，推荐使用CSS设置背景颜色。-->

3.2.6）表单标签

表单在 Web 网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。一般是将表单设计在一个HTML 文档中，当用户填写完信息后做提交(submit)操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性（本文只展开设计表单及点击提交这一步，其余交互步骤后续展开）。
所有用户输入内容的地方都用表单来写，如登录注册、搜索框。
一个表单一般应该包含用户填写信息的输入框、提交按钮等，这些输入框或按钮叫做控件。
表单是一个容器，能够容纳多个、不同种类的控件。

第一步：定义表单

<form></form>：定义表单的开始和结束位置（表单域）。

<form action＝"url" method=post name="myform" ></form>
<!--action：提交到的地址 method：提交方式，get和post两种，默认为get  name：表单提交时的名称 -->

表单元素

表单元素就是表单中可以放入的控件。各元素的属性用键值对指定。

• <label></label>：文字标注

<label for="username">用户名:</label> 
<input type="text" id="username" name="username">
<!--for属性与某个表单元素相关联。for属性的值必须与相应表单元素的id属性值完全匹配。
当用户点击<label>元素时，与之关联的表单元素将获得焦点。-->

• <select></select>：下拉列表

<select name="city" multiple="multiple">
        <option value="0">---请选择---</option>
        <option value="1">帝都</option>
        <option value="2" selected="selected">魔都</option>
</select>

• <textarea></textarea>：多行文本框
• <input>：文本框

<input>使用广泛，通过type属性的不同值，表现不同的形态。

常用的type属性：文本框text（里面文字可见）、密码框password（录入信息不可见）、单选按钮radio（同一组按钮name相同、value值不同）、多选按钮checkbox、普通按钮button、图片按钮image、文件file、提交按钮submit（具备提交功能）、重置按钮reset、hidden隐藏域、email（有校验功能）、url、color、number、range、date、month、week

常用的type属性中的属性：

multiple="multiple"：多选
placehoder：默认提示语
autofocus="autofocus"：自动获取焦点
required="required：必填项

readonly：只读，不能修改，可以正常提交

checked="checked"：默认选中

min：最小值 max：最大值 step：步长 value：默认值（必须定在步长的范围中，否则不能提交）（用在number、range中）

第二步：提交表单

当用户提交表单时，可以通过表单的action属性指定服务器处理表单数据的URL，通过method属性指定提交数据的方法（如GET或POST）。服务器端需要编写相应的处理程序来接收和处理表单数据。

当用户填写完表单并点击提交按钮时，表单数据将被发送到服务器进行处理。服务器可以通过表单标签的action属性指定的URL来接收和处理表单数据。

<form action="https://www.baidu.com/s" method="get">

method属性的get与post：

get方式：提交数据可见，不安全，提交数据长度有限制，效率高 

post方式 ：提交数据不可见，安全，提交数据长度没有限制，效率低

应用举例1：

• 定义如下表单，地址："submit_form"（没有这个地址对应的服务，跳转后会出错，能正常输入且提交即可）。

<form action="/submit" method="post">  
  <label for="name">姓名：</label>  
  <input type="text" id="name" name="name" required>  
  <br>  
  <label for="email">邮箱：</label>  
  <input type="email" id="email" name="email" required>  
  <br>  
  <label for="age">年龄：</label>  
  <input type="number" id="age" name="age" min="18">  
  <br>  
  <label for="gender">性别：</label>  
  <input type="radio" id="gender" name="gender" value="male">  
  <label for="gender">男</label><br>  
  <input type="radio" id="gender" name="gender" value="female">  
  <label for="gender">女</label><br>  
  <br>  
  <label for="interests">兴趣爱好：</label><br>  
  <input type="checkbox" id="interests" name="interests" value="reading">  
  <label for="interests">阅读</label><br>  
  <input type="checkbox" id="interests" name="interests" value="sports">  
  <label for="interests">运动</label><br>  
  <input type="checkbox" id="interests" name="interests" value="music">  
  <label for="interests">音乐</label><br>  
  <br>  
  <textarea id="message" name="message" rows="4" cols="50"></textarea>  
  <br>  
  <input type="submit" value="提交">  
</form>

<!--通过name属性来标识每个表单元素的名称，通过value属性来设置每个表单元素的值。
表单的提交方式为POST，并将数据发送到服务器的"/submit_form"路径。-->

应用举例2：

• 模拟百度搜素：文本框输入文字，点击百度一下，可以跳转到实际的百度搜索出的页面

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>百度一下，你就知道</title>
                <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon" />
        </head>
        <body>
                <form action="https://www.baidu.com/s" method="get">
                        <!--文本框-->
                        <input type="text" name="wd"/>
                        <!--提交按钮-->
                        <input type="submit" value="百度一下"/>
                </form>
        </body>
</html>

​​​​

3.3）框架集合

框架集合是一种网页布局技术，用于将一个网页分割成多个独立的部分，每个部分都可以单独加载和滚动，如将一个网页拆分为顶部导航栏、侧边栏、主内容区域等多个部分。

框架集合是与<body></body>并列的容器，不要将框架集合放入<body>中。

举例：

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
        </head>
     
        <frameset rows="20%,*,30%">
                <frame />
                <frameset cols="30%,40%,*">
                        <frame />
                        <frame src="index.html"/>
                        <frame />
                </frameset>
                <frameset cols="50%,*">
                        <frame />
                        <frame />
                </frameset>
        </frameset>
</html>

<!--如果只有一个框架用<frame></frame>标签；
如果多个框架用<frameset></frameset>标签，必须搭配使用cols 或 rows进行行或列的切割。-->