03 HTML标签学习2

NYX_UNI

已于 2023-06-12 15:17:06 修改

阅读量290

点赞数

分类专栏： HTML 零基础前端文章标签： html 学习前端

于 2022-10-10 15:11:50 首次发布

本文链接：https://blog.csdn.net/NYX_UNI/article/details/127066042

版权

零基础前端同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

目标：

1、列表标签
2、表格标签
3、表单标签
4、语义化标签
5、字符实体
6、综合案例

一、列表标签

1、列表应用场景

· 场景：在网页中按照行展示关联性内容，如：新闻列表、排行榜、账单等
· 特点：按照行的方式，整齐显示内容
· 种类：无序列表、有序列表、自定义列表

2、列表分类

2.1 无序列表

①场景：在网页中表示一组无顺序之分的列表，最常用
②标签组成：
ul：表示无序列表的整体，用于包裹li标签
li：表示无序列表的每一项，用于包含每一行的内容
③显示特点
列表的每一项前默认显示圆点标识
④注意点
ul标签中只包含li标签
li标签可以包含任意内容

<ul>
	<li>椰子</li>
	<li>苹果</li>
	<li>葡萄</li>
</ul>

2.2 有序列表

①场景：在网页中表示一组有顺序之分的列表
②标签组成：
ol：表示有序列表的整体，用于包裹li标签
li：表示有序列表的每一项，用于包含每一行的内容
③显示特点
列表的每一项前默认显示圆点标识
④注意点
ol标签中只包含li标签
li标签可以包含任意内容

<ol>
	<li>第一名：100</li>
	<li>第二名：80</li>
	<li>第三名：60</li>
</ol>

2.3 自定义列表

①场景：在网页的底部导航中通常会使用自定义列表实现
②标签组成：
dl：表示自定义列表的整体，用于包裹dt/dd标签
dt：表示自定义列表的主题
dd：表示自定义列表的针对主题的每一项内容
③显示特点
dd前会默认显示缩进效果
④注意点
dl标签中只包含li标签
dt/dd标签可以包含任意内容

<dl>
	<dt>帮助中心</dt>
	<dd>账户管理</dd>
	<dd>订单操作</dd>
	<dd>购物指南</dd>
</dl>

二、表格标签

1、表格的基本标签

1.1 表格的基本标签
①场景：在网页中以行+列的单元格的方式整齐展示和数据，如学生成绩表
②基本标签
table：表格整体，用于包裹多个tr
tr：表格每行，可用于包裹td
td：表格单元格，可用于包裹内容
③注意点
标签的嵌套关系：table>tr>td

<table>
        <tr>
            <td>姓名</td>
            <td>成绩</td>
            <td>评语</td>
        </tr>
        <tr>
            <td>小哥哥</td>
            <td>100分</td>
            <td>小哥哥真帅气</td>
        </tr>
        <tr>
            <td>小姐姐</td>
            <td>100分</td>
            <td>小姐姐真漂亮</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>郎才女貌</td>
            <td>郎才女貌</td>
        </tr>
    </table>

在这里插入图片描述

2、表格相关属性

①场景：设置表格基本展示效果
②常见相关属性
border：边框宽度
width：表格宽度
height：表格高度
③注意点
实际开发时针对于样式效果推荐用CSS设置

 <table border="1" width = "300" height = "300">

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

①场景：在表格中表示整体大标题和一列小标题
②常见相关属性
caption：表示表格整体大标题，默认在表格整体顶部居中位置显示
th：表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示
③注意点
· caption标签书写在table标签内部
· th标签书写在tr标签内部（用于替换td标签）

<table border="1" width = "300" height = "300">
        <caption><h1>成绩表</h1></caption>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>

4、表格的结构标签（了解）

①场景
让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰。
②常见相关属性
thead：表格头部
tbody：表格主体
tfoot：表格底部
③注意点
· 表格结构标签内部用于包裹tr标签
· 表格的结构标签可以省略

