HTML&CSS(一）---HTML入门

1.1HTML&CSS&JavaScript的作用

(1)HTML 主要用于网页主体结构的搭建

(2)CSS 主要用于页面的美化

(3)JavaScript 主要用于动态处理页面元素

1.2 HTML是什么

HTML的全称是HyperText Markup Language，中文意为"超文本标记语言"。它的主要作用是描述网页的结构，以便在网页上展示各种内容。HTML5是HTML的第五个主要版本，它在2008年被正式提出，并在2012年成为了稳定的版本。最终，HTML5在2014年10月28日被W3C（World Wide Web Consortium，万维网联盟）发布为正式的推荐标准。HTML5的发布对于网页开发来说是一个重要的事件，因为它引入了许多新的特性和功能，使得网页可以更好地适应不同的设备和需求。

1.3 超文本是什么

超文本（Hypertext）是一种通过电子文档中的链接（通常称为超链接）进行非线性导航和访问信息的方式。在超文本中，用户不仅可以通过阅读顺序来浏览文档，还可以通过点击链接直接跳转到文档中的其他部分或完全不同的文档。这种导航方式模仿了人类思维的非线性特性，允许用户以更加灵活和直观的方式获取信息。
超文本的概念是互联网的核心之一，它使得万维网（World Wide Web）成为可能。在万维网上，超文本通过超链接将全球的信息资源连接起来，用户可以通过浏览器访问这些资源，并在不同的网页和文档之间自由跳转。
超文本的例子包括：
- 网页上的文本链接，点击后可以跳转到另一个网页或网站。
- 电子邮件中的链接，点击后可以打开网页或下载文件。
- 电子书中的目录或脚注，点击后可以跳转到相应的章节或引用的资料。
超文本的关键特性是它的交互性和动态性，用户可以通过超链接主动探索和选择信息，而不是被动地按照固定的顺序阅读。这种特性极大地丰富了信息的组织和呈现方式，提高了信息检索和共享的效率。

1.4标记语言是什么

**标记语言（Markup Language）是一种用于对文本进行标记和注释的计算机语言，它使用特定的符号或标签来表示文本的结构、格式和含义。这些标签不会在最终的显示中直接呈现，而是用于指导文本如何在不同的媒介或平台上被处理和展示。
标记语言的目的是将文本内容与样式、布局和功能性的指令分离，使得文档的创建、编辑和显示更加灵活和标准化。它通常用于格式化和发布电子文档，包括网页、电子书和其他电子出版物。
常见的标记语言包括：

HTML（HyperText Markup Language）：用于创建网页的标准标记语言。HTML定义了网页的结构和内容，包括标题、段落、列表、链接、图片等。
XML（eXtensible Markup Language）：一种用于定义其他标记语言的元语言。XML是一种通用的数据格式，用于存储和传输数据，它允许用户自定义标签和文档结构。
SGML（Standard Generalized Markup Language）：一种较早的标记语言，它是HTML和XML的前身。SGML是一种非常灵活的标记语言，但它也比较复杂。
Markdown：一种轻量级的标记语言，它使用简单的文本格式化语法来转换为HTML或其他标记语言。Markdown易于学习和使用，常用于博客、论坛和文档编写。**

1.5HTML的基础结构&基础概念解释

HTML文档的基础结构包括几个主要的元素，这些元素定义了文档的骨架和内容组织。下面是一个简单的HTML文档结构示例：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档标题</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
    <img src="image.jpg" alt="描述图片">
    <!-- 更多内容... -->
</body>
</html>

下面是对这个结构中各个部分的解释：

<!DOCTYPE html>：文档类型声明，告诉浏览器这是一个HTML5文档。
<html>：根元素，所有的HTML元素都应该放在<html>标签内。
<head>：头部元素，包含了文档的元数据，如字符编码、视图窗口设置、标题、样式表链接、脚本链接等。
- <meta charset="UTF-8">：定义文档的字符编码为UTF-8，这是万维网推荐的字符编码。
- <meta name="viewport" content="width=device-width, initial-scale=1.0">：这是一个响应式设计的设置，告诉浏览器如何控制页面的尺寸和缩放比例。
- <title>：定义了文档的标题，这个标题会显示在浏览器的标题栏或页面的标签上。
<body>：主体元素，包含了可见的页面内容，如文本、图片、视频、游戏、可播放的音频等。
- <h1>到<h6>：标题元素，<h1>表示最高级别的标题，<h6>表示最低级别的标题。
- <p>：段落元素，用于定义文本段落。
- <img>：图像元素，用于嵌入图片。
：注释标签，用于在代码中插入注释，这些注释不会在浏览器中显示，但可以帮助开发者理解代码。

这个结构是所有HTML文档的基础，无论文档的内容多么复杂，都是以这个结构为基础进行扩展和添加的。

1.6 HTML语法规则

**HTML（HyperText Markup Language，超文本标记语言）的语法规则定义了如何编写HTML文档。以下是一些基本的HTML语法规则：

**标签大小写不敏感**：HTML标签和属性可以是大写、小写或混合写。但是，W3C推荐使用小写，因为XHTML要求标签和属性必须是小写的。
**标签必须正确嵌套**：HTML标签应该正确地开始和结束。例如，如果有一个`<p>`标签，它必须以一个相应的`</p>`结束。标签应该按照它们被打开的顺序关闭。
**属性值应该加引号**：属性值应该被单引号或双引号包围。例如，`<a href="http://www.example.com">`是正确的，而`<a href=http://www.example.com>`是错误的。
**空元素可以自闭合**：没有内容的元素，如`<img>`和`<input>`，可以自闭合。例如，`<img src="image.jpg" alt="Description">`是正确的。
**注释不会显示在页面上**：注释以``结束。它们可以跨越多行，但不会在浏览器中显示。
**DOCTYPE声明**：HTML文档应该以一个DOCTYPE声明开始，这告诉浏览器文档的类型和版本。例如，HTML5的DOCTYPE声明是`<!DOCTYPE html>`。
**字符编码**：HTML文档应该指定字符编码，通常使用UTF-8。这可以通过`<meta charset="UTF-8">`在`<head>`部分进行设置。
**元素属性**：元素可以包含属性，这些属性提供了关于元素的额外信息。属性通常位于开始标签内，并且以名称/值对的形式出现。
**保留字符和实体**：在HTML中，某些字符是保留的，如`<`, `>`, `&`, `"`, 和 `'`。这些字符不能直接使用，因为它们会被解释为标签的一部分。 Instead, you must use character entities, such as `<` for `<`, `>` for `>`, `&` for `&`, `"` for `"`, and `'` for `'`.
**布尔属性**：某些属性是布尔属性，它们不需要值。例如，`disabled`和`readonly`可以简单地写为`disabled`或`readonly`，不需要指定为`disabled="disabled"`或`readonly="readonly"`。
遵循这些基本的HTML语法规则可以帮助确保你的网页在不同的浏览器和设备上正确地渲染和显示。**