【JavaWeb】二、HTML 入门

【JavaWeb】二、HTML 入门

HTML、CSS 和 JavaScript 的作用

HTML（HyperText Markup Language）、CSS（Cascading Style Sheets）和JavaScript是构建网页和Web应用程序的三个核心技术。它们各自扮演着不同的角色，共同协作以提供丰富、动态和交互式的用户体验。

HTML 的作用

HTML 是网页内容的骨架，它定义了网页的结构。通过HTML，开发者可以创建各种元素，如标题、段落、链接、图片、表格、列表等，并将它们组织成有逻辑的文档结构。HTML 文档由一系列的标签（tags）组成，这些标签告诉浏览器如何显示页面上的内容。例如，<h1> 标签用于定义最高级别的标题，<p> 标签用于定义段落，<a> 标签用于定义超链接等。

CSS 的作用

CSS 负责网页的样式和布局。通过CSS，开发者可以控制HTML元素的外观，包括颜色、字体、间距、大小、位置等。CSS 可以直接写在HTML文档中，但更常见的是将其保存在单独的CSS文件中，并通过HTML文档的<link>标签引入。CSS 使得开发者能够将内容和表现分离，从而更容易地维护和更新网页的样式。此外，CSS 还支持响应式设计，使得网页能够自适应不同大小的屏幕和设备。

JavaScript 的作用

JavaScript 是一种编程语言，它运行在用户的浏览器上，用于增强网页的交互性。通过JavaScript，开发者可以添加动态效果，如表单验证、动画、游戏、以及与其他Web技术的集成（如Ajax，用于异步加载数据）。JavaScript 使得网页不仅仅是静态的内容展示，而是能够响应用户的操作，提供丰富的用户体验。JavaScript 还可以与HTML DOM（文档对象模型）进行交互，从而动态地修改网页的结构和内容。

总结

HTML、CSS 和 JavaScript 在Web开发中扮演着不可或缺的角色。HTML 定义了网页的结构，CSS 控制了网页的样式和布局，而JavaScript 则增强了网页的交互性。这三个技术相互协作，共同构成了现代Web应用的基石。掌握这三个技术，是成为一名合格的Web开发者所必需的。

什么是 HTML

HTML，全称HyperText Markup Language，即超文本标记语言，是一种用于创建网页的标准标记语言。

定义与目的

• 定义：HTML是一种通过标签来描述网页内容和结构的语言。这些标签告诉浏览器如何显示网页上的文本、图片、链接、表格、列表等元素。
• 目的：HTML的设计初衷是为了将文档内容结构化，并通过超链接技术将不同的文档或信息资源连接起来，形成一个逻辑整体，方便用户浏览和检索。

标记与属性

• 标记：HTML文档由一系列的标记（也称为标签）组成。每个标记都有一个特定的含义，用于告诉浏览器如何显示内容。例如，<p>标签用于定义段落，<a>标签用于定义超链接等。
• 属性：标记可以包含属性，这些属性提供了关于标记的额外信息。例如，<a>标签的href属性指定了链接的目标地址。

功能与特性

• 结构化文档：HTML通过标签将文档内容结构化，使其易于理解和维护。
• 跨平台性：HTML文档可以独立于操作系统和浏览器平台显示，只要浏览器支持HTML标准即可。
• 超链接：HTML支持超链接技术，允许用户通过点击链接跳转到其他文档或页面。
• 表单：HTML表单用于收集用户输入的信息，如姓名、电子邮件地址等。这些信息可以提交给服务器进行处理。
• 媒体嵌入：HTML支持嵌入图像、视频、音频等多媒体内容，丰富网页的表现形式。

重要性

HTML是Web前端开发的基础，几乎所有网页都是通过HTML构建的。随着Web技术的不断发展，HTML也在不断演进，以满足更复杂的网页开发需求。例如，HTML5引入了许多新的元素和API，支持更丰富的媒体内容、图形效果以及离线应用等功能。

学习与应用

