【html5+css3笔记】第二篇HTML基础

sovereign__

已于 2022-11-13 16:40:27 修改

阅读量801

点赞数 2

分类专栏：前端学习笔记文章标签： html html5 css3

于 2022-11-13 16:34:09 首次发布

本文链接：https://blog.csdn.net/sovereign__/article/details/127833605

版权

前端学习笔记专栏收录该内容

2 篇文章 1 订阅

订阅专栏

chapter2 HTML基础

前言

此为黑马程序员【web前端零基础html5 +css3+前端项目视频教程】笔记第二篇：HTML基础
视频指路：
【web前端零基础html5 +css3+前端项目视频教程】
该笔记md文档及代码附件下载（不要积分不要钱）：
第二章笔记文档下载链接
笔记分篇严格按照原视频章节分篇。
后续其他篇笔记更新后链接会放置在此
chapter1 初识HTML

1 列表标签

1-1 列表的应用场景

目标：能够使用无序标签、有序列表标签，实现网页中列表结构的搭建

1-2 无序列表

场景：在网页中表示一组无顺序之分的列表，如：新闻列表。

标签组成：

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

显示特点：

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

注意点：

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

vscodetips：ctrl+enter直接切换到下一行

例：

代码：

<!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>
    <ul>
        <li>榴莲</li>
        <li>香蕉</li>
        <li>苹果</li>
        <li>哈密瓜</li>
        <li>火龙果</li>
    </ul>
</body>
</html>

效果展示：
在这里插入图片描述

1-3 有序列表

场景：在网页中表示一组有顺序之分的列表，如：排行榜

标签组成：

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

显示特点：

列表中的每一项前默认显示序号标识

注意点：

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

例：

代码：

<!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>
    <ol>
        <li>张三：100</li>
        <li>李四：80</li>
        <li>王五：60</li>
    </ol>
</body>
</html>

效果展示：
在这里插入图片描述

1-4 自定义列表

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

标签组成：

标签名	说明
dl	表示自定义列表的整体
dt	用于包裹dt/dd标签
dd	表示自定义列表的针对主题的每一项内容

显示特点：

dd前会默认显示缩进效果

注意点：

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

例：

代码：

<!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>
    <dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
    </dl>
</body>
</html>

效果展示：
在这里插入图片描述

2 表格标签

2-1 表格的基本标签

场景：在网页中以行+列的单元格的方式整齐展示的数据，如：学生成绩表

基本标签：

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

注意点：

标签的嵌套关系：table>tr>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>
        <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>
    </table>
</body>
</html>

效果展示：

在这里插入图片描述

2-2 表格相关属性

场景：设置表格基本展示效果

常见相关属性：

属性名	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

注意点：

实际开发时针对于样式效果推荐用CSS设置

2-3 表格标题和表头单元格标签

场景：在表格中表示整体大标题和一列小标题

其他标签：

标签名	名称	说明
caption	表格大标题	表示表格整体大标题，默认在表格整体顶部居中位置显示
th	表头单元格	表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

注意：

caption标签书写在table标签内部
th标签书写在tr标签内部（用于替换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>
        <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>
    </table>
</body>
</html>

效果展示：

在这里插入图片描述

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

场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰

结构标签：

标签名	说明
thead	表格头部
tbody	表格主体
tfoot	表格底部

注意点：

表格结构标签内部用于包裹tr标签
表格的结构标签可以省略

2-5 合并单元格

场景：将水平或垂直多个单元格合并成一个单元格

术语：跨行合并（垂直合并成一个）跨列合并（水平合并成一个）

合并单元格步骤：

明确合并哪几个但与个
通过左上原则，确定保留谁删除谁
- 上下合并→只保留最上的，删除其他
- 左右合并→只保留最右的，删除其他
给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）并设置属性值为合并单元格的个数

注意点：

只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨thead、tbody、tfoot）

例：

代码：

<!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">
        <caption><strong>学生成绩单</strong></caption>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>
        <tr>
            <td>小哥哥</td>
            <td rowspan="2">100分</td>
            <td>小哥哥真帅气</td>
        </tr>
        <tr>
            <td>小姐姐</td>
            <td>小姐姐真好看</td>
        </tr>
    </table>
</body>
</html>

效果展示：

在这里插入图片描述

3 表单标签

目标：能够使用表单相关标签和属性，实现网页中表单类网页结构搭建

3-1 input系列标签

场景：在网页中显示手机用户信息的表单效果，如：登录页、注册页

标签名：input

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

type属性值：

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

3-1-2 input系列标签-文本框

场景：在网页中显示输入单行文本的表单控件

type属性值：text

常用属性：

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

语法：

    <input type="text" placeholder="请输入用户名">

显示效果:

在这里插入图片描述

3-1-3 input系列标签-单选框

场景：在网页中显示多选一的单选表单控件

type属性值：radio

常用属性：

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

注意点：

name属性对于单选框有分组功能
有相同name属性值的单选框为一组，一组中只能同时有一个被选中

语法：

性别：<input type="radio" name="sex">男 <input type="radio" name="sex">女

默认选中：

(下面的代码默认女选中)

性别：<input type="radio" name="sex">男 <input type="radio" name="sex" checked>女

3-1-4 input系列标签-选择文件

场景：在网页中显示文件选择的表单控件

type属性值：file

常见属性：

属性名	说明
multiple	多文件选择

3-1-5 input系列标签-按钮

