HTML常用标签

51 阅读1分钟

1. a 标签的用法

作用:跳转外部页面、跳转内部锚点、跳转到邮箱或电话。

属性href(hyper reference)、target

href取值: 跳转外部://google.com(无协议网址;优先选择,自动适配用http还是https);

跳转内部路径:/a/b/c 以及 a/b/c(http协议中/代表的不是电脑根目录,而是基于在哪里开的服务,哪里就是根目录)

伪协议:javascript : 代码 ;。代码为空时实现点击一个a标签什么也不发生。href取值为空时点击时页面刷新。取值为#时点击时页面回到顶部。

mailto : 邮箱 ;tel:手机号();id href=#xxx 。

target(用什么方式打开页面,国内一般 _blank 用新页面打开)

内置名字:_blank、_top、_parent、_self;

程序员命名:window的name ;iframe的name。

2. table标签:

table标签中只能有3个标签: thead、tbody、tfoot,tr(表示一行row)是下级标签,td、th是再下级标签。

示例结构(双头部):
  <table>
        <thead>
            <th>分类</th>
            <th>英语 单词</th>
            <th>翻译</th>
        </thead>
        <tbody>
            <tr>
                <th>名词</th>
                <td>dog</td>
                <td>狗</td>
            </tr>
            <tr>
                <th>动词</th>
                <td>play</td>
                <td>玩</td>
            </tr>
            <tr>
                <th>形容词</th>
                <td>hyper</td>
                <td>超级的</td>
            </tr>
        </tbody>
    </table>

3. img标签:

作用:发出get请求,展示一张图片。alt属性是图片加载失败时的文字说明,title属性是鼠标悬停时文字说明。注意永远不要让图片变形,一般只设置with、height 中的一个。事件:onload、onerror 监听图片是否加载成功。

初始化及图片响应式:

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        img {
            max-width: 100%;
        }
</style>