HTML常用标签
回复数(0) 浏览数(55)
{{topic.upvote_count || 0}} 编辑 回复

a标签

HTML 元素(或称锚元素)可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接,简单点说就是点击a标签可以跳转到新的页面或者当前页面中的某个部分。a标签
鼠标悬停在a标签上时箭头会变成一个手型,表示可以点击,这个是a标签的一个默认样式

a标签的常用属性

  • href
    链接的目标 URL,如果是跳转到新的页面,属性值就是页面的url,如果是当前页面中的某个部分,属性值则是#号加目标元素的id,这两种方式也可以组合使用,就是在页面的url后面加上#号和要定位的元素id

  • target
    定义打开页面的方式,一般是在跳转页面的时候用到

  1. _blank:表示在新的窗口中打开新页面,如果是要定位到当前页面的某个部分时,如果target值是_blank时,点击a标签只会开新窗口打开当前页面,不会定位到目标位置
  2. _self:表示在当前窗口中打开新页面,是target的默认值
  3. _parent:表示在当前窗口的父窗口打开新页面,若页面中有两个嵌套的iframe窗口,在里层iframe窗口触发时,会用外层的iframe窗口会打开新页面
  4. _top:表示在当前页面的顶级窗口中打开新页面,如果当前页面中有多个嵌套的iframe窗口,即使是最底层的iframe页面,也会将当前页面跳转到新页面

    此外,若target的值是以上4个之外的值时,正常情况下看到的是_blank的效果,就是在新窗口打开页面,但是如果有两个a标签的target属性的值是一样的,先点击第一个a标签后,再点击第二个a标签时,会通过第一个a标签打开的窗口打开新页面。
    因为如果target值是自定义的时候,会以自定义的值为窗口名称来打开一个新窗口,如果已经存在这个名称命名的窗口,则在该窗口打开新页面。

  • download
    a标签添加了download属性后点击a标签时可以下载href所指向的文件,但是不支持下载跨域的文件
    关于跨域 浏览器同源政策

相关资料

javascript:void(0)和javascript:;的用法
标签中 href 和 onclick 的区别

img标签

用于在页面中显示图片

img标签常用属性

  • src
    设置图像的URL,浏览器会对该URL发起get请求

  • alt
    在图片加载失败或者用户禁止加载图片的时候,会在浏览器中显示的信息

  • title
    在鼠标悬停在img标签上时,显示的信息,但是目前在手机上用处不大

img标签相关事件

  • onload事件
    会在图图加载完成后立即发生,若需要在图片加载完后做一些处理,就可以在onload中处理(也可以通过img对象的complete属性来判断图片是否加载结束)
    在IE6中,如果图片是多帧的gif,会触发多次的onload事件。因此,为避免这种情况,需要在onload事件处理函数中解除事件函数

    img.onload = function(){
    img.onload=null;
    img = null;
    }

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

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

需要注意的是在绑定img的相关事件的时,若图片先加载结束(不管是否成功),再绑定事件,是不会触发事件的,所以建议先绑定事件后再设置img的src属性

相关资料

标签的方方面面

table标签

以表格的方式展示数据

<table>
<caption>标题</caption>
<thead>
<tr>
<th>cell 1-1</th>
<th>cell 1-2</th>
<th>cell 1-3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>cell 4-1</td>
<td>cell 4-2</td>
<td>cell 4-3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>cell 2-1</td>
<td>cell 2-2</td>
<td>cell 2-3</td>
</tr>
</tbody>
</table>

显示效果
显示效果

  • caption标签可以设置表格的标题
  • thead标签用于显示表格中的表头信息
  • tfoot标签用于显示表格中的页脚(脚注或表注)
  • tbody标签用于显示表格中的主体内容
  • tr标签是在thead、tfoot、tbody标签中使用的,用于显示表格每行的内容
  • th标签是在tr标签中使用的,一般用在thead的tr标签中,显示列标题,标签内的文字默认居中,加粗
  • td标签是在tr标签中使用的,用于显示表格行中每个单元格的内容
    th和td标签都有colspan和rowspan属性
    colspan 属性规定单元格可横跨的列数。

    <tbody>
    <tr>
    <th colspan="2">性别</th>
    </tr>
    <tr>
    <td>男</td>
    <td>女</td>
    </tr>
    </tbody>

    跨列
    跨列

    rowspan 属性规定单元格可横跨的行数。

    <tbody>
    <tr>
    <td rowspan="2">性别</td>
    <td>男</td>
    </tr>
    <tr>
    <td>女</td>
    </tr>
    </tbody>

    跨行
    跨行

  • 此外,表格中每个单元格默认是有间距的,可以通过设置table标签的css属性来取消间距

    border-spacing: 0;
    border-collapse: collapse;    
  • 每个table标签中只能有一个thead和tfoot标签,但是tbody可以有多个

相关资料

精通HTML表格的使用(阮一峰)

其他感想

要学的东西好多啊啊啊啊啊