<table border="1" width = "300" height = "300">
        <caption><h1>成绩表</h1></caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
       <tbody>
            <tr>
                <td>小哥哥</td>
                <td>100分</td>
                <td>小哥哥真帅气</td>
             </tr>
             <tr>
                <td>小姐姐</td>
                <td>100分</td>
                <td>小姐姐真漂亮</td>
            </tr>
       </tbody>
       <tfoot>
            <tr>
              <td>总结</td>
              <td>郎才女貌</td>
              <td>郎才女貌</td>
            </tr>
       </tfoot>
       
    </table>

请添加图片描述

5、合并单元格

①场景
将水平或垂直多个单元格合并成一个单元格
②合并单元格步骤
· 明确合并哪几个单元格
· 通过左上原则，确定保留谁删除谁
上下合并->只保留最上的，删除其他
左右合并->只保留最左的，删除其他
③给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）
④注意点
只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨thead、tbody、tfoot）

<body>
    <!-- table：表格整体 -->
    <!-- tr：表格每行，可用于包裹td -->
    <!-- td：表格单元格，可用于包裹内容 -->
    
    <table border="1" width = "300" height = "300">
        <!-- border：边框宽度 -->
        <!-- width：表格宽度 -->
        <!-- height：表格高度 -->

        <!-- thead：表格头部 -->
        <!-- tbody：表格主体 -->
        <!-- tfoot：表格底部 -->
        <caption><h1>成绩表</h1></caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
       <tbody>
            <tr>
                <td>小哥哥</td>
                <!-- 保留 -->
                <td rowspan="2">100分</td>
                <td>小哥哥真帅气</td>
             </tr>
             <tr>
                <td>小姐姐</td>
                <!-- 删除 -->
                <!-- <td>100分</td> -->
                <td>小姐姐真漂亮</td>
            </tr>
       </tbody>
       <tfoot>
            <tr>
              <td>总结</td>
              <!-- 保留 -->
              <td colspan="2">郎才女貌</td>
              <!-- 删除 -->
              <!-- <td>郎才女貌</td> -->
            </tr>
       </tfoot>
       
    </table>
</body>

请添加图片描述

三、表单标签

①input系列标签
②button按钮标签
③select下拉菜单标签
④textarea文本域标签
⑤label标签

1、input标签（单标签）

input标签可以通过type属性值的不同来展示不同的效果，属性值如下

text：文本框

placeholder：占位符，提示用户输入内容的文本

password：密码框

radio：单选框

name：分组，有相同name属性值的单选框为一组，一组中通时只能有一共被选择

checked：默认选中

checkbox：多选框

checked：默认选中

file：文件选择，用于上传文件

multiple：多文件选择，可以一次性选择多个文件

三个按钮（注意区别和button标签的使用方法）

①submit：提交按钮

②reset：重置按钮

③button：普通按钮，默认无功能，配合js添加功能

普通按钮默认是没有文字的，可以通过value属性添加文字

如果想要实现以上的按钮功能，需要配合form标签使用，

使用方法：用form标签把表单标签和按钮标签包裹起来

type属性值不要拼错或多加，否则就相当于设置了默认值状态

<body>
    <form>
        <!-- 1、文本框：text（type属性的默认值） -->
        昵称：<input type="text" placeholder="请输入您的昵称"><br><br>

        <!-- 2、密码框：passwprd -->
        密码：<input type="password" placeholder="请输入您的密码"><br><br>

        <!-- 3、单选框：radio -->
        性别：<input type="radio" name="sex">男
                <input type="radio" name="sex">女<br><br>

        <!-- 4、多选框：checkbox -->
        爱好：<input type="checkbox" checked>敲代码
            <input type="checkbox">吃水果
            <input type="checkbox">唱歌<br><br>

        <!-- 5、文件选择：file -->
        请上传您的照片：<input type="file" multiple><br><br>

        <!-- 按钮 -->
        <!-- 1、submit：提交按钮 -->
        <input type="submit">

        <!-- 2、reset：重置按钮 -->
        <input type="reset">

        <!-- 3、button：普通按钮 -->
        <input type="button" value="普通按钮">
