09-1-1-HTML基础-优快云博客

09-1-1-HTML基础

声明！

通过学习泷羽sec的个人空间-泷羽sec个人主页-哔哩哔哩视频，做出的文章，如涉及侵权马上删除文章，笔记只是方便各位师傅学习知识，以下网站只涉及学习内容，其他的都与本人无关,切莫逾越法律红线,否则后果自负.

文章为个人学习笔记。

1、HTML解释

HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。它允许网页设计师和开发者通过使用一系列的标记标签来定义网页的结构和内容。

HTML的组成：
- 标签（Tags）：HTML使用标签来定义内容的结构。标签通常成对出现，如<p>和</p>分别表示段落的开始和结束。
- 元素（Elements）：标签和它们之间的内容一起构成了HTML元素。例如，<p>这是一个段落。</p>就是一个完整的HTML元素。
- 属性（Attributes）：标签可以包含属性，这些属性提供了有关HTML元素的额外信息。例如，<img src="image.jpg" alt="描述">中的src和alt就是属性。
HTML文档结构：
- DOCTYPE声明：位于HTML文档的最顶部，告诉浏览器该文档使用的是哪种HTML版本。例如，<!DOCTYPE html>。
- <html>标签：HTML文档的根元素，包含了整个页面的内容。
- <head>标签：包含了文档的元数据，如标题、样式表链接、脚本等。
- <body>标签：包含了可见的页面内容，如文本、图片、视频等。
HTML版本：
- HTML经历了多个版本的演变，包括HTML 2.0、HTML 3.2、HTML 4.01和最新的HTML5。
- HTML5是最新的标准，它增加了对多媒体内容、图形和交互性的支持。
语义化标签：
- HTML5引入了许多新的语义化标签，如<header>、<footer>、<article>、<section>等，这些标签帮助更好地描述页面内容的结构和意义。
CSS和JavaScript：
- HTML通常与CSS（层叠样式表）和JavaScript一起使用。CSS用于控制网页的外观和布局，而JavaScript用于添加交互性。
Web页面：
- 一个Web页面可以包含多个HTML文档，这些文档可以通过链接相互连接，形成网站。
浏览器的解析：
- 当用户在浏览器中输入一个URL时，浏览器会请求该页面的HTML文档，并解析其中的标签和内容，然后渲染成用户可以看到的网页。
可访问性：
- HTML提供了多种方式来提高网页的可访问性，比如使用alt属性为图片提供文本描述，使用aria属性来增强屏幕阅读器的体验。

2、HTML（超文本标记语言）网页结构

‍

文档类型声明（Document Type Declaration, DTD）：
- 这是HTML文档的开头部分，用于告诉浏览器这个文档使用的是哪种HTML版本。例如，<!DOCTYPE html>声明用于HTML5。
HTML根元素：
- <html>标签是整个HTML文档的根元素，所有的内容都包含在这个标签内。
头部（head）：
- <head>标签内包含了文档的元数据，即关于文档的信息，而不是文档内容本身。这些信息通常不直接显示在页面上，但对浏览器和搜索引擎很重要。
- 头部可以包含：
  - <title>：定义网页的标题，显示在浏览器的标题栏或标签页上。
  - <meta>：提供文档的元数据，如字符集声明、网页描述、关键词等。
  - <link>：链接到外部资源，如CSS样式表。
  - <script>：嵌入或引用JavaScript代码。
  - <style>：内联CSS样式。
主体（body）：
- <body>标签内包含了网页的所有内容，这些内容会显示在浏览器窗口中。
- 它可以包含文本、图片、视频、链接、表格、列表等元素。
- 网页的布局、样式和交互通常通过HTML标签和CSS来控制。

‍

3、HTML5文档类型声明（DOCTYPE）

