HTML 常用标签

HTML 常用标签

1. iframe 标签

iframe 标签主要用途是嵌套页面,目前使用较少,只有一些遗留项目在用。具体可以参考<iframe>
例子:

<!DOCTYPE html>
<html>
    <head>
        <title>iframe</title>
        <style>
            iframe {
            width: 100%;
            height: 500px;
            }
        </style>
    </head>
    <body>
        <!-- frameborder 用来消除 iframe 的边框 -->
        <iframe name="xxx" src="http://qq.com" frameborder="0"></iframe>
        <a target="xxx" href="http://qq.com">QQ</a>
        <a target="xxx" href="http://baidu.com">baidu</a>
    </body>
</html>

2. a 标签

a 标签主要用途是跳转页面(HTTP GET 请求)。具体可以参考<a>

a 标签的常用属性:

  • target

    注意:使用target时,考虑添加 rel="noopener norefferrer" 以防止针对 window.opener API 的恶意行为。

    • _self:当前页面加载(默认)
    • _blank:新窗口打开
    • _parent:响应到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有,方式同_self。
    • _top:HTML4响应到完整的、原来的窗口,HTML5响应到顶层浏览上下文。如果没有,方式同_self。
  • download

    这是HTML5出现的新属性。此属性指示浏览器下载URL而不是导航到它,因此将提示用户将其保存为本地文件。如果属性有一个值,那么它将在Save提示符中作为预填充的文件名使用(如果用户需要,仍然可以更改文件名)。

  • href

    注意: 可以使用 href="#top" 或者 href="#" 链接返回到页面顶部。这种行为是HTML5的特性。

    • 锚点,页面内跳转,只有它不发起请求。例子:href="#foo"
      其他的都会发起请求,比如href="?foo",点击后也会发起一个带上?fooGET请求。
    • 无协议绝对地址。例子:href="//qq.com"
    • 相对地址。例子:href="xxx.html"
    • JavaScript伪协议。例子:href="javascript: alert(123);"
      在实际场景中,如果你希望有个点击它不要有任何跳转的 a 标签,可以这么使用:<a href="javascript: ;">hello</a>

3. form 标签

form 标签主要用途是跳转页面(一般是HTTP POST 请求)。具体可以参考<form>

注意点:

  • form 标签中没有提交按钮则无法提交这个 form,除非你用 js
  • form 标签主只支持 GET 请求和 POST 请求,但主要用来提交 POST 请求
  • 发送 POST 请求时,from 标签中的 input 标签的 name 属性会被当做 HTTP 请求的第四部分(Form Data)的 key
    发送 GET 请求时,from 标签中的 input 标签的 name 属性会被当做 url 的查询参数
    (你可以通过修改 from 标签的 action 来使得 POST 请求支持查询参数,但不能使得 GET 请求有第四部分。)
  • form 标签也有 target 属性,用法类似 a 标签

4. input / button

input 标签具体可以参考 <input>
button 标签具体可以参考 <button>

注意点:

  • input / button 的区别:是否为「空标签」(input 标签没有子元素)
  • 在 form 中:
    • <input type="button" value="button">没有提交功能(只是普通按钮)
    • <input type="submit" value="submit">有提交功能
    • <button type="submit">submit</button>有提交功能
    • <button>button</button>有提交功能(自动升级)
  • 用 label 标签将 input 标签包起来,可以直接产生类似<input type="checkbox" name="cb" id="cb"><label for="cb">checkbox</label>的关联效果
  • input 标签的 type 为radio,几个 input 标签的 name 一致时,才会有不被同时选中的效果

5. table 标签

table 标签主要用途是展示数据。具体可以参考<table>

注意点:

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

推荐阅读更多精彩内容

  • 一、常用标签 1. iframe 标签 嵌套页面。需要新开一个窗口,速度比较慢。 iframe 直接使用 直接打开...
    养乐多__阅读 598评论 0 5
  • iframe a form input select textarea table iframe iframe单独...
    xyyojl阅读 594评论 0 1
  • HTML(超文本标记语言——HyperText Markup Language)是构成 Web 世界的一砖一瓦。它...
    长鲸向南阅读 479评论 0 0
  • 对于新手来说,HTML的框架可以可以用IDE来解决,但是标签的用法还是需要通过自己的理解记忆来灵活运用 <a>标签...
    生命在流逝阅读 682评论 0 0
  • HTML可以说是前端修炼中基础中之基础,个人认为即使被很多人觉得是最为简单的,也应该尽可能的去了解吃透,此博客总结...
    Save_Onfir3阅读 303评论 0 0