to navigate

to select

to close

内容索引

十二. Web基础 DRAFT

HTML（Hypertext Markup Language）是一种用于创建网页的标记语言。它提供了一种定义网页内容和结构的方式，使得浏览器能够正确地呈现页面内容。

HTML 使用标记（Markups）来描述页面的文本、图像、链接等内容，并且这些标记被写在对应的开始和结束标签之间。HTML 标记通常由尖括号“<”和“>”括起来，其中开始标记包含了元素的类型和属性，结束标记只包含了元素的类型。

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

<!DOCTYPE html>
<html>
  <head>
    <title>这里是页面标题</title>
  </head>
  <body>
    <h1>这里是主标题</h1>
    <p>这里是段落文本</p>
    <a href="https://www.example.com">这里是链接</a>
    <img src="image.jpg" alt="这里是图片">
  </body>
</html>

在上面的示例中，<!DOCTYPE html> 声明文档类型为 HTML，<html> 元素是文档的根元素，<head> 元素用于包含文档的头信息，<title> 元素定义了页面标题。接着在<body>元素中包含了页面的实际内容，包括一个<h1>元素作为页面的主标题，一个<p>元素作为段落文本，以及一个<a>元素和一个<img>元素用以添加超链接和图片。

HTML 还可以使用许多其他元素来创建丰富的网页内容，例如表格、表单、音频、视频等等。需要注意的是，HTML 只是一种标记语言，页面的样式、布局以及交互行为需要通过 CSS 和 JavaScript 等其他技术完成。

HEAD

HTML <head> 元素是位于 HTML 文件的 <html> 根元素内的一个元素，用于包含一些不会直接显示在页面上的头部信息。下面介绍一些常见的 <head> 元素内的标签：

<title>：定义了页面的标题，同时也是页面在搜索引擎结果中显示的标题文字。例如：<title>这里是页面标题</title>
<meta>：定义了文档的元数据，例如作者、关键词、字符集等。常见的有以下几个属性：

charset：定义页面使用的字符编码，如<meta charset="UTF-8">。
name：定义元数据的名称，例如：<meta name="keywords" content="HTML, Web">
content：定义元数据的内容。

<link>：定义文档与外部资源的关系，如 CSS 文件、icon 图标等。例如：<link rel="stylesheet" type="text/css" href="style.css"> 表示将一个名称为 style.css 的 CSS 文件与文档建立关联。

常见的 <head> 元素还有 <script>，用于引入 JavaScript 文件或在 <head> 元素中直接嵌入 JavaScript 代码。例如：<script src="script.js"></script> 表示将一个名称为 script.js 的 JavaScript 文件与文档建立关联。

总之，通过在 <head> 元素中包含上述标签，可以为页面提供更多的元数据和资源，从而使页面更加丰富和可读。

BODY

HTML <body> 元素是位于 HTML 文件的 <html> 根元素内的一个元素，用于包含页面的实际内容。下面介绍一些常见的 <body> 元素内的标签：

文本标签：用于呈现各种文本内容，包括字体、颜色、大小、样式等。常见的文本标签有：

<h1>~<h6>：定义六个级别的标题。例如：<h1>这是最大的标题</h1>
<p>：定义段落，用于包含一段连续的文本。例如：<p>这里是一段文本</p>
<a>：定义一个超链接。例如：<a href="https://www.example.com">这是一个链接</a>
<span>：用于对文本进行行内样式设置。例如：<span style="color:red;">这里的文本会变成红色</span>

列表标签：用于呈现各种列表，包括有序和无序列表。常见的列表标签有：

<ul>：定义无序列表。例如：<ul><li>项目1</li><li>项目2</li></ul>
<ol>：定义有序列表。例如：<ol><li>第一项</li><li>第二项</li></ol>

表格标签：用于呈现各种表格。常见的表格标签有：

<table>：定义一个表格。例如：<table><tr><td>单元格1</td><td>单元格2</td></tr></table>
<tr>：定义表格中的一行。例如：<tr><td>单元格1</td><td>单元格2</td></tr>
<td>：定义表格中的一个单元格。例如：<td>单元格内容</td>

表单标签：用于收集用户输入的信息。常见的表单标签有：

<form>：定义一个表单。例如：<form action="/submitform.php" method="POST">这里是表单内容</form>
<input>：定义表单中的输入框。例如：<input type="text" name="username">
<button>：定义表单中的按钮。例如：<button type="submit">提交</button>

通过这些标签和属性的组合，可以创建出丰富多彩的网页内容，呈现出不同的文本、图像、列表、表格、表单等内容。

CSS

CSS（Cascading Style Sheets）是一种用于为 HTML 页面添加样式和布局的样式表语言。它通过定义元素和元素组之间的样式关系，来改变文本、图像和其他 HTML 元素的外观。

