HTML 基础_the td element represents a data cell in a table.-CSDN博客

本文链接：https://blog.csdn.net/chinus_yan/article/details/124072084

HTML 元素参考

一、HTML页面固定结构

在这里插入图片描述

1.1 骨架结构标签

1.1.1 DOCTYPE文档说明

<!DOCTYPE html>文档类型声明，告诉浏览器该网页的 HTML版本
注意点：DOCTYPE需要写在页面的第一行，不属于HTML标签

1.1.2 网页语言

在这里插入图片描述
标识网页使用的语言
作用：搜索引擎归类 + 浏览器翻译
常见语言：zh-CN 简体中文 / en 英文

二、HTML 语法规范：

2.1、注释的作用和写法

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

2.2、HTML标签的构成

在这里插入图片描述结构说明：

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

2.3、HTML标签的属性

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

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

2.3.1 title属性

2.4、HTML标签的关系

HTML标签与标签之间的关系可分为：
父子关系（嵌套关系）
在这里插入图片描述兄弟关系（并列关系）

三、常用标签

1、<strong>
Strong 元素 (<strong>) 表示文本十分重要，一般用粗体显示。

3.1、排版标签

3.1.1、标题标签

在新闻和文章的页面中，都离不开标题，用来突出显示文章主题

代码：h系列标签
在这里插入图片描述

语义：1~6级标题，重要程度依次递减
特点：
• 文字都有加粗
• 文字都有变大（h1 - h4变大），并且从h1 → h6文字逐渐减小
• 独占一行

3.1.2、段落标签

在新闻和文章的页面中，用于分段显示
在这里插入图片描述
语义：段落
特点：
• 段落之间存在间隙
• 独占一行

3.1.3、换行标签

在文本中生成一个换行（回车）符号。此元素在写诗和地址时很有用，
在这里插入图片描述
特点：
• 单标签
• 让文字强制换行

3.1.4、水平线标签

The Thematic Break (Horizontal Rule) element
分割不同主题内容的水平线
<hr>

特点：
• 单标签
• 在页面中显示一条水平线

3.2、文本格式化标签

需要让文字加粗、下划线、倾斜、删除线等效果
在这里插入图片描述突出重要性的强调语境
推荐使用第二组：
实际项目开发中选择标签的原则：标签语义化
即：根据语义选择对应正确的标签
• 如：需要写标题，就使用h系列标签
• 如：需要写段落，就使用p标签

好处：
• 对人：好理解，好记忆
• 对机器：有利于机器解析，对搜索引擎（SEO）有帮助
推荐： • strong、ins、em、del，表示的强调语义更强烈

3.3、媒体标签

3.3.1、图片标签

在网页中显示图片
在这里插入图片描述
特点：
• 单标签
• img标签需要展示对应的效果，需要借助标签的属性进行设置！

src属性
属性值：目标图片的路径
注意点：
当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可（包括后缀名）
路径的情况有很多，
alt属性
属性值：替换文本
• 当图片加载失败时，才显示alt的文本
• 当图片加载成功时，不会显示alt的文本
title属性
属性值：提示文本
• 当鼠标悬停时，才显示的文本
注意点：title属性不仅仅可以用于图片标签，还可以用于其他标签
width和height属性
宽度和高度（数字）
注意点：
• 如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
• 如果同时设置了width和height两个，若设置不当此时图片可能会变形

路径

绝对路径
指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
例如：
• 盘符开头：D:\day01\images\1.jpg
• 完整的网络地址：https://www.itcast.cn/2018czgw/images/logo.gif（了解）
相对路径
从当前文件开始出发找目标文件的过程
相对路径分类：
1）同级目录
直接写目标文件的名字即可
• 方法一：<img src=“目标图片.gif”>
• 方法二：<img src=“./目标图片.gif”>
VS Code快捷操作：直接敲./后，会自动提示同级目录中有哪些文件，直接选择即可！

2）下级目录
在这里插入图片描述 VS Code快捷操作：直接敲./后，会自动提示当前目录下有哪些文件夹，直接一层层选择即可！

3）上级目录
在这里插入图片描述 VS Code快捷操作：直接敲…/后，会自动提示上级目录下有文件，直接选择即可！

3.3.2、音频标签

在这里插入图片描述音频标签目前支持三种格式：MP3、Wav、Ogg

3.3.3、视频标签

在这里插入图片描述视频标签目前支持三种格式：MP4 、WebM 、Ogg

3.4、链接标签

a标签、超链接、锚链接
在这里插入图片描述特点：
• 双标签，内部可以包裹内容
• 如果需要a标签点击之后去指定页面，需要设置a标签的href属性

href属性
点击之后跳转去哪一个网页（目标网页的路径）

显示特点：
• a标签默认文字有下划线
• a标签从未点击过，默认文字显示蓝色
• a标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色）
target属性
目标网页的打开形式
在这里插入图片描述

3.4.1、空链接

在这里插入图片描述功能：
• 点击之后回到网页顶部
• 开发中不确定该链接最终跳转位置，用空链接占个位置

3.5、列表标签

列表的应用场景
在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等

3.5.1、无序列表

在网页中表示一组无顺序之分的列表，如：新闻列表。
在这里插入图片描述显示特点：
• 列表的每一项前默认显示圆点标识

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

3.5.2、有序列表

在网页中表示一组有顺序之分的列表，如：排行榜。
在这里插入图片描述显示特点：
• 列表的每一项前默认显示序号标识

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

3.5.3、自定义列表

在网页的底部导航中通常会使用自定义列表实现。
在这里插入图片描述显示特点：
• dd前会默认显示缩进效果

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

3.6、表格标签

在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表
在这里插入图片描述 The <tr> HTML element defines a row of cells in a table. The row’s cells can then be established using a mix of <td> (data cell) and <th> (header cell) elements.