HTML+CSS学习知识整理-常温故知新_html+css的知识梳理-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44402896/article/details/125526226

一、HTML基础认知

1.1 Web标准的构成

构成	语言	说明
结构	HTML	页面元素和内容
表现	CSS	网页元素的外观和位置等页面样式(如:颜色、大小等)
行为	JavaScript	网页模型的定义与页面交互

1.2 HTML的概念

HTML(Hyper Text Markup Language)中文译为:超文本标记语言。
➢ 专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述。

1.3 HTML页面固定结构

HTML骨架结构由哪些标签组成?
• html标签:网页的整体
• head标签:网页的头部
• body标签:网页的身体
• title标签:网页的标题

<!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>

</body>
</html>

1.4 语法规范

1.4.1 HTML的注释

注释的作用:
• 为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码
• 浏览器执行代码时会忽略所有的注释
➢ 注释的快捷键:
• 在VS Code中:ctrl + /

1.4.2 HTML标签的构成

标签的结构图:
在这里插入图片描述

➢ 结构说明:

标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名。
常见标签由两部分组成，我们称之为:双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容 3. 少数标签由一部分组成，我们称之为:单标签。自成一体，无法包裹内容。

1.4.3 HTML标签的属性

➢ 标签的完整结构图:
在这里插入图片描述 ➢ 属性注意点:

标签的属性写在开始标签内部
标签上可以同时存在多个属性
属性之间以空格隔开
标签名与属性之间必须以空格隔开
属性之间没有顺序之分

1.4.4 HTML标签的关系

➢ 父子关系(嵌套关系)
➢ 兄弟关系(并列关系)

二、HTML标签学习

2.1 排版标签

标签名称	代码	特点	备注
标题标签	h1～h6	1.文字都有加粗 2. 独占一行	新闻标题和网络logo常用h1
段落标签	p	1.段落之间存在间隙 2.独占一行
换行标签	br	单标签让文字强制换行
水平线标签	hr	单标签在页面中显示一条水平线

2.2 文本格式化标签

需要让文字加粗、下划线、倾斜、删除线等效果，突出重要性的强调语境。在这里插入图片描述
注意：strong、ins、em、del，表示的强调语义更强烈!

2.3 媒体标签

2.3.1 图片标签

语法：

<img src="图片路径" alt="替换文本" title="提示文本" />

图片路径（绝对路径和相对路径）
替换文本（图片加载失败，显示alt的文本，否则不显示）
提示文本（当鼠标悬停时，显示的文本）

注意：src和alt这两个是必选属性，一定要添加；而title是可选属性，可加可不加。

2.3.2 路径

➢ 绝对路径:
指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径。
➢ 相对路径(常用)：
从当前文件开始出发找目标文件的过程。

相对路径分类:
• 同级和下级目录:./ 之后选择即可
• 上级目录:…/ 之后选择即可

2.3.3 音频标签

<audio src="音频的路径" controls></audio>

音频标签常见属性：
• src:音频路径
• controls:音频控件
• autoplay:自动播放
• loop:循环播放

注意：音频标签目前支持三种格式:MP3、Wav、Ogg

2.3.4 视频标签

<video src="视频的路径" controls></video>

视频标签常见属性：
• src:视频路径
• controls:视频控件
• autoplay:自动播放 → 谷歌浏览器中可以配合muted属性实现自动静音播放
• loop:循环播放

注意：视频标签目前支持三种格式:MP4 、WebM 、Ogg

2.3 链接标签

<a href="./目标网页.html">超链接</a>

特点:
• 双标签，内部可以包裹内容
• 如果需要a标签点击之后去指定页面，需要设置a标签的href属性

链接标签显示特点:
• a标签默认文字有下划线
• a标签从未点击过，默认文字显示蓝色
• a标签点击过之后，文字显示为紫色(清除浏览器历史记录可恢复蓝色)

链接标签target属性：（控制跳转方式）
• 取值1:_self:在当前窗口中跳转
• 取值2:_blank:在新窗口中跳转

空链接(拓展补充) ➢ 代码:

<a href="#">这是链接跳转内容</a>

➢ 功能:
• 点击之后回到网页顶部
• 开发中不确定该链接最终跳转位置，用空链接占个位置

2.4 列表标签

目标: 能够使用无序列表、有序列表、自定义列表标签，实现网页中列表结构的搭建。
特点: 按照行的方式，整齐显示内容。

2.4.1 无序列表

ul标签:表示无序列表的整体 (只允许嵌套li标签)
li标签:表示无序列表的每一项(可以嵌套任意内容)

语法：

<ul type="属性值">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

type属性取值：

属性值	列表项符号
disc	实心圆●（默认值）
circle	空心圆○
square	正方形■

2.4.1 有序列表

ol标签:表示有序列表的整体 (只允许嵌套li标签)
li标签:表示有序列表的每一项(可以嵌套任意内容)

语法：

<ol type="属性值">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

type属性取值：

属性值	列表项符号
1	阿拉伯数字：1、2、3……
a	小写英文字母：a、b、c……
A	大写英文字母：A、B、C……
i	小写罗马数字：i、ii、iii……
I	大写罗马数字：I、II、III……

2.4.1 自定义列表

dl标签:表示自定义列表的整体（只允许嵌套dt/dd标签）
dt标签:表示自定义列表的主题（可以嵌套任意内容）
dd标签:表示对于主题的每一项内容（可以嵌套任意内容）

语法：

<dl>
    <dt>名词</dt>
    <dd>描述</dd>
    ……
</dl>

2.5 表格标签

目标:
能够使用 表格相关标签和属性，实现网页中表格结构的搭建

2.5.1 表格的基本标签

标签的嵌套关系:table > tr > td
（1）表格：table标签（可用于包裹多个tr）
（2）行：tr标签（可用于包裹td）
（3）单元格：td标签（可用于包裹内容）

2.5.2 表格相关属性

属性：
表格边框：border属性
表格宽度：width属性
表格高度：height属性

2.5.3 表格标题和表头单元格标签

• （表格大标题）caption标签书写在table标签内部
• （表头单元格）th标签书写在tr标签内部(用于替换td标签)

示例：

    <table border="1">
        <caption>学生信息</caption>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>成绩</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>男</td>
            <td>630</td>