HTML常用标签

什么是HTML

HTML (Hypertext Markup Language)即超文本标记语言。HTML用于网页的制作,被浏览器解释后可以呈现出各式各样的精美页面。
常见标签:a、form、input、button、h1、p、ul、ol、small、strong、div、span、kbd、video、audio、svg

着重理解几个常用标签

<iframe>

它能够将另一个HTML页面嵌入到当前页面中

height以CSS像素格式,或百分比格式指定frame的高度。默认值为150
width以CSS像素格式或以百分比格式指定的 frame 的宽度。默认值是300

name用于定位嵌入的浏览上下文的名称。该名称可以用作<a>标签与<form>标签的target属性值,也可以用作<input>标签和<button>标签的 formtarget 属性值,还可以用作 window.open()方法的 windowName 参数值

<a>

(或称锚元素)可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接

<a href="https://example.com">Website</a>
<a href="mailto:m.bluth@example.com">Email</a>
<a href="tel:+123456789">Phone</a>

download此属性指示浏览器下载 URL 而不是导航到它,因此将提示用户将其保存为本地文件。如果属性有一个值,那么此值将在下载保存过程中作为预填充的文件名(如果用户需要,仍然可以更改文件名)。此属性对允许的值没有限制,但是 / 和 \ 会被转换为下划线。大多数文件系统限制了文件名中的标点符号,故此,浏览器将相应地调整建议的文件名

