【个人笔记】HTML

什么是HTML

HTML（HyperText Markup Language）是用于创建网页的标准标记语言。而人们常说的HTML5是HTML的最新版本，它引入了许多新的特性来简化Web开发并提高网页的多媒体功能。

HTML基础知识

一、文档结构

1. <!DOCTYPE html>

是一个文档类型声明，它并不算是HTML标签，而是在HTML文档最开始的部分用来告知浏览器该页面使用的HTML版本和类型。在HTML5中，这个声明简化为 <!DOCTYPE html>，无论大小写均可。使用正确的文档类型声明对于确保浏览器以标准模式渲染页面至关重要。如果文档类型声明缺失或错误，浏览器可能会进入“怪异模式”（Quirks Mode），这会导致布局和CSS表现不一致。

2. <html>

是HTML文档的根元素，意味着它是所有其他HTML元素的父级。每个HTML文档都应该以 <html> 开始，并以 </html> 结束。它定义了整个HTML文档的边界。想象一下当你创建一个<html></html>你就会得到一张干净的白纸，你可以在上面书写任何内容。

属性：

lang: 定义文档的主要语言，有助于搜索引擎优化和辅助技术识别文档的语言环境。

<html lang="zh-CN">

dir: 指定文档中文字的方向，可以是 "ltr"（从左到右）或 "rtl"（从右到左）。

3. <head>

它位于 <html> 标签内，但处于 <body> 标签之前，不直接在浏览器窗口中显示任何内容，但它包含了关于文档的信息，这些信息对浏览器处理页面、搜索引擎优化以及辅助技术都是至关重要的。

<head> 标签通常包含以下类型的元素：

<title> - 设置页面的标题，显示在浏览器的标题栏或标签页上，也是搜索引擎结果中的标题。
<meta> - 提供元数据，如字符集、视口设置、作者信息、关键词和描述等。
<link> - 用于链接外部资源，如样式表（CSS文件）、图标（favicon）或其他资源。
<style> - 内联CSS样式，虽然推荐使用外部样式表，但在某些情况下可以在 <head> 中定义内联样式。
<script> - 可以包含JavaScript代码或链接到外部JavaScript文件，尽管 <script> 标签也可以出现在 <body> 中。

<head>
    <meta charset="UTF-8">
    <title>我的网页</title>
    <meta name="description" content="这是一个示例网页，介绍如何使用HTML。">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <link rel="stylesheet" href="styles.css">
    <script src="scripts.js"></script>
</head>

4. <body>

在HTML文档中用于包含网页的所有可见内容，比如文本、图片、列表、表格、链接、音频和视频等。它直接位于 <html> 标签下，通常紧跟在 <head> 标签之后。<body> 是网页实际显示内容的地方，浏览器将解析并渲染其中的所有元素，使之呈现在用户的屏幕上。

到这里你将可以轻松的读懂下面这段代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

二、基本标签

1. <div>

是HTML中的一种容器标签，它被广泛用于结构化网页布局和应用样式。<div> 是一个块级元素，这意味着它会在页面上占据独立的一块空间，它可以包含其他HTML元素，包括其他 <div> 元素。<div> 没有任何固有的样式，除了默认的块级元素行为，即它们会独占一行。<div> 元素可以包含ID或类名，从而可以通过CSS或JavaScript来定位和操作。

注意事项

虽然 <div> 是一个非常通用的容器，但在语义化设计中，应优先考虑使用更具有语义意义的HTML5元素（在下文 HTML5新特性中介绍），如 <header>, <nav>, <main>, <aside>, <footer> 等，以提高网页的可读性和可访问性。过度使用 <div> 可能会导致HTML结构过于复杂，不利于维护和SEO优化。

2. <h>

也被称为Heading标签，是HTML中用于定义文档或章节标题的标签。在HTML标准中，有六种不同级别的Heading标签，从<h1>到<h6>，分别表示不同的重要程度。<h1>通常是最重要的标题，而<h6>则表示最次要的标题。

        SEO: 搜索引擎会考虑<h>标签中的文本作为关键词，因此它们在搜索引擎优化（SEO）中扮演重要角色。
        样式: 默认情况下，浏览器会给不同级别的<h>标签不同的字体大小和样式，但这些可以通过CSS进行调整。
        每个页面应该只有一个<h1>标签，用来描述页面的主要主题。<h>标签应按照层次结构使用，即<h2>应是<h1>的子级，<h3>应是<h2>的子级，以此类推不要跳过等级，例如，如果使用了<h2>，那么在<h2>之下应该使用<h3>，而不是直接跳到<h4>。

