HTML基础知识
目录
前言
本系列博客介绍了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】