【H2O2|全栈】关于HTML（6）HTML基础（五 · 完结篇）_html已经被访问过的a标签怎么用-CSDN博客

属性名	作用
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页面里显示相应的界面：