学习HTML是成为Web前端开发者的第一步。通过掌握HTML的基础知识，可以进一步学习CSS和JavaScript等技术，构建功能强大的Web应用程序。同时，随着Web技术的不断发展，持续学习和跟进新技术也是非常重要的。

综上所述，HTML是一种强大的网页标记语言，它通过标签和属性定义了网页的结构和内容，并通过超链接技术将不同的信息资源连接起来。HTML是JavaWeb开发的基础，对于想要从事JavaWeb开发工作的人来说是必不可少的技能之一。

什么是超文本

超文本（Hypertext）是一种使用超链接方法将各种不同空间的文字信息组织在一起的网状文本。

定义

超文本是指通过超链接的方式，将文字、图片等信息相互联结，形成具有相关信息体系的文本。它不仅仅是一种文本形式，更是一种用户界面范式，用于显示文本及与文本之间相关的内容。

特点

1. 非线性组织：与传统文本以线性方式组织不同，超文本采用非线性方式组织信息。这意味着文本中的相关内容可以通过链接进行组织，形成一个网状结构，读者可以在任何一个节点上停下来，进入另一重文本，实现信息的自由跳转。
2. 超链接：超文本中的文字或图片包含有可以连接到其他位置或文档的链接，这些链接允许从当前阅读位置直接切换到链接所指向的位置。这种特性使得超文本具有强大的导航和检索能力。
3. 电子文档形式：现时超文本普遍以电子文档方式存在，如我们日常浏览的网页就是超文本的一种表现形式。

格式与应用

超文本的格式有很多，其中最常见的是超文本标记语言（HTML）及富文本格式（RTF）。HTML是构建网页的基础，通过HTML可以创建包含文本、图片、链接等元素的网页。而RTF则是一种用于在不同应用程序之间交换文本的格式，支持多种文本样式和布局。

超文本在互联网上发挥着重要作用，它使得信息的存储、组织、管理和浏览变得更加高效和便捷。通过超文本，用户可以轻松地在不同信息源之间跳转，获取所需的知识和信息。

历史与发展

超文本的概念最早由美国学者纳尔逊在1963年提出，他将其定义为“非顺序性著述”，即分叉的、允许读者作出选择、最好在交互屏幕上阅读的文本。随着计算机技术的发展，超文本逐渐得以实现，并以其独特的组织和管理信息的方式得到了广泛应用。

综上所述，超文本是一种通过超链接将不同信息组织在一起的网状文本形式，它具有非线性组织、超链接和电子文档形式等特点，并在互联网上发挥着重要作用。

什么是标记语言

标记语言是一种将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。具体来说，标记语言通过一系列特定的标记（或称为标签）来定义文档的结构和格式，这些标记不仅与文本内容结合，还提供了关于文本结构和表示的额外信息。

定义与特点

• 定义：标记语言是一种用于描述文本结构和格式的计算机语言。它通过使用标记来标识文本的不同部分，如标题、段落、链接等，从而实现文档的格式化和结构化。
• 特点：
  • 结构化：标记语言通过标记将文本组织成结构化的文档，使得文档内容更加清晰、易于理解和维护。
  • 可扩展性：许多标记语言支持自定义标记，以适应不同的应用场景和需求。
  • 平台无关性：标记语言定义的文档结构可以在不同的操作系统和浏览器上保持一致，从而实现跨平台的兼容性。

原理与应用

• 原理：标记语言将文本分成小块，并通过各种标记将这些块组合成文档。这些标记可以设置文本的样式、图像的大小和位置等信息，从而实现文档的格式化和布局。
• 应用：
  • Web开发：HTML（超文本标记语言）是Web上最常见的标记语言，用于创建网页和Web应用程序。它定义了网页的结构和内容，并通过CSS（层叠样式表）来设置网页的样式和布局。
  • 数据存储与传输：XML（可扩展标记语言）及其变种如JSON等，被广泛应用于数据的存储和传输。它们通过定义数据的结构和格式，使得数据可以在不同的系统和平台之间进行交换和共享。
  • 电子书与文档：标记语言也用于编写电子书和文档，如EPUB、PDF等格式。这些格式通过特定的标记语言来定义文档的结构和内容，使得文档可以在不同的阅读器和设备上保持一致的阅读体验。