3. <p>

在HTML中代表一个段落。这是网页中最常用的标签之一，用于定义文本内容的段落。段落是组成文档的基本单位，每个段落通常包含一组相关句子或想法。浏览器会自动在段落前后添加一些空白（通常是上下各一个空白行），以便区分不同的段落。<p> 是一个块级元素，这意味着它会在页面上占据独立的空间，不会与其他块级元素在同一行显示。

4. <span>

是HTML中的一个行内元素，用于在文档中对一部分文本或内容应用样式、添加类或ID，以及应用JavaScript处理。与 <div> 类似，<span> 本身并没有任何特殊的格式或布局效果，它的主要作用是作为一个容器，让你可以对文档中的小范围内容进行更精细的控制。

是一个行内元素，这意味着它不会在页面上新开一行，而是和其他行内元素在同一行显示。它可以包含文本、图像、链接或其他行内元素。

在语义化HTML中，如果内容具有特定的意义，应该使用更具语义的HTML元素，比如（在下文中介绍）<strong>、<em>、<mark> 等，而不是 <span>。

5. <br>

是HTML中的一个行内元素，用于插入一个换行符（line break）。它是一个自闭合标签，意味着它不需要结束标签。<br> 标签通常用于强制文本在当前位置换行，而不形成一个新的段落，这在排版和格式化文本时非常有用。

6. <hr>

代表水平线（Horizontal Rule），它用于在文档中插入一条水平分隔线，以此来分割内容或表示主题的转换。<hr> 是一个自闭合标签，意味着它不需要结束标签。

7. <a>

全称是锚点（Anchor）标签，是HTML中用于创建超链接的一个重要元素。它允许你链接到其他网页、跳转到页面内的某个位置、发送电子邮件或下载文件等。<a> 标签可以包裹文本、图片或其他元素，使其成为可点击的链接。

属性

href: 目标URL，可以是绝对路径或相对路径。
target: 控制链接打开的方式，如 _blank 表示在新窗口或标签页中打开链接，默认为 _self 即在当前窗口打开。
title: 提供链接的额外信息，鼠标悬停时显示。
rel: 描述链接的关系，如 noopener、noreferrer 等，用于安全和隐私目的。
download: 如果存在此属性，链接将被浏览器视为下载，而不是导航。

<!-- 链接到另一个网页 -->
<a href="https://www.example.com">访问 Example.com</a>

<!-- 打开链接在新窗口 -->
<a href="https://www.example.com" target="_blank">在新窗口打开 Example.com</a>

<!-- 链接至页面内的某个位置 -->
<a href="#section1">跳转到页面内的 Section 1</a>
<div id="section1">这是 Section 1</div>

<!-- 发送电子邮件 -->
<a href="mailto:someone@example.com">发送邮件给 someone@example.com</a>

8. <img>

是HTML中的图像元素，用于在网页中嵌入图像。它是一个空元素（自闭合元素），没有结束标签，用于显示来自本地文件系统或网络的图像文件。

主要属性

        src: 必需属性，用于指定图像的源文件URL。可以是相对路径或绝对路径。
        alt: 必需属性，提供图像的替代文本。这对于屏幕阅读器、搜索引擎和无法加载图像的浏览器非常重要。描述应当简明扼要，反映图像内容。
        loading: 控制图像的加载策略，可以是 lazy（延迟加载）或 eager（立即加载）。

图像懒加载

为了提高页面加载速度，可以使用 loading="lazy" 属性让图像在滚动到视口时才加载。这在长页面和移动设备上尤其有用。

<img src="placeholder.jpg" data-src="real-image.jpg" alt="Description" loading="lazy">
<!-- 在上述示例中，data-src 属性包含实际图像的URL，而 src 属性则包含一个占位符图像，直到图像真正加载。 -->

9. <ul>, <ol>, <li>

是HTML中用于创建列表的标签。它们分别代表无序列表（Unordered List）、有序列表（Ordered List）和列表项（List Item）。

<ul> 标签用于创建一个项目符号列表，列表中的每一项都是由 <li> 标签定义的。浏览器会自动为每项添加项目符号（通常是圆点）。

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

