标签的宽度_HTML常用标签

最新推荐文章于 2023-11-21 09:38:50 发布

weixin_39668470

最新推荐文章于 2023-11-21 09:38:50 发布

阅读量211

点赞数

文章标签：标签的宽度

本文链接：https://blog.csdn.net/weixin_39668470/article/details/112695781

版权

内容主要有a标签，table标签，img标签

1.a标签

属性值：href（含义为hyper+reference，超链接），href的取值一般有如下几种。

网址：

<a href="//baidu.com" >超链接</a>

路径：

<a href="a/b/c.html" >超链接</a>

a/b/c.html，含义为寻找a下面的b下面的c.html

伪协议：

<a href="javascript:;">点击后不会发生任何变化</a>

形式为"javascript:;" 冒号和分号间可以写js代码

id：

<a href="#xxx">在xxx页面打开</a>

可以跳转到指定页面，也可以充当锚点使用

属性值：target 可以取的值有： "_blank" => 在新的窗口打开

"_top" => 在顶级窗口打开

"_parent" => 在上一级窗口打开

"_self" => 在当前窗口打开

"_xxx" => 可以自己设置窗口名为xxx，在xxx打开

属性值：download

下载，现在一般不使用了

2.table标签

thead：头部

tbody：身体

tfoot：尾部

每个外部标签内部都含有 tr (table row，表的每一行)

tr 内可以有 th 和 td (table data)

table还有一些相关的样式：table-layout => 默认值有aotu和fixed，用来调整大小

border-spacing => 调整边距的大小

border-collapse => 将表格的边框合并起来

下面是一个示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table  { 
            width: 600px;
            table-layout: fixed;
            border-spacing: 10px;
            border-collapse: collapse;
        }
        td,
        th {
            border: 1px solid blue;
           
        }
    </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>61</td>
                <td>91</td>
                <td>85</td>
            </tr>
            <tr>
                <th>英语</th>
                <td>61</td>
                <td>91</td>
                <td>85</td>
            </tr>
        </tbody>
        <tfoot>
            <th>总分</th>
            <td>200</td>
            <td>200</td>
            <td>200</td>
        </tfoot>
 </table>
</body>
</html>

3.img标签

<img src="1.png" alt="图片" width="400" />

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

属性：alt => 图片加载失败时就会显示alt中的内容

src => 图片的来源，可以是网上和本地

height => 图片的高度，单独调整高的话宽度会自适应

width => 图片的宽度，单独调整高的话高度会自适应

事件：onload => 图片加载成功后会执行的事件
onerror => 图片加载失败后会执行的事件

响应式：max-width：100% => 设配手机所用，所有图片的最大宽度为100%

自己的感想：

HTML标签非常的多，我认为要记住它们不能是死记硬背，而是要在实践中去使用，当不断的重复使用之后，就会逐渐地记住了。

weixin_39668470

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
标签的宽度_HTML常用标签

内容主要有a标签，table标签，img标签1.a标签属性值：href（含义为hyper+reference，超链接），href的取值一般有如下几种。网址：<a href="//baidu.com" >超链接</a>路径：<a href="a/b/c.html" >超链接</a>a/b/c.html，含义为寻找a下面的b下面的c.html伪协议：&...
复制链接

扫一扫

标签的宽度_HTML常用标签

“相关推荐”对你有帮助么？