5 HTML标签基础

在上一篇文章中，我们编写了一个最基础的HTML网页（详见：https://zhuanlan.zhihu.com/p/38200226），那么这次就让我们用更多的标签来完善它，实现更多的功能，在实例中学习一些常用的标签。

另外对于HTML标签的学习，有一个网站对我会很有帮助

MDN Web Docsdeveloper.mozilla.org

遇到想要了解的标签都可以在这个网站中搜索，会有详细的用法与介绍，ok让我们进入正题

我们上篇文章的代码是这样的

<!DOCTYPE html>
<html>
<head><title>hi</title>
</head>
<body><h1>这是一个html实例</h1><p>好好学习呀呀呀</p>
</body>
</html>

现在让我们来扩充它（还记得吗，一定要写<!DOCTYPE html>,来告诉浏览器文档的类型，注意大小写）

一，让我们来写一个问券调查吧（重点form标签）

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>html标签实例</title>
</head>
<body><div class="title" name="title"><h1>这是一个html实例</h1><p>常用标签的用法</p></div><hr><div class="biaodan"><h3>问券调查</h3><form action="fruit" method="post"><label>用户名：<input type="text" name="username" ></label><label>密码：<input type="password" name="pwd" ></label><strong>1.爱吃的水果是？</strong><label><input type="checkbox" name="banana">香♂蕉</label><strong>2.经常一边吃一边跳舞吗？</strong><label><input type="radio" name="dance">是的</label><label><input type="radio" name="dance">那必须啊</label><strong>3.你跳舞的背景音乐是？</strong><select name="music" multiple ><option value="">无声尬舞</option><option value="1">烤面筋</option><option value="2">东北玩泥巴</option><option value="3" disabled>王师傅剪头发</option><option value="4" selected>李寡妇回家</option></select><hr><strong>备注</strong><textarea style="resize: none" name="beizhu" cols="50" rows="10"></textarea><input type="submit" value="提交"></form><hr></div>

代码运行后的效果是这样的

让我们来按顺序学习标签的用法

1.<hr>

我们从截图中可以看见在几根灰色的水平线，这正是<hr>的作用，实现段落级元素之间的主题的转换，具体的分割样式可以在css中设定

2.<div>

简单的来说，<div>并没有任何的特定的语义，只是一个容器，来将各个元素分块，一般我们会利用<div id=“xxx”>或者<div class=“xxx”>来实现我们的样式。

这里让我引用一下MDN对于<div>的简介

HTML<div>元素(或 HTML 文档分区元素) 是一个通用型的流内容容器，它在语义上不代表任何特定类型的内容，它可以被用来对其它元素进行分组，一般用于样式化相关的需求（使用 class 或 id特性) 或者对具有相同特性的一组元素进行分组 (比如lang)，它应该在没有任何其它语义元素可用时才使用 (比如<article>或 <nav>) 。

3.<form>（HTTP POST 请求）

很简单，就是划了了一块地方，向服务器提交数据

action指定了请求的路径

method指定了请求的动词

4.<input>

HTML input 元素用于为基于Web的表单创建交互式控件，以便接受来自用户的数据。

我们可以看见不同的type，功能是不一样的

text就是文本输入框

password是密码式的输入

checkbox是多选框

radio是单选框（写相同的name来实现只能单选）

submit用来提交表单

可能有同学会问，那外面的<label>是干什么用的呢？这个标签就是用来实现当我们鼠标点击用户名，密码，1.爱吃的水果是？等等这些文本的时候，能够自动选中他们所绑定的功能。

单击用户名后可以看见光标在文本框内闪烁

5.<select>

<select>是一种表单控件，可创建选项菜单。菜单内的选项为<option>

而multiple属性可以实现在选项菜单多选（Ctrl+单击选择）

我们可以看到王师傅剪头发这个选项是不能选的，这是disabled的作用

而一开始我们默认的选项就是李寡妇回家，这是selected的作用

用这两个属性实现了不让王师傅剪头发，默默送李寡妇回家的功能（笑）

6.<textarea>

<textarea> 元素表示一个多行纯文本编辑控件。

注意：<textarea> 默认情况下大小是可以随意改变的，所以为了不造成莫名其妙的bug我们一般利用style="resize: none"来让它的大小固定。

而cols rows 是通过列与行来控制具体的大小（但是我们并不采取这个方法，一般使用css，了解就好）

让我们给这个表单填充数据后提交，然后用开发者工具来查看

填充数据

从开发者工具中看到我们刚刚提交的东西

二，在我们的网页中嵌套其他的网页与<table>和<a>标签的使用

 <div class="frame" name="frame"><iframe src="about:blank "  name="zhanshi"  frameborder="0" style="width: 100%;height: 400px;background: gray;"></iframe></div><div class="biao" ><table border=1 style="border-collapse: collapse"><colgroup><col width="60"><col bgcolor="fray" width="200"><col width="80"></colgroup><thead><tr><th>序号</th><th>作用</th><th>链接</th></tr></thead><tbody><tr><td>1</td><td>搜索引擎</td><td><a href="http://baidu.com" target="zhanshi">百度</a></td></tr><tr><td>2</td><td>门户网站</td><td><a href="http://qq.com" target="zhanshi">腾讯</a></td></tr><tr><td>3</td><td>翻译网站</td><td><a href="http://fanyi.baidu.com/translate" target="zhanshi">百度翻译</a></td></tr></tbody></table>

代码运行后效果

注意！灰色的区域是我为了突出效果故意制定的样式，并不是默认样式

1.<iframe>

通俗解释：在网页中嵌套另一个网页（现在前端不经常用了）

引用MDN的解释