DOCTYPE声明：
- <!DOCTYPE html>是HTML5的文档类型声明。它是一个指令，不是标签，用于告诉浏览器这个文档遵循的HTML标准。
- 在HTML5之前，DOCTYPE声明通常比较复杂，需要指定DTD（文档类型定义）的URL。HTML5简化了这个过程，只需要简单的声明即可。
位置：
- DOCTYPE声明必须位于HTML文档的第一行，位于<html>标签之前。
作用：
- 它的作用是告知浏览器这个文档遵循的HTML版本，这样浏览器就可以使用正确的渲染模式来显示页面。
- 对于HTML5，这个声明简洁明了，统一了HTML文档类型的标准，取代了以往复杂的DTD声明。
兼容性：
- 由于HTML5的DOCTYPE声明非常简单，几乎所有现代浏览器都能正确识别和处理，这使得开发者在创建网页时更加方便。
标准模式与怪异模式：
- 在没有DOCTYPE声明的情况下，浏览器可能会进入怪异模式（quirks mode），这种模式下浏览器会使用一些非标准的渲染规则。
- 有了DOCTYPE声明，浏览器会进入标准模式（standards mode），使用标准的渲染规则，这有助于确保网页在不同浏览器中的一致性。

总结来说，<!DOCTYPE html>是HTML5文档的开始，它告诉浏览器这个文档遵循HTML5标准，确保页面以正确的方式渲染。

‍

4、HTML中的根元素<html>

根元素：
- <html>是HTML文档的根元素，它包含了整个HTML文档的所有内容。根元素是HTML文档结构的顶层，所有其他HTML元素都是它的子元素。
开始标签和结束标签：
- <html>元素有开始标签<html>和结束标签</html>。开始标签通常位于文档的最前面，结束标签位于文档的最后面。
作用：
- <html>标签的作用是定义整个HTML文档的范围。浏览器通过这个标签来识别文档中的内容是HTML代码，从而正确地解析和显示这些内容。

标准结构：

一个标准的HTML文档结构通常如下所示：

<!DOCTYPE html>
<html>
  <head>
    <!-- 头部内容，如<title>, <meta>, <link>, <script>等 -->
  </head>
  <body>
    <!-- 主体内容，如文本、图片、视频、链接等 -->
  </body>
</html>

这个结构确保了文档的语义清晰，便于浏览器和搜索引擎理解文档的内容和结构。

HTML5的影响：
- 在HTML5中，<html>元素的使用更加灵活，不再需要指定语言属性（如lang="en"），因为HTML5默认支持多种语言。

总结来说，<html>是HTML文档的根元素，它定义了文档的开始和结束，包含了文档的所有内容，是构建HTML页面的基础。

‍

5、HTML头部区域

<head>部分：
- <head>是HTML文档的头部区域，它包含了关于网页的元数据。这些数据对浏览器的渲染和网页的展示特性有重要作用，但它们不会直接显示在网页的可见区域。
<title>标签：
- <title>用于定义网页的标题。这个标题会显示在浏览器的标题栏或标签页上，是用户识别网页的重要标识。同时，它对搜索引擎优化（SEO）有一定影响，因为搜索引擎会使用标题来索引网页内容。
<meta>标签：

<meta>标签用于提供网页的元数据，这些数据不会直接显示在页面上，但对网页的描述和搜索引擎优化（SEO）非常重要。
字符编码设置：<meta charset="UTF-8">确保浏览器能够正确解析和显示网页中的各种字符，支持多种语言的字符集。
页面描述：<meta name="description" content="这是一个充满趣味的网页">用于向搜索引擎描述网页内容，帮助用户在搜索结果中了解网页的大致内容。
关键词：<meta name="keywords" content="网页, 趣味, 示例">可以设置关键词帮助搜索引擎索引网页，虽然现代搜索引擎可能不再依赖这些关键词进行排名。

<link>标签：

<link>标签用于链接外部资源，最常见的用途是链接CSS样式表，以实现网页内容与样式的分离。
示例：<link rel="stylesheet" href="styles.css">，其中rel="stylesheet"表明这是一个样式表链接，href属性指定了CSS文件的路径。

<script>标签：

<script>标签用于在HTML文档中嵌入JavaScript代码或引用外部的JavaScript文件，这使得网页能够具有交互性和动态功能。
嵌入代码示例：<script>alert('欢迎来到我的网页');</script>，这会在网页加载时弹出一个警告框。
引用外部文件示例：<script src="script.js"></script>，这里src属性指定了JavaScript文件的路径。

总结来说，<head>部分包含了对网页进行描述和配置的元数据，如标题、字符集、描述、关键词、样式表链接等。这些信息对于网页的正确显示和搜索引擎优化至关重要。同时，通过<script>标签，网页可以嵌入或引用JavaScript代码，增加网页的交互性和动态功能。

‍

6、HTML<body>部分

