HTML2
表格表单
表格标签
<table>：表示表格，表格的所有内容需要写在<table>和</table>之间- 一般情况下，HTML定义的表格是没有边框的，但是我们可以通过设置
<table>标签的border属性来设置表格的边框宽度，单位是像素(px). align属性：表格相对于周围元素的对齐方式，align=“center” (不是内部元素的对齐方式)border属性：表示边框，1 表示有边框(数字越大, 边框越粗)，“” 表示没边框cellpadding属性：表示内容距离边框的距离，默认为 1 像素cellspacing属性：表示单元格之间的距离，默认为 2 像素width / height属性：表示设置尺寸
- 一般情况下，HTML定义的表格是没有边框的，但是我们可以通过设置
<table>标签支持单元格的合并，跨行合并和跨列合并rowspan属性：表示跨行合并，rowspan表示向下合并单元格。(rowspan="n")colspan属性：表示跨列合并，colspan表示向右合并单元格。(colspan="n")- 每次合并n个单元格记得要n-1个
<td>标签。
<tr>：table row的简称，表示表格的每一行，表格中有多少个<tr>标签就表示有多少行数据<td>：是table datacell的简称，表示表格的单元格，这是存放表格数据的标签，单元格的数据可以是文本，图片，列表，段落，表单，水平线，表格等多种形式。<th>：table heading的简称，表示表格的表头。<th>其实是<td>单元格的一种变体，本质上还是一种单元格。<th>一般位于第一行，充当每一列的标题。大多数的浏览器会把表头显示为粗体居中的文本
<caption>：HTML允许使用此标签当做表格的标题，需要注意的是：一个表格只能有一个标题。
示例
<!-- border这里是设置边框为1像素 -->
<table border="1" style="border-collapse: collapse;">
<!-- 整个表格的标题 -->
<caption>此表格为网页信息表</caption>
<tr>
<!-- 第一行 -->
<th>网站名</th>
<th>网站地址</th>
<th>网站作用</th>
</tr>
<tr>
<td>bilibili</td>
<td>https://www.bilibili.com/?from_start_menu</td>
<td>以视频为主流的网站</td>
</tr>
<tr>
<!-- 向下合并一个单元格 -->
<td rowspan="2">淘宝</td>
<td>https://www.taobao.com/</td>
<td>以购物为主流的网站</td>
</tr>
<tr>
<!-- 向右合并一个单元格 -->
<td colspan="2">
https://
</td>
</tr>
</table>
表单标签
- 表单可以接收用户输入的信息，然后将其发送到后端应用程序，如PHP,Java,Python等，后端应用程序将根据定义好的业务逻辑对表单传递进来的数据进行处理。
- 其中包含了输入框，复选框，单选按钮，提交按钮等不同的表单控件，用户通过修改表单中的元素(如输入文本，选择某个选项等)来完成表单，通过表单中提交按钮将表单数据提交给后端的程序
- 表单是用来收集用户数据的，但是用户的数据需要填写在表单控件里
<form>：创建表单- 示例
<form action="URL" method="GET|POST">
表单里的元素
</form>
专有属性
| 属性 | 可选值 | 描述 |
|---|---|---|
accept（不重要） |
MIME_type | HTML5中不再支持，设置服务器接收的文件类型。 |
accept-charset |
character_set | 设置表单数据的字符集(默认为HTML文档字符集)。 |
action |
URL | 设置要将表单提交到的地址(默认为当前页面)。 |
autocomplete |
on，off | 设置是否启用表单的自动完成功能(默认打开)。 |
enctype |
默认：application/x-www-form-urlencoded,上传文件：multipart/form-data,不建议使用：text/plain |
设置在提交表单数据之前如何对数据进行编码(适用于method="post"的情况)。 |
method |
get，post | 设置使用哪种HTTP方法来提交表单数据(默认为get)。 |
name |
text | 设置表单的名称，给 input 起了个名字，尤其是对于单选按钮，具有相同的 name 才能多选一。 |
novalidate |
novalidate | 如果使用该数据，则提交表单时不进行验证。 |
target |
_blank,_self,_parent,_top | 设置在何处打开action属性设定的链接(默认为_self) |
表单控件
| 控件/标签与其属性 | 描述 |
|---|---|
<input>（单标签） |
定义输入框，内含各种输入控件 |
type |
必须存在，取值种类有很多种，如button, checkbox, text, file, image, password, radio 等。 |
value |
input 中的默认值。 |
checked |
默认被选中(用于单选按钮和多选按钮) |
maxlength |
设定输入文本的最大长度。 |
<textarea> |
定义文本域(一个可以输入多行文本的控件)。多行编辑框，输入多行文本。 <textarea>标签内含rows 和 cols属性，限制文本的行数和行字数，但都不会直接使用，因为可利用 css 来进行修改的。 文本域中的内容，就是默认内容。在这里，空格换行都是会对文本有影响。 |
<label> |
为表单中的各个控件定义标题，搭配<input> 使用，点击 label 也能选中对应的单选/复选框，能够提升用户体验。标签内含for属性，指定当前 label 和哪个相同 id 的 input 标签对应(此时点击才是有用的)。 |
<fieldset> |
定义一组相关的表单元素，并使用边框包裹起来，即给表单设置分组 |
<legend> |
定义<fieldsel>元素的标题 |
<select> |
定义下拉列表， |
<optgroup> |
定义选项组 |
<option> |
定义下拉列表中的选项 |
<button> |
定义一个可以点击的按钮 |
<datalist> |
指定一个预先定义的输入控件选项列表 |
<keygen> |
定义表单的密钥对生成器字段 |
<output> |
定义一个计算结果 |
input 标签的输入控件type有多种
text：单行文本框，专门用于输入文本password：单行文本框，专门用于输入密码radio：单选框，需要搭配name输入控件使用(name属性相同的单选框，值与值之间是互斥的，只能单选)checkbox：复选框buttom：按钮submit：提交按钮，搭配form标签使用，点击后就会尝试给服务器发送file：文件选择框reset：清空按钮，即重置hidden：隐藏域
(1)<label>示例
<body>
<label for="male">♂ 男</label> <input id="male" type="radio" name="sex">
<label for="women">♀ 女</label> <input id="women" type="radio" name="sex">
</body>
(2)<select>示例
<body>
<select>
<option value="" select="selected">请选择年份</option>
<option value="">1999</option>
<option value="">2000</option>
<option value="">2001</option>
<option value="">2002</option>
<option value="">2003</option>
</select>
</body>
(3)表单示例
<body>
<form action="./userinfo.php" method="POST">
<!-- 文本输入框控件 -->
<label>用户名： </label><input name="username" type="text"><br>
<!-- 密码框控件 -->
<label>密 码： </label><input name="password" type="password"><br>
<!-- 下拉菜单控件 -->
<label>性 别：</label>
<select name="sex">
<option value="1">男</option>
<option value="2">女</option>
<option value="3">未知</option>
</select>
<br>
<!-- 复选框控件 -->
<label>爱 好：</label>
<input type="checkbox" name="hobby" value="1">听音乐
<input type="checkbox" name="hobby" value="2">看电影
<input type="checkbox" name="hobby" value="3">运动
<br>
<!-- 单选按钮控件 -->
<label>学 历：</label>
<input type="radio" name="education" value="1">小学
<input type="radio" name="education" value="2">中学
<input type="radio" name="education" value="3">本科
<input type="radio" name="education" value="4">硕士
<input type="radio" name="education" value="5">博士
<!--后台接收到value的值，没有设置value后台接收到的都是空，对单选复选是必须的-->
<br>
<!-- 按钮 -->
<input type="submit" value="提 交">  
<input type="reset" value="重 置">
</form>
</body>
</html>
内联框架
在HTML中可以使用<iframe>标签来设置一个内联框架，它的功能是将一个网页嵌入到另一个网页中，<iframe>标签会在网页中定一个矩形的区域，在这里面可以显示另一个网页的内容。
<iframe>标签的语法示例:<iframe src="url" width="m" height="n"><iframe>
<iframe>的属性:
| 属性 | 值 | 描述 |
|---|---|---|
| align | left,right,top,middle,bottom | HTML5不支持，HTML4.01已经废弃，设置如何来对齐 |
浙公网安备 33010602011771号