CSS 分为内嵌和外部两种方式：

内嵌样式表：可以使用 <style> 标签将 CSS 样式代码嵌入到 HTML 文件中，例如：
```
<html>
  <head>
    <style>
      h1 {
        color: blue;
        font-size: 32px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>这是一个标题</h1>
  </body>
</html>
```
上述示例中，使用了 <style> 标记在 HTML 文件中直接定义了该页面视觉样式。其中，h1 选择器指定对所有 <h1> 元素应用该样式。这些属性将使标题文本呈现为蓝色、32像素字体大小、居中对齐。
外部样式表：可以使用 <link> 标签将 CSS 样式表文件与 HTML 文档关联起来。例如：
```
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>这是一个标题</h1>
  </body>
</html>
```
上述示例中，包含一个名称为 styles.css 的样式表文件，而该文件通过 <link> 标签与 HTML 文件关联。

CSS 样式规则通常由以下部分组成：

选择器：用于指定应用样式的 HTML 元素或元素组。上述示例中，选择器 h1 表示应用于所有 <h1> 元素。
属性：被设定的视觉特性。如上例中的包括 color、font-size、text-align。
值：属性的值。如上例中的 blue、32px、center。

CSS 还有许多高级特性，比如 CSS 层叠、CSS 盒模型等，这些能够让开发者更加精细地定义网页的样式和布局。总的来说，CSS 是网页设计中必不可少的技术之一，可以为网页添加各种各样的视觉效果。

以下是一个简单的 CSS 实例，用于设置 HTML 页面的文本样式：

<!DOCTYPE html>
<html>
<head>
	<title>CSS 实例</title>
	<style>
		body {
			font-family: Arial, sans-serif;
			color: #333;
			background-color: #f5f5f5;
		}
		
		h1 {
			color: #2a7ae2;
			font-size: 36px;
			text-align: center;
			margin-top: 50px;
			margin-bottom: 20px;
		}
		
		p {
			font-size: 18px;
			line-height: 1.5;
			margin-left: 20px;
			margin-right: 20px;
		}
	</style>
</head>
<body>
	<h1>欢迎来到 CSS 实例</h1>
	<p>这是一个简单的 CSS 实例，用于展示如何设置 HTML 页面中的文本样式。</p>
</body>
</html>

上面的代码中，使用了一个 <style> 元素来定义 CSS 样式。<body> 标签指定了整个页面的背景颜色和字体；<h1> 和 <p> 标签指定了页面内标题和文本的样式，包括字体、颜色、大小和对齐方式等。

对于每个 CSS 样式规则，分为三个部分：

选择器：指定要修改的 HTML 元素，在上述代码中的body、h1 和 p 就是选择器。
属性：指定要修改的视觉效果，如 color、font-size 等。
值：更改属性的方式，如 #2a7ae2、36px 等。

通过设置不同的属性和值，可以创建出任何所需的样式，从而使网页更加美观和易于阅读。

在Web页面中，脚本语言可以用来提供动态交互、增强页面功能等。以下是常用的Web页面中的脚本语言：

JavaScript：JavaScript是最流行的Web脚本语言，可以在浏览器上通过内嵌的标签进行运行。JavaScript是一门由ECMAScript标准定义的脚本语言，用于在Web浏览器中实现动态效果和交互功能。
TypeScript：TypeScript是一种由Microsoft开发的JavaScript超集，增加了静态类型和class等特性，可以提高代码的可读性和可维护性。TypeScript代码可以转换为标准的JavaScript代码，并能在浏览器上运行。
CoffeeScript：CoffeeScript是一种代码简洁、易读的编译型语言，可以转换为JavaScript代码。使用CoffeeScript可以实现更加优雅、简单的语法风格，节省代码量。
JSX：JSX是一种由Facebook开发的语言，用于在JavaScript中使用类似XML的语法描述UI组件。JSX需要通过转换工具（如Babel）将其转换为标准的JavaScript代码，在浏览器上运行。

除了这些脚本语言之外，还有一些其他语言可用于Web开发，如Ruby（使用Rails框架）、Python（使用Django或Flask框架）等。这些语言在Web开发中使用较少，但也有一定的使用场景。

JavaScript

JavaScript是一种基于对象和事件驱动的脚本语言，最初由Netscape公司开发，用于Web页面的动态效果和客户端的交互功能，并在后来成为ECMA国际标准。JavaScript最初是作为一种轻便的脚本语言，旨在创建Web页面的动态效果，如表单验证、动画效果、视觉特效等。随着Web应用程序的迅速发展，JavaScript变得越来越重要，并成为Web应用程序开发的重要组成部分。

