【H2O2|全栈】关于HTML（6）HTML基础（五 · 完结篇）
HTML基础知识
目录
HTML基础知识
前言
准备工作
标签的具体分类（五）
本文中的标签在什么位置中使用？
表单（二）
下拉选择菜单
文本域
案例
拓展标签
iframe框架
案例
预告和回顾
后话
前言
本系列博客介绍了HTML入门阶段的知识，本期为该系列入门阶段的完结篇。
这一期博客我们继续来讲表单，最后再讲一下iframe框架。
注意，本期表单中的大部分属性仅限于HTML4，如果想要了解更多关于HTML5中常用的表单功能，可以期待未来的HTML进阶篇的博客。
不是专业的科普博主，主打一个分享知识，写的不好，多多包涵（嘻嘻）。
准备工作
软件：【参考版本】Visual Studio Code，有道云笔记
*关于有道云笔记的使用可以看我专栏的Markdown文档有关文章*
浏览器版本：Chrome
系统版本： Win10/11/其他非Windows版本
*我的电脑是Win10的版本，仅供参考*
标签的具体分类（五）
本文中的标签在什么位置中使用？
本文中我们需要掌握的，是写在主体标签（body）中的各种标签。
表单（二）
我们在个人信息清单里，可能还会遇到选择地址到省市区（县）以及填写具体地址的情况，这个时候就需要用到下拉菜单和文本域标签。
下拉选择菜单
下拉选择菜单的标签名是select，直译为选择。分类为双标签，行内标签。
它的常见属性有这些：
| 属性名 | 作用 |
|---|---|
| name | 定义下拉菜单名称 |
| disabled | 禁用 |
| size | 定义下拉列表未下拉时可见选项数目 |
select标签的下一级标签是option标签，直译为选项。
它的常见属性为：
| 属性名 | 作用 |
|---|---|
| value | 指定选项的值 |
| disabled | 禁用 |
| selected | 默认选中 |
可以用optgroup为某一部分选项进行分组。
它的常见属性为：
| 属性名 | 作用 |
|---|---|
| label | 绑定元素名称 |
文本域
文本域标签的标签名为textarea，直译为文本 区域。分类为双标签，行内标签。
它的常见属性为：
| 属性名 | 作用 |
|---|---|
| name | 定义文本域的名称 |
| cols | 规定文本域内可见的宽度（列数），默认值为20 |
| rows | 规定文本域内可见的高度（行数），默认值为2 |
| placeholder | 提示信息 |
| disabled | 禁用 |
案例
还是接着做上期的个人信息清单，先添加一个选择常驻地址的功能。
注意，分层的显示标签暂时做不到，我们使用optgroup简易实现从省分类到市的效果。
添加以下代码：
<select name="address" size="1"><option selected disabled>请选择城市</option><optgroup label="江苏"><option value="city">南京</option><option value="city">苏州</option><option value="city">无锡</option><option value="city">常州</option></optgroup><optgroup label="直辖市"><option value="city">北京</option><option value="city">上海</option><option value="city">重庆</option><option value="city">天津</option></optgroup></select>那么就可以实现以下效果：
点击菜单下拉效果如下：
可以看到，我设置的selected的选项是默认选中显示在菜单中的，但是我加入了disabled让“请选择城市”的选项不可选。
每个组名下面的选项都是可选的。
然后做一个填写个人简介的地方，加入以下代码：
个人简介：<br /><textarea name="introduce" cols="30" rows="10" placeholder="请填写"></textarea>在网页中显示的效果如下：
注意，如果使用VS code快速生成的文本域，其实大小是30*10，但是我们平常要记住20*2的默认尺寸。
placeholder放在文本域中作为提示文本，在输入内容后自动消失。
到此，个人信息清单的完整代码如下：
<form action="https://www.baidu.com" method="post">用户昵称：<input type="text" placeholder="输入昵称"><br /><br />设置头像：<input type="file" name="avatar"><br /><br />用户ID：<input type="text" name="uid" value="123456" disabled><br /><br />设置密码：<input type="password" name="pwd" placeholder="输入密码"><br /><br />选择性别：<input type="radio" name="sex">♂ <input type="radio" name="sex">♀ <input type="radio" name="sex">其他 <input type="radio" name="sex" checked>保密<br /><br />选择感兴趣的标签：<input type="checkbox" name="hoppy">PS<input type="checkbox" name="hoppy">Markdown<input type="checkbox" name="hoppy">SVN<input type="checkbox" name="hoppy">HTML<br /><br /><select name="address" size="1"><option selected disabled>请选择城市</option><optgroup label="江苏"><option value="nj">南京</option><option value="sz">苏州</option><option value="wx">无锡</option><option value="cz">常州</option></optgroup><optgroup label="直辖市"><option value="bj">北京</option><option value="sh">上海</option><option value="cq">重庆</option><option value="tj">天津</option></optgroup></select><br /><br />个人简介：<br /><textarea name="introduce" cols="30" rows="10" placeholder="请填写"></textarea><br /><br /><input type="reset" name="reset" value="重置"> <input type="submit" name="submit" value="提交"> <input type="button" name="btn" value="关注"><br /><br /><input type="image" src="https://profile-avatar.csdnimg.cn/4b2a87ef8c5d4789a6b8fb88457350a2_zc13786305863.jpg!1" alt="H2O2的头" width="100px" height="100px"></form>网页显示效果如下：
拓展标签
label不单可以作为optgroup的一个属性，还能作为一个单独的标签使用。
它可以定义某一个input元素的标签，一般为输入标题。
它有下面这个属性：
| 属性名 | 作用 |
|---|---|
| for | 绑定表单元素 |
比如，可以用label标签包围一个单选内容，比如选择性别这一栏：
<form action="" method="post"><label><input type="radio" name="sex" value="man">男</label><label><input type="radio" name="sex" value="woman">女</label></form>效果是可以把文字内容和input标签结合成一体， 现在，点击label中的文字信息也可以做到和点击单选框一样的选中效果：
还有一种写法是利用for属性和input的id属性进行绑定，可以将文字内容绑定到input标签上：
<form action="" method="post"><input type="radio" name="sex" id="male" value="man"><label for="male">男</label><input type="radio" name="sex" id="female" value="woman"><label for="female">女</label></form>效果和上面是一样的。
还有一个标签叫fieldset，用于包裹一个区域，用于给当前区域分类。
它的子标签legend可以设置该分类框的描述，会显示在分类框的左上角。
比如对性别选择区域应用fieldset：
<form action="" method="post"></form><fieldset name="sex_option"><legend>性别选择</legend><input type="radio" name="sex" id="male" value="man"><label for="male">男</label><input type="radio" name="sex" id="female" value="woman"><label for="female">女</label></fieldset></form>效果显示如下：
这个标签现在已经不常用了，仅供了解。
iframe框架
iframe框架用于在网页中嵌入其他网页，即窗口内联子窗口。
使用的标签是iframe，分类为双标签，块标签。
iframe常见的属性如下：
| 属性名 | 作用 |
|---|---|
| src | 规定在 iframe 中显示文档的URL |
| frameborder | 规定是否显示边框 |
| width | 定义 宽度 |
| height | 定义 高度 |
| name | 规定 iframe 名称 |
还记得src的特点吗，它随网页的加载而加载，而href是在访问时才加载的，注意区分。
frameborder的数值是0和非0值，分别代表不显示和显示，规范的数值是0和1。
案例
在了解了iframe框架之后，就可以实现类似软件的页中页的效果，或者说页面内导航栏的效果。
首先，回忆一下a标签中的一个属性target，它可以定义链接打开的位置。这里可以设置为iframe的名称。
输入以下代码来实现一个极简版的百科网页：
*本案例暂时不涉及CSS*
<h1>热搜词条百科</h1><table><tr><th> 词条 |</th><td><a href="https://baike.baidu.com/item/%E9%BB%91%E7%A5%9E%E8%AF%9D%EF%BC%9A%E6%82%9F%E7%A9%BA/53303078" target="screen">黑神话悟空</a> | </td><td><a href="https://baike.baidu.com/item/%E5%87%BA%E5%B8%88%E8%A1%A8/82086" target="screen">《出师表》原文</a> | </td><td><a href="https://baike.baidu.com/item/%E4%B8%AD%E5%9B%BD%E8%B6%B3%E7%90%83/75001?fromModule=lemma_search-box" target="screen">中国足球</a> | </td><td><a href="https://baike.baidu.com/item/CSDN?fromModule=lemma_search-box" target="screen">CSDN</a></td></tr></table><iframe name="screen" src="./form.html" frameborder="1" width="960px" height="600px"></iframe>src中是默认显示的内容的地址，本来我想设置成百度的首页的，但是百度设置了拒绝使用该方式访问。所以就把之前的表单网页作为首页了，可以换成别的。
在网页中打开，显示效果如下;
点击词条中的内容，可以在iframe页面里显示相应的界面：
关于iframe的基础内容大概了解到这里就差不多了，更加复杂的效果可以等学到后面的CSS再实现即可。
预告和回顾
恭喜诸位，HTML的基础阶段的知识到这里就可以告一段落了（完结撒花）。接下来，将是Web页面中表现层（CSS）的学习博客。
对HTML基础知识感兴趣的朋友，也可以看看我的主页专栏：
专栏 | HTML入门
http://t.csdnimg.cn/7cw2C
后话
在全栈领域，博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历，然后把自己领悟到的一些东西总结一下，分享给大家。
文章全篇的操作过程都是笔者亲自操作完成的，一些定义性的文字加入了笔者自己的很多理解在里面，所以仅供参考。如果有说的不对的地方，还请谅解。
==期待与你在下一期博客中再次相遇==
【H2O2】