html常见标签
一、iframe 标签
http://www.w3school.com.cn/tags/tag_iframe.asp
HTML内联框架元素 <iframe> 表示嵌套的浏览上下文,有效地将另一个HTML页面嵌入到当前页面中。
<iframe id="inlineFrameExample" title="Inline Frame Example" width="300" height="200" src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik"></iframe>
常见属性:
1.height
以CSS像素格式HTML5,或像素格式HTML 4.01,或百分比格式指定frame的高度。
2.width
以CSS像素格式HTML5,或以像素格式HTML 4.01,或以百分比格式指定frame的宽度。
3.src
嵌套页面的URL地址。使用遵守同源策略的'about:blank'来嵌套空白页。
二、a 标签
属性见 MDN:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a
HTML <a> 元素(或称锚元素)可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。使用方法如下:
<a href="https://www.baidu.com">跳转到百度首页</a>
常见属性:
1.download HTML5
此属性指示浏览器下载 URL 而不是导航到它,因此将提示用户将其保存为本地文件。
2.href
包含超链接指向的 URL 或 URL 片段。
URL 片段是哈希标记(#)前面的名称,哈希标记指定当前文档中的内部目标位置(HTML 元素的 ID)。URL 不限于基于 Web(HTTP)的文档,也可以使用浏览器支持的任何协议。例如,在大多数浏览器中正常工作的file:、ftp:和mailto:。
注意: 可以使用 href="#top" 或者 href="#" 链接返回到页面顶部。这种行为是 HTML5 的特性。
3.target
该属性指定在何处显示链接的资源。 取值为标签(tab),窗口(window),或框架(iframe)等浏览上下文的名称或其他关键词。以下关键字具有特殊的意义:
_self: 当前页面加载,即当前的响应到同一HTML 4 frame(或HTML5浏览上下文)。此值是默认的,如果没有指定属性的话。
_blank: 新窗口打开,即到一个新的未命名的HTML4窗口或HTML5浏览器上下文
_parent: 加载响应到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文,此选项的行为方式与 _self 相同。
_top: IHTML4中:加载的响应成完整的,原来的窗口,取消所有其它frame。 HTML5中:加载响应进入顶层浏览上下文(即,浏览上下文,它是当前的一个的祖先,并且没有parent)。如果没有parent框架或者浏览上下文,此选项的行为方式相同_self
三、form 标签
属性见 MDN:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form
HTML <form>元素 表示了文档中的一个区域,这个区域包含有交互控制元件,用来向web服务器提交信息。
常用属性:
1.action
一个处理这个form信息的程序所在的URL。这个值可以被<button> 或者<input> 元素中的formaction 属性重载(覆盖)。
2.method
浏览器使用这种HTTP 方式来提交 form. 可能的值有:
post: 指的是 HTTP POST 方法 ; 表单数据会包含在表单体内然后发送给服务器.
get: 指的是 HTTP GET 方法; 表单数据会附加在 action属性的URI中,并以 '?' 作为分隔符, 然后这样得到的 URI 再发送给服务器. 当这样做(数据暴露在URI里面)没什么副作用,或者表单仅包含ASCII字符时,再使用这种方法吧。
这个值可以被<button> 或者<input>元素中的formmethod属性重载(覆盖)。
3.name
这个form的名字。在HTML4中,这个用法不被推荐(作为替代,应该使用id). HTML5中,一个文档中的多个form当中,name必须唯一而不仅仅是一个空字符串。
4.novalidate HTML5
这个布尔类型的属性指示了,当提交时form是否没有被验证。 如果这个属性没有指定 (因此这个 form 是验证通过的),这个默认设置可以被属于这个form的<button> 或者<input>元素中的 formnovalidate属性重载(覆盖)。
例子
<form action="">
<label for="GET-name">Name:</label>
<input id="GET-name" type="text" name="name">
<input type="submit" value="Save">
</form>
四、input / button
区别:是否为「空标签」,input是空元素,button不是
input 的属性见:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input
button 的属性见:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button
HTML<input>元素用于为基于Web的表单创建交互式控件,以便接受来自用户的数据; 可以使用各种类型的输入数据和控件小部件,具体取决于设备和user agent。
HTML <button> 元素表示一个可点击的按钮,可以用在表单或文档其它需要使用简单标准按钮的地方。默认情况下,HTML按钮的显示样式接近于 user agent 所在的宿主系统平台(用户操作系统)的按钮, 但你可以使用CSS来改变按钮的样貌。
表单<input>类型
<input>的工作方式因其类型属性的值而有很大差异,不同的类型会在各自的参考页中进行介绍。如果未指定此属性,则采用的默认类型为 text
可用的值包括:text, checkbox,radio,number,password,email, hidden等
注意:<button>元素比 <input> 元素更容易使用样式。你可以在元素内添加HTML内容(像<em>、<strong> 甚至<img>),以及::after 和 ::before 伪元素来实现复杂的效果,而 <input> 只支持文本内容。
五、table 标签
属性见:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table
HTML的table 元素表示表格数据 — 即通过二维数据表表示的信息。
一个简单的table:
<table>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
</table>
其它表格相关的HTML元素: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>;
可能特别有用的关于设定表格元素样式的 CSS 属性:
width 控制表格的宽度;
border, border-style, border-color, border-width, border-collapse, border-spacing 控制单元格边框,规则和框架方面;
text-align 和vertical-align 定义文本和单元格内容的对齐方式。