【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="重置">&emsp13;<input type="submit" name="submit" value="提交">&emsp13;<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>&emsp13;词条&emsp13;|</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】