HTML自学手册-元宇宙之家

HTML自学手册-目录

HTML 教程- (HTML5 标准)

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言；
您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析！
HTML 很容易学习！相信您能很快学会它！

HTML 实例

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

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

注意：对于中文网页需要使用 <meta charset=”utf-8″> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset=”gbk”>

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元宇宙-HTML自学</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落</p>
</body>
</html>

尝试一下

还不会复制代码？点区域有教程！复制代码，点击 “尝试一下” 按钮，粘贴到 HTML运行测试工具查看实例！

HTML文档的后缀名

.html
.htm

以上两种后缀名没有区别，都可以使用

HTML 实例

在 HTML 手册中包含了数百个在线实例，您可以在线编辑并查看运行结果。

HTML 参考手册

在菜鸟教程中，我们提供了完整的 HTML 参考手册，其中包括标签、属性、颜色、实体等等。

元宇宙 HTML/CSS/JS 在线运行测试工具

HTML/CSS/JS 在线工具可以在线编辑 HTML、CSS、JS 代码，并实时查看效果，你也可以将优质代码保存分享：

https://html.liboven.cn/

【技术笔记-1】后缀名选择：htm/html

推荐使用长后缀名 html 。

命名应该遵从含义清晰、简洁、一致性原则。含义清晰指见名知义，比如这里的 htm（hypertext markup）和 html (hypertext markup language) 均采用的是英文单词首字母缩写，含义清晰。简洁要求变量命名尽量简短，比如此处后缀名使用首字母缩写而不使用全单词。一致性原则要求同环境下的大量变量命名符合同样的规则，比如有的朋友习惯于Linux文件夹命名规则后，使用win系统时新建文件夹命名仍拒绝使用空格，这便造成了新文件夹名与旧文件夹名命名规则不一致。

一致性原则往往更为重要。比如合作开发时，不能各守其是，人为提高开发难度。

从一路风尘的笔记中，我们了解到 htm 是历史遗留的8.3字符限制命名方式，而现在我们在命名时并未遵守8.3规则。因此，从 htm 和 html 中选择时，也应该选择无限制长度命名方式的 html 。

【技术笔记-2】htm 与 html 的区别

前者是超文本标记(Hypertext Markup)

后者是超文本标记语言(Hypertext Markup Language)

可以说 htm = html

同时，这两种都是静态网页文件的扩展名，扩展名可以互相更换而不会引起错误（这是指打开而言，但是对于一个链接来说，如果它指向的是一个htm文件，而那个htm文件被更改为html文件，那么是找不到这个链接的）

那为什么出现两种文件格式呢？

htm 是来源于老的 8.3 文件格式，DOS 操作系统只能支持长度为三位的后缀名，所以是 htm,但在 windows 下无所谓 HTM 与 HTML，html 是为长文件名的格式命名的。所以 htm 是为了兼容过去的DOS命名格式存在的，在效果上没有区别的。以前 htm 和 html 作为不同的服务器上的超文本文件，但现在通用。

什么是8.3文件格式？这是一种在老的16位Win95或Win98文件系统的短文件名文件格式，扩展名只限于3位，文件名只限于8位。如果要与16位系统交互，比如说，要把一个路径传给一个16位的程序，你就不能用长文件名，而必须对它进行转换。例如把“C ： /MyLongestPath/MyLongerPath/MyFilename.txt”转换成“C ： /Mylong~1/MyLong~2/Myfile~1.txt”

了解这个有什么用？在FAT磁盘格式下的DOS中只支持8.3文件格式，如果你要在这个环境下做应用，应该要注意这个文件格式问题。在NTFS下，默认可以兼容这种文件格式，同时也支持长文件名，你也可以通过调整注册表来取消对8.3文件格式也支持。

【技术笔记-3】utf-8 和 utf8的区别

在使用中常常遇到 utf-8 和 utf8，现在终于弄明白他们的使用不同之处了，现在来和大家分享一下，下面我们看一下 utf-8 和 utf8 有什么区别。

“UTF-8” 是标准写法，php 在 Windows 下边英文不区分大小写，所以也可以写成 “utf-8″。”UTF-8″ 也可以把中间的”-“省略，写成 “UTF8″。一般程序都能识别，但也有例外（如下文），为了严格一点，最好用标准的大写”UTF-8″。

在数据库中只能使用”utf8″(MySQL) 在MySQL的命令模式中只能使用”utf8″，不能使用”utf-8″，也就是说在PHP程序中只能使用 “set names utf8(不加小横杠)”，如果你加了”-“此行命令将不会生效，但是在 PHP 中 header 时却要加上”-“，因为 IE 不认识没杠的”utf8″，原因见下文。

PHP 中的 header：

