HTML整理 （a,table,img）

xiaoznz
440 阅读4分钟 
上次说了一堆简单html标签，这次说一些比较难的html标签，并作一些延伸

a标签

属性
  • href
  1. href可以跟一个网址，网址可以写绝对地址，也可以写相对地址
    <a href="http://www.google.com">http</a>
    <a href="https://www.google.com">https</a>
    <a href="//google.com">相对路径</a>
    注意，写相对路径的时候，是相对于当前的地址做的，如果是本地打开，则相对路径无效，浏览器会卡死
  1. href还可以写一个路径，比如直接写上/a/b或者a/b 这里遵循的规则和shell中相同，如果是/开头，那么直接就是从根目录开始，如果是./或者文件名开头，那么就是相对当前文件夹开始
  2. href可以用来做JavaScript的代码
    下列的代码可以是的a标签根据JS的内容进行输出
<a href="javascript:alert('hello');">点击我输出</a>

这种用法，在实际开发中，一般是为了做一个伪协议，为了做一个什么事情都不做的a标签而设计

<a href="javascript:;">
  1. href可以用来跳转id。一般网页会设置很多锚点。为了跳转锚点，就需要a标签的href=#anchor来实现跳转
  2. 其他小用法，href还可以写mailto来实现邮箱和tel来实现拨号
<a href="mailto:779740337@qq.com">发邮件</a>
<a href="tel:13777332025">打电话</a>
  • target target主要是用来规定跳出的页面的管理，指定在哪个窗口打开 有以下几个值：_blank, _self, _top, _parent 接下来用代码展示各种效果
index.html
<div>我是一切的爸爸</div>
<iframe src="./iframe01.html" width="500" height="500"></iframe>

iframe01.html
<div>我是iframe01</div>
<iframe src="./iframe02.html" width="300" height="300"></iframe>

iframe02.html
<div>我是iframe02</div>
    <a href="./index.html " target="_blank">去index(blank)</a>
    <a href="./index.html " target="_top">去index(top)</a>
    <a href="./index.html " target="_parent">去index(parent)</a>
    <a href="./index.html " target="_self">去index(self)</a>
    <a href="./iframe01.html" target="_self">去iframe01(self)</a>
    <a href="./iframe01.html" target="_parent">去iframe01(parent)</a>
    <a href="./iframe01.html" target="_top">去iframe01(top)</a>
    <a href="./iframe01.html" target="_blank">去iframe01(blank)</a>

根据所有按钮测试之后，发现各个属性的效果如下：
_blank: 创建一个空白页面，重新进行渲染
_self:在当前本页面进行重新渲染
_top:在包裹它的最外层网页进行重新渲染
_parent:在它的外层父节点进行渲染
target还可以由我们自己命名。我们可以给它取名字xiao,那么当a被点击之后，会搜索，如果有叫xiao的网页，就对他进行渲染，如果没有，就创建一个进行渲染

  • download 作用：下载当前页面 但是有很多浏览器并不支持（手机浏览器很多不支持）
  • rel=noopener 这是给网页的安全性用的，如果target="_blank"的时候，后一个网页的window上面会有opener属性，这样后一个网页就有了前一个页面的控制权，所以需要在a标签中加上rel=noopener提高安全性 当我们加上代码
<a href='https://www.baidu.com' target="_blank" rel=noopener>

此时安全问题得到了解决

作用
  1. 跳转外部页面
  2. 跳转内部锚点
  3. 跳转到邮箱或电话等

iframe标签

作用

在当前页面嵌套一个页面，不过现在已经很少用了

table标签

跟table相关的，有一下标签：table,thead，thead,tbody,tfoot,tr,td,th
对于他们的相关属性，这里只说两个：rowspan,colspan 这两个分别用来将一个格子占用几个列或者几个行

<table>
        <thead>
            <tr>
                <th>名字</th>
                <th>年纪</th>
                <th>武功</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>杨过</td>
                <td>18</td>
                <td rowspan="2">九阴真经</td>
            </tr>
            <tr>
                <td>小龙女</td>
                <td>12</td>
            </tr>
            <tr>
                <td>郭靖</td>
                <td>24</td>
                <td>降龙十八巴掌</td>
            </tr>
            <tr>
                <td>黄蓉</td>
                <td>22</td>
                <td>弹指神通</td>
            </tr>
        </tbody>
    </table>


他们互相之间使用的方法见上述代码和图 对table，需要记住三个属性

  • table-layout:设置表格布局用什么算法，默认的值是auto,也就是表格的宽度和长度取决于它包含的内容
  • border-collapse:设置表格的边框之间是否有缝隙
  • border-spacing:设置表格之间缝隙的宽度

img标签

作用

一定要记住： 它的作用是发送一个get请求，然后通过页面渲染一张图片

属性

alt,height,width,src

这边需要注意的是，一个优秀的前端，不应该找img变形，所以最好的对图片的处理方式是，只写width的宽度，不写height的宽度

事件

onload,onerror
这是防止图片出错的挽救方法，当图片onerror的时候，给一张备用的图片

<img src="狄仁杰123.png" alt="这是一个狄仁杰" onerror="this.src='狄仁杰.png'">

此时虽然第一个地址是错误的，但是因为有一个补救的onerror图片，还是显示出了图片

响应式

只需要在css中对img加上一句话,就可以实现响应式布局。max-width=100%

可替换元素

简单的来说，就是这个元素的内容和很多展示效果都不是css来决定的，它们的外观的渲染，都是独立于css之外的。 典型的可替换元素有： <iframe，<ideo>,<embed>,<img> 有些在特定的条件下也是可替换的：<option>,<audio>,<canvas>,<object>,<applet>
这次就这么多，下次再见！

avatar
文章
阅读
粉丝