java补完——HTML页面结构、框架标签和表单（标注版本区别）

本文链接：https://blog.youkuaiyun.com/weixin_44470080/article/details/104383358

本文详细介绍了HTML5中新增的页面结构标签如<header>, <nav>, <footer>，以及框架标签<iframe>和<frameset>的使用。还深入讲解了<form>标签的属性和<input>的多种类型，包括表单验证的基本方法，如required和pattern属性。同时提到了<SELECT>, <OPTION>, <TEXTAREA>和<LABEL>标签在表单中的应用。" 108741837,10074828,Python读取CSV文件教程,"['python', 'csv', '大数据']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章说明：黑色字体-已知，蓝色字体-所见即所得，红色字体-还需要再找资料弄明白的
参考资料：很多参考资料，段落下有原文链接到原作者

页面结构

HTML5新标准，header、nav、footer标签不只用在整个页面，可以为局部区域。
header：HTML5新标签，定义页头或页头以下其它内容的介绍，内嵌h1-h6、hgroup（多个标题分组）。role属性，值为banner，代表页面级页眉。

<header role="banner">
...
</header>

nav：全称navigation（导航），用来链接到其它页面或者当前页面的区域。

<h3>文章列表</h3>
<nav>
    <ul>
        <li><a href="#html5">HTML5文章介绍</a></li>
        <li><a href="#css3">CSS3文章介绍</a></li>
        <li><a href="#jquery">jQuery文章介绍</a></li>
    <ul>
</nav>

footer：页面内容或者区域内容最底端的展示。典型例子（作者信息、文档链接、版权信息等等）。内嵌address标签。address通常情况下写在这里。
address标签拓展：https://www.w3school.com.cn/tags/tag_address.asp
section：Web页面中的一块独立区域。
article：HTML5新标签，独立的文章内容。内嵌header、footer等，可以内嵌address。与section可以互相包含。
article 是一个特殊的 section 标签，它比 section 具有更明确的语义, 它代表一个独立的、完整的相关内容块。
aside：aside元素代表跟文档的主内容区相关，但它又独立于主内容区，并且可以被单独拆分出来，而不会对整体内容产生影响。
aside通常表现为侧边栏、说明、提示、引用、附加注释、广告等。如，在经典的页面布局中，页面被分为 header、main、aside、footer 四个部分：

简单总例：

<!DOCTYPE html>
<http lang="en"><!--english-->
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
<header>
	<h2></h2>
</header>
<section>
	<h2><h2>
</section>
<footer>
	<h2><h2>
</footer>
</body>

框架标签

iframe元素：创建包含另外一个文档的内联框架（即行内框架）。
网址输入内联框架代码，可以只显示内联框架里的内容。
常用属性有：
src：定义些框架要显示的页面URL
name：定义些框架的名称
width：定义些框架的宽度
height：定义些框架的高度
marginwidth：定义插入的页面与框边所保留的宽度
marginheight：定义插入的页面与框边所保留的高度
frameborder：定义框架的边框，1表示显示边框，0表示不显示
scrolling：定义是否允许卷动，YES允许，NO不允许

<iframe src="path" name="mainFrame"></iframe>

frameset：框架集，不能与body共用，有两个属性：cols（行）和rows（列）。
frame：框架
将页面分割同时显示多个页面。以下页面效果：横切再竖切。

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<head>
	<title size="10" color="red">welcome to HTML</title>
</head>
	<frameset cols="50%,*">
		<frameset rows="50%,*">
			<frame src="01.html" frameborder="1" marginwidth="100" marginheight="100" />
			<frame src="02.html" frameborder="1" marginwidth="100" marginheight="100" />
		</frameset>
		<frame src="03.html" frameborder="1" marginwidth="100" marginheight="100"/>
	</frameset>
</html>

表单标签

表单基本标签

