006_HTML综合汇总
今天是编程学习的第6天，汇总复习了下整个的HTML部分。
以下是今天的整理笔记
编程环境配置
1- VSCode 插件
- Prettier - Code formatter: 代码美化
- Wisen-Translate: 悬浮翻译
2- VSCode 配置
- AutoSave|afterDelay （自动保存）
- Format On Save: ✅ （保存时自动格式化）
- Format On Paste: ✅ （粘贴时自动格式化）
- Default Formatter: Prettier-Code formatter （调用格式化插件）
- Linked Editing: ✅ （Html标签首尾自动编辑）
- Render Whitespace: all （空格渲染）
- Tab Size: 2 （每行缩进2字符）
- word wrap: on （代码自动换行）
HTML部分
基础概念
HTML（超文本标记语言，HyperText Markup Language）是用于创建网页的标准标记语言。它通过使用标签（tags）来定义网页的结构和内容。浏览器读取HTML代码并将其渲染成用户可视的网页。
HTML 的基本结构：
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<a href="https://www.example.com">这是一个链接</a>
</body>
</html>
常用标签元素
-
<html>：定义HTML文档的根元素。 -
<head>：包含元数据，如标题、字符集等。 -
<title>：定义网页的标题。 -
<body>：包含网页的可见内容。 -
<h1>到<h6>：定义标题，<h1>最大，<h6>最小。 -
<p>：定义段落 -
<a>：定义超链接 -
<img>：插入图片 -
<div>：定义块级容器 -
<span>：定义行内容器 -
<list>：列表元素 -
<table>：表格元素 -
<form>：表单元素
HTML 元素类型
块级元素
行内元素
行内块级元素
行内替换元素
行内非替换元素
脱标元素
主要元素详解
1- 文档声明
<!DOCTYPE html>
HTML5 文档类型声明，用于告诉浏览器当前文档使用的是 HTML5 标准。它是 HTML 文件的第一行代码，确保浏览器以标准模式渲染网页。
2- html 元素
HTML文档的根元素
3- head 元素
<head> 是 HTML 文档中的一个重要部分，用于定义文档的元数据（metadata），即描述文档自身信息的数据。
主要包括以元素：
- meta
- title
- link
- style
- script
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的网页</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<style>
body {
font-family: Arial, sans-serif;
}
</style>
<script src="script.js"></script>
</head>
4- body 元素
<body> 是 HTML 文档的核心部分，用于定义网页的可见内容。所有在浏览器中显示的文字、图片、链接、表格、视频等元素都包含在 <body> 标签中。
body内的基础元素
5- h 元素
块级元素
6- p 元素
块级元素
7- a 元素
<a> 标签是 HTML 中用于创建超链接的标签，通常用于链接到其他页面、文件、电子邮件地址或页面内的特定部分。
两个主要属性：
href（必需）：指定链接的目标地址。- 外部链接：指向其他网站的 URL。
- 内部链接：指向同一网站内的其他页面。
- 锚点链接：指向页面内的特定部分（使用
#加元素的id）。
target：指定链接的打开方式。_blank：在新标签页或新窗口中打开链接。_blank：在新标签页或新窗口中打开链接。
8- img 元素
<img> 标签是 HTML 中用于在网页中嵌入图像的标签。它是一个 空元素（void element），意味着它没有闭合标签，而是通过自闭合的方式使用。
<img> 标签的基本语法：
<img src="图像路径" alt="替代文本">
主要属性：
-
src（必需）：指定图像的路径（URL）。可以是相对路径或绝对路径。<img src="image.jpg" alt="描述"> -
alt（必需）：提供图像的替代文本。如果图像无法加载，浏览器会显示这段文本。此外，屏幕阅读器会朗读alt文本，帮助视障用户理解图像内容。<img src="image.jpg" alt="一只可爱的猫"> -
width和height：指定图像的宽度和高度（单位是像素或百分比）。如果只设置其中一个，浏览器会自动按比例缩放图像。<img src="image.jpg" alt="描述" width="300" height="200">
注意事项：
alt属性是必需的：即使图像不需要替代文本，也应保留alt属性，但可以设置为空（alt=""）。- 图像路径：确保
src属性中的路径正确，否则图像无法加载。 - 图像格式：常见的图像格式包括 JPEG、PNG、GIF、SVG 等。选择合适的格式以优化加载速度和图像质量。
9- div 元素
<div> 元素是 HTML 中的一个通用容器，用于将内容分组或划分区块。它是一个 块级元素（Block-level Element），通常用于布局和样式化，但本身没有语义意义。
主要特点
- 块级元素：
<div>默认独占一行，宽度为父元素的 100%。 - 无语义意义：
<div>本身不表示任何特定内容或结构，仅用于分组或布局。 - 可嵌套：
<div>可以包含其他块级元素或行内元素，也可以嵌套其他<div>。 - 样式化：通过 CSS 可以轻松对
<div>进行样式化，如设置宽度、高度、背景颜色、边框等。
10- span 元素
<span> 元素是 HTML 中的一个通用行内容器，用于对文本或其他行内元素进行分组或样式化。它是一个 行内元素（Inline Element），通常用于对部分文本应用样式或脚本操作，而不会改变文档的结构。
主要特点
- 行内元素：
<span>不会独占一行，而是与其他行内元素在同一行显示。 - 无语义意义：
<span>本身不表示任何特定内容或结构，仅用于分组或样式化。 - 可嵌套：
<span>可以包含其他行内元素，也可以嵌套其他<span>。 - 样式化：通过 CSS 可以轻松对
<span>进行样式化，如设置颜色、字体、背景等。
11- 列表元素
无序列表：<ul> + <li>
有序列表：<ol> + <li>
定义列表：<dl> + <dt> + <dd>
12- 表格元素
基本表格结构
<table>：定义表格
<thead>：定义表头
<tr>：定义表头行<th>：定义表头单元格
<tbody>：定义表身
<tr>：行<td>：单元格
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
</tbody>
</table>
表格常用样式
<style>
table {
width: 100%;
border-collapse: collapse; /* 合并边框 */
}
th, td {
border: 1px solid #000;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
td:hover {
background-color: #ddd;
}
</style>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
</table>
13- 表单元素
HTML 表单元素用于收集用户输入的数据，并将其提交到服务器进行处理。表单是网页与用户交互的重要工具，常见的表单元素包括输入框、下拉菜单、单选按钮、复选框、按钮等。
1. 表单的基本结构
表单使用 <form> 标签定义，包含多个表单控件（如输入框、按钮等）。
语法：
<form action="提交地址" method="提交方法">
<!-- 表单控件 -->
</form>
属性：
action：指定表单数据提交的 URL。method：指定表单数据的提交方法，常用GET或POST。enctype：指定表单数据的编码类型，常用于文件上传（multipart/form-data）。
2. 常用表单元素
(1) 输入框 <input>
<input> 是最常用的表单元素，用于接收用户输入。通过 type 属性可以定义不同的输入类型。
类型 (type) | 描述 |
|---|---|
text | 单行文本输入框。 |
password | 密码输入框，输入内容会被隐藏。 |
email | 邮箱输入框，支持邮箱格式验证。 |
number | 数字输入框，支持数字验证。 |
date | 日期选择器。 |
checkbox | 复选框，允许选择多个选项。 |
radio | 单选按钮，允许选择一个选项。 |
file | 文件上传框。 |
submit | 提交按钮，用于提交表单。 |
reset | 重置按钮，用于重置表单内容。 |
button | 普通按钮，通常用于触发 JavaScript 事件。 |
示例：
<input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password" placeholder="请输入密码">
<input type="submit" value="提交">
(2) 文本域 <textarea>
<textarea> 用于接收多行文本输入。
示例：
<textarea name="message" rows="5" cols="30" placeholder="请输入消息"></textarea>
(3) 下拉菜单 <select>
<select> 用于创建下拉菜单，<option> 定义菜单项。
示例：
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>
(4) 按钮 <button>
<button> 用于创建按钮，功能与 <input type="button"> 类似，但更灵活。
示例：
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button" onclick="alert('点击了按钮')">点击我</button>
(5) 标签 <label>
<label> 用于为表单控件添加标签，提升可访问性。
示例：
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
总结：
| 元素 | 描述 |
|---|---|
<form> | 定义表单。 |
<input> | 定义输入框，支持多种类型（文本、密码、单选、复选等）。 |
<textarea> | 定义多行文本输入框。 |
<select> | 定义下拉菜单。 |
<button> | 定义按钮。 |
<label> | 为表单控件添加标签。 |
元素类型详解
块级元素
块级元素在页面中独占一行，默认宽度为父元素的 100%，可以设置宽度、高度、内边距和外边距。
特点：
- 独占一行，前后会自动换行。
- 可以包含其他块级元素和行内元素。
- 默认宽度为父元素的 100%。
- 可以设置宽度、高度、内边距和外边距。
行内元素
行内块级元素（Inline-block Elements）
行内块级元素结合了块级元素和行内元素的特性，既可以设置宽度和高度，又不会独占一行。
特点：
- 不会独占一行，与其他行内元素在同一行显示。
- 可以设置宽度、高度、内边距和外边距。
- 常用于创建复杂的布局。
行内替换元素（Inline-block Replaced Elements）
替换元素是指其内容由外部资源决定的元素，浏览器会根据元素的属性加载外部资源并替换元素本身。
特点：
- 内容由外部资源决定。
- 可以设置宽度和高度。
- 默认是行内元素，但行为类似于行内块级元素。
行内非替换元素（Inline-block Non-replaced Elements）
行内元素不会独占一行，只占据其内容所需的宽度，通常用于包裹文本或其他行内元素。
特点：
- 不会独占一行，与其他行内元素在同一行显示。
- 不能设置宽度和高度。
- 只能包含文本或其他行内元素。
- 内边距和外边距只影响水平方向。
总结
| 元素类型 | 特点 | |
|---|---|---|
| 块级元素 | 独占一行，可设置宽高，包含其他元素。 | |
| 行内元素 | ||
| 行内块级元素 | 不独占一行，可设置宽高，结合块级和行内元素的特性。 | |
| 行内替换元素 | 内容由外部资源决定，可设置宽高，默认行为类似行内块级元素。 | |
| 行内非替换元素 | 不独占一行，不可设置宽高，只包含文本或其他行内元素。 | |
| 脱标元素 | 脱离文档流，位置通过 CSS 指定，不占据空间。 |