HTML内联框架元素 <iframe>表示嵌套的浏览上下文，有效地将另一个HTML页面嵌入到当前页面中。在HTML 4.01中，文档可能包含头部和正文，或头部和框架集，但不能包含正文和框架集。但是，<iframe>可以在正常的文档主体中使用。每个浏览上下文都有自己的会话历史记录和活动文档。包含嵌入内容的浏览上下文称为父浏览上下文。顶级浏览上下文（没有父级）通常是浏览器窗口。

一般用法，直接在当前网页中嵌套了百度的主页

<iframe src="https://baidu.com" title="iframe example 1" width="400" height="300">

而我们是这么用的，主要是为了与后面的a标签配套使用

 <iframe src="about:blank "  name="zhanshi"  frameborder="0" style="width: 100%;height: 400px;background: gray;"></iframe>

注：src="about:blank "的效果为显示一个空白的页面

frameborder="0"的效果为不显示其边框

2.<table>

通俗解释：用于展示数据，类似表格

MDN解释：

表示表格数据 — 即通过二维数据表表示的信息
内容分类流动内容允许的内容
按照这个顺序：
一个可选的 <caption> 元素
零个或多个的 <colgroup> 元素
一个可选的 <thead> 元素
一个可选的 <tfoot> 元素（tfoot元素出现在tbody或tr元素前后都可以。在HTML4中，它只能出现在这些元素之前）
零个或多个 <tbody> 元素
一个或多个 <tr> 元素
标签省略不允许，开始标签和结束标签都不能省略。
允许的父元素任何支持流内容的元素
允许的ARIA 角色
AnyDOM 接口HTMLTableElement

<thead>即为表格的表头<tbody>为表格主题<tfoot>为表格的足部， <tr> 元素定义表格中的行，<td>为表格数据）

这三个标签在编写时可以不按照顺序，浏览器会自动按照顺序显示，不过为了看的流程方便阅读你还是按顺序吧

<colgroup>可以控制每一列的样式

每一个<col>就是一列

<colgroup><col width="60"><col bgcolor="fray" width="200"><col width="80">
</colgroup>

这里我设置了第一列的宽度为60px（浏览器会自动补px），第二列背景颜色为fray，宽度200px，第三列宽度为80，具体效果如下

注意：这是应用了style="border-collapse: collapse"之后的效果使得他们之间都没有空隙

3.<a>

通俗解释：实现跳转页面的功能（HTTP GET 请求）

MDN解释：

HTML <a> 元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。

一般格式

<a href="http://baidu.com">百度</a>

而我们用的用法

<a href="http://baidu.com" target="zhanshi">百度</a>

区别就在于target="zhanshi"这里，还记得我们的<iframe>是怎么写的吗？

<iframe src="about:blank "  name="zhanshi"  frameborder="0" style="width: 100%;height: 400px;background: gray;"></iframe>

可以看到我们给<iframe>取了一个名字，叫做zhanshi，而在<a>标签里我们定义了target="zhanshi"，这样当我们点击链接的时候，就可以直接在<iframe>中显示，如下图

在点击百度后，直接在<iframe>中显示了外部网页

<a>还有如下的用法，可以自己试一试

_self: 当前页面加载，即当前的响应到同一HTML 4 frame（或HTML5浏览上下文）。此值是默认的，如果没有指定属性的话。
_blank: 新窗口打开，即到一个新的未命名的HTML4窗口或HTML5浏览器上下文
_parent: 加载响应到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self。
_top: IHTML4中：加载的响应成完整的，原来的窗口，取消所有其它frame。 HTML5中：加载响应进入顶层浏览上下文（即，浏览上下文，它是当前的一个的祖先，并且没有parent）。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self

扩充后的完整代码如下

GitHub浏览地址：

html标签实例henrydong123.github.io

你可以结合代码与在线网页来体会每个标签的效果

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>html标签实例</title>
</head>
<body><div class="title" name="title"><h1>这是一个html实例</h1><p>常用标签的用法</p></div><hr><div class="biaodan"><h3>问券调查</h3><form action="fruit" method="post"><label>用户名：<input type="text" name="username" ></label><label>密码：<input type="password" name="pwd" ></label><strong>1.爱吃的水果是？</strong><label><input type="checkbox" name="banana">香♂蕉</label><strong>2.经常一边吃一边跳舞吗？</strong><label><input type="radio" name="dance">是的</label><label><input type="radio" name="dance">那必须啊</label><strong>3.你跳舞的背景音乐是？</strong><select name="music" multiple ><option value="">无声尬舞</option><option value="1">烤面筋</option><option value="2">东北玩泥巴</option><option value="3" disabled>王师傅剪头发</option><option value="4" selected>李寡妇回家</option></select><hr><strong>备注</strong><textarea style="resize: none" name="beizhu" cols="50" rows="10"></textarea><input type="submit" value="提交"></form></div><div class="frame" name="frame"><iframe src="about:blank "  name="zhanshi"  frameborder="0" style="width: 100%;height: 400px;background: gray;"></iframe></div><div class="biao" ><table border=1 style="border-collapse: collapse"><colgroup><col width="60"><col bgcolor="fray" width="200"><col width="80"></colgroup><thead><tr><th>序号</th><th>作用</th><th>链接</th></tr></thead><tbody><tr><td>1</td><td>搜索引擎</td><td><a href="http://baidu.com" target="zhanshi">百度</a></td></tr><tr><td>2</td><td>门户网站</td><td><a href="http://qq.com" target="zhanshi">腾讯</a></td></tr><tr><td>3</td><td>翻译网站</td><td><a href="http://fanyi.baidu.com/translate" target="zhanshi">百度翻译</a></td></tr></tbody></table></div>
</body>
</html>