<ol> 标签用于创建一个编号列表，列表中的每一项同样是由 <li> 标签定义的。浏览器会自动为每项添加数字编号。

<ol>
    <li>起床</li>
    <li>刷牙洗脸</li>
    <li>吃早餐</li>
</ol>

注意事项

<ul> 和 <ol> 应该只包含 <li> 元素，不应包含其他类型的元素，除非它们被包含在 <li> 元素内。

三、文本格式化

1. <strong> & <b>

        <strong> 标签在HTML中用于强调文本的重要性，它告诉浏览器和屏幕阅读器，被包裹的文本有很强的强调意味，通常用于突出关键信息。
        浏览器通常会将 <strong> 标签内的文本显示为粗体字，以视觉上强调这部分内容。
        <b> 标签也被用于创建粗体文本，但 <b> 仅仅是一个纯显示的标签，没有语义含义。相比之下，<strong> 不仅可以创建视觉上的粗体效果，而且还带有语义，表明文本具有重要性。因此，在现代HTML实践中，应优先使用 <strong> 而不是 <b>。

<p>这是一个普通的句子，但是 <strong>这个部分需要强调</strong>。</p>
<p>以下是书名：<b>1984</b>，由乔治·奥威尔所著。</p>

2. <em>&<i>

<em> 和 <i> 都能生成斜体效果，但 <em> 提供了额外的语义价值。

<em> 代表 "emphasis"（强调）。它用于标记文本中的强调部分，表明这部分内容比周围的内容更加重要或需要特别注意。浏览器默认会将 <em> 中的文本以斜体显示，但这是一种视觉上的默认行为，真正的重点在于其语义意义。搜索引擎、屏幕阅读器和其他辅助技术会根据这一语义来更好地理解和处理内容。

<i> 代表 "italic"（斜体）。虽然它也可以用来创建斜体文本，但它本身并不携带任何特定的语义。这意味着 <i> 只是用来改变文本外观的，而不会告诉机器读取设备或搜索引擎这部分文本具有特殊的重要性。因此，它的使用应该限于那些不需要语义含义的情况，比如表示书名、外文词汇、思想、情感等不需要特别强调的内容。

<p>这是一个普通的句子，但是 <em>这个部分需要强调</em>。</p>
<p>以下是书名：<i>1984</i>，由乔治·奥威尔所著。</p>

在HTML5中，鼓励使用具有语义的标签，因此 <em> 被推荐用于需要强调的文本，而 <i> 的使用则应当谨慎，仅在不包含语义时采用。

3. <small>

是一个HTML标签，用于定义文本中的小号文字。这个标签通常被用来表示一些辅助性的、辅助说明的信息，或者是需要缩小字号显示的内容，如法律声明、版权信息、脚注、免责声明等。当浏览器解析到 <small> 标签时，它会使其中的文字以比页面基本字体尺寸更小的字号显示。

<p>这是正常大小的文本。<small>这是较小的文字，用于辅助信息。</small></p>

4. <code>

在HTML中用于表示计算机代码的一部分，例如编程代码、命令行输入、文件名或变量名称。它告诉浏览器这部分文本应该以预格式化的方式显示，通常表现为等宽字体，以突出其为代码文本，与普通文本区分开来。
<code> 标签中的文本通常会被浏览器以固定宽度的字体显示，以保持代码的可读性和格式的准确性。它可以帮助区分文本中的代码片段，提高代码的可读性和可识别性。<code> 标签内的文本不会自动换行，以保持代码的原始格式，这对于展示代码片段特别重要。使用 <code> 标签时，确保只用于表示代码或技术术语，不要滥用。

<p>在Python中，你可以使用 <code>print()</code> 函数来输出文本。</p>

对于包含大量代码的展示，应考虑使用 <pre> 标签，甚至可以结合 <code> 标签使用，以获得更好的格式控制和可读性。

5. <pre>

在HTML中用于显示预格式化的文本。与 <code> 标签不同，<pre> 通常用于显示大段的代码、程序列表、诗歌或任何需要保留原有格式（包括空格和换行）的文本内容。它会按照文本原本的格式进行显示，包括所有的空格和换行符。

标签内的文本不会被浏览器解析为HTML，因此其中的HTML标签不会被渲染

`<pre>` 标签与 `<code>` 标签的区别