<?php header('Content-Type: text/html; charset=UTF-8'); ?> //奇怪了：Content-Type 用冒号，Chatset却是等号。

静态文件使用：

总结：【只有在MySQL中可以使用”utf-8″的别名”utf8″，但是在其他地方一律使用大写”UTF-8″。】

具体为：

除了在命令 “mysql_query(set names utf8)” 外一律用大写”UTF-8″。

【技术笔记-4】HTML中不支持

注意:HTML中不支持空格、回车、制表符，它们都会被解析成一个空白字符

HTML简介

HTML 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元宇宙-HTML自学</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落</p>
 
</body>
</html>

点击尝试一下

实例解析

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

注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。

什么是HTML?

HTML 是用来描述网页的一种语言。

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

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 和
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

<标签>内容</标签>

HTML 元素

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

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

HTML 元素:

这是一个段落。

Web 浏览器

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

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

HTML 网页结构

下面是一个可视化的HTML页面结构：

<html>
<head>
<title>页面标题</title>
</head>
<body>

<h1>这是一个标题</h1>
<p>这是一个段落。</p>

<p>这是另外一个段落。</p>

</body>
</html>

只有 <body>这个区域</body>才会在浏览器中显示

HTML版本

从初期的网络诞生后，已经出现了许多HTML版本:

版本	发布时间
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

<!DOCTYPE> 声明

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

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

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

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

通用声明

HTML5

<!DOCTYPE html>

HTML 4.01

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

XHTML 1.0

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

中文编码

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
页面标题</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

【技术笔记-1】doctype 声明

1. doctype 声明是不区分大小写的，用来告知 Web 浏览器页面使用了哪种 HTML 版本。

在HTML 4.01 中，<!DOCTYPE> 声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML（Standard Generalized Markup Language 标准通用标记语言）。

HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明，分别是：Strict、Transitional 和 Frameset。

HTML5 不是基于 SGML，因此不要求引用 DTD。

2. 对于中文网页需要使用 <meta charset=”utf-8″> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset=”gbk”>。

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

【技术笔记-2】<!doctype html>

对于设置 <meta charset=”utf-8″ /> 后出现网页乱码问题，其实归根到底就是：你通过 meta 标签设置的编码和网页文件在保存时所使用的文档编码不相同造成的！

至于有的人说什么 360 浏览器默认 GBK 会造成乱码，我只想说的是，

只要你在 html 文件里写了 <!doctype hmtl>和 <meta charset=”utf-8″ />，浏览器就绝对会按照 utf-8 编码解析网页，没有第二种可能！再次重点说明：保存 html 文件时，文档编码和 meta 设置的编码，一定要相同，只要不相同，就一定会出现乱码！

之所以一定要写上 <!doctype html>，就是为了防止浏览器的怪异模式，强制浏览器按照标准模式渲染网页！

HTML 编辑器

HTML 编辑器主要用于方便html代码编辑，元宇宙之家给大家推荐几款常用的，专业的编辑器

HTML 编辑器推荐

可以使用专业的 HTML 编辑器来编辑 HTML，php中文网为大家推荐几款常用的编辑器：

此处内容已隐藏，请评论后刷新页面查看.

你可以从以上软件的官网中下载对应的软件，按步骤安装即可。

接下来我们将为大家演示如何使用 HTML编辑工具来创建 HTML 文件，其他两个工具操作步骤类似。

Notepad++

Notepad++是 Windows操作系统下的一套文本编辑器(软件版权许可证: GPL)，有完整的中文化接口及支持多国语言编写的功能(UTF8技术)。

步骤 1: 新建 HTML 文件

在 Notepad++ 安装完成后，选择” 文件(F)->新建(N) “，在新建的文件中输入以下代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自学元宇宙 （liboven.cn）</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>

步骤 2: 另存为 HTML 文件

然后选择” 文件(F)->另存为(A) “，文件名为 index.html

当您保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 扩展名，两者没有区别，完全根据自己的喜好保存；

步骤 3: 在浏览器中运行这个 HTML 文件

启动您的浏览器，然后选择”文件”菜单的”打开文件”命令，或者直接在文件夹中双击您的 HTML 文件,

运行显示结果类似如下:

每一种电脑操作系统都带有简单的文本编辑器

Windows 用户可以使用记事本；
Linux 用户可以选择几种不同的文本编辑器，如 vi、vim 或者 emacs ；
Mac 用户可以使用 OS X 预装的 TextEdit。

温馨提示：本文最后更新于2022-12-27 10:01:27，某些文章具有时效性，若有错误或已失效，请在下方留言或联系云小叔叔。

文章版权声明 1、本网站名称：元宇宙之家
2、本站永久网址：https://liboven.cn
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

文章版权归作者所有，未经允许请勿转载！

THE END