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> 元素定义一个大标题
元素定义一个段落

什么是HTML？

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

标签

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

HTML 标签通常是成对出现的，比如 和

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

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

<标签>内容</标签>

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。

. 浏览器内核

浏览器的功能：显示在计算机中的网页实际上是位于许多不同的计算机文件中的元素的集合。因此，浏览器的功能首先是检索文件，然后将页面的各个部分组合起来，根据文本中的HTML命令排列这些部分。

浏览器内核分为两部分：渲染引擎 和 JavaScript引擎。其中，渲染引擎是浏览器内核中比较重要的部分，现在所说的内核一般指的都是渲染引擎。

常见的浏览器内核：

四大内核：

1、Trident内核，也称IE内核。

2、Webkit内核。

3、Gecko内核。

4、Presto内核。

各浏览器所用内核：

1、IE浏览器内核：Trident内核，也是俗称的IE内核；

2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；

3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；

4、Safari浏览器内核：Webkit内核；

5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；

6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；

7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；

8、百度浏览器、世界之窗内核：IE内核；

9、2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；

二. 浏览器显示页面的步骤

1. 从网络层（networking）获取请求文档的内容，解析HTML/SVG/XHTML，形成一个DOM树(DOM Tree)

默认情况下，加载和执行javascript都会阻止DOM tree的构建。

内部js脚本会在引入它的位置执行，外联脚本则是加载完毕后执行。

注意：因此，不管是内联脚本还是外部脚本，都应该尽量放在标签结束之前（除非某些脚本需要在页面加载完之前调用），这样可以保证在运行脚本之前，页面已经基本加载完成。

2. 解析CSS代码，计算出最终的样式数据，产生一个CSS规则树(CSS Rule Tree)

解析CSS的时候的顺序：浏览器默认设置，用户设置，外链样式，内联样式，html中的style

3. 解析JavaScript

通过DOM API来操作DOM Tree，通过CSSOM API来操作CSS Rule Tree

4. 解析完上述三种代码之后，就构建一个渲染树 (rendering tree)

渲染树和DOM树有所不同：

渲染树中不包括不需要渲染的节点 : html head meta link style script display : none的元素，渲染树中每一个节点都储存有对应的CSS属性，加载css会阻止render tree的构建

5. 开始渲染，页面初始化时会发生一次回流。

三. 页面的重绘和回流

1. 什么是页面的重绘和回流

回流：当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。（需要改变布局、几何属性）

重绘：当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

因此回流必定影响重绘，重绘不一定引起回流。回流比重绘的代价要更高

2. 回流何时发生

当页面布局和几何属性改变时就需要回流。下述情况会发生浏览器回流：

1、添加或者删除可见的DOM元素；

2、元素位置改变；

3、元素尺寸改变——边距、填充、边框、宽度和高度

4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；

5、页面渲染初始化；

6、浏览器窗口尺寸改变——resize事件发生时；（所以需要函数节流）

3. 浏览器对回流和重绘做的优化工作

浏览器会维护1个队列，把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会释放队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。(有点类似文档碎片frameElement感觉)

虽然有了浏览器的优化，但有时候我们写的一些代码可能会强制浏览器提前释放队列，这样浏览器的优化可能就起不到作用了。当你请求向浏览器请求一些 style信息的时候，就会让浏览器释放队列，比如：

offsetTop, offsetLeft, offsetWidth, offsetHeight
scrollTop/Left/Width/Height
clientTop/Left/Width/Height
width,height
请求了getComputedStyle(), 或者 IE的 currentStyle

当你请求上面的一些属性的时候，浏览器为了给你最精确的值，需要释放队列，因为队列中可能会有影响到这些值的操作。即使你获取元素的布局和样式信息跟最近发生或改变的布局信息无关，浏览器都会强行刷新渲染队列。

4. 减少回流reflow和重绘repaint

(1) 不要一条一条修改DOM的样式

替换方法：

预先定义好css，然后修改DOM的className，修改style的style.cssText

(2) 把DOM离线后修改

先把DOM给display:none(有一次reflow)，然后你想怎么改就怎么改。比如修改100次，然后再把他显示出来。clone一个DOM结点到内存里，然后想怎么改就怎么改，改完后，和在线的那个的交换一下。

(3) 不要把DOM结点的属性值放在一个循环里当成循环的变量。

(4) 尽可能修改层级比较低的DOM

(5) 为动画的HTML元素使用fixed或者absolute的position

修改他们的CSS是不会reflow的，因为使用fixed或者absolute的元素会脱离文档流

(6) 千万不要使用table布局

注意：CSS匹配DOM Tree主要是从右到左解析CSS的Selector，CSS匹配HTML元素是一个相当复杂和有性能问题的事情。DOM树要小，CSS尽量用id和class，千万不要过渡层叠下去。

欢迎关注。

本标记语言，英语：HyperText Markup Language，简称：HTML，是一种用于创建网页的标准标记语言。注意，HTML是标记语言，不是编程语言。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。手机上的H5，也是浏览器解析的，只是App内置的浏览器组件，你看不到而已。

目前，HTML5是最新的版本，主流浏览器都支持的了。如果出现不支持的话，升级到最新版本就好了。HTML5也支持在手机上运行，所以我们没理由不学H5的。

1.1 HTML页面结构

在没学HTML之前，很多人以为有复杂时的，其实学HTML就是学标签。除了<!DOCTYPE html>声明为H5文件,类似<meta charset="UTF-8">这种指定字符的之外，其他的，不是成对(如)，就是有结束符的标签(如)。

你要做的就是理解标签的意思和往里面放内容就好了。经我这么一说，是不是感觉挺简单的。是就对了。HTML不止开发简单，连开发工具都不挑，如WebStorm，Eclipse或VSCode等；如用来开发Java、C#、PHP、Python等的开发工具。

开发工具生成的HTML5文件模板里，便是一个完整的页面结构。内容，根据你个人喜好，进行删填即可。如果没有内容，则被称为空标签。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML来了</title>
</head>
<body>
<h1>老陈说编程</h1>
<p>编程界一老头</p>
<a href="home.html">个人主页</a>
</body>
</html>

输出结果(用浏览器打开)

1.2 HTML元素

HTML文档由 HTML 元素定义。元素以开始标签(如)起始,以结束标签(如)终止，元素的内容是开始标签与结束标签之间的内容，如：老陈说编程。标签对大小写不敏感： 等同于 ，推荐使用小写。

标签<a>里面的href，是属性。属性可以在元素中添加附加信息，以名称/值对的形式出现，一般放在开始标签中。

HTML注释：可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>第2个HTML</title>
</head>
<body>
<h3>做人要自然，自然美，才是真的美</h3>
<!--这是注释,src是属性-->
<img src="mm.jpg"/>
</body>
</html>

输出结果

好了，有关html页面结构和元素的内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。

一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注：老陈说编程。分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。

#前端##HTML##CSS##程序员##设计师#

在线咨询

上一篇：优雅的表单校验
下一篇：JavaScript开发工具WebStorm使用教程：WebStorm项目

您的项目需求

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