<code> 标签用于短小的代码片段，通常嵌入在普通文本中。而 <pre> 标签更适合用于展示较长的代码段落或任何需要保持原有格式的文本。

四、表格

<table> 标签在HTML中用于创建表格，一个基本的HTML表格结构通常包括 <table>、<tr>（行）、<td>（数据单元格）、<th>（表头单元格）等标签。简单来说，有多少个<tr>你的表格就有多少行、有多少个<th>表头你的表格就有多少列；如果想表示空白单元格只要把<td>里的内容清空即可

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>城市</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>28</td>
        <td>北京</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>32</td>
        <td>上海</td>
    </tr>
</table>

表格的高级特性

<thead>：定义表格的头部，通常包含 <tr> 和 <th> 元素。
<tbody>：定义表格的主体，包含数据行。
<tfoot>：定义表格的底部，用于脚注或汇总信息。
<colgroup> 和 <col>：用于定义列的格式和样式。
<caption>：定义表格的标题，通常放在 <table> 的开始处。

这些属性可以确保表格的结构更清晰

<table>
    <caption>员工信息</caption>
    <colgroup>
        <col span="2" style="background-color:#ccc;">
        <col style="background-color:#ddd;">
    </colgroup>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>城市</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>28</td>
            <td>北京</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>32</td>
            <td>上海</td>
        </tr>
    </tbody>
</table>

五、表单

<form> 、<input> 、<textarea> 、<select> 、<option> 、<button> 、<label>

<form> 标签在HTML中用于创建一个表单，允许用户输入数据并提交给服务器进行处理。表单是用户与网站交互的关键组件，用于收集用户信息、接收反馈、登录账户、注册新用户等多种功能。

`<form>` 标签的属性

action：指定表单数据提交的URL。当用户提交表单时，表单数据将被发送到这个URL。
method：定义传输表单数据的方式，通常为 get 或 post。get 方法将数据附加在URL后面，适合数据量较小和无需保密的场合；post 方法将数据放在请求体中，适合数据量较大或敏感数据。
enctype：用于定义表单数据的编码类型，通常用于文件上传表单。
name：定义表单的名称，可用于服务器端脚本引用。
target：指定提交表单后的结果页面在哪个窗口或框架中打开。

表单控件

表单中可以包含多种类型的控件，如：

<input>：用于创建各种输入字段，如文本框、密码框、按钮、复选框、单选按钮等。
<textarea>：用于创建多行文本输入区域。
<select>：用于创建下拉菜单。
<option> 标签用于定义 <select> 下拉列表中的选项。每个 <option> 元素代表下拉列表中的一个可选项。
<label>：用于关联控件和描述性文本，提高表单的可访问性。
<button>：用于创建按钮，可以是提交按钮、重置按钮或普通的按钮。

<form action="/register.php" method="post">
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username" required>
    
    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email" required>
    
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required>
    
    <button type="submit">注册</button>
</form>

HTML5新增特性

语义化标签

`1. <header>` 页面或区域头部。

`2. <nav>` 导航链接。

<nav> 标签用于定义页面的导航链接部分。它通常包含主要的导航菜单，帮助用户在网站的不同部分之间切换。并非所有的链接都需要放在 <nav> 中，只有那些构成网站主要导航结构的链接才应包含在内。

`3. <main>` 主要内容区域。

<main> 标签用于定义文档或应用程序的主要内容区域。这部分内容直接与页面的主题相关，不包含侧边栏或辅助信息。一个页面只能有一个 <main> 标签。

`4. <article>` 文章。

<article> 标签用于定义独立的、可复用的内容块，如新闻文章、博客帖子、论坛帖子等。它应该包含完整的内容，可以独立于页面的其余部分存在。

`5. <aside>` 侧边栏。

<aside> 标签用于定义与页面主要内容相关的，但可以独立出来的信息，如侧边栏、注释、广告等。它可以包含与当前页面或文章相关的附属信息。

`6. <footer>` 页脚。

`7. <section>` 一般性内容区域。

标签用于定义文档中的独立部分，如章节、页眉、页脚或文档中的其他部分。它通常包含一个标题（使用 <h1> 至 <h6> 标签），并且应该表达出这部分内容的独立性。

