前端学习打卡Day4

最新推荐文章于 2024-11-02 15:22:06 发布

Caramel Macchiato*

最新推荐文章于 2024-11-02 15:22:06 发布

阅读量126

点赞数

文章标签：学习 html Powered by 金山文档

本文链接：https://blog.csdn.net/m0_74363523/article/details/128663416

版权

HTML标签Ⅱ

目标

能够书写表格

能够写出无序列表

能够写出3~4个常用的input表单类型

能够写出下拉列表表单

能够使用表单元素实现注册页面

能够独立查阅W3C文档

表格标签

表格是实际开发中常用的标签。

表格主要作用

表格主要用于显示、展示数据，它可以让数据现实的非常规整，具有良好的可读性。

（表格不是用来布局的，是用来展示数据的）

表格的基本语法

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
 ...
</table>

<table></table>是用来定义表格的标签。（最大的表格）

<tr></tr>用于定义表格中的行，必须嵌套在<table></table>标签中。

<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。

字母td指表格数据（table data），即数据单元格的内容。

表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗并居中。

<th>标签表示HTML表格的表头部分（th为table head的缩写）

<table>
  <tr>
    <th>姓名</th>
    ...
  </tr>
  ...
<table>

表格属性

表格标签的部分属性实际开发时不常用，后面通过CSS来设置表格的相关属性（大小、边框……）

目标

记住英语单词，以便CSS使用

主观感受表格的外观形态

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式
border	1或“”	规定表格单元是否拥有边框，默认为“”，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度

（border的属性值表示像素的数量，即为边框的粗细）

案例：小说排行榜

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小说排行榜</title>
</head>

<body>
    <table align="center" border="1" cellspacing="0" height="100">
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>今日搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td></td>
            <td>345</td>
            <td>123</td>
            <td><a href="https://tieba.baidu.com/">贴吧</a>&nbsp;&nbsp;<a href="https://image.baidu.com/">图片</a>&nbsp;&nbsp;<a href="https://baike.baidu.com/">百科</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>盗墓笔记</td>
            <td></td>
            <td>124</td>
            <td>654</td>
            <td><a href="https://tieba.baidu.com/">贴吧</a>&nbsp;&nbsp;<a href="https://image.baidu.com/">图片</a>&nbsp;&nbsp;<a href="https://baike.baidu.com/">百科</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>西游记</td>
            <td></td>
            <td>234</td>
            <td>543</td>
            <td><a href="https://tieba.baidu.com/">贴吧</a>&nbsp;&nbsp;<a href="https://image.baidu.com/">图片</a>&nbsp;&nbsp;<a href="https://baike.baidu.com/">百科</a></td>
        </tr>
        <tr>
            <td>4</td>
            <td>西厢记</td>
            <td></td>
            <td>123</td>
            <td>432</td>
            <td><a href="https://tieba.baidu.com/">贴吧</a>&nbsp;&nbsp;<a href="https://image.baidu.com/">图片</a>&nbsp;&nbsp;<a href="https://baike.baidu.com/">百科</a></td>
        </tr>
        <tr>
            <td>5</td>
            <td>甄嬛传</td>
            <td></td>
            <td>321</td>
            <td>123</td>
            <td><a href="https://tieba.baidu.com/">贴吧</a>&nbsp;&nbsp;<a href="https://image.baidu.com/">图片</a>&nbsp;&nbsp;<a href="https://baike.baidu.com/">百科</a></td>
        </tr>
        <tr>
            <td>6</td>
            <td>如懿传</td>
            <td></td>
            <td>231</td>
            <td>213</td>
            <td><a href="https://tieba.baidu.com/">贴吧</a>&nbsp;&nbsp;<a href="https://image.baidu.com/">图片</a>&nbsp;&nbsp;<a href="https://baike.baidu.com/">百科</a></td>
        </tr>
        <tr>
            <td>7</td>
            <td>三国演义</td>
            <td></td>
            <td>132</td>
            <td>123</td>
            <td><a href="https://tieba.baidu.com/">贴吧</a>&nbsp;&nbsp;<a href="https://image.baidu.com/">图片</a>&nbsp;&nbsp;<a href="https://baike.baidu.com/">百科</a></td>
        </tr>

    </table>
</body>

</html>

表格的结构标签

表格的长度可能会很长，为了更好的表示表格的语义，可以将表格分割为表格头部与表格主体。

在表格标签中，分别用：<thead>标签表示表格的头部区域、<tbody>标签表示表格的主体区域。

<thead></thead>：用于定义表格的头部。<thead>内部必须拥有<tr>标签。（一般位于第一行）

<tbody></tbody>:用于定义表格的主体，主要用于放表格本体。

合并单元格

特殊情况下，可以把多个单元格合并为一个单元格。

合并单元格的方式

跨行合并：rowspan=“合并单元格的个数”。

跨列合并：colspan=“合并单元格的个数”。

目标单元格（写合并代码）

跨行：最上侧单元格为目标单元格，写合并代码

跨列：最左侧单元格为目标单元格，写合并代码

合并单元格三部曲

确定是跨行合并还是跨列合并。

找到目标单元格，写上合并方式=合并的单元格数量。（比如：<td colspan="2"></td>)

删除多余的单元格。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1" cellspacing="0">
        <tr>
            <td></td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>

</html>

列表标签

表格是用来显示数据的，那么列表就是用来布局的。列表的最大特点就是整齐有序，作为布局会更加自由方便。

根据不同的使用情景，列表可以分为三大类：无序列表、有序列表和自定义列表。

无序列表（重点）

<ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义。

<ul>
 <li>列表项1</li>
 <li>列表项2</li>
 <li>列表项3</li>
...
</ul>

无序列表的各个列表项之间没有顺序级别之分，是并列的。

<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是错误的。

<li></li>之间可以容纳所有元素。

无序列表会带有自己的样式属性，实际使用时会用CSS来设置。

有序列表

有序列表即为有排列顺序的列表，各个列表项会按照一定顺序来排列定义。

在HTML标签中，<ol>标签用于定义有序列表，列表顺序以数字来显示，并且使用<li>标签来定义列表项。

<ol>
 <li>列表项1</li>
 <li>列表项2</li>
 <li>列表项3</li>
...
</ol>

<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是错误的。

<li>与</li>之间可以容纳所有元素。

有序列表会带自己的样式属性，但是实际使用可以用CSS来设置。

自定义列表（重点）

自定义列表常用于对于术语或者专业名词进行解释和描述，定义列表的列表项前没有任何项目符号。

在HTML标签中，<dl>标签用于定义描述列表（或定义列表），该标签会与<dt>（定义项目/姓名）和<dd>（描述每一个项目/姓名）一起使用。

<dl>
 <dt>名词1</dt>
 <dd>名词1解释1</dd>
 <dd>名词1解释2</dd>
</dl>

<dl></dl>里面只能包含<dt>和<dd>.

<dt>和<dd>的个数没有限制，经常是一个<dt>对应多个<dd>。