从0起步Javaweb

最新推荐文章于 2024-10-18 11:46:13 发布

努力奋斗的小智

最新推荐文章于 2024-10-18 11:46:13 发布

阅读量208

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/2301_77646179/article/details/141096992

版权

今天学的是图片标签和简单表格的标签

图片标签（以百度logo为例）

在文件下建一个专门存放图片的文件夹：

图片标签：
img

src 定义图片的路径

1 url

2 相对路径

3 绝对路径

title 定义鼠标悬停时提示的文字

alt 定义图片加载失败时的文字

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
    <!-- 相对路径-->
    <img src="img/baidulogo.png" title="百度" width="300px" alt="百度logo">
    <hr><!--带有分割线的换行
    绝对路径
    -->
    <img src="../test01/img/baidulogo.png"  title="百度logo" wide = "350px" alt="baidulogo">
</body>
</html>

效果：

简单表格标签：

table 整张表格

thead 表头

tbody 表体

tfoot 表尾

tr 表格中的一行

td 行中的一个单元格

th 加粗和居中

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3 style="text-align: center ;">学生成绩单</h3>
    <table border="1px" style="margin: 0px auto; width: 300px;">
      <thead>
          <tr>
              <th>排名</th>
              <th>姓名</th>
              <th>成绩</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>1</td>
              <td>小王</td>
              <td>99</td>
          </tr>
          <tr>
              <td>2</td>
              <td>小李</td>
              <td>96</td>
          </tr>
          <tr>
              <td>3</td>
              <td>小花</td>
              <td>90</td>
          </tr>
      </tbody>
      
    </table>
</body>
</html>