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 标签可以设定表格一列的宽度、颜色等。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容

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