HTML标签

iframe

用来嵌套页面,现在很少用。
是可替换标签,有自己默认的宽100px、高50px。
<iframe src="https://www.baidu.com" frameborder="0"></iframe>
src也可以是相对路径。
frameborder="0" 用来去掉内嵌页面的默认边框。
name 属性可以和 a 标签结合使用:

<iframe src="#" name="xxx"></iframe>
<a target="xxx" href="http://baidu.com">百度</a>

a

跳转页面(发起 HTTP GET 请求)
<a href="http://qq.com" target="_blank">QQ</a>新页面打开
<a href="http://qq.com" target="_self">QQ</a>自身页面打开
<a href="http://qq.com" target="_parent">QQ</a>父页面打开
<a href="http://qq.com" target="_top">QQ</a>最上层(祖宗)页面打开
<a href="http://qq.com" download>下载</a>download属性可以下载页面
href 属性的内容可以是绝对路径、相对路径./xxx.html、无协议链接//qq.com、锚点#xxx不发送请求、查询参数?name=yyy、伪协议javascript:; javascript:alert(1):;可以在用户点击 a 时执行一段 javascript 代码,实现点击之后没有任何动作的 a 标签等奇葩需求。

form

跳转页面(发起 HTTP POST 请求)
如果 form 表单里面没有提交按钮,就无法提交这个 form(回车也没有),除非使用 js。
form 标签用来发起一个 POST 请求,不管响应。

<form action="users" method="POST">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="提交">
</form>

method 的值只能是 POST 或者 GET,但我们需要获取页面时往往用 a 标签而不是 GET。
用 POST 请求时,name 的值会成为发起的请求的第四部分。
用 GET 请求时,name 的值会成为查询参数。
我们可以用给 action 的值加参数的方法action="users?zzz=111",使 POST 请求也有查询参数。但没有方法能使 GET 请求出现的第四部分。
form 标签也有 target 属性,和 a 标签的相同,也可以与 iframe 标签组合使用。

button

<button>button</button>button 标签里面可以有子标签。
如果 form 表单里没有提交按钮,button 标签中也没有写 type 属性,生成的按钮会自动升级成 submit 按钮。

input

根据 type 属性值的不同,有多种不同的 input 类型。
input 是空标签,没有子标签。
input 需要有 name 属性,这样在提交表单时, input 的值才会出现在请求里。

button

<input type="button" value="button">就是一个普通的按钮,和 submit 提交没什么关系。

checkbox

<input type="checkbox" id="xxx"><label for="xxx">爱我</label>checkbox 是复选框,label 标签的 for 属性和 input 标签的 id 属性是对应的,可以把某个 label 和 input 关联起来。
另一种关联的方法是用 labal 标签把 input 标签包起来

喜欢的水果
<label><input type="checkbox" name="fruit" value="orange">橘子</label>
<label><input type="checkbox" name="fruit" value="banana">香蕉</label>

给一组复选框同一个 name 值,不同的 value 值,这样服务器能知道你选择了哪些。

radio

<label><input type="radio" name="loveme" value="yes">Yes</label>
<label><input type="radio" name="loveme" value="no">No</label>

给一组单选框同一个 name 值,这样只能选中一个,不同的 value 值,服务器能知道你选了哪一个。

select

<select name="group" multiple>
  <option value="-">-</option>
  <option value="1">第一组</option>
  <option value="2">第二组</option>
  <option value="3" disabled>第三组</option>
  <option value="4" selected>第四组</option>
</select>

下拉菜单, multiple 属性表示可以多选。
disabled 属性表示不可选择该项,selected 属性表示默认选择该项。

textarea

多行文本
<textarea style="resize:none; width:200px; height:100px;" name="爱好"></textarea>可以用 CSS 控制宽高,resize:none表示多行文本框无法随意拖动大小。
<textarea style="resize:none;" name="爱好" cols="100" rows="10"></textarea>也可以用列数、行数来大概控制宽高。

table

<table border=1>
  <colgroup>
    <col width=100>
    <col width=120 bgcolor=red>
    <col width=70>
  <thead>
    <tr>
      <th></th><th></th><th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th></th><td></td><td></td>
    </tr>
  </thody>
  <tfoot>
    <tr>
      <th></th><td></td><td></td>
    </tr>
  </tfoot>
</table>

table 的 border 默认是有间隙的,可以在 CSS 中用table{ border-collapse: collapse; }去除间隙。
colgroup 标签可以设定表格一列的宽度、颜色等。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,539评论 1 41
  • 序言 整理谷歌的小弟的笔记,版权归原作者所有,本文仅作整理,原文链接:http://blog.csdn.net/l...
    在代码下成长阅读 1,340评论 1 5
  • 这里我假设大家已经对html标签有了基本了, 所以一些基本标签如div, p, h1等简单的标签我就不做介绍了, ...
    squall1744阅读 869评论 0 2
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,697评论 19 139
  • Html标签与元素的关系:一个标签对构成一个元素 a) :标签对,成对出现, 标志着html文件的开始, 文件...
    打死你的小乌龟阅读 669评论 0 0

友情链接更多精彩内容