码迷,mamicode.com
首页 > Web开发 > 详细

HTML 常用的标签

时间:2018-04-05 22:31:55      阅读:336      评论:0      收藏:0      [点我收藏+]

标签:新窗口   group   rip   load   col   长度   john   AC   text   

1、iframe

常用于嵌套页面

<iframe src="https://baidu.com" frameborder="0"></iframe>

常用属性:

1)src,

iframe中打开的URL

2)frameborder

iframe默认样式有边框,可设置为0去除

3)name

iframe的名称,可与a结合使用

 

2、a

常用于创建到其他网页 \ 文件 \ 同一页面内位置 \ 电子邮件 \ 任何其他URL的超链接。

<a href="https://baidu.com">跳去百度</a>

常用属性:

1)href 为a的必须属性,它可以设置为

- URL,

如href="https//baidu.com"(绝对路径),或href="index.html"(相对路径)

- 锚点,

如href="#",点击后页面会滚动到顶部,不发起请求

- mailto:邮箱地址,

如href="mailto:123@qq.com",点击可拉起邮箱写邮件

- 查询参数

如href="?abc=123",点击后发起请求

- 伪协议,

如href="javascript: alert(1);" ,点击后会有一个内容为1的弹窗

如href="javascript: ;" ,点击后没有任何反应

2)target,

指定在何处显示链接的资源,它可以设置为

- _blank,新窗口打开

- _self,在自己当前页面打开

-  _parent,在父母的页面打开,如没有,则效果同_self

- _top,在祖宗页面打开,如没有,则效果同_self

- iframe name,在指定iframe窗口打开

<iframe src="https://baidu.com" frameborder="0" name="test"></iframe>
<a href="https://qq.com" target="test">在name为test的iframe里打开新页面</a>

3)download,

下载,建议使用download时,URL需有HTTP协议或HTTPS协议,如

<a href="https://qq.com" download>下载</a>

如果不写download,但http响应content-type为application/octet-stream,浏览器也会以下载的形式处理这个请求

 

3、form

表单 

<form action="a.html" method="post">
    <input type="submit" value="submit"/>
</form>

form里如果没有提交按钮且没有js辅助,则需要有提交按钮,才能进行提交

属性:

1)action

处理这个form的程序所在的目标路径

2)method

method默认是get,但一般会设置为post,用于提交表单内容

 

4、input

空标签,一般与form搭配使用

<form action="a.html" method="post">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="submit"/>
</form>


属性:

1)type

- button,按钮

- checkbox,多选框

- text,文本框

- password,密码输入框

- submit,提交按钮

- radio,单选框

2)name,定义元素名称,必须添加,不然无法提交数据

 

5、button

按钮

<button>按钮</button>

属性:

type,

- 默认为submit,可提交表单数据

- reset,重置所有组件为初始值

- button,没有默认行为

 

6、table

<table style="border-collapse:collapse">
  <colgroup>
    <col width=200>
    <col width=200>
  </colgroup>
  <tr>
      <th>a</th>
      <th>b</th>
  </tr>
  <tr>
     <td>John</td> 
     <td>Doe</td>
  </tr> 
  <tr>
    <td>Jane</td>
    <td>Doe</td> 
  </tr>
</table>

1)colgroup,设定边框长度

2) 样式border-collapse:collapse可消除表格间距

3)如漏写tbody,浏览器会自动补全

技术分享图片

 

HTML 常用的标签

标签:新窗口   group   rip   load   col   长度   john   AC   text   

原文地址:https://www.cnblogs.com/chandou/p/8719718.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!