HTML教程（看完这篇就够了）

TML教程

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

在本教程中，您将学习如何使用 HTML 来创建站点。

HTML 很容易学习！相信您能很快学会它！

本教程包含了数百个 HTML 实例。

使用本站的编辑器，您可以轻松实现在线修改 HTML，并查看实例运行结果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>孙叫兽的博客</title>
    </head>
    <body>
        <h1>我的第一个标题</h1>
        <p>我的第一个段落。</p>
    </body>
</html>

HTML 文档的后缀名

.html

.htm

都可以。

HTML 简介

实例：

<!doctype html>
<html>
<header>
<meta charset="utf-8">
<title>孙叫兽的博客</title>
</header>
<body>
<h1>这是我的标题</h1>
<p>这是我的段落</p>
</body>
</html>

实例解析

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset=“utf-8”> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

什么是HTML？

HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
HTML 标签
HTML 标记标签通常被称为 HTML

标签

HTML 标签是由尖括号包围的关键词，比如 <html>

HTML 标签通常是成对出现的，比如 <b> 和 </b>

标签对中的第一个标签是开始标签，第二个标签是结束标签

开始和结束标签也被称为开放标签和闭合标签

<标签>内容</标签>

html元素

“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML 元素:

<p>这是一个段落</p>

web浏览器

Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。

浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户

html网页结构

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <h1>这是一个标题</h1>
        <p>这是一个段落。</p>
        <p>这是另外一个段落。</p>
    </body>
</html>

html的版本：

<!DOCTYPE>声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

html5

<!DOCTYPE html>

html4

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

xhtml1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

中文编码

目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8。

avaScript 的 Rest 和 Spread 操作符自 ES6 引入以来，大大改变了开发者处理数组和对象的方式。这些操作符提供了更简洁、更易读的语法，使代码更易于理解和维护。本文将介绍如何有效地使用 Rest 和 Spread 操作符，并通过示例进行说明。

Rest 和 Spread 操作符简介

Rest 操作符（...）允许你将多个元素收集到一个数组或对象中，通常用于函数参数中，将参数列表转换为数组。而 Spread 操作符（...）则用于将数组或对象展开为单个元素，这在复制、合并或传递数组和对象时特别有用。

理解并掌握这些操作符可以大大提升你的 JavaScript 编码水平，使代码更加简洁和富有表现力。

Rest 操作符的应用

函数参数处理

Rest 操作符在函数定义中非常有用，可以处理不定数量的参数：

function multiply(...numbers) {
  return numbers.reduce((product, number) => product * number, 1);
}
console.log(multiply(2, 3, 4)); // 输出: 24

在这个例子中，multiply 函数接受任意数量的参数并进行相乘。Rest 操作符将所有参数收集到 numbers 数组中，使得可以轻松应用 reduce 等数组方法。

数组解构

Rest 操作符还可以在数组解构中使用，将剩余元素收集到一个新数组中：

const [head, ...tail] = ['a', 'b', 'c', 'd'];
console.log(head);  // 输出: 'a'
console.log(tail);  // 输出: ['b', 'c', 'd']

在这个例子中，数组的第一个元素被赋值给 head，其余元素则被收集到 tail 数组中。

Spread 操作符的应用

数组合并

使用 Spread 操作符，数组合并变得非常简单：

const fruits = ['apple', 'banana'];
const vegetables = ['carrot', 'potato'];
const food = [...fruits, ...vegetables];
console.log(food); // 输出: ['apple', 'banana', 'carrot', 'potato']

在这个例子中，Spread 操作符将 fruits 和 vegetables 展开为单个元素并合并到 food 数组中。

数组复制

创建数组副本同样很方便：

const numbers = [1, 2, 3];
const numbersCopy = [...numbers];
console.log(numbersCopy); // 输出: [1, 2, 3]

这样创建了一个包含与 numbers 数组相同元素的新数组 numbersCopy，修改 numbersCopy 不会影响 numbers。

对象合并

Spread 操作符还可以用于对象的合并：

const person = { name: 'Alice', age: 25 };
const job = { title: 'developer', company: 'Tech Co.' };
const employee = { ...person, ...job };
console.log(employee); // 输出: { name: 'Alice', age: 25, title: 'developer', company: 'Tech Co.' }

在这个例子中，person 和 job 被合并到 employee 对象中，形成一个新的对象。

高级技巧

对象解构中的 Rest 操作符

Rest 操作符可以在对象解构中使用，收集剩余的属性：

const { title, ...details } = { title: 'Book', author: 'John Doe', year: 2021 };
console.log(title);    // 输出: 'Book'
console.log(details);  // 输出: { author: 'John Doe', year: 2021 }

这个例子展示了如何提取特定属性（title），同时将剩余属性收集到 details 对象中。

Spread 操作符用于函数参数

在调用接受多个参数的函数时，Spread 操作符可以简化传递数组元素作为参数：

function concatenate(str1, str2, str3) {
  return str1 + str2 + str3;
}
const words = ['Hello', ' ', 'World!'];
console.log(concatenate(...words)); // 输出: 'Hello World!'

通过展开 words 数组，每个元素作为独立参数传递给 concatenate 函数。

结论

JavaScript 中的 Rest 和 Spread 操作符是强大的工具，可以极大地增强代码的灵活性和可读性。不论是处理数组、对象还是函数参数，这些操作符都能提供优雅的解决方案。通过掌握这些操作符，你可以编写更简洁、高效的代码，提升整体开发体验。

理解并有效使用 Rest 和 Spread 操作符，不仅可以简化当前项目，还能为未来的挑战做好准备，使你的 JavaScript 代码更易维护和表达。

web开发中我们一般都会不可避免的使用js。我们可以将js代码直接放在页面中即通过内部使用js。但是为了给页面良好的"瘦身"我们一般都会将js代码放在外部，然后通过src引用。这个时候我们就需要注意一个问题：编码问题。如果web页面也js采用不同编码，这个时候就会出现乱码。(内部使用js不需要注意编码问题，因为他们采用的是同一种编码)

对于大多数的web页面，我们一般都是使用如下两种编码：UTF-8、GB2312。所以我们只需要同意页面和js编码就可以解决乱码问题：

对于GBK页面引用编码为UTF-8编码的JavaScript文件如果出现乱码问题，可以使用下面的代码来解决

复制代码代码如下:

＜script type=”text/javascript” src=”test.js” charset=”utf-8″></script>

同样在UTF-8页面中引入编码为GBK的JavaScript文件乱码问题了，可以使用如下方式：

复制代码代码如下:

＜script type=”text/javascript” src=”test.js” charset=”gb2312″></script>

此方法是对于在js文件中出现汉字中文，以及其他容易造成在GBK与UTF-8编码错误字符的时候使用，对于纯英文的就不需要了。如果为了保险，加上也可以....

在线咨询

上一篇：jQuery 移除或禁用html元素的点击事件方法汇总
下一篇：你应该要知道的，前端开发过程中的HTML规范

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。