HTML常用的标签

1、iframe标签

<iframe>元素表示嵌套的浏览上下文,将另一个HTML页面嵌入到当前页面中。

<iframe src="xxx" name="xxx"></iframe>

嵌套页面时,其默认高50px,宽度100px。

<iframe>可以在正常的文档主体中使用。每个浏览上下文都有自己的会话历史记录和活动文档。包含嵌入内容的浏览上下文称为父浏览上下文。顶级浏览上下文(没有父级)通常是浏览器窗口。

frameborder取值为1时(默认值),告诉浏览器在当前iframe与其他iframe之间绘制边框,取0时则无需绘制此边框。

name嵌入的浏览上下文(框架)的名称。该名称可以用作标签,标签的target属性值,或标签和标签的formtaget属性值。


2、a标签

HTML<a>元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。

a标签包含的属性有:

(1)download  此属性指示浏览器下载URL而不是导航到URL,因此将提示用户将其保存为本地文件。

(2)href  这是一个必需属性为锚定义一个超文本链接来源。这表示链接目标的URL或URL片段。URL片段是由一个hash符号(#),它指定一个内部目标在当前文档中的位置(ID)开头的名字。URL不限于网页(HTTP)的文件。URL可能使用浏览器所支持的任何协议。例如,文件,FTP,大多数用户代理mailto工作。

(3)hreflang  该属性用于指定链接文档的人类语言。其仅提供建议,并没有内置的功能。

(4)referrer  一个指示在获取资源时应该使用哪个提交者 (referer) 的字符串:

"no-referrer" 表示 Referer: 头将不会被发送。

"no-referrer-when-downgrade" 表示当从使用HTTPS的页面导航到不使用 TLS(HTTPS)的来源 时不会发送 Referer: 头。如果没有指定策略,这将是用户代理的默认行为。

"origin" 表示 referrer将会是页面的来源,大致为这样的组合:主机和端口(不包含具体的路径和参数的信息)。

"origin-when-cross-origin" 表示导航到其它来源将会限制为这种组合:主机 + 端口,而导航到相同的来源将会包含 referrer的路径。

"unsafe-url" 表示 referrer将会包含来源和路径(但是不会是包含密码或用户名的片段)。这种情况是不安全的,因为它可能会将TLS保护的资源的来源和路径泄露给不安全的来源。

(5)rel  该属性指定了目标对象到链接对象的关系。该值是空格分隔的列表类型值。

(6)target  该属性指定在何处显示链接的资源。 取值为标签(tab),窗口(window),或框架(iframe)等浏览上下文的名称或其他关键词。以下关键字具有特殊的意义:

_self: 当前页面加载,即当前的响应到同一HTML 4 frame(或HTML5浏览上下文)。此值是默认的,如果没有指定属性的话。

_blank: 新窗口打开,即到一个新的未命名的HTML4窗口或HTML5浏览器上下文

_parent: 加载响应到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文,此选项的行为方式相同_self。

_top: IHTML4中:加载的响应成完整的,原来的窗口,取消所有其它frame。 HTML5中:加载响应进入顶层浏览上下文(即,浏览上下文,它是当前的一个的祖先,并且没有parent)。如果没有parent框架或者浏览上下文,此选项的行为方式相同_self

( 7 )type 该属性指定在一个 MIME type 链接目标的形式的媒体类型。

3、form标签

form标签表示了文档中的一个区域,这个区域包含有交互控制元件,用来向web服务器提交信息。

form包含的属性有:

(1)target  一个名字或者说关键字,用来指示在提交表单之后,在哪里显示收到的回复. 在 HTML 4 里, 这是一个用于 frame 的名字/关键字. 在 HTML5 里, 这是一个用于 browsing context 浏览器上下文  的名字/关键字 (举例来说, 标签页tab, 窗口window, or 或者行内 frame).

(2)novalidate  这个布尔类型的属性指示了,当提交时form是否没有被验证。 如果这个属性没有指定 (因此这个 form 是验证通过的)。

(3)name   这个form的名字,HTML5中,一个文档中的多个form当中,name必须唯一而不仅仅是一个空字符串。

(4)method  浏览器使用这种 HTTP 方式来提交 form. 可能的值有:

post: 指的是 HTTP POST 方法 ; 表单数据会包含在表单体内然后发送给服务器.

get: 指的是 HTTP GET 方法; 表单数据会附加在 action 属性的URI中,并以 '?' 作为分隔符, 然后这样得到的 URI 再发送给服务器. 当这样做(数据暴露在URI里面)没什么副作用,或者表单仅包含ASCII字符时,再使用这种方法吧。

(5)enctype  当 method 属性值为 post 时, enctype 是提交form给服务器的内容的 MIME 类型 。可能的取值有:application/x-www-form-urlencoded: 如果属性未指定时的默认值。multipart/form-data: 这个值用于一个 type 属性设置为 "file" 的元素。text/plain (HTML5)

(6)autocomplete  用于指示 input 元素是否能够拥有一个默认值,这个默认值是由浏览器自动补全的。这个设定可以被属于这个form的子元素的 autocomplete 属性重载(覆盖)。 可能的值有:

off: 在每一个用到的输入域里,用户必须显式的输入一个值,或者document 以它自己的方式提供自动补全;浏览器不会自动补全输入。

on: 浏览器能够根据用户之前在form里输入的值自动补全。

(7)accept-charset  一个空格分隔或逗号分隔的列表,这个列表包括了服务器支持的字符编码。浏览器以这些编码被列举的顺序使用它们。默认值是一个保留字符串“UNKNOWN”。这个字符串指的是,和包含这个form元素的文档相同的编码。

在之前版本的HTML中,不同的字符编码可以用空格或逗号分隔。在HTML5中,只有空格可以允许作为分隔符。

4、input/button标签

HTML<input>元素用于为基于Web的表单创建交互式控件,以便接受来自用户的数据。

<button>元素表示一个可点击的按钮,可以用在表单或文档其它需要使用简单标准按钮的地方。 默认情况下,HTML按钮的显示样式接近于 user agent 所在的宿主系统平台(用户操作系统)的按钮, 但你可以使用 CSS 来改变按钮的样貌。

<input>中type属性表示控件类型的显示。如果这个属性没有指定,默认的类型是 text。可用的值包括:button,checkbox,color,date,datetime,datetime*-local,email,file,hidden,image,month,number ,password,radio,range,reset,search,submit,tel,text,time,url,week。

input示例:

简单的文本输入框:

<input type="text" name="input" value="type here">

一个表单用例:

<form action="getform.php" method="get">

        First name: <input type="text" name="first_name"/><br/>

            Last name: <input type="text" name="last_name"/><br/>

               E-mail: <input type="email" name="user_email"/><br/>

<input type="submit" value="Submit" />

</form>

5、table标签

table元素表示表格数据 — 即通过二维数据表表示的信息。

举例说明:

<table>

<thead>

<tr>

<th>Header content 1</th>

<th>Header content 2</th>

</tr>

</thead>

<tfoot>

<tr>

<td>Footer content 1</td>

<td>Footer content 2</td>

</tr>

</tfoot>

<tbody>

<tr>

<td>Body content 1</td>

<td>Body content 2</td>

</tr>

</tbody>

</table>

浏览器按序分别显示thead,tbody,tfoot内容,与代码排列顺序无关,若代码中未区分,则按代码顺序显示。

cellpadding  这个属性定义了表格单元的内容和边框之间的空间。如果它是一个像素长度单位,这个像素将被应用到所有的四个侧边;如果它是一个百分比的长度单位,内容将被作为中心,总的垂直(上和下)长度将代表这个百分比。这同样适用于总的水平(左和右)空间。

cellspacing  这个属性(使用百分比或像素)定义了两个单元格之间空间的大小(从水平和垂直方向上),包括了表格的顶部与第一行的单元格,表的左边与第一列单元格,表的右边与最后一列的单元格,表的底部与最后一行单元格之间的空间。

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

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,566评论 18 139
  • 1. form标签 1.表单可以包含input、label、textareainput标签submit:用于数据提...
    qfstudy阅读 362评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,721评论 1 92
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,219评论 1 41
  • 前几天,我们在谈论苹果的时候,有过这样一个问题 究竟是哪样水果力压葡萄和苹果,高居世界水果产量第一位呢?它就是我们...
    舌尖计食谱阅读 394评论 0 0