必看的 html 常用标签（二）

没故事的燕同学
931 阅读2分钟

1.jpg

作为了一个前端 帅小伙/靓姑娘，开发的时候总是会和 HTML 标签打交道。今天介绍的还是干货，纯干的那种，干柴烈火，呃呃呃那就是——HTML的常用标签，赶快来认识它们吧。

在开始之前，先给大家介绍一下需要了解的单词！ 2.png 助记栏可以帮助大家记忆，读音可以参照欧陆词典。

a 标签的用法

1. 首先我们先写一个a标签

<a href="超链接的网址">超链接说明</a>

herf ： hypertxtx refrence（超文本引用）

2. 效果

效果

3. 用法说完了，说说a的target

target 指定在哪个页面打开超链接，大家可以取感受一下这些用法。国内的前端都会再空白页打开窗口 _blank，国外前端大多都会选择的会在当前页面打开。

<a href="//baidu.com" target="_blank">百度</a>  在空白页面打开
<a href="//baidu.com" target="_self">百度</a>  当前页面打开
<a href="//baidu.com" target="_parent">百度</a> 当前页面的父级窗口打开
<a href="//baidu.com" target="_top">百度</a> 当前页面的顶级窗口打开

img 标签的用法

<img width="600" height="700" src="OIP.jpg" alt="别走">

  1. 作用：发出get请求，展示一张图片

  2. 属性 alt/height/wigth/src

    • alt 在找不到图片的时候显示

    • height和wight 图片的高和宽，后面不用写px,因为默认只支持像素,

      当我们只写其中一个的时候，另一个就会自适应的，

      如果都写就会失真。

    • src source 来源的意思

    前端工程师的底线 —— 永远不能让图像变形

  3. 事件 onlad/onerror

简而言之就是，如果img标签的图片加载不成功，后台会显示什么，具体用法可参考下图：

3.png

  1. 响应式 就是让手机用户也可以正常访问， 加上这货 max-width:100%， 写到style里面，方便管理，如下图所示：

table 标签的用法

  1. 语法：table 里面只能有3 个标签 ,头身体尾部
    • thead
    • tbody
    • tfoot
<body>
    <table>
        <thead>
            <tr>                     // table row 列表行
                <th>英语</th>
                <th>翻译</th>
                <th>读音</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>hyper</td>       // table date 列表数据 
                <td>超级</td>
                <td>害怕</td>
            </tr>
        </tbody>
        <tfoot></tfoot>
    </table>
</body>
  1. table的相关样式
    • able-layout: fixed;
    • table-layout: auto;
    • border-collapse: collapse; //控制border是否合并，默认是不合并的
    • border-spacing: 60px; //控制border之间的距离
    • 实例效果如下： auto会随时这字数等其他属性自适应，而fixed 是尽量平均。
    table {
        table-layout: auto; 自动
					table-layout: fixed; 尽量平均
    }
    这个是用fixde做的，三个红色区域的像素不会随着名字的字节数发生改变，但是如果你用auto,就会有发现不一样。

其他感想

刚开始学习html的大家，只要认真做好笔记就好，把常用标签整明白，在做几个网页面，相信大家一定可以游刃有余的，下节课我将会分享一个网站的项目搭建，我们下期再会！

avatar
文章
阅读
粉丝