标记语言的种类

• HTML：超文本标记语言，用于创建网页和Web应用程序。
• XML：可扩展标记语言，用于数据存储和传输。它是HTML的扩展，具有更强的自定义能力和更严格的语法规则。
• XHTML：可延伸超文件标记语言，是HTML向XML过渡的一种标记语言。它在语法上更加严格，旨在提高网页的兼容性和可访问性。

标记语言的发展

标记语言的发展可以追溯到20世纪60年代，当时IBM公司的研究人员开始探索如何通过标记来定义文档的结构和格式。随着时间的推移，标记语言逐渐发展成为一种广泛应用于网页开发、数据存储与传输、电子书与文档编写等领域的强大工具。

综上所述，标记语言是一种强大的计算机语言，它通过特定的标记来定义文档的结构和格式，从而实现文档的格式化和结构化。在当今的数字化时代，标记语言在Web开发、数据存储与传输、电子书与文档编写等领域发挥着重要的作用。

双标签与单标签

双标签与单标签是HTML（HyperText Markup Language，超文本标记语言）中的两种基本标签类型，它们在网页构建中扮演着重要角色。以下是对这两种标签的详细解释和比较：

单标签

定义：

• 单标签是指由单个标签组成的标记，这些标签通常用于表达某些特定的功能或引用外部资源，而不需要额外的结束标签。

特点：

• 单标签通常以斜杠（/）结尾，形成自闭合的结构，如<img />、<br />、<input />等。
• 它们主要用于功能性操作，如换行（<br />）、引入图片（<img src="path/to/image.jpg" />）、创建输入字段（<input type="text" />）等。
• 单标签通常不包含内容（除了可能的一些属性），并且由于其简洁性，可以提高HTML代码的可读性。

双标签

定义：

• 双标签则是由一个开始标签和一个对应的结束标签组成的标记对。它们之间可以包含文本、图片、其他标签等元素，用于定义网页内容的结构和格式。

特点：

• 双标签通常以相同的标签名开始和结束，但结束标签前会添加一个斜杠（/），如<p>...</p>、<div>...</div>、<a href="...">...</a>等。
• 它们的主要用途是包裹和展示内容，通过标签对的结构来定义内容的范围、样式和属性。
• 双标签内部可以嵌套其他标签，实现复杂的页面布局和交互效果。

区别与比较

总结

双标签与单标签在HTML中各有其独特的作用和用法。单标签因其简洁性而适用于表达特定功能或引用外部资源，而双标签则因其灵活性和可嵌套性而更适用于包裹和展示内容，定义页面的结构和格式。在编写HTML代码时，应根据实际需求选择合适的标签类型，以实现最佳的页面效果。

HTML 基础结构

HTML（HyperText Markup Language，超文本标记语言）是构建网页和Web应用程序的基础。HTML的基础结构由几个关键部分组成，这些部分共同定义了网页的内容和结构。以下是HTML基础结构的详细解析：

文档类型声明（DOCTYPE）

文档类型声明位于HTML文档的最前面，它告诉浏览器该文档使用的是哪个HTML版本。例如，对于HTML5，文档类型声明如下：

<!DOCTYPE html>

HTML4 的文档类型如下：

<!DOCTYPE HTML PUBLIC 
			"-//W3C//DTD HTML 4.01 Transitional//EN"
			"http://www.w3.org/TR/html4/loose.dtd">

这行代码不是HTML标签，但对Web浏览器来说非常重要，因为它指示浏览器按照HTML5的规范来解析和渲染页面。

根标签

HTML（HyperText Markup Language）的根标签是 <html>。这个标签是所有HTML文档中最外层的标签，它包裹了文档的所有其他内容，包括<head>和<body>部分。<html>标签用于声明这是一个HTML文档，并且告诉浏览器开始解析HTML代码。

一个基本的HTML文档结构如下所示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
    <!-- 其他头部标签，如meta, link, script等 -->