场景：在网页中显示不同功能的按钮表单控件

type属性值：

属性值	说明
submit	提交按钮。点击之后提交数据给后端服务器
reset	重置按钮。点击之后恢复表单默认值
button	普通按钮。默认无功能，之后配合js添加功能

注意点：

如果需要实现以上按钮功能，需要配合form标签使用
form使用方法：使用form标签把表单标签一起包裹起来即可

代码示例：

    <form action="">
        用户名：<input type="text">
        <br>
        密码：<input type="password">
        <br>
        <br>
        <!-- 按钮 -->
        <input type="submit">
        <input type="reset">
    </form>

如果想要改submit或者reset按钮的显示值：加value属性，属性值为自己想让它显示的字。如：

    <form action="">
        用户名：<input type="text">
        <br>
        密码：<input type="password">
        <br>
        <br>
        <!-- 按钮 -->
        <input type="submit" value="免费注册">
        <input type="reset">
    </form>

3-2 button系列标签

场景：在网页中显示用户点击的按钮

标签名：button

type属性值：（同input的按钮系列）

属性值	说明
submit	提交按钮。点击之后提交数据给后端服务器
reset	重置按钮。点击之后恢复表单默认值
button	普通按钮。默认无功能，之后配合js添加功能

注意点：

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

3-3 select下拉菜单标签

场景：在网页中提供多个选择项的下拉菜单表单控件

标签组成：

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

常见属性：

selected：下拉菜单的默认选中

（此处回顾上面的知识点，单选多选中的默认选中为checked）

<select name="" id="">
        <option value="">北京</option>
        <option value="">上海</option>
        <option value="">广州</option>
        <!-- selected：默认选择为深圳 -->
        <option value="" selected>深圳</option>
</select>

3-4 textarea文本域标签

场景：在网页中提供可输入多行文本的表单控件

标签名：textarea

常见属性：

cols：规定了文本域内可见宽度
rows：规定了文本域内可见行数

注意点：

右下角可以拖拽改变大小
实际开发时针对于样式效果推荐用CSS设置

<textarea cols="30" rows="10"></textarea>

3-5 label标签

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

标签名：label

使用方法一：

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

使用方法二：

直接使用label标签把内容（如：文本）和表单标签一起包裹起来
需要把label标签的for属性删除即可。

    性别：
    <!-- 方法一 -->
    <input type="radio" name="sex" id="nan"><label for="nan">男</label>
    <!-- 方法二 -->
    <label><input type="radio" name="sex">女</label>

4 语义化标签

目标：能够认识开发中常用的没有语义布局标签（div、span）和有语义的布局标签

4-1 没有语义的布局标签

div标签、span标签。

div标签独占一行

span标签在一行显示

4-2 有语义的布局标签（了解）

场景：在html5新版本中，推出了一些有语义的布局标签供开发者使用（开发手机端网页时需要用到）

标签：

标签名	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页文章

注意点：

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

5 字符实体

目标：能通过字符实体在网页中显示特殊符号

学习路径：

5-1 HTML中的空格合并现象

网页不认识多个空格，只认识一个

5-2 常见字符实体

场景：在网页中展示特殊符号效果时，需要使用字符实体替代

结构：&英文；

常见字符实体：

显示结果	描述	实体名称
	空格	&nbsp；

6 综合案例

6-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><strong>优秀学生信息表格</strong></caption>
        <tr>
            <th>年级</th>
            <th>姓名</th>
            <th>学号</th>
            <th>班级</th>
        </tr>
        <tr>
            <td rowspan="2">高三</td>
            <td>迪丽热巴</td>
            <td>110</td>
            <td>三年二班</td>
        </tr>
        <tr>
            <td>古力娜扎</td>
            <td>120</td>
            <td>三年三班</td>
        </tr>
        <tr>
            <td>评语</td>
            <td colspan="3">你们都很优秀</td>
        </tr>
    </table>
</body>
</html>

显示效果：
在这里插入图片描述

6-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>
    <h1>青春不常在，抓紧谈恋爱</h1>
    <hr>
    <form action="">
        昵称：
        <input type="text" placeholder="请输入昵称">
        <br>
        <br>
        性别：
        <label><input type="radio" name="sex" checked>男</label>
        <label><input type="radio" name="sex">女</label>
        <br>
        <br>
        所在城市：
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>深圳</option>
            <option>广州</option>
        </select>
        <br>
        <br>
        婚姻状况：
        <label><input type="radio" name="situation" checked>未婚</label>
        <label><input type="radio" name="situation">离异</label>
        <label><input type="radio" name="situation">丧偶</label>
        <br>
        <br>
        喜欢的类型：
        <label><input type="checkbox">可爱</label>
        <label><input type="checkbox">性感</label>
        <label><input type="checkbox">御姐</label>
        <label><input type="checkbox">萝莉</label>
        <label><input type="checkbox">小鲜肉</label>
        <label><input type="checkbox">大叔</label>
        <br>
        <br>
        个人介绍：
        <br>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <br>
        <h3>我承诺</h3>
        <ul>
            <li>年满18岁、单身</li>
            <li>抱着严肃的态度</li>
            <li>真诚寻找另一半</li>
        </ul>
        <br>
        <label><input type="checkbox">我同意所有条款</label>
        <button type="submit">免费注册</button>
        <button type="reset">重置</button>
    </form>
    
</body>
</html>