HTML常用标签

2019-04-28  本文已影响0人  明明你也一样

HTML常用标签

a 标签

描述

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

属性

href

包含超链接指向的 URL 或 URL 片段。

URL 片段是哈希标记(#)前面的名称,哈希标记指定当前文档中的内部目标位置(HTML 元素的 ID)。URL 不限于基于 Web(HTTP)的文档,也可以使用浏览器支持的任何协议。例如,在大多数浏览器中正常工作的file:、ftp:和mailto:。

target

该属性指定在何处显示链接的资源。

<a target="_blank" href="http://qq.com">QQ</a> 在新标签页打开
<a target="_self" href="http://qq.com">QQ</a> 在当前标签页打开
<a target="_parent" href="http://qq.com">QQ</a> 在父标签页打开
<a target="_top" href="http://qq.com">QQ</a> 在最上层标签页打开

a标签可以与iframe标签配合使用

<a target=xxx href="http://qq.com">QQ</a>
<iframe name=xxx src="#" frameborder="1"></iframe>

a标签target属性指定在name属性为xxx的iframe标签处显示链接的资源。

download

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

特殊用法

<a href="#" download>下载</a> download属性让浏览器下载这个链接导向的资源。
<a href="javascript:;">啥事儿都不干</a> 伪协议,点击不起任何作用效果的链接。
<a href="#">link</a> 点击后页面锚点变成#,并且页面滚动到顶部
<a href="/index.html"></a> 向服务器发起GET请求,跳转链接
<a href="?name=xxx"></a> 向服务器发起GET请求,添加查询字符串

更多属性详情可以访问MND查看。

iframe 标签

描述

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

实际上就是页面里面嵌套一个页面,并且有默认宽高 例子:jsbin

属性

name

嵌入的浏览上下文(框架)的名称。该名称可以用作<a>标签、<form>标签的target属性值,或<input> 标签和 <button>标签的formtaget属性值。

height

以CSS像素格式HTML5,或像素格式HTML 4.01,或百分比格式指定frame的高度。

width

以CSS像素格式HTML5,或以像素格式HTML 4.01,或以百分比格式指定frame的宽度。

src

嵌套页面的URL地址。使用遵守同源策略的 'about:blank' 来嵌套空白页。

更多属性详情可以访问MND查看。

form 标签

描述

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

是唯一提交信息到服务器的方法(一般不会将method设置为GET)
form标签一般是POST请求,a标签一般是GET请求
一般与form标签一起使用

需要注意的是如果没有提交按钮则无法提交表单 <input type="submit" value="提交">

<form action="">
        用户名:<input type="text" name="username">
        密码:<input type="password" name="password">
</form>

属性

method

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

action

一个处理这个form信息的程序所在的URL。

更多属性详情可以访问MND查看。

input 标签

描述

HTML <input> 元素用于为基于Web的表单创建交互式控件,以便接受来自用户的数据; 可以使用各种类型的输入数据和控件小部件,具体取决于设备和user agent。

一般写法:<input type="checkbox" id="xxx"><label for="xxx">选我</label> for和id是一对儿。
不过常用这样写:<label><input type="checkbox">选我</label> 把input标签包起来,就能达到点击文字也能选中标签的效果。

属性

name

控件的名字,与表单一起提交。

需要特别注意的是,如果没有name属性,那么在表单提交时,input值就不会出现在请求里。

type

要呈现的控件类型。

可用的值包括:


placeholder

提示用户输入框的作用。用于提示的占位符文本不能包含回车或换行。仅适用于当type 属性为text, search, tel, url or email时; 否则会被忽略。

value

控件的初始值. 此属性是可选的,除非type 属性是radio或checkbox。

checked

如果该元素的type属性的值为radio或者checkbox,则该布尔属性的存在与否表明了该控件是否是默认选择状态.
<input type="checkbox" id="xxx" checked>

disabled

这个布尔属性表示此表单控件不可用。 特别是在禁用的控件中, click 事件 将不会被分发 。 并且,禁用的控件的值在提交表单时也不会被提交。如果 type 属性为 hidden,此属性将被忽略。

更多属性详情可以访问MND查看。

button 标签

描述

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

如果这样写:<button>点我</button> 浏览器默认它是个submit按钮,如果不写type属性,可以自动升级为submit。

type

button的类型。可选值:

name

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

value

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

更多属性详情可以访问MND查看。

table 标签

描述

table标签只用来写表格!
table标签只用来写表格!
table标签只用来写表格!

<table border=1>//thead、tbody、tfoot都可以省略
    <colgroup>
        <col width=100>
        <col bgcolor=red width=200>
        <col width=100>
        <col width=70>
    </colgroup>
    <thead>
        <tr>
            <th>项目</th><th>学号</th><th>班级</th><th>姓名</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>#</th><td></td><td></td><td></td>
        </tr>
        <tr>
            <th>#</th><td></td><td></td><td></td>
        </tr>    
    </tbody>
    <tfoot>
        <tr>
            <th>平均分</th><td></td><td></td><td></td>
        </tr>
    </tfoot>
</table>

看图最直接

table

更多属性详情可以访问MND查看。

上一篇下一篇

猜你喜欢

热点阅读