5 HTML标签基础

最新推荐文章于 2021-06-27 21:19:50 发布

编程鸭

最新推荐文章于 2021-06-27 21:19:50 发布

阅读量407

点赞数

分类专栏：互联网 JavaScript JavaScript Promise 编程语言前端文章标签：前端 IT 编程程序员

本文链接：https://blog.csdn.net/weixin_44811417/article/details/92839811

版权

编程语言同时被 3 个专栏收录

323 篇文章 1 订阅

订阅专栏

互联网

267 篇文章 1 订阅

订阅专栏

前端

107 篇文章 2 订阅

订阅专栏

在上一篇文章中，我们编写了一个最基础的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>