HTML标签、超链接、表格标签

最新推荐文章于 2023-08-14 20:32:48 发布

uzi2200

最新推荐文章于 2023-08-14 20:32:48 发布

阅读量235

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/uzi2200/article/details/108077239

版权

HTML标签
图像标签
img标签用于在网页中插入一副图像

<!-- 不要写带盘符的绝对路径, 因为以后项目更多的是发不到Linux系统,而Linux系统是没有盘符的, 所以到时候路径就是错的!
 -->
<img src="imgs/meinv.jpg"  width="50%"  border="10px"/>

其中 src属性用于指定图片的url地址(即图片的所在路径)
width属性:用于指定图片的宽度, 单位可以是px(像素), 或者 %(百分比)
height属性:用于指定图片的高度, 单位可以是px(像素), 或者 %(百分比)

超链接
<a>标签用于在网页中创建一个超链接
点击超链接后可以跳转到另外一个文档(html网页/图片/下载链接…)

<a href="http://www.baidu.com"  target="_blank">百度一下, 你就不知道!</a>
<a href="http://tmooc.cn">tmooc一下, 你就不知道!</a>

其中 href属性:用于指定点击超链接后将要跳转到的url地址
target属性: 用于指定以何种方式打开超链接, 常用取值为:
_self: 默认值, 在当前窗口中打开超链接
_blank: 在新的窗口中打开超链接
表格标签
1.案例：使用表格标签在网页中生成一个3*3表格，要求如下:
(1) 为表格设置边框(2px solid red)
(2) 设置表格边框和单元格边框合并，设置单元格边框和内容之间的距离为5px
(3) 设置表格的背景颜色为pink，并设置表格的宽度为70%
(4) 设置表格在网页中水平居中显示，并为表格添加标题并且设置标题水平居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
    <style>
        /*style标签内部可以存放css属性或者注释*/
        table{/*选中所有的table元素*/
            border: 2px solid red;
            /*合并单元格边框*/
            border-collapse: collapse;
            /*设置表格背景颜色*/
            background: pink;
            /*设置宽度为70%*/
            width: 70%;
            /*水平居中*/
            margin-left: auto;
            margin-right: auto;
        }
        td,th{/*选中所有的td元素*/
           border: 2px solid red;
            /*合并单元格边框*/
            border-collapse: collapse;
            /*内边距，单元格边框和内容之间的距离*/
            padding: 5px;
        }
        h1{
            /*设置内容居中*/
            text-align: center;
            border: 2px solid black;
        }
    </style>
</head>
<body>
<!--3×3表格 -->
<h1>这是一个表格</h1>
<table>
    <tr>
        <th>11</th>
        <th>12</th>
        <th>13</th>
    </tr>
    <tr>
        <td>11</td>
        <td>12</td>
        <td>13</td>
    </tr>
    <tr>
        <td>21</td>
        <td>22</td>
        <td>23</td>
    </tr>
    <tr>
        <td>31</td>
        <td>32</td>
        <td>33</td>
    </tr>




</table>

</html>

table -- 用于在网页中定义一个表格

tr -- 用于定义表格中的行

td -- 用于定义表格中的单元格

th -- 用于定义表头中的单元格(内容会自动居中并且文字加粗)

uzi2200

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML标签、超链接、表格标签

HTML标签图像标签img标签用于在网页中插入一副图像<img src="imgs/meinv.jpg" width="50%" border="10px"/>其中 src属性用于指定图片的url地址(即图片的所在路径)width属性:用于指定图片的宽度, 单位可以是px(像素), 或者 %(百分比)height属性:用于
复制链接

扫一扫