HTML第三天

最新推荐文章于 2022-12-06 17:56:21 发布

YUGAN__

最新推荐文章于 2022-12-06 17:56:21 发布

阅读量146

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_72826314/article/details/125892281

版权

HTML基础标签

1. 表格标签：

表格由 table 标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由标签定义）字母 td 指表格数据（table data，第一行标题行则通常用来显示。即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。


   <!--新建表格：-->       
       <table border="1">           <!--border为显示边框-->     
              <thead>
                  <tr>
                         <th >第一列</th>
                         <th>第二列</th>
                         <th>第三列</th>
                  </tr>
              </thead>
              <tbody>
                   <tr>
                         <td>内容1</td>
                         <td>内容2</td>
                         <td>内容3</td>
                         <td>内容4</td>
                   </tr>
                   <tr>
                         <td>内容1</td>
                         <td>内容2</td>
                         <td>内容3</td>
                         <td>内容4</td>
                   </tr>
                   <tr>
                         <td>内容2</td>
                         <td>内容3</td>
                         <td>内容4</td>
                   </tr>
              </tbody>
        </table>

1.1 表格合并：

使用colspan(横向合并)和rowspan(纵向合并)合并表格
(1)横向合并
在这里插入图片描述

<table border="1">
              <thead>
                 <tr>
                         <th colspan="2">第一列</th>
                         <th>第二列</th>
                         <th>第三列</th>
                 </tr>
              </thead>
              <tbody>
                   <tr>
                         <td>内容1</td>
                         <td>内容2</td>
                         <td>内容3</td>
                         <td>内容4</td>
                   </tr>
                     <tr>
                         <td>内容1</td>
                         <td>内容2</td>
                         <td>内容3</td>
                         <td>内容4</td>
                   </tr>
                     <tr>
                         <td>内容1</td>
                         <td>内容2</td>
                         <td>内容3</td>
                         <td>内容4</td>
                   </tr>
              </tbody>
        </table>

执行代码后：
在这里插入图片描述
(2)纵向合并

 <table border="1">
              <thead>
                 <tr>
                         <th >第一列</th>
                         <th>第二列</th>
                         <th>第三列</th>
                         <th>第四列</th>
                 </tr>
              </thead>
              <tbody>
                   <tr>
                         <td>内容1</td>
                         <td>内容2</td>
                         <td>内容3</td>
                         <td>内容4</td>
                   </tr>
                     <tr>
                         <td rowspan="2">内容1</td>
                         <td>内容2</td>
                         <td>内容3</td>
                         <td>内容4</td>
                   </tr>
                     <tr>
                         
                         <td>内容2</td>
                         <td>内容3</td>
                         <td>内容4</td>
                   </tr>
              </tbody>
       </table>

执行代码后：
在这里插入图片描述

2. 图像标签：

img src=“路径.jpg”
当我使用相对路径，以html所在位置为基准，找到图片所在位置
(1)当图片和 .html 文件都在同一文件夹时

  <img src="blue.jpg">

(2）当图片和 .html 文件在同一磁盘不同文件夹内,就需跳出一级目录，使用 …/

<img src="/../Html/blue.jpg">

2.1 描述图片信息：

当图片显示不出来的时候，对图片加以描述 alt=“描述”

当图片正常显示的时候，那句描述的话语不会出现

<img src="Html/blue.jpg"  alt="图片加载不出来">

2.2 设置宽和高：

width设置宽，height设置高，可使用px 或百分比

2.3 设置边框：

border=" "

3.超链接标签

 `<a href="地址"></a>`

3.1外部链接

 <a  href="https://editor.csdn.net/md?not_checkout=1&articleId=125892281">hello word</a>

3.2 锚点链接

可以快速定位到⻚⾯中的某个位置.

<P>p1</P>
    <P>p2</P>
    <P>p3</P>
    <P>p4</P>
    <P>p5</P>
    <P>p6</P>
    <P>p7</P>
    <P>p8</P>
    <P>p9</P>
    <P>p10</P>
    <P>p11</P>
    <P>p12</P>
    <P>p13</P>
    <P>p14</P>
    <P>p15</P>
    <P>p16</P>
    <P>p17</P>
    <P>p18</P>
    <P>p19</P>
    <P id="p20">p20</P>
    <P>p21</P>
    <P>p22</P>
    <P>p23</P>
    <P>p24</P>
    <P>p25</P>
    <P>p26</P>
    <P>p27</P>
    <P>p28</P>
    <P>p29</P>
    <P>p30</P>
    <P>p31</P>
    <P>p32</P>
    <P>p33</P>
    <P>p34</P>
    <P>p35</P>
    <P>p36</P>
    <P>p37</P>
    <P>p38</P>
    <P>p39</P>
    <P>p40</P>
    <P>p41</P>
    <P>p42</P>
    <P>p43</P>
    <P>p44</P>
    <P>p45</P>
    <P>p46</P>
    <P>p47</P>
    <P>p48</P>
    <P>p49</P>
    <P>p50</P>
    <a href="#p20">p20</a>
    <a href="#秋粮">秋粮</a>
    <a href="#">回到最顶部</a>