JavaScript可以在Web浏览器中直接运行，不需要编译，可以实时更新和修改代码。它与HTML和CSS一起，组成了Web前端的三大基石，使得开发者可以通过使用JavaScript来增加Web页面的动态特效、实现用户交互、和进行与服务器交互的操作。除了Web开发之外，JavaScript也可以用于桌面和移动应用程序开发、游戏开发、服务器端编程等领域。

JavaScript是一种解释性语言，支持动态数据类型，具有良好的兼容性，可以在各种平台和设备上运行。它广泛应用于各种Web框架、库和工具中，如React、Angular、Vue、jQuery、Bootstrap等。同时，JavaScript也有一系列的标准和规范，由ECMA国际组织制定和维护，涵盖了ECMAScript、JSON和Web API等方面的规范。

总之，作为Web开发最重要的语言之一，JavaScript表现出足够的灵活性和强大的功能，持续演进的同时也吸引了越来越多的开发者的加入。

以下是一个简单的JavaScript编程实例，实现点击按钮改变背景颜色的功能：

HTML代码：

<!DOCTYPE html>
<html>
<head>
	<title>JavaScript实例 - 改变背景颜色</title>
	<style>
		body {
			background-color: #fff;
			color: #333;
			font-size: 24px;
			text-align: center;
			margin-top: 200px;
		}
		button {
			padding: 10px;
			background-color: #007bff;
			color: #fff;
			border: none;
			border-radius: 5px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1>点击按钮改变背景颜色</h1>
	<button onclick="changeColor()">改变颜色</button>

	<!-- JavaScript代码 -->
	<script>
		function changeColor() {
			var body = document.querySelector("body");
			body.style.backgroundColor = "#e3f2fd";
		}
	</script>
</body>
</html>

JavaScript代码：

function changeColor() {
    var body = document.querySelector("body");
    body.style.backgroundColor = "#e3f2fd";
}

实现的功能是当点击按钮时，将body元素的背景颜色改变为蓝色。具体实现逻辑是先通过querySelector方法获取body元素，然后通过修改其style属性中的backgroundColor值，从而实现改变背景颜色的效果。

TypeScript

TypeScript是一种由Microsoft开发的开源编程语言，它是JavaScript的超集，扩展了JavaScript的功能。TypeScript向后兼容JavaScript，其代码可以转化为JavaScript运行在任何浏览器、操作系统和计算机上。

TypeScript增加了可选的静态类型、类、接口、命名空间、枚举、装饰器、泛型等特性，使得代码更加严谨化、工具化和可维护性更强。具有以下主要特点：

静态类型：TypeScript可以对变量和函数参数、返回值等进行类型约束，从而在编译期间就可以发现类型错误，避免运行期出现类型错误。
类和接口：TypeScript支持面向对象编程的特性，包括类、接口和继承等，可以更加直观和优雅地编写代码。
语言扩展：TypeScript可以通过装饰器、类型别名、枚举、元组和泛型等特性扩展JavaScript语言。
环境支持：TypeScript可以在任何支持JavaScript的运行环境中运行，包括Web浏览器、服务器端环境和移动设备。
工具链支持：TypeScript提供了完整的工具链，包括编译器、语法检查、代码重构和代码提示等，可以提高开发效率和代码质量。

TypeScript在Angular、React等流行的前端框架中得到了广泛的应用，并有越来越多的开发者学习和使用。

以下是一个简单的TypeScript编程实例，实现计算两个数之和的功能：

TypeScript代码：

function sum(a: number, b: number): number {
    return a + b;
}

const result = sum(2, 3);
console.log(result);

该代码定义了一个名为sum的函数，它接受两个参数a和b，都是数字类型，并且返回它们的和，结果也是数字类型。

然后，在主程序中调用了这个函数，并将结果存储在变量result中，最后通过console.log输出结果。

需要注意的是，上述代码是TypeScript代码，需要先安装TypeScript编译器，并将其转换为JavaScript代码才能在浏览器中运行。可以通过以下命令安装TypeScript编译器：

npm install -g typescript

然后，将上述的TypeScript代码保存为sum.ts文件，然后使用以下命令将其转换为JavaScript代码：

tsc sum.ts

该命令执行后，会生成一个JavaScript文件sum.js，可以在浏览器或Node.js中运行。

JavaScript代码：

function sum(a, b) {
    return a + b;
}
var result = sum(2, 3);
console.log(result);

需要注意的是，TypeScript的类型注解只在开发阶段有用，编译后的JavaScript代码中并不包含类型信息。

什么是Ajax

Ajax是一种创建快速动态Web应用程序的技术。其全称是Asynchronous JavaScript And XML，即利用JavaScript和XML来创建异步Web应用程序。Ajax技术的主要特点是在不刷新整个页面的情况下，异步地向服务器请求数据并更新部分Web页面。其优点包括：

提升用户体验：Ajax技术可以实现局部更新，从而提高Web页面的响应速度、实现更多的交互效果，并在用户与Web应用程序进行交互时实现几乎无延迟的响应效果。
提高Web应用程序的灵活性：Ajax技术使Web应用程序可以在不刷新整个页面的情况下，动态更新部分Web内容，从而实现更多的动态效果和灵活性。
减轻服务器的负载：Ajax技术可以在不刷新整个页面的情况下向服务器发起请求，从而减少了服务器的负载，提高了Web应用程序的响应速度。

Ajax技术通常用于实现Web页面的数据交互、实时更新和数据异步提交等功能。Ajax的实现方式通常是通过XMLHttpRequest实现HTTP请求和响应操作，并且可以通过JavaScript动态更新DOM元素，从而实现动态效果和数据的异步提交。

在现代Web应用中，使用Ajax技术已经成为了标配，常见的实现方式包括jQuery、Fetch、Axios等库或框架。使用Ajax技术可以使Web应用程序实现更多的动态效果和交互功能，提升Web应用程序的用户体验和性能。

以下是一个简单的Ajax编程实例，使用JavaScript和XMLHttpRequest向服务器发起请求并获取响应数据，在Web页面上更新显示：

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>Ajax示例 - 获取天气信息</title>
    <meta charset="utf-8">
</head>
<body>
    <h1>Ajax示例 - 获取天气信息</h1>
    <div id="weather"></div>

    <!-- JavaScript代码 -->
    <script>
        var xhr = new XMLHttpRequest();  // 创建XMLHttpRequest对象
        xhr.open("GET", "https://api.weather.gov.hk/wxdata/TM_data.xml");  // 配置请求
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {  // 处理响应
                var xmlDoc = xhr.responseXML;  // 解析响应XML数据
                var temp = xmlDoc.getElementsByTagName("temp")[0].textContent;  // 获取温度数据
                var weatherDiv = document.getElementById("weather");  // 获取显示天气信息的div元素
                weatherDiv.innerHTML = "当前温度：" + temp + "℃";  // 更新天气信息
            }
        };
        xhr.send();  // 发送请求
    </script>
