跳转至

HTML 标签（下）

表格标签

表格不是用来布局页面的,而是用来展示数据的.

表格基本用法

`
单元表格里的文字1 单元表格里的文字2 单元表格里的文字3 单元表格里的文字4
单元表格里的文字11 单元表格里的文字21 单元表格里的文字31 单元表格里的文字41
                                                                                           
单元表格里的文字1单元表格里的文字2单元表格里的文字3单元表格里的文字4
单元表格里的文字11单元表格里的文字21单元表格里的文字31单元表格里的文字41
` 1.
是用于定义表格的标签。 2. 标签用于定义表格中的行，必须嵌套在
标签中。 3. 用于定义表格中的单元格，必须嵌套在标签中。 4.字母 td 指表格数据（table data），即数据单元格的内容。 一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示. 标签表示 HTML 表格的表头部分(table head 的缩写) ### 表格属性 表格标签这部分属性我们实际开发我们不常用，后面通过 CSS 来设置. 目的有2个: 1.记住这些英语单词,后面 CSS 会使用. 2.直观感受表格的外观形态. | 属性名 | 属性值 | 描述 | | ----------- | ------------------- | ----------------------------------------- | | align | left、center、right | 规定表格相对周围元素的对齐方式 | | border | 1或“” | 固定表格单元是否拥有边框，默认没有边框 | | cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认1像素 | | cellspacing | 像素值 | 规定单元格之间的空白，默认为2像素 | | width | 像素值或百分比 | 规定表格的宽度 | ### 案例 ![](https://gitlab.com/zw2d/blogimg/-/raw/main/pictures/2023/12/11_14_13_25_20231211-20231211141322.png)
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 <table align="center" width="500" height="249" border="1" cellspacing="0">
     <thead>
         <tr>
             <th>排名</th>
             <th>关键词</th>
             <th>趋势</th>
             <th>进入搜索</th>
             <th>最近七日</th>
             <th>相关链接</th>
         </tr>
     </thead>
     <tbody>
         <tr>
             <td>1</td>
             <td>鬼吹灯</td>
             <td><img src="down.jpg" /></td>
             <td>456</td>
             <td>123</td>
             <td>
                 <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a>
             </td>
         </tr>

         <tr>
             <td>1</td>
             <td>鬼吹灯</td>
             <td><img src="down.jpg" /></td>
             <td>456</td>
             <td>123</td>
             <td>
                 <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a>
             </td>
         </tr>
         <tr>
             <td>3</td>
             <td>西游记</td>
             <td><img src="up.jpg" /></td>
             <td>456</td>
             <td>123</td>
             <td>
                 <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a>
             </td>
         </tr>
         <tr>
             <td>1</td>
             <td>鬼吹灯</td>
             <td><img src="down.jpg" /></td>
             <td>456</td>
             <td>123</td>
             <td>
                 <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a>
             </td>
         </tr>
         <tr>
             <td>1</td>
             <td>鬼吹灯</td>
             <td><img src="down.jpg" /></td>
             <td>456</td>
             <td>123</td>
             <td>
                 <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a>
             </td>
         </tr>
         <tr>
             <td>1</td>
             <td>鬼吹灯</td>
             <td><img src="down.jpg" /></td>
             <td>456</td>
             <td>123</td>
             <td>
                 <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a>
             </td>
         </tr>
     </tbody>
</table>
在表格标签中，分别用：标签 表格的头部区域、标签 表格的主体区域. 这样可以更好的分清表格结构。 ### 表格结构标签 1. ：用于定义表格的头部。 内部必须拥有 标签。 一般是位于第一行。 2. ：用于定义表格的主体，主要用于放数据本体 。 3. 以上标签都是放在
标签中。 ### 合并单元格 #### 合并单元格的方式 * 跨行合并：rowspan="合并单元格的个数" * 跨列合并：colspan="合并单元格的个数" * 跨行：最上侧单元格为目标单元格, 写合并代码 * 跨列：最左侧单元格为目标单元格, 写合并代码 `                                                                                                                                                                                                                                                                                                
个人简历
姓    名:           性    别:                  照片   
婚姻状况：出生年月：
民    族：政治面貌:
身    高：学    历：
`                                                                                                                                                                                                                                                                                                
个人简历
姓    名:           性    别:                  照片   
婚姻状况：出生年月：
民    族：政治面貌:
身    高：学    历：
### 表格总结 我们学习了 * table 标签 * tr 行 标签 * td 单元格 标签 * th 表头单元格 标签 * thead 表格头部区域标签 ## 列表标签 表格是用来显示数据的，那么列表就是用来`布局`的。 列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。 根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。 ### 无序列表 1.无序列表的各个列表项之间没有顺序级别之分，是并列的。 2.
    中只能嵌套
  • ，直接在
      标签中输入其他标签或者文字的做法是不被允许的。 3.
    • 与
      • 之间相当于一个容器，可以容纳所有元素。 4.无序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置。 ### 有序列表 1.
        中只能嵌套
      1. ，直接在
          标签中输入其他标签或者文字的做法是不被允许的。 2.
        1. 与
          2. 之间相当于一个容器，可以容纳所有元素。 3.有序列表会带有自己样式属性，但在实际使用时，我们会使用 CSS 来设置。 li最小，ul和ol都包含li ### 自定义列表 在 HTML 标签中，
          标签用于定义描述列表（或定义列表），该标签会与
          （定义项目/名字）和
          （描述每一个项目/名字）一起使用。 其基本语法如下： 1.
          里面只能包含
          和
          。 2.
          和
          个数没有限制，经常是一个
          对应多个
          。
          HTML
           1
 2
 3
 4
 5
 6
 7
 8
 9
10
          <dl>
    <dt>关注我们</dt>
    <dd>新浪微博</dd>
    <dd>官方微信</dd>
    <dd>联系我们</dd>
    <dt>关注我们</dt>
    <dd>新浪微博</dd>
    <dd>官方微信</dd>
    <dd>联系我们</dd>
</dl>
          ## 表单标签 ### 表单元素 type 属性的属性值及其描述如下： ![](https://gitlab.com/zw2d/blogimg/-/raw/main/pictures/2023/12/11_15_46_42_20231211-20231211154640.png) 其它属性： ![](https://gitlab.com/zw2d/blogimg/-/raw/main/pictures/2023/12/11_15_51_49_20231211-20231211155147.png) 1.name 和value 是每个表单元素都有的属性值,主要给后台人员使用. 2.name 表单元素的名字, 要求 单选按钮和复选框要有相同的name值. 3.checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素. 4.maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用. ## 综合案例                                                                                                                                                                                                                                                                                            
          性别          
                      男             女          
                 
          生日          
                                                       
                 
          所在地区
          婚姻状况：          
                      未婚 已婚             离婚          
                 
          学历
          喜欢的类型           帅哥           妩媚的           可爱的           美女           都喜欢        
          自我介绍                  
                           
          我同意注册条款和会员加入标准
          我是会员,立即登录

          我承诺

                     
                           
          • 年满18岁、单身
            •                
          • 抱着严肃的态度
            •                
          • 真诚寻找另一半
            •