我爱学习
我爱学习

{{topic.upvote_count || 0}}

a标签

HTML 元素(或称锚元素)可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接,简单点说就是点击a标签可以跳转到新的页面或者当前页面中的某个部分。a标签
鼠标悬停在a标签上时箭头会变成一个手型,表示可以点击,这个是a标签的一个默认样式

a标签的常用属性

  • href
    链接的目标 URL,如果是跳转到新的页面,属性值就是页面的url,如果是当前页面中的某个部分,属性值则是#号加目标元素的id,这两种方式也可以组合使用,就是在页面的url后面加上#号和要定位的元素id

  • target
    定义打开页面的方式,一般是在跳转页面的时候用到

  1. _blank:表示在新的窗口中打开新页面,如果是要定位到当前页面的某个部分时,如果target值是_blank时,点击a标签只会开新窗口打开当前页面,不会定位到目标位置
  2. _self:表示在当前窗口中打开新页面,是target的默认值
  3. _parent:表示在当前窗口的父窗口打开新页面,若页面中有两个嵌套的iframe窗口,在里层iframe窗口触发时,会用外层的iframe窗口会打开新页面
  4. _top:表示在当前页面的顶级窗口中打开新页面,如果当前页面中有多个嵌套的iframe窗口,即使是最底层的iframe页面,也会将当前页面跳转到新页面

    此外,若target的值是以上4个之外的值时,正常情况下看到的是_blank的效果,就是在新窗口打开页面,但是如果有两个a标签的target属性的值是一样的,先点击第一个a标签后,再点击第二个a标签时,会通过第一个a标签打开的窗口打开新页面。
    因为如果target值是自定义的时候,会以自定义的值为窗口名称来打开一个新窗口,如果已经存在这个名称命名的窗口,则在该窗口打开新页面。

  • download
    a标签添加了download属性后点击a标签时可以下载href所指向的文件,但是不支持下载跨域的文件
    关于跨域 浏览器同源政策

相关资料

javascript:void(0)和javascript:;的用法
标签中 href 和 onclick 的区别

img标签

用于在页面中显示图片

img标签常用属性

  • src
    设置图像的URL,浏览器会对该URL发起get请求

  • alt
    在图片加载失败或者用户禁止加载图片的时候,会在浏览器中显示的信息

  • title
    在鼠标悬停在img标签上时,显示的信息,但是目前在手机上用处不大

img标签相关事件

  • onload事件
    会在图图加载完成后立即发生,若需要在图片加载完后做一些处理,就可以在onload中处理(也可以通过img对象的complete属性来判断图片是否加载结束)
    在IE6中,如果图片是多帧的gif,会触发多次的onload事件。因此,为避免这种情况,需要在onload事件处理函数中解除事件函数

    img.onload = function(){
    img.onload=null;
    img = null;
    }

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

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

需要注意的是在绑定img的相关事件的时,若图片先加载结束(不管是否成功),再绑定事件,是不会触发事件的,所以建议先绑定事件后再设置img的src属性

相关资料

标签的方方面面

table标签

以表格的方式展示数据

<table>
<caption>标题</caption>
<thead>
<tr>
<th>cell 1-1</th>
<th>cell 1-2</th>
<th>cell 1-3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>cell 4-1</td>
<td>cell 4-2</td>
<td>cell 4-3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>cell 2-1</td>
<td>cell 2-2</td>
<td>cell 2-3</td>
</tr>
</tbody>
</table>

显示效果
显示效果

  • caption标签可以设置表格的标题
  • thead标签用于显示表格中的表头信息
  • tfoot标签用于显示表格中的页脚(脚注或表注)
  • tbody标签用于显示表格中的主体内容
  • tr标签是在thead、tfoot、tbody标签中使用的,用于显示表格每行的内容
  • th标签是在tr标签中使用的,一般用在thead的tr标签中,显示列标题,标签内的文字默认居中,加粗
  • td标签是在tr标签中使用的,用于显示表格行中每个单元格的内容
    th和td标签都有colspan和rowspan属性
    colspan 属性规定单元格可横跨的列数。

    <tbody>
    <tr>
    <th colspan="2">性别</th>
    </tr>
    <tr>
    <td>男</td>
    <td>女</td>
    </tr>
    </tbody>

    跨列
    跨列

    rowspan 属性规定单元格可横跨的行数。

    <tbody>
    <tr>
    <td rowspan="2">性别</td>
    <td>男</td>
    </tr>
    <tr>
    <td>女</td>
    </tr>
    </tbody>

    跨行
    跨行

  • 此外,表格中每个单元格默认是有间距的,可以通过设置table标签的css属性来取消间距

    border-spacing: 0;
    border-collapse: collapse;    
  • 每个table标签中只能有一个thead和tfoot标签,但是tbody可以有多个

相关资料

精通HTML表格的使用(阮一峰)

其他感想

要学的东西好多啊啊啊啊啊

我爱学习
我爱学习

55
回复 编辑