<body>部分：
- <body>是HTML文档的主体部分，包含了所有在网页中可见的内容，如文本、图像、超链接、表格、表单等各种网页元素。
文本元素：
- 使用段落标签<p>来组织文本，<p>标签定义了一段普通的文本内容。
- 标题标签<h1>到<h6>用于创建不同级别的标题，其中<h1>表示最高级别的标题，重要性依次递减。标题不仅用于组织内容，还对搜索引擎优化（SEO）有影响。
图像元素：
- 使用<img>标签来插入图像，例如<img src="image.jpg" alt="图像描述">。src属性指定图像的来源路径，alt属性在图像无法正常显示时提供替代文本，这对于可访问性和SEO都很重要。
超链接元素：
- 通过<a>标签创建超链接，例如<a href="https://www.example.com">点击这里</a>。href属性定义了链接的目标URL，标签内的文本是用户看到的可点击的链接内容。
表格元素：
- 使用<table>标签创建表格，<tr>表示表格行，<td>表示表格单元格。表格用于展示结构化的数据。
  1. <table>标签：
    - 用于创建表格，是表格的容器。
  2. <tr>标签：
    - 表示表格中的一行。每个<tr>标签内可以包含一个或多个<td>标签，代表该行中的单元格。
  3. <td>标签：
    - 表示表格中的单元格，用于存放数据。
  两行两列的表格：
```
<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
</table>
```
  <table>：这是表格的开始标签，它定义了表格的开始。
  
  <tr>：这是表格行的开始标签。每个<tr>标签定义了表格中的一行。
  
  <td>：这是表格单元格的开始标签。每个<td>标签定义了行中的一个单元格，用于存放数据。
  
  单元格内容：在<td>标签中，可以放置文本、图像或其他HTML元素。
  
  </td>：这是表格单元格的结束标签，它标志着一个单元格的结束。
  
  </tr>：这是表格行的结束标签，它标志着一行的结束。
  
  </table>：这是表格的结束标签，它定义了表格的结束。

总结来说，<body>部分是HTML文档的核心，它包含了网页的所有可见内容。通过使用各种标签，如<p>、<h1>到<h6>、<img>、<a>、<table>、<tr>和<td>，可以组织和展示文本、图像、链接和表格等元素，从而构建出丰富多样的网页内容。

‍

7、HTML网页示例

<!DOCTYPE html>
<html>
<head>
    <title>示例网页</title>
    <meta charset="UTF-8">
</head>
<body>
    <h1>欢迎来到示例网页</h1>
    <p>这是网页的主要内容部分，这里可以展示各种信息。</p>
    <img src="example.jpg" alt="示例图片">
    <a href="https://www.example.com">访问示例网站</a>
</body>
</html>

一个完整的HTML网页示例，包含了HTML文档的基本结构和一些基本的网页元素。

<!DOCTYPE html>：
- 这是文档类型声明，用于告诉浏览器这个文档是HTML5文档。
<html>：
- 这是HTML文档的根元素，所有的内容都将包含在这个标签内。
<head>：
- <head>部分包含了文档的元数据，这些数据不会直接显示在页面上，但对网页的描述和配置很重要。
<title>示例网页</title>：
- <title>标签定义了网页的标题，这个标题会显示在浏览器的标题栏或标签页上。
<meta charset="UTF-8">：
- <meta>标签用于提供元数据，这里的charset="UTF-8"指定了文档的字符编码为UTF-8，这是一种广泛使用的字符编码，可以显示多种语言的字符。
</head>：
- 这是<head>部分的结束标签。
<body>：
- <body>部分包含了网页的所有可见内容，如文本、图像、链接、表格等。
<h1>欢迎来到示例网页</h1>：
- <h1>标签定义了网页的主要标题，这是最高级别的标题。
<p>这是网页的主要内容部分，这里可以展示各种信息。</p>：
- <p>标签定义了一段文本，这是网页的主要内容部分。
<img src="example.jpg" alt="示例图片">：
- <img>标签用于在网页中插入图像，src属性指定了图像的来源路径，alt属性提供了图像的替代文本，用于图像无法显示时的描述。
<a href="https://www.example.com">访问示例网站</a>：
- <a>标签定义了一个超链接，href属性指定了链接的目标URL，标签内的文本是用户看到的可点击的链接内容。
</body>：
- 这是<body>部分的结束标签。
</html>：
- 这是HTML文档的结束标签。