</head>
<body>
    <!-- 页面内容，如h1, p, img, div等标签 -->
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
</html>

在这个结构中：

• <!DOCTYPE html> 声明了文档类型和HTML版本（这里是HTML5）。这不是一个HTML标签，但它对浏览器很重要，因为它指示浏览器使用哪个HTML版本来解析文档。
• <html> 标签是根标签，包含了整个HTML文档的内容。
• lang="zh-CN" 属性在<html>标签中指定了页面的主要语言和内容方向（在这个例子中是中国大陆的简体中文）。这对于搜索引擎优化（SEO）和屏幕阅读器等辅助技术非常重要。
• <head> 部分包含了文档的元数据，如字符编码、页面标题、链接到CSS和JavaScript文件的链接等。
• <body> 部分包含了网页的可见内容，如文本、图片、视频、音频、链接、表格、列表等。

<html>标签是HTML文档结构的起点和终点，对于构建符合标准的网页至关重要。

头部元素

在HTML文档中，头部元素（Head Elements）通常被包含在<head>标签内部，这些元素为文档提供了元数据（metadata），这些元数据不会直接显示在网页上，但会被浏览器和搜索引擎等解析和使用。头部元素对于网页的呈现、性能优化、搜索引擎优化（SEO）等方面都非常重要。

以下是一些常见的头部元素：

1. <title>：定义了文档的标题，这个标题会显示在浏览器的标题栏或页面标签上。它对于SEO也非常重要，因为搜索引擎会使用页面标题作为搜索结果中的一个重要因素。
2. <meta>：<meta>标签用于提供有关HTML文档的元数据。<meta>标签可以包含许多类型的元数据，如字符编码、页面描述、关键字、作者、页面刷新时间等。对于SEO，页面描述和关键字特别重要，因为它们可以帮助搜索引擎了解页面的内容。
3. <link>：用于定义文档与外部资源的关系，最常见的是链接到外部CSS文件，用于定义网页的样式。<link>标签也可以用于定义网站图标（favicon）。
4. <style>：虽然<style>标签通常放在<head>部分，但它也可以放在<body>部分的任何地方。<style>标签定义了HTML文档的样式信息。然而，为了保持内容与样式的分离，通常建议将样式信息放在外部的CSS文件中，并通过<link>标签引入。
5. <script>：用于定义或引用JavaScript代码。JavaScript代码可以放在<script>标签内部，或者放在外部文件中并通过<script>标签的src属性引入。JavaScript为网页提供了交互性和动态功能。
6. <base>：定义了页面上所有相对链接的基准URL。当文档中的链接是相对路径时，<base>标签的href属性为这些链接提供了一个共同的URL前缀。
7. <noscript>：用于定义在浏览器不支持JavaScript或用户禁用了JavaScript时显示的替代内容。

头部元素对于控制网页的行为、外观和性能至关重要。通过合理使用这些元素，可以创建出既美观又实用的网页，并优化网页在搜索引擎中的排名。

需要注意的是，虽然头部元素对于网页来说非常重要，但它们并不直接参与网页的布局和呈现。相反，它们通过提供元数据来影响网页的行为和性能。因此，在编写HTML文档时，应该仔细考虑哪些头部元素是必需的，并正确地使用它们。

主体内容

在HTML文档中，主体内容（Body Content）是用户打开网页时直接看到和交互的部分。这部分内容被包含在<body>标签内部，它包含了所有可见的HTML元素，如文本、图片、视频、音频、表格、链接、列表、表单等。

<body>标签是HTML文档结构中的一个关键部分，它紧跟在<head>标签之后，并包含了所有希望展示给用户的网页内容。<body>标签内部可以包含多种HTML元素，这些元素按照HTML的语法规则进行嵌套和组合，以创建出结构清晰、内容丰富的网页。

