day2 HTML基础-CSDN博客

本文链接：https://blog.csdn.net/m0_70619994/article/details/124808898

一、列表标签

列表标签主要分为三种：

无序列表
有序列表
自定义列表

1、无序列表

场景：在网页中表示一组没有顺序之分的列表

标签组成：

标签名	功能说明
ul	表示无序列表的整体，用语包裹li标签
li	表示无序列表的每一项，用语包含每一行的内容

显示特点：列表中的每一项前默认显示圆点标识

注意点：

ul标签中只允许包含li标签
li标签可以包含任意内容

<ul>
    <li>篮球</li>
    <li>足球</li>
    <li>羽毛球</li>
</ul>

展示效果：

2、有序列表

场景：在网页中表示一组有顺序之分的列表

标签组成：

标签名	功能说明
ol	表示有序列表的整体，用于包裹li标签
li	表示有序列表的每一项，用语包含每一行的内容

显示特点：列表的每一项前默认显示序号标识

注意点：

ol标签只允许包含li标签
li标签可以包含任意内容

<ol>
    <li>篮球</li>
    <li>足球</li>
    <li>羽毛球</li>
</ol>

展示效果：

3、自定义列表

场景：在网页的底部导航中通常会使用自定义列表实现

标签组成：

标签名	说明
dl	标识自定义列表的整体，用语包裹dt/dd标签
dt	标识自定义列表的主体
dd	宝石自定义列表的针对主体的每一项内容

显示特点：dd前会默认显示缩进效果

注意点：

dl标签中只允许包含dt/dd标签
dt/dd标签可以包含任意内容

<dl>
    <dt>球类</dt>
        <dd>篮球</dd>
        <dd>足球</dd>
        <dd>羽毛球</dd>
</dl>

展示效果：

二、表格标签

1、表格的基本标签

标签名	说明
table	表格整体，可用于包裹多个tr
tr	表格每行，可用于包裹td
td	表格单元格，可用于包裹内容

<table>
    <tr>
        <td>姓名</td>
        <td>语文</td>      
        <td>数学</td>  
    </tr>
    <tr>
        <td>张三</td>
        <td>80</td>      
        <td>75</td>  
    </tr>
    <tr>
        <td>李四</td>
        <td>90</td>      
        <td>81</td>  
    </tr>
    <tr>
        <td>王五</td>
        <td>76</td>      
        <td>83</td>  
    </tr>
</table>

展示效果：

我们可以看到上面的显示效果只有文字，并没有表格，而要想显示出表格，这就是接下来要学习的内容。

2、表格的相关属性

属性名	说明
border	边框宽度
width	表格宽度
height	表格高度

<table border="1" width="500" height="400">
    <tr>
        <td>姓名</td>
        <td>语文</td>      
        <td>数学</td>  
    </tr>
    <tr>
        <td>张三</td>
        <td>80</td>      
        <td>75</td>  
    </tr>
    <tr>
        <td>李四</td>
        <td>90</td>      
        <td>81</td>  
    </tr>
    <tr>
        <td>王五</td>
        <td>76</td>      
        <td>83</td>  
    </tr>
</table>

展示效果：

3、表格的标题和表头单元格标签

标签名	名称	说明
caption	表格大标题	表示表格整体大标题，默认在表格整体顶部居中显示
th	表头单元格	表示表格第一行的小标题

<table border="1" width="500" height="400">
    <caption><strong>学生成绩单</strong></caption>
    <tr>
        <th>姓名</th>
        <th>语文</th>      
        <th>数学</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>80</td>      
        <td>75</td>  
    </tr>
    <tr>
        <td>李四</td>
        <td>90</td>      
        <td>81</td>  
    </tr>
    <tr>
        <td>王五</td>
        <td>76</td>      
        <td>83</td>  
    </tr>
</table>

展示效果：

4、合并单元格

合并单元格主要分为水平合并（夸行合并）和垂直合并（跨列合并），通过左上原则，确定保留谁和删除谁

上下合并：只保留最上的，删除其他
左右合并：只保留最左的，删除其他

属性名	属性值	说明
rowspan	合并单元格的个数	跨行合并，将多行的单元格垂直合并
colspan	合并单元格的个数	跨列合并，将多列的单元格水平合并