</body>
</html>

JavaScript代码：

var xhr = new XMLHttpRequest();  // 创建XMLHttpRequest对象
xhr.open("GET", "https://api.weather.gov.hk/wxdata/TM_data.xml");  // 配置请求
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {  // 处理响应
        var xmlDoc = xhr.responseXML;  // 解析响应XML数据
        var temp = xmlDoc.getElementsByTagName("temp")[0].textContent;  // 获取温度数据
        var weatherDiv = document.getElementById("weather");  // 获取显示天气信息的div元素
        weatherDiv.innerHTML = "当前温度：" + temp + "℃";  // 更新天气信息
    }
};
xhr.send();  // 发送请求

该代码实现了向香港天文台提供的天气API请求天气信息，并将其显示在Web页面上。具体实现过程如下：

创建一个XMLHttpRequest对象（即xhr），用于向服务器发起请求和处理响应。
配置xhr的请求，包括请求类型（这里使用GET请求）、请求地址和是否异步等信息。
为xhr注册readystatechange事件处理程序，当xhr的readyState属性值发生变化时调用该函数。
在xhr的readystatechange事件处理程序中，判断xhr的状态和响应码是否合法，如果合法则获取响应数据并进行解析。
从响应XML数据中获取温度信息，并将其更新到Web页面上。
最后发送请求。

需注意的是，该代码中使用了XMLHttpRequest对象来处理Ajax请求和响应。XMLHttpRequest对象是JavaScript中实现Ajax的核心对象，通过它可以实现异步请求和响应数据的处理。

Three.js

Three.js是一个基于WebGL的JavaScript库，用于创建各种三维场景、模型和动画效果。它提供了一系列工具及API，使得开发者能够通过简单的JavaScript代码轻松地创建出复杂的3D图形场景。

主要功能包括但不限于创建和渲染3D场景、加载和显示3D模型、创建和管理材质和纹理，以及实现各种3D动画效果等等。

Three.js的优点在于易学易用、可定制性强、兼容性好、性能高效、提供了海量的示例和文档，并且有着庞大且活跃的开发者社区，因此它被广泛应用于游戏、教育、建筑和设计等领域，为Web端提供了更加丰富、生动、真实的3D体验。

十一. 网络基础

十三. JSON数据格式

十二. Web基础 DRAFT

HEAD link

BODY link

CSS link

JavaScript link

TypeScript link

什么是Ajax link

Three.js link

HEAD

BODY

CSS

JavaScript

TypeScript

什么是Ajax

Three.js