以下是一个简单的HTML文档示例，展示了<body>标签内主体内容的结构：

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

    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落，里面包含了一些文本内容。</p>

    <ul>
        <li>列表项 1</li>
        <li>列表项 2</li>
        <li>列表项 3</li>
    </ul>

    <img src="image.jpg" alt="示例图片">

    <form action="/submit-form" method="post">
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name">
        <input type="submit" value="提交">
    </form>

</body>
</html>

在这个示例中，<body>标签内包含了以下几个主体内容元素：

• <h1>：定义了一个标题，它是页面中最重要的内容标题。
• <p>：定义了一个段落，用于展示文本内容。
• <ul> 和 <li>：分别定义了无序列表和列表项，用于展示一系列相关的内容。
• <img>：定义了一个图片元素，用于在网页中嵌入图片。
• <form>、<label>、<input> 和 <submit>：这些元素共同定义了一个表单，允许用户输入数据并提交给服务器。

主体内容是网页的核心部分，它决定了网页的呈现方式、内容和功能。通过合理使用HTML元素和CSS样式，可以创建出结构清晰、布局合理、内容丰富的网页。同时，也可以结合JavaScript等前端技术，为网页添加动态效果和交互功能，提升用户体验。

注释

HTML注释是对HTML代码进行说明的文字，这些文字不会被浏览器显示或执行，仅用于程序员之间的代码说明或代码调试。HTML注释以<!--开始，以-->结束。

HTML注释的基本语法

<!-- 这是一个HTML注释 -->

注释的用途

1. 代码说明：为代码段添加简短的描述，以便其他开发人员（或未来的你）能够理解代码的用途或逻辑。
2. 调试：在调试过程中，可以使用注释来临时移除或禁用某些代码段，而无需删除它们。
3. 条件性包含：虽然HTML本身不支持条件性注释（像某些服务器端脚本那样），但HTML注释经常与条件性注释技术结合使用，以向不同版本的浏览器提供不同的代码。不过，需要注意的是，随着Web技术的发展，条件性注释的使用已经越来越少，因为现代浏览器对HTML5和CSS3的支持已经相当广泛。
4. 保留未来可能使用的代码：在开发过程中，可能会编写一些当前未使用的代码段，但预计将来可能会用到。这时，可以将这些代码段注释掉，以便将来快速恢复。

注意事项

• 注释不能嵌套。也就是说，你不能在一个注释内部再创建一个注释。
• 注释可以跨越多行，只需确保注释的开始和结束标记正确无误。
• 注释不会增加页面的加载时间，因为它们不会被浏览器解析或显示。

示例结构

一个基本的HTML文档结构如下所示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的网页</title>
    <meta name="description" content="这是一个简单的HTML页面示例">
    <meta name="keywords" content="HTML, 示例, 网页">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个简单的HTML页面示例。</p>
    <img src="image.jpg" alt="示例图片">
</body>
</html>

在这个示例中，<html>标签是根元素，包含了<head>和<body>两个子标签。<head>标签内定义了文档的元数据，包括字符编码、页面标题、描述、关键字和外部CSS样式表的链接。<body>标签内则包含了网页的可见内容，如标题、段落和图片。

总结

HTML的基础结构由文档类型声明、<html>标签、<head>标签和<body>标签组成。这些部分共同定义了网页的结构和内容，是Web开发的基础。理解和掌握HTML的基础结构对于创建和维护网页至关重要。

HTML 概念词汇解释

• 超文本（Hypertext）：一种文本形式，它不仅包含文本字符，而且包含链接到其他文档或页面内其他部分的链接。这种链接允许用户点击跳转到相关内容。
• 标记语言（Markup Language）：用于定义文档结构和内容的特殊文本格式。HTML不是编程语言，而是一种标记语言，通过标签（Tag）来描述网页的内容。
• 根标签（）：HTML文档的最外层标签，包裹了整个HTML文档的内容，包括和部分。
• 头部（）：包含了文档的元数据，如文档的标题、字符编码、CSS链接、JavaScript文件引用等，这些信息不会直接显示在网页上，但会被浏览器和搜索引擎解析。
• 主体（）：包含了网页的可见内容，如文本、图片、视频、音频、表格、链接、列表、表单等。
• 标签（Tag）：HTML中的基本构建块，由尖括号包围的关键词组成，如<p>、<h1>、<img>等。标签用于定义HTML文档的内容和结构。
• 元素（Element）：从开始标签到结束标签的所有内容，包括标签本身和标签之间的内容。例如，这是一个段落。 就是一个段落元素。
• 属性（Attribute）：HTML标签的额外信息，提供关于HTML元素的更多细节。属性总是以名称/值对的形式出现，如<img src="image.jpg" alt="示例图片">中的src和alt就是属性。

