[TOC]

主要介绍3个标签

  1. a标签

a标签主要是用于打开对应内容
主要用法：

  • 附带超链接

句式： <a href='//baidu.com'>打开百度</a> —点击打开对应网站

  • 链接对应文件

句式： <a href='/a/img.jpg'>打开图片</a> —点击打开对应图片

  • 还有一些对应的伪协议

常用句式： <a href='mailto:11111111@qq.com'>发邮件</a> —点击给对应邮箱发送邮件
<a href='tel:18622221111'>拨打电话</a> —点击拨打对应电话
<p>1</p><br /> <p id='xxx'>2</p><br /> <p>3</p><br /> <a href='#xxx'>点击找到xxx</a> —点击直接跳转到对应内容所在位置

  1. img标签

img标签主要用于给网页插入图片
主要用法：

  • <img src='xxx.jpg' alt='xxx图片'>

src用于指定加载哪张图片
alt用于给图片加注释，一般在图片加载失败后显示，方便给客户辨认哪张图片加载失败
同时可以给图片使用height或width设置宽高，但是需要注意不能同时设置宽和高，除非你经过仔细的计算，不然会导致图片变形，一般只设置一项，另外一项就会自动适应

  • ``` xxx图片

    ```
    onload和onerror两个事件都是用于在加载成功后反馈信息，并可以在产生对应结果之后进行后续跳转

  1. table标签

table标签主要用于制作表格
主要用法：

  • ``` 

      <thead><br />            <tr><br />                <th>表头1</th><br />                <th>表头2</th><br />                <th>表头3</th><br />            </tr><br />        </thead><br />        <tbody><br />            <tr><br />                <td>内容1</td><br />                <td>内容2</td><br />                <td>内容3</td><br />            </tr><br />        </tbody><br />        <tbody><br />            <tr><br />                <td>内容4</td><br />                <td>内容5</td><br />                <td>内容6</td><br />            </tr><br />        </tbody><br />        <tfoot><br />            <tr><br />                <td>页尾1</td><br />                <td>页尾2</td><br />                <td>页尾3</td><br />            </tr><br />        </tfoot><br />    </table> ``` <br />table表格分为三个部分：thead头、tbody身体、tfoot页脚，3个部位都可以拥有多个，先后顺序也可以打乱，不影响展示效果<br />一般用到的3个主要样式：
    1. table-layout 设置表格间距格式，一般默认选择auto
    2. border-collapse 表格中间的间隙合并，因为默认样式表格中间是有间隙的，一般选择collapse
    3. border-spacing 设置表格之间的间隙，一般为0px