<table border="1" width="500" height="400">
        <caption><strong>学生成绩单</strong></caption>
        <tr>
            <th>姓名</th>
            <th>语文</th>      
            <th>数学</th>
        </tr>
        <tr>
            <td>张三</td>
            <td rowspan="2">80</td>      
            <td>75</td>  
        </tr>
        <tr>
            <td>李四</td>
            <td>81</td>  
        </tr>
        <tr>
            <td>王五</td>
            <td>76</td>      
            <td>83</td>  
        </tr>
    </table>

展示效果：

三、表单标签

1、input系列

场景：在网页中收集用户信息的表单效果，如：登录、注册等等

input标签可以通过type属性的不同，而展示出不同的效果

type属性	说明
text	文本框，用户输入单行文本
password	密码框，用于输入密码
radio	单选框，用于多选一
checkbox	多选框，用于多选多
file	文件选择，用于上传文件
submit	提交按钮，用于提交
reset	充值按钮，用于重置
button	普通按钮，默认无功能，之后配合js添加功能

    文本框: <input type="text"><br>
    密码框：<input type="password"><br>
    单选框: <input type="radio"><br>
    多选框：<input type="checkbox"><br>
    文件选择：<input type="file"><br>
    提交按钮：<input type="submit"><br>
    重置按钮：<input type="reset"><br>
    普通按钮：<input type="button"><br>

展示效果：

（1）在text属性值中，又存在一个文本框属性

属性名	说明
placeholder	占位符。提示用户输入内容的文本

    文本框: <input type="text" placeholder="请输入您的账号"><br>
    密码框：<input type="password" placeholder="请输入您的密码"><br>
    单选框: <input type="radio"><br>
    多选框：<input type="checkbox"><br>
    文件选择：<input type="file"><br>
    提交按钮：<input type="submit"><br>
    重置按钮：<input type="reset"><br>
    普通按钮：<input type="button"><br>

展示效果：

（2）在radio属性中，要显示多选一的单选表单控件，需要用到一些常用属性

属性名	说明
name	分组，有相同name属性值的单选框为一组，一组中同事只能有一个被选中
checkd	默认选中

    <input type="radio" name="gender" checked>男<br>
    <input type="radio" name="gender">女<br>

展示效果：

（3）在file属性中，如果说要同时选择多个文件，则需要用到multiple属性

属性名	说明
multiple	多文件选择

<input type="file" multiple>

（4）在reset属性中，如果要使重置按钮生效，则需要配合form标签一起使用，使其form标签内input属性捆绑在一起。当我们点击重置按钮时，对应的已输入的账号密码也会一同消失重置。

    <form>
        账号：<input type="text" placeholder="请输入您的账号"><br>
        账号：<input type="password" placeholder="请输入您的密码"><br>
        重置按钮：<input type="reset">
    </form>

展示效果：

2、button标签

在我们原本使用input标签的同时，也可以使用button实现同样的功能

原input标签示例：

提交按钮：<input type="submit">

button示例：

提交按钮：<button tyoe="submit">提交</button>

3、select标签

场景：在网页中提供多个选项的下拉框

标签组成：

select标签：下拉菜单的整体
option标签：下拉菜单的每一项

示例：

<select>
    <option >北京</option>
    <option >上海</option>
    <option >广州</option>
    <option >深圳</option>
</select>

展示效果：

4、textarea文本域标签

场景：在网页中提供可输入文本的文本域

常见属性：

属性名	说明
cols	定义了文本域内的可见宽度
rows	规定了文本域内的可见行数

示例：

请输入文本：<br>
<textarea name="文本域" id="" cols="30" rows="10"></textarea>

展示效果：

5、label标签

场景：常用语绑定内容与表单标签的关系

示例：

性别：
<input type="radio" name="gender" id="nan"><label for="nan">男</label>
<input type="radio" name="gender" id="nv"><label for="nv">女</label>

展示效果：

四、语义化标签

1、没有语义的布局标签

div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个

示例：

<div>div标签</div>
<span>span标签</span>

展示效果：

我们可以看到这两个和普通的标签显示出来的效果是一样的，div标签代表了整行并且自带了换行功能，而span标签是没有换行。但是我们为什么要学这两个标签，因为在以后的工作中，这两个标签是用的非常多的，但是一般是配合css一起来使用的。

五、字符实体

常见的字符实体

显示结果	描述	实体名称
	空格
<	小于号	<
>	大于号	>
&	和号	&
"	引号	&quot
'	撇号	'(IE不支持)

因为除了空格以外，其他字符实体基本上不用。也不需要刻意去记。