5 HTML标签基础

今天药忘吃喽~ 2021-09-20 07:04 477阅读 0赞

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

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

[MDN Web Docsdeveloper.mozilla.org![图标][v2-72382e605ce3eba8154aa310a712c403_ipico.jpg]][MDN Web Docs_developer.mozilla.org_v2-72382e605ce3eba8154aa310a712c403_ipico.jpg]

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

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

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

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

--------------------

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

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

![v2-1953d4cbbdc8dbbd14c0b78e75c588a2_hd.jpg][]

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

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.爱吃的水果是？等等这些文本的时候，能够自动选中他们所绑定的功能。

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

![v2-258b2ab672fb6f29597f2c51f2635cfe_hd.jpg][]

5.<select>

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

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

![v2-2596fd72c34189c68d9c18d99f1554c0_hd.jpg][]

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

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

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

6.<textarea>

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

![v2-16138645225c51b70da5973ddf3b7ee9_hd.jpg][]

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

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

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

![v2-571b573bb5ed880eccfb4fb0f3741c70_hd.jpg][]

填充数据

![v2-f7df7f414f74a15e794d9b149222c739_hd.jpg][]

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

--------------------

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

**代码运行后效果**

![v2-e324f4d2fff9a61135776217aa7dcea8_hd.jpg][]

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

1.<iframe>

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

引用MDN的解释

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

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

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

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

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

2.<table>

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

MDN解释：

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

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

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

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

每一个<col>就是一列

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

![v2-13a3226f9deefeb80a6281fcc80f88c9_hd.jpg][]

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

3.<a>

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

MDN解释：

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

一般格式

而我们用的用法

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

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

![v2-465e7ad1f43d7431b4da8a95ed7b7b9f_hd.jpg][]

在点击百度后，直接在<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][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>

[https_zhuanlan.zhihu.com_p_38200226]: https://zhuanlan.zhihu.com/p/38200226
[v2-72382e605ce3eba8154aa310a712c403_ipico.jpg]: https://pic4.zhimg.com/v2-72382e605ce3eba8154aa310a712c403_ipico.jpg
[MDN Web Docs_developer.mozilla.org_v2-72382e605ce3eba8154aa310a712c403_ipico.jpg]: https://link.zhihu.com/?target=https%3A//developer.mozilla.org/zh-CN/
[v2-1953d4cbbdc8dbbd14c0b78e75c588a2_hd.jpg]: /images/20210812/3dca5ea2a2454e5a90144600e59db7ba.png
[HTML]: https://link.zhihu.com/?target=https%3A//developer.mozilla.org/en-US/docs/Web/HTML
[v2-258b2ab672fb6f29597f2c51f2635cfe_hd.jpg]: /images/20210812/7fcb9376541a47e499de3ae3c7063085.png
[v2-2596fd72c34189c68d9c18d99f1554c0_hd.jpg]: /images/20210812/8a6cc9a4a059448790b30795b2051ca9.png
[v2-16138645225c51b70da5973ddf3b7ee9_hd.jpg]: /images/20210812/93edbb1edf1d46ed94d37077fe682630.png
[v2-571b573bb5ed880eccfb4fb0f3741c70_hd.jpg]: /images/20210812/83cd5132df0841608527ed7558291b22.png
[v2-f7df7f414f74a15e794d9b149222c739_hd.jpg]: /images/20210812/34e536a592414ce3ae2eddebff973629.png
[v2-e324f4d2fff9a61135776217aa7dcea8_hd.jpg]: /images/20210812/08fd7069e3a0462ebffc7ef2126bb024.png
[Link 1]: https://link.zhihu.com/?target=https%3A//developer.mozilla.org/en-US/docs/HTML/Content_categories
[Link 2]: https://link.zhihu.com/?target=https%3A//developer.mozilla.org/en-US/docs/HTML/Content_categories%23Flow_content
[HTMLTableElement]: https://link.zhihu.com/?target=https%3A//developer.mozilla.org/zh-CN/docs/Web/API/HTMLTableElement
[tbody]: https://link.zhihu.com/?target=https%3A//developer.mozilla.org/zh-CN/docs/Web/HTML/Element/tbody
[tfoot]: https://link.zhihu.com/?target=https%3A//developer.mozilla.org/zh-CN/docs/Web/HTML/Element/tfoot
[v2-13a3226f9deefeb80a6281fcc80f88c9_hd.jpg]: /images/20210812/9e62b39c60d34ddd98cbeb6aac759970.png
[v2-465e7ad1f43d7431b4da8a95ed7b7b9f_hd.jpg]: /images/20210812/51f813849cdb48eaa032062d952e8fea.png
[html_henrydong123.github.io]: https://link.zhihu.com/?target=https%3A//henrydong123.github.io/html-demo/1.html