HTML常用标签

2021-10-13 245 阅读3分钟

a标签

特别常用，但是很多人不会用

属性

href(hyper reference)：超级链接，链接到某个网页（不只是网页，还可以是邮箱、电话、文件，具体取值见后）
target：决定在哪个窗口打开超级链接的网页，具体取值见后
download
rel=noopener：为了防止一个bug(学了js之后再回来补充)

注：在vscode里打开网页使用http-server -c-1的方法，记得在网址后添加路径

作用

跳转外部界面
跳转内部锚点
跳转到邮箱或电话

a的href取值

google.com
google.com
//google.com 一般选择这个
绝对路径/a/b/c ; 相对路径a/b/c
index.html; ./index.html
mailto:邮箱
tel:手机号
javascript:代码;
id 注：
在http中，绝对路径下的根目录与文件中的根目录不同，而是在哪里开启的服务，那里就是根目录，在我们的demo中，demo文件价就是根目录
伪协议中JavaScript后边的代码是可以执行的，冒号和分号不能忘；当我们需要一个a标签，但又不希望他做什么时（不希望它刷新页面，当在其中随便写个东西时，虽然看起来什么也没有发生，但是网页刷新了）就让代码的地方为空
当在标签中加入id（例如<h1 id = xxx>我的祖国</h1>，这时href="#xxx",点击它就会直接跳转到我的祖国处），可以跳转到制定标签

a的target取值

内置名字

_blank 在新的页面打开链接
_top 在最顶层窗口打开链接
_parent 在上一级窗口打开链接
_self 在当前页面打开链接比如：我在a.html文件写一个iframe窗口xxx,在b.html文件写一个iframe窗口yyy，在b.html文件引用xxx，然后在 c.html文件里引用yyy。当我在a.html里使用a标签，href=_top时，此时链接在 c.html建的窗口打开，即最上层的窗口。当href=_parent时，链接在yyy打开

程序员命名

window的name
iframe的name 引入iframe的代码

<div>
    <iframe src="a-target-iframe.html" frameborder="0"></ifrarme>
</div>

注：

针对程序员取名的第一个，比如当target="xxx"时，如果有一个窗口的名称叫xxx，那么就在这个窗口打开链接，如果没有这个窗口就创建一个叫这个名字的窗口并打开。尤其是当多个a标签中的链接都指向xxx的窗口时，这些链接就会都在这个名叫xxx的窗口打开
针对第二个，比如有两个iframe窗口xxx和yyy，那么就可以通过调用两个的名字在不同的窗口打开链接

table标签

thead
tbody
tfoot

    <table>
        <thead>
            <tr><th></th></tr>   /*tr指表的行，th指表的头 */
        </thead>
        <tbody>
            <tr><td>数据</td></tr>   /*tr指表的行，td指表的数据 */
        </tbody>
        <tfoot></tfoot>
    </table>

注： table 常用的标签主要是这三种，头部和尾部可以没有。不一定按这个顺序写但是html超强，当你忘记写的时候会帮你写上，当你不是这个是顺序的时候，他也会自己调节。

相关的样式

table - layout
table-collapse
table-spacing

注一般我们会通过表的样式去修改他的默认格式，因为实在太丑了,所以可以在reset时用以下的语法去修改 table-collapse:collapse;table-spacing:0px;

img标签

作用：发出get请求，展示一张图片--网页发出请求访问html，html发出get请求去访问图片
属性：alt/height/width/src
时间：onload/onerror
响应式：max-width:100%;
可替换元素：后边补充

注

alt，如果照片访问失败，用alt后边的字来提示用户
这里的height和width是自身属性，不是css样式。当height给定时，另一个会自适应，一般不同时给定两个，不然会变形
src 图片地址
onload 监听图片是否调取成功，成功则为onload，否则为onerror，那么就可以在图片失败时进行挽救，看以下代码

    <img id = "xxx" src = "images.png" alt = "狗子">
    <scrip>
        xxx.onload = function(){
            console.log("图片加载成功");
        }
        xxx.onerror = function(){
            cosole.log("图片加载失败");
            xxx.src = "404.png";
        }
    </scrip>

感想

html的标签具有很多功能，一些特殊的点只能多记忆、多使用。

友情链接：