HTML常用标签（a/img/table）

红太狼 2024-04-17 05:26 12阅读 0赞

简单回顾：

### a标签 ###

target属性的值

\_blank：新开一个页面打开`<a>`指向的页面  
\_self：在自身窗口打开`<a>`指向的页面  
\_top：在最顶级的窗口打开`<a>`指向的页面  
\_parent：在父元素的窗口打开`<a>`指向的页面

比较：\_self \_top \_parent  
这三个值，要在嵌套关系下理解

例子：
    在index1.html文件中，使用<ifram>嵌入index2.html文件，
    在index2.html文件中，使用<ifram>嵌入index3.html文件，
    index3.html中有一个`<a>`
    当`<a>`标签的target值为 _self 时，打开`<a>`指向的页面的窗口是index3.html本身
    当`<a>`标签的target值为 _parent 时，打开`<a>`指向的页面的窗口是index2.html，即父元素
    当`<a>`标签的target值为 _topf 时，打开`<a>`指向的页面的窗口是index1.html，即嵌套关系中，最顶级的元素

2.a标签中设置href属性，没有赋任何值  
`<a href></a>`  
点击a标签会刷新页面，回到顶部。

3.a标签中设置href属性，赋值href="\#"  
`<a href='#'></a>`  
点击a标签后会回到页面顶部，但不刷新页面。

4.a标签中设置href属性，其中赋值使用javascript语句，另外设置onclick点击事件  
`<a href='javascript:viod(0)' onclick="go()"></a>`  
javascript:viod(0)语句控制页面不进行跳转也不进行刷新，点击之后也不会回到页面顶部，使用代码阻止了href属性的默认跳转链接行为。  
a标签点击后会执行onclick中设定函数go()。

5.a标签中设置href属性，但赋值使用javascript语句，另外设置onclick点击事件  
`<a href='javascript:return false' onclick="go()"></a>`  
此方法与上一种方法实现效果类似，一样是href属性中执行js代码，使用return false告诉浏览器要阻止href属性的默认行为.  
如跳转链接，刷新页面，回到顶部等，此方法依然可执行go()函数。

6.a标签中设置href属性但不进行赋值，设置onclick点击绑定事件  
`<a href onclick="go()"></a>`  
点击a标签，会触发点击绑定事件，执行函数go()的相关操作，但同时也会由于href的设置进行页面的刷新.  
当执行绑定事件的操作函数，在完成之前或者执行过程中进行了页面刷新，对应的页面结果也会被重新刷新，并且回到页面顶部。

### img标签 ###

1.`<img>`的作用  
会发起一个 get 请求，请求一张图片，并展示在页面上。

2.`<img>`的属性

src ：src（source），属性的值时请求的图片的路径。

width&height：设置图片的宽度、高度，这是标签的一个属性，而不是CSS样式。  
注意：如果只设置其中一个属性，图片会响应式保持原本的宽高比例；如果同时设置两个属性，有可能图片比例会被破坏。  
alt：替代文本。当请求失败的时候该属性的值会出现在原本图片的位置。

3.`<img>`的相关事件

onload：当标签请求成功，图片成功加载后触发该事件。  
onerror：当标签请求失败，图片无法加载后触发该事件。通常用于：目标图片请求失败后，转而请求一个报错提示图片。

4.`<img>`的响应式  
通过添加样式max-width：100%，请求的图片能够适应不同大小的窗口，始终填充满窗口。

### table标签 ###

`<thead><tbody><tfoot>`:

这3个标签对应了表头、表体、表页脚。

这3个标签的顺序如果打乱了浏览器渲染的时候也会从 thead 开始渲染。