1、<form> 标签：表单，向服务器传输数据，包含 <input>可以是文本字段，复选框，单选框或提交按钮等，还可以包含 <textarea><select>等。
常用属性：
name：表单名称。
action：提交时向何处发送数据。
method：提交方式，值 POST 、 GET。
POST与GET方式的区别：
get 携带少量数据，post 可以携带大数据（文件上传）。
get 提交数据会在地址栏上显示，安全性差。post 不会在地址栏上显示，安全性高。

<form method="post" action="result.html">
	<input type="submit" name="Button" value="提交"/>
</form>

2、<input > 标签：搜集用户信息，根据不同的 type指定不同的元素类型，可以是输入框、复选框、按钮、单选按钮、掩码后的文本控件等。
<input >常用属性有：
name：表单元素名称。
value：元素初始值。type为radio时必须指定。
size：元素初始宽度。text和password，以字符为单位，其他以像素为单位。
maxlength：text和password用的，输入最大字符个数。
checked：radio和checkbox用的，指定按钮是否被选中。
type 常用属性值：
<input type=“text”>：文字输入框，默认宽度为20个字符。
<input type=“password”>：掩码输入框。
<input type=“radio”>：单选按钮。
注：对于单选按钮，如果要想做到单一选择，多个 radion 的 name 值必须一样。
<input type=“checkbox”>：复选框。
注：一组checkbox的name值一样。
<input type=“button”>：可点击按钮（多数情况下用于通过 JavaScript 启动脚本）。
<input type=“hidden”>：隐藏的输入字段。
<input type=“file”>：输入字段和“浏览”按钮，供文件上传。
<input type=“submit”>：提交按钮，把表单数据发送到服务器。
<input type=“reset”>：重置按钮，清除表单中所有数据。
<input type=“image”>：图片提交按钮，替换 submit 按钮，用指定图片作为提交按钮，更加美观。
常用属性有：
src：引用图像的URL。
alt：图像不显示时，作用图像的替代文本。
<input type=“range”>：滑块。

<p>音量：
	<input type="range" name="voice" min="0" max="100" step="2">
</p>

3、<select> 标签与 <option> 标签
<select>：定义下拉列表。内嵌<option>。
常用属性有：
name：定义下拉列表的名称
size：定义下拉列表中可见选项的数目
multiple：定义可选择多个选项
<option>：定义下拉列表的选项，在<select>标签内。
常用属性有：
value：定义送往服务器的选项值
selected：定义选项为选中状态
4、<textarea> 标签：一个多行文本输入控件（多行文本框，文本域）。
常用属性有：
name：多行文本框名称
cols：多行文本框可见宽度
rows：多行文本框可见行数
wrap：规定多行文本框中文字如何换行
5、<label> 标签：增强鼠标可用性。

<!--点文字可以锁定到输入框-->
<label for="mark">你点我试试</label>
<input type="text" id="mark">

表单应用标签

隐藏域：hidden
只读：readonly
禁用：disabled

<input type="text" hidden>

表单初级验证

常用方式：placeholder（提示信息，提示输入内容）、required（非空判断）、pattern（正则表达式判断）。
pattern详细：http://www.jb51.net/tools/regexsc.html
<input>type属性值拓展：
以下验证之后用js做更高级。
<input type=“email”>：邮箱验证。
<input type=“url”>：url验证。
<input type=“number”>：数字验证。输入框中有个上下箭头加减数字。step是加减一次的数字单位。

<p>商品数量：
	<input type="number" name="num" max="100" min="0" step="1">
</p>

<input type=“search”>：搜索框。输入框中有个×。

参考资料：
狂神视频
原文链接：https://blog.youkuaiyun.com/carson0408/article/details/79592569
原文链接：https://blog.youkuaiyun.com/One_L_Star/article/details/99540110
原文链接：https://blog.youkuaiyun.com/One_L_Star/article/details/99428819
原文链接：https://blog.youkuaiyun.com/qq_39730030/article/details/100010484
原文链接：https://blog.youkuaiyun.com/qq_38922435/article/details/80468311
原文链接：https://blog.youkuaiyun.com/ixygj197875/article/details/79770711