多媒体
- <audio> 音频播放器。
- <video> 视频播放器。
- <source> 提供多种媒体源格式。
- <track> 字幕或注释。
绘图与图形
- <canvas> 用于绘制图形和动画。
- <svg> 可缩放矢量图形。
离线存储
- localStorage 和 sessionStorage 本地存储数据。
拖放
- draggable 属性使元素可拖动。
- ondragstart, ondragend, ondrop 等事件处理拖放操作。
表单增强
- 新的输入类型（email, url, date等）。
- <datalist> 提供选项提示。
- <output> 显示计算结果。
细节与摘要
- <details> 自动展开/折叠的详情信息。
- <summary> 概述或标题。
对话框与模态窗口
- <dialog> 创建对话框或模态窗口。
新APIs
- Geolocation 地理位置。
- Drag and Drop 拖放。
- Web Storage 存储。
- Web Workers 工作线程。
- WebSockets 实时双向通信。
性能与集成
- 字符编码。"><meta charset="UTF-8"> 字符编码。
- 预加载资源。"><link rel="preload"> 预加载资源。
- <script async> 异步执行脚本。

【个人笔记】HTML

什么是HTML

HTML基础知识

一、文档结构

1. <!DOCTYPE html>

2. <html>

属性：

3. <head>

<head> 标签通常包含以下类型的元素：

4. <body>

二、基本标签

1. <div>

注意事项

2. <h>

3. <p>

4. <span>

5. <br>

6. <hr>

7. <a>

属性

8. <img>

主要属性

图像懒加载

9. <ul>, <ol>, <li>

注意事项

三、文本格式化

1. <strong> & <b>

2. <em>&<i>

3. <small>

4. <code>

5. <pre>

<pre> 标签与 <code> 标签的区别

四、表格

表格的高级特性

五、表单

<form> 、<input> 、<textarea> 、<select> 、<option> 、<button> 、<label>

<form> 标签的属性

表单控件

HTML5新增特性

语义化标签

1. <header> 页面或区域头部。

2. <nav> 导航链接。

3. <main> 主要内容区域。

4. <article> 文章。

5. <aside> 侧边栏。

6. <footer> 页脚。

7. <section> 一般性内容区域。

多媒体

<audio> 音频播放器。

<video> 视频播放器。

<source> 提供多种媒体源格式。

<track> 字幕或注释。

绘图与图形

<canvas> 用于绘制图形和动画。

<svg> 可缩放矢量图形。

离线存储

localStorage 和 sessionStorage 本地存储数据。

拖放

draggable 属性使元素可拖动。

ondragstart, ondragend, ondrop 等事件处理拖放操作。

表单增强

新的输入类型（email, url, date等）。

<datalist> 提供选项提示。

<output> 显示计算结果。

细节与摘要

<details> 自动展开/折叠的详情信息。

<summary> 概述或标题。

对话框与模态窗口

<dialog> 创建对话框或模态窗口。

新APIs

Geolocation 地理位置。

Drag and Drop 拖放。

Web Storage 存储。

Web Workers 工作线程。

WebSockets 实时双向通信。

性能与集成

字符编码。"><meta charset="UTF-8"> 字符编码。

预加载资源。"><link rel="preload"> 预加载资源。

<script async> 异步执行脚本。

`<pre>` 标签与 `<code>` 标签的区别

`<form>` 标签的属性

`1. <header>` 页面或区域头部。

`2. <nav>` 导航链接。

`3. <main>` 主要内容区域。

`4. <article>` 文章。

`5. <aside>` 侧边栏。

`6. <footer>` 页脚。

`7. <section>` 一般性内容区域。

`<audio>` 音频播放器。

`<video>` 视频播放器。

`<source>` 提供多种媒体源格式。

`<track>` 字幕或注释。

`<canvas>` 用于绘制图形和动画。

`<svg>` 可缩放矢量图形。

`localStorage` 和 `sessionStorage` 本地存储数据。

`draggable` 属性使元素可拖动。

`ondragstart`, `ondragend`, `ondrop` 等事件处理拖放操作。

`<datalist>` 提供选项提示。

`<output>` 显示计算结果。

`<details>` 自动展开/折叠的详情信息。

`<summary>` 概述或标题。

`<dialog>` 创建对话框或模态窗口。

字符编码。">`<meta charset="UTF-8">` 字符编码。

预加载资源。">`<link rel="preload">` 预加载资源。

`<script async>` 异步执行脚本。