href包含超链接指向的 URL 或 URL 片段。URL 片段是哈希标记(#)前面的名称,哈希标记指定当前文档中的内部目标位置(HTML 元素的 ID)。URL 不限于基于 Web(HTTP)的文档,也可以使用浏览器支持的任何协议

外部链接

<a href="http://www.baidu.com/">External Link</a>

相同页面链接的描述

<a href="#属性">Description of Same-Page Links</a>

创建一个可点击的图片

<a href="https://www.baidu.com/"><img src="xxx" alt="MDN logo" /></a>

创建一个email链接

<a href="mailto:xxxx@xxx.com">Send email to xxxx</a>

创建电话链接

<a href="tel:+123456789">+123456789</a>

在点击链接后,会执行javascript代码

<a href="javascript:alert(1)">link<a>

让页面回到顶部

<a href="#" >link</a>

刷新页面

<a href="" >link</a>

点击后没有任何动作的a标签(满足一些奇葩功能)

<a href="javascript:;" >link</a>

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

_self: 当前页面加载,即当前的响应到同一HTML 4 frame(或HTML5浏览上下文)。此值是默认的,如果没有指定属性的话
_blank: 新窗口打开,即到一个新的未命名的HTML4窗口或HTML5浏览器上下文
_parent: 加载响应到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文,此选项的行为方式与 _self 相同。
_top: IHTML4中:加载的响应成完整的,原来的窗口,取消所有其它frame。 HTML5中:加载响应进入顶层浏览上下文(即,浏览上下文,它是当前的一个的祖先,并且没有parent)。如果没有parent框架或者浏览上下文,此选项的行为方式相同_self

iframename :当target=" iframename"时,点击链接可以在指定的<iframe name="iframename"></iframe>中打开链接

<iframe name="xxx" src="#" frameborder="0"></iframe>
    <div>
        <a href="https://www.qq.com" target="xxx">点击</a>
    </div>

<form>

表示了文档中的一个区域,此区域包含有交互控制元件,用来向 Web 服务器提交信息

<form action="" method="get" class="form-example">
  <div class="form-example">
    <label for="name">Enter your name: </label>
    <input type="text" name="name" id="name" required>
  </div>
  <div class="form-example">
    <label for="email">Enter your email: </label>
    <input type="email" name="email" id="email" required>
  </div>
  <div class="form-example">
    <input type="submit" value="Subscribe!">
  </div>
</form>

action一个处理此表单信息的程序所在的URL。此值可以被 <button>或者 <input>元素中的 formaction 属性覆盖。规定了form提交到哪里。
method*
post:表单数据会包含在表单体内然后发送给服务器.
get:表单数据会附加在 action 属性的URI中,并以 '?' 作为分隔符,然后这样得到的 URI 再发送给服务器。如果这样做(数据暴露在 URI 中)没什么副作用,或者表单仅包含ASCII字符时,再考虑使用这种方法
target 一个名字或者说关键字,用来指示在提交表单之后,在哪里显示收到的回复

_self:在当前文档页面重新加载返回值。是默认值。如果此文档在一个frame中的话,self是在当前frame(document)中重新加载的,而不是整个页面(window)
_blank:以新的文档窗口加载返回值
_parent:在父级的 frame 中以文档形式加载返回值,如果没有父级的frame,行为和_self一致
_top:如果是 HTML 4 文档:清空当前文档,加载返回内容;HTML5:在当前文档的最高级内加载返回值,如果没有父级,和_self的行为一致
iframename:返回值在指定 <iframe> 中显示

<input>

用于为基于Web的表单创建交互式控件,以便接受来自用户的数据
<input>的工作方式相当程度上取决于type属性的值,如果未指定此属性,则采用的默认类型为 text

text默认值。单行的文本区域,输入中的换行会被自动去除
button没有默认行为的按钮,上面显示value属性的值,默认为空
checkbox复选框,可设为选中或未选中
radio单选按钮,允许在多个拥有相同 name值的选项中选中其中一个
color用于指定颜色的控件;在支持的浏览器中,激活时会打开取色器
date输入日期的控件(年、月、日,不包括时间)。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮
email编辑邮箱地址的区域。类似 text 输入,但在支持的浏览器和带有动态键盘的设备上会有确认参数和相应的键盘
file让用户选择文件的控件。使用accept属性规定控件能选择的文件类型
image带图像的 submit 按钮。显示的图像由 src 属性规定。如果 src缺失,al属性就会显示
number用于输入数字的控件。如果支持的话,会显示滚动按钮并提供缺省验证(即只能输入数字)。拥有动态键盘的设备上会显示数字键盘
password单行的文本区域,其值会被遮盖。如果站点不安全,会警告用户
reset此按钮将表单的所有内容重置为默认值。不推荐
submit用于提交表单的按钮

checked如果该元素的type属性的值为radio或者checkbox,则该布尔属性的存在与否表明了该控件是否是默认选择状态
disabled这个布尔属性表示此表单控件不可用。 特别是在禁用的控件中, click 事件 将不会被分发。 并且,禁用的控件的值在提交表单时也不会被提交
height如果type属性的值是image,这个属性定义了按钮图片的高度
max此项目的最大(数字或日期时间)值,且不得小于其最小值(min属性)值
min此项目的最小(数字或日期时间)值,且不得大于其最大值(最大属性)值
maxlength如果 type 的值是 text, email, search, password, tel, 或 url,那么这个属性指明了用户最多可以输入的字符个数(按照Unicode编码方式计数);对于其他类型的输入框,该属性被忽略。它可以大于 size 属性的值。如果不指定这个属性,那么用户可以输入任意多的字符。如果指定为一个负值,那么元素表现出默认行为,即用户可以输入任意多的字符
multiple这个属性指示用户能否输入多个值。这个属性仅在type属性为email或file的时候生效 ; 否则被忽视
name控件的名称,与表单数据一起提交
size控件的初始大小。以像素为单位,适用于当 type 属性为 text, search, tel, url, email,或 password;否则会被忽略。它的值必须大于0。 如果未指定大小,则使用默认值20。
value控件的初始值. 此属性是可选的,除非type 属性是radio或checkbox

<button>

表示一个可点击的按钮,可以用在表单或文档其它需要使用简单标准按钮的地方

name button的名称,与表单数据一起提交
type button的名称,与表单数据一起提交

submit此按钮将表单数据提交给服务器。如果未指定属性,或者属性动态更改为空值或无效值,则此值为默认值
reset此按钮重置所有组件为初始值

valuebutton的初始值。它定义的值与表单数据的提交按钮相关联。当表单中的数据被提交时,这个值便以参数的形式被递送至服务器

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

推荐阅读更多精彩内容

  • 根元素 HTML 属性 元素包含 全局属性。 示例 <!DOCTYPE html> ... ... 注意事项 ...
    VinceWen阅读 588评论 0 0
  • HTML 常用标签 Iframe标签 HTML内联框架元素 表示嵌套的浏览上下文, 有效地将另一个HTML页面嵌入...
    YjjTT阅读 423评论 0 0
  • 空标签 含义:标签里面不能有内容。在 HTML 中,通常在一个空元素上使用一个闭标签是无效的。HTML中有以下空标...
    邹沁龙阅读 2,995评论 0 0
  • a 标签的用法 a 标签的属性 href 该属性指定超链接指向的URL,该属性值可以为网址,路径,伪协议,或者id...
    此人长期不在线阅读 407评论 0 0
  • HTML常用标签 a 标签 描述 HTML 元素(或称锚元素)可以创建通向其他网页、文件、同一页面内的位置、电...
    明明你也一样阅读 369评论 0 0