5 HTML标签基础 今天药忘吃喽~ 2021-09-20 07:04 299阅读 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标签)** ## <!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> **代码运行后的效果是这样的** ![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>标签的使用** ## <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> **代码运行后效果** ![v2-e324f4d2fff9a61135776217aa7dcea8_hd.jpg][] **注意!灰色的区域是我为了突出效果故意制定的样式,并不是默认样式** 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解释: > 表示表格数据 — 即通过二维数据表表示的信息 > [内容分类][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>就是一列 <colgroup> <col width="60"> <col bgcolor="fray" width="200"> <col width="80"> </colgroup> 这里我设置了第一列的宽度为60px(浏览器会自动补px),第二列背景颜色为fray,宽度200px,第三列 宽度为80,具体效果如下 ![v2-13a3226f9deefeb80a6281fcc80f88c9_hd.jpg][] 注意:这是应用了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>中显示,如下图 ![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
还没有评论,来说两句吧...