HTML常用标签

·  阅读 30

一.a标签的用法

1.a标签的作用有:

跳转到外部页面

跳转到内部锚点

跳转到邮箱或者电话

2.a标签的用法 首先需要知道a标签的属性

href:意思就是超级链接,可以跳转到任何写在a标签里面的网站链接

<a href="//baidu.com>超级链接</a>
复制代码

或者跳转到文件路径也可以

target:

<a href="//baidu.com"target="_blank">超链接</a>// 此处表示可以在新的页面打开
<a href="//baidu.com"target="_self">超链接</a>//此处表示默认在当前页面打开
<a href="//baidu.com"target="_top">超链接</a>//此处表示可以在最顶层页面打开
<a href="//baidu.com"target="_parent">超链接</a>//此处表示当前链接所在iframe的上一层打开
复制代码

3.img标签的用法:

img的作用是发出get请求,展示一张图片

img的属性有:

alt: height width src

<img src="dog.png" alt="一只狗子">//此处表示图片加载失败会显示一段文字来使用
<img height="400"  src="dog.png" alt="一只狗仔">//此处表示高度为400
<img width=“400”  src="dog.png" alt="一个大美女">//此处表示为宽度400
src //意思为图片的名字地址
复制代码

img响应式:为适应各种用户查看图片

max-width:100%
复制代码

4.table标签的用法:

table标签里面只可以必须有三个标签

thead 表的头部

tboay 表的内容

tfoot 表的底部

还有一些需要在其中相关的标签

tr 表示table里面的一行

th 表示一个表头

td 数据

相关样式:

table-layout; 调整表头内容的距离

border-collaps;意思是合并

border-spacing;意思是控制距离

以下为table示例:

table.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
        width: 600px;
        table-layout: auto;
        border-spacing: 0;
        border-collapse:collapse ;
        }
        td,
        th{
         border:1px solid red;
        }
    </style> 
</head>
<body>
    <table>
        <thead>
            <tr>
                <th></th>
                <th>小红</th>
                <th>小明</th>
                <th>小颖</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>数学</th>
                <td>61</td>
                <td>91</td>
                <td>85</td>
            </tr>
            <tr>
                <th>语文</th>
                <td>79</td>
                <td>82</td>
                <td>92</td>
            </tr>
            <tr>
                <th>英语</th>
                <td>100</td>
                <td>97</td>
                <td>87</td>
            </tr>
            
        </tbody>
        <tfoot>
            <tr>
                <th>总分</th>
                <td>200</td>
                <td>200</td>
                <td>200</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

复制代码

其他感想

道阻且长,行则将至!

分类:
前端
标签: