html常见标签

2019-03-13  本文已影响0人  vivienYang2019

一、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

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

一个简单的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 控制表格的宽度;

borderborder-styleborder-colorborder-widthborder-collapseborder-spacing 控制单元格边框,规则和框架方面;

margin 和padding 设定特定的单元格内容样式;

text-align 和vertical-align 定义文本和单元格内容的对齐方式。

上一篇 下一篇

猜你喜欢

热点阅读