HTML 语法规则

1. 根标签有且只能有一个
2. 无论是双标签还是单标签都需要正确关闭
3. 标签可以嵌套但不能交叉嵌套
4. 注释语法为 ,注意不能嵌套
5. 属性必须有值，值必须加引号,H5中属性名和值相同时可以省略属性值
6. HTML中不严格区分字符串使用单双引号,但是要求嵌套时必须单双交错使用,并且不能交叉嵌套
7. HTML标签不严格区分大小写,但是不能大小写混用
8. HTML中不允许自定义标签名,强行自定义则无效

开发工具 WebStorm

WebStorm是JetBrains公司旗下一款专为Web应用程序开发设计的集成开发环境（IDE）。它以其强大的功能和丰富的特性，在Web开发领域广受好评，被誉为“Web前端开发神器”、“最强大的HTML5编辑器”以及“最智能的JavaScript IDE”。以下是关于WebStorm的详细介绍：

基本信息

• 中文名：网络凤暴（注：此为非官方中文名，WebStorm的官方中文名并未广泛传播）
• 外文名：WebStorm
• 软件平台：Windows、Linux、MacOS
• 软件版本：持续更新中，如2022.3等（请注意，具体版本可能会随时间更新）

主要功能

1. 代码编辑与补全：
   • 支持HTML、CSS、JavaScript、TypeScript等多种前端技术，以及React、Angular、Vue.js等现代前端框架。
   • 提供智能代码提示和自动补全功能，帮助开发者减少敲击键盘的次数，提高开发效率。
2. 错误检测与修复：
   • 内置代码检测工具，如JSLint/JSHint，能够快速发现代码中的错误或潜在问题，并提供修复建议。
   • 支持代码重构，帮助开发者优化代码结构，提高代码质量。
3. 调试与测试：
   • 提供强大的调试功能，支持前端和后端代码的调试，方便开发者查找和解决问题。
   • 支持单元测试，帮助开发者确保代码的稳定性和可靠性。
4. 版本控制：
   • 集成了版本控制系统，如Git，方便开发者进行代码的版本管理和团队协作。
5. 其他功能：
   • 支持FTP和远程文件同步，方便开发者将代码部署到服务器上。
   • 提供丰富的插件库，允许开发者根据需求扩展WebStorm的功能。

特点与优势

1. 集成度高：将代码编辑器、调试器、版本控制、测试工具等多种Web开发所需的工具和功能集成在一起，方便开发者完成整个Web开发流程。
2. 智能提示与补全：通过智能代码提示和自动补全功能，减少开发者的输入量，提高开发效率。
3. 调试功能强大：提供便捷的调试界面和强大的调试功能，帮助开发者快速定位和解决代码中的问题。
4. 跨平台支持：支持Windows、Linux、MacOS等多个操作系统平台，满足不同开发者的需求。

注意事项

1. 价格较高：WebStorm是一款商业软件，需要付费使用（支持正版），价格相对较高，对于个人开发者来说可能有些昂贵。
2. 学习曲线较陡峭：由于WebStorm功能丰富，因此学习曲线较陡峭，需要花费一定的时间和精力去学习使用。
3. 占用资源较多：WebStorm占用的系统资源较多，需要电脑配置相对较好才能流畅运行。

综上所述，WebStorm是一款功能强大、集成度高的Web开发工具，适合专业开发者使用。然而，由于其价格较高和学习曲线较陡峭等特点，在选择时需要根据自身需求和实际情况进行权衡。