HTML常用标签
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. 可能的值有:
- post: 指的是 HTTP POST 方法 ; 表单数据会包含在表单体内然后发送给服务器.
- get: 指的是 HTTP GET 方法; 表单数据会附加在 action 属性的URI中,并以 '?' 作为分隔符, 然后这样得到的 URI 再发送给服务器. 当这样做(数据暴露在URI里面)没什么副作用,或者表单仅包含ASCII字符时,再使用这种方法吧。
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
要呈现的控件类型。
可用的值包括:
-
text
:单行字段文本输入。 -
password
:一个值被遮盖的单行文本字段。使用 maxlength 指定可以输入的值的最大长度 。 -
checked
:复选框。必须使用 value 属性定义此控件被提交时的值。使用 checked 属性指示控件是否被选择。 -
radio
:单选按钮。必须使用 value 属性定义此控件被提交时的值。使用checked 必须指示控件是否缺省被选择。可以使用相同的name实现单选效果。 -
submit
:用于提交表单的按钮。
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的类型。可选值:
- submit: 此按钮将表单数据提交给服务器。如果未指定属性,或者属性动态更改为空值或无效值,则此值为默认值。
- reset: 此按钮重置所有组件为初始值。
- button: 此按钮没有默认行为。它可以有与元素事件相关的客户端脚本,当事件出现时可触发。
- menu: 此按钮打开一个由指定<menu>元素进行定义的弹出菜单。
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查看。