</form>
</body>

请添加图片描述

2、button按钮标签(双标签)

标签名button

type的属性值：

①submit：提交按钮

②reset：重置按钮

③button：默认按钮

button标签是双标签，更便于包裹其他内容、文字图片等
谷歌浏览器中button默认是提交按钮

3、select下拉菜单标签（双标签）

标签组成op

select标签：下拉菜单的整体（select用来包裹option）

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

常见的属性：

selected：下拉菜单默认选中

textarea文本域标签（双标签）

标签名：textarea

常见属性：

cols：规定文本域内可见宽度

rows：规定文本域呢可见的行数

注意点;

4、label标签

标签名：label

使用方法：

用label标签把内容包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值

<!-- label使用方法1 -->
    <input type="checkbox" id="one"><label for="one">敲代码</label>

    <!-- label使用方法2 -->
    <label>
        <input type="checkbox">熬夜
    </label>

四、语义化标签

1、没有语义的布局标签

div和span

场景：实际开发网页时会大量频繁使用到div和span这两个没有语义的布局标签

div标签：：一行只显示一个

spas标签：一行可以显示多个

2、有语义的布局标签：

header：网页头部

nav：网页导航

footer：网页底部

aside：网页侧边栏

section：网页区块

article：网页文章

以上标签显示特点和div一致，但是比div多了不同的语义

请添加图片描述

五、字符实体

结构：&英文;

常见的字符实体：

空格： 

小于号：<

大于号：>
请添加图片描述

六、综合案例

1、学生信息表格

<!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" width="400" height="400">
        <caption><h3>优秀学生信息表格</h3></caption>
        <!-- 表格的头部 -->
        <thead>
            <tr>
                <th>年级</th>
                <th>姓名</th>
                <th>学号</th>
                <th>班级</th>
            </tr>
        </thead>
        <!-- 表格的主体 -->
        <tbody>
            <tr>
                <!-- 保留 -->
                <td rowspan="2">高三</td>
                <td>张三</td>
                <td>110</td>
                <td>三年二班</td>
            </tr>
            <tr>
                <!-- 删除 -->
                <!-- <td>高三</td> -->
                <td>赵四</td>
                <td>120</td>
                <td>三年二班</td>
            </tr>
        </tbody>
        <!-- 表格的底部 -->
        <tfoot>
            <tr>
                <td>评语</td>
                <!-- 保留 -->
                <td colspan="3">你们都很优秀</td>
                <!-- 删除 -->
                <!-- <td>你们都很优秀</td> -->
                <!-- 删除 -->
                <!-- <td>你们都很优秀</td> -->
            </tr>
        </tfoot>  
    </table>
</body>
</html>

请添加图片描述

2、会员注册表单

<!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>
    <form>
        <h1>青春不常在，抓紧谈恋爱</h1>
        <hr>
        昵称：<input type="text" placeholder="请输入昵称"><br><br>
        性别：<input type="radio" name="gender">男
                <input type="radio" name="gender">女<br><br>
        生日: <input type="date"><br><br>
        城市：<select>
                <option>上海</option>
                <option>广州</option>
                <option>深圳</option>
                <option selected>西安</option>
            </select>
        婚姻状况：<input type="radio" name="isMarriage" checked>未婚
                    <input type="radio" name="isMarriage">已婚
                    <input type="radio" name="isMarriage">保密 <br><br>
        兴趣爱好：<input type="checkbox" checked>唱歌
                    <input type="checkbox" checked>跳舞
                    <input type="checkbox">看电影<br><br>
        个人介绍：<br><textarea cols="50" rows="10"></textarea>
        <br><br>
        <h2>我承诺：</h2> <br><br>
        <ul>
            <li>年满18岁</li>
            <li>抱着严肃的态度</li>
            <li>真诚寻找另一半</li>
        </ul>

        <input type="checkbox">我同意所以条款<br><br>

        <input type="submit" value="免费注册"><input type="reset">
    </form>
</body>
</html>