html标签使用

Limyes
533 阅读6分钟

iframe标签

iframe常常用于在一个页面里再嵌套一个页面，一个基本用法可以是这样的：

<iframe src="http://qq.com"  frameborder="0"></iframe>

src="",里面的地址可以是一个url地址，比如http://qq.com这样的，也可以写一个相对路径，则会对应打开该目录文件。

frameborder="0"，iframe标签自己有默认的样式，使用frameborder可以去掉默认样式。

当和a标签的target搭配使用时：

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

点击a标签会发现本来应该在当前页面直接打开链接，此时新页面是在iframe里打开的，相当于新开了一个名叫qq的窗口，而a标签指定了要在名为qq的窗口里打开，所以才会这样，如果去掉iframe的name属性或者a标签的target则不会在iframe里打开。

a标签

a标签通常用于打开一个新页面，a标签也是一个按钮，但它和button的使用区别就是，如果你想在当前页面进行什么操作，建议使用button,如果想打开的是一个新页面，就选择使用a标签，a标签常见用法及属性:

<a href="" target="" download=""><a>

href属性：

取值如果是一个http协议地址，就直接跳转对应地址，如果是相对路径，就找到对应文件打开，如果是"//地址"这样的无协议地址，会跳转当前协议下的对应地址；

取值为空，会刷新一次当前页面；

取值为#，相当于一个锚点，会直接返回页面顶部；

取值为javascript语句，可以直接执行一段js语句，格式为：javascript:js语句;，如果想要点击a标签但是不做反应，那么href="javascript:;"。

target属性值分别有：

_blank，在新窗口打开地址；

_self，在当前窗口打开地址；

_parent，在父级窗口打开；

_top，在顶层窗口打开；

可以和iframe搭配使用了解什么是父级窗口和顶层窗口：

index.html

<iframe name="1"  src="#" frameborder="0">
      <a href="" target="_parent">xx</a>
      <iframe name="2" src="#" frameborder="0">
            <a href="" target="_top">ZZ</a>
      </iframe>
</iframe>
<a href="" target="">yy</a>

在以上的结构里，当点击name为1的iframe下的子元素a标签时，a标签指向的链接会在这个index.html所在的窗口里打开，即index.html是a标签的父级窗口；当点击name为2的iframe下的子元素a标签时，a标签指向的链接会在这个index.html所在的窗口里打开，即index.html是a标签的顶级窗口，也就是祖宗窗口，同时name为1的iframe是name为2的iframe的父级窗口；

 download属性，想要下载一个东西有两种方式：

一种是给a标签加download属性，就会下载链接指向的内容；

一种是在html头部里设置content-type:application/octet-stream；

form标签

a标签和form标签的区别就是a标签点击之后发起一个get请求，form标签提交后发起一个post请求，form标签也可以发起get请求，但是通常只用来发起post请求。除此之外，如果form标签里没有提交按钮，那么表单就无法提交，提交按钮有两种可能，一种是input标签设置type="submit",一种是没有设置type属性的button标签默认type为submit。

<form  action="" methord=""></form>

action的值,form信息会被提交到这个地址进行处理；

methord，form的提交方式，可以是get或者post；

input标签

<input  type=""  name="" value=""/>

type，设置input类型，常用的有text(文本框)，password(密码)，radio(单选框)，checkbox(复选框)，submit(提交)，button（按钮）；

input的type属性为radio和checkox时可以和label结合起来使用，使点击label里内容同时选中input,有两种方法：一种需要给label设置for属性，属性值为对应的input 的id；另一种直接把input标签包裹在label标签中，如下所示：

<input type="radio" id= "xxx"/><label  for="xxx"></label>
<label><input type="radio" /></label>

如果给input设置checked="checked"时将默认被选中；

name,提交时显示每一项信息代表的内容，如果不加name，form提交的信息将不会显示,checkbox的name设置为相同的时代表属于同一类别，radio的name设置为相同时，代表这些选项中只能选一个。

select标签

结构：

<select mutiple>
    <option  selected="selected"></option>
    <option  disabled></option>
</select>

给option设置selected="selected"时该项默认被选中，设置disabled时代表该项不可选，给select设置mutiple可以多选。

textarea标签

用来输入多行文本，默认用户可以自己拖动大小，设置样式resize:none可以禁止用户拖动

textarea有自己的属性cols和rows来规定可写区域的行数和列数，但一般用css来固定宽高。

table标签

table所有标签：

<table>//table标签
    <colgroup>
        <col></col>//单独设置每一列的样式，可以设置的有width,bgcolor，不经常用
    </colgroup>
    <thead><tr><th></th></tr></thead>//表头,th表示table header
    <tbody><tr><td></td></tr></tbody>//td表示table data
    <tfoot><tr><td></td></tr></tfoot>
</table>

img标签

两个必需属性：

src：规定了显示图像的URL，浏览器会对该URL发起Http Get请求。
alt ：则规定了图像的替代文本，在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。

< img>标签的onload/onerror/onabort事件，在什么情况下会被触发？

onload: 事件会在图像加载完成后立即发生。

onerror: 事件会在文档或图像加载过程中发生错误时被触发。

onabort: 事件会在图像加载被中断时发生。例如用户单击了浏览器的Stop按钮，或者在图像下载的过程中。


使用img标签发起跨域请求：

function setImageSrc() {
    var i = new Image();
    i.onload = function() {    // do sth.
    i.onload = null;//解除循环引用，防止内存泄漏
    i = null;
   }    i.onerror = function() {
        // do sth.
    }

    i.onabort = function() {
        // do sth.
    }
    i.src = "http://.../1.gif";
    //属性src赋值操作应该在事件绑定之后：否则，有可能出现图片已经加载完毕,但事件绑定尚未完成的情况。
}

怎样判断用户有没有设置禁止显示图片：

参考链接：http://www.cnblogs.com/hencehong/archive/2012/10/06/something_interesting_about_image.html




avatar
文章
阅读
粉丝