整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
大家在浏览网页的时候，是否思考过这样一个问题：怎样才能制作出一个网页呢？制作出一个网页是很简单的，只要知道什么是HTML并掌握HTML的基础知识就可以制作出一个简单的网页，今天我就为讲解HTML的入门及结构组成。
一、什么是HTML?
1、在我们开始学习HTML之前我们需要知道什么是HTML？
HTML的全称为Hyper Text Markup Language，中文名称为超文本标记语言，阅览方式为网页浏览器，同时HTML也被称为网页。
2、一个简单的HTML文档
二、HTML编辑器
我们在可以使用TXT文本文档或者专业的HTML编辑器来编辑HTML。
1、记事本
① 创建一个TXT文本
② 输入HTML代码
③ 点击文件—另存为—输入名称+“html”的后缀名即可得到你的第一个HTML文件。
④ 然后双击这个文件运行。
运行结果
2、专业编辑器
① Sublime Text
② HBuilder
③ Adobe Dreamweaver
④ CoffeeCup HTML Editor
这其中我比较推荐HBuilder这款编辑器，界面简单，编辑起来很快。
三、HTML的组成部分
在上面的案例中我们可以看到HTML是由头部（head）和身体（body）所组成的。
1、头部（head）
通常包含标题（title），也就是一个网页的名称
网页标题
2、身体（body）
body的部分是整个网页的重要内容部分，让人一眼就浏览到这个网页的内容，可以插入文本、图片、多媒体等内容。
四、HTML元素
l HTML元素是指以开始标签起始，以结束标签终止的元素：元素内容即为开始标签与结束标签之间的内容。
l <head></head>、<body></body>、<p></p>、<h1></h2>等这些都是HTML元素，在上面的案例中就有六个元素。
l 也有部分元素只有开始标签，例如<br>,以开始标签的结束而结束。
五、HTML的属性
l 一般来说HTML的属性就是HTML元素的属性，属性可以在元素中添加附加信息。
l 属性总是以名称/值对的形式出现，比如：name=”value”。
l 属性一般描述于开始标签。
l style中会有更多的属性。
六、HTML格式化
HTML可定义很多供格式化输出的元素，比如粗体字和斜体字。
HTML文本格式化标签
标签 | 描述 |
<b> | 定义粗体文本 |
<em> | 定义着重文字 |
<i> | 定义斜体字 |
<small> | 定义小号字 |
<strong> | 定义加重语气 |
<sub> | 定义下标字 |
<sup> | 定义上标字 |
<ins> | 定义插入字 |
<del> | 定义删除字 |
运行结果示意图
HTML“计算机输出”标签
标签 | 描述 |
<code> | 定义计算机代码 |
<kdd> | 定义键盘码 |
<samp> | 定义计算机代码样本 |
<var> | 定义变量 |
<pre> | 定义预格式文本 |
HTML引文、引用及标签定义
标签 | 描述 |
<abbr> | 定义缩写 |
<address> | 定义地址 |
<bdo> | 定义文字方向 |
<blockquote> | 定义长的引用 |
<q> | 定义短的引用语 |
<cite> | 定义引用、引证 |
<dfn> | 定义一个定义项目 |
七、HTML超链接
超链接可以是图片、文字、多媒体也可以是一个网址
示例：
结果：
点击带有下划线的两个字就可以进入某度的网站
八、HTML CSS
1、CSS是一种层叠样式表，可以修饰html元素的样式并可以精确地进行排版
2、CSS有三种方式：
l 内部样式，在HTML元素中使用“style”属性
l 内部样式表，在头部<head>区域使用<style>元素来包含CSS
l 外部引用，引用带有后缀css的文件，示例：
html文档
css文档
如果你看到了这里，就说明你已经打开了制作网页的大门啦~
对于前端来说，HTML 都是最基础的内容。
今天，我们来了解一下 HTML 和网页有什么关系，以及与 DOM 有什么不同。通过本讲内容，你将掌握浏览器是怎么处理 HTML 内容的，以及在这个过程中我们可以进行怎样的处理来提升网页的性能，从而提升用户的体验。
不知你是否有过这样的体验：当打开某个浏览器的时候，发现一直在转圈，或者等了好长时间才打开页面……
此时的你，会选择关掉页面还是耐心等待呢？
这一现象，除了网络不稳定、网速过慢等原因，大多数都是由于页面设计不合理导致加载时间过长导致的。
我们都知道，页面是用 HTML/CSS/JavaScript 来编写的。
HTML由一系列的元素组成，通常称为HTML元素。HTML 元素通常被用来定义一个网页结构，基本上所有网页都是这样的 HTML 结构：
<html>
<head></head>
<body></body>
</html>其中：
HTML 中的元素特别多，其中还包括可用于 Web Components 的自定义元素。
前面我们提到页面 HTML 结构不合理可能会导致页面响应慢，这个过程很多时候体现在<script>和<style>元素的设计上，它们会影响页面加载过程中对 Javascript 和 CSS 代码的处理。
因此，如果想要提升页面的加载速度，就需要了解浏览器页面的加载过程是怎样的，从根本上来解决问题。
浏览器在加载页面的时候会用到 GUI 渲染线程和 JavaScript 引擎线程（更详细的浏览器加载和渲染机制将在第 7 讲中介绍）。其中，GUI 渲染线程负责渲染浏览器界面 HTML 元素，JavaScript 引擎线程主要负责处理 JavaScript 脚本程序。
由于 JavaScript 在执行过程中还可能会改动界面结构和样式，因此它们之间被设计为互斥的关系。也就是说，当 JavaScript 引擎执行时，GUI 线程会被挂起。
以网易云课堂官网为例，我们来看看网页加载流程。
（1）当我们打开官网的时候，浏览器会从服务器中获取到 HTML 内容。
（2）浏览器获取到 HTML 内容后，就开始从上到下解析 HTML 的元素。
（3）<head>元素内容会先被解析，此时浏览器还没开始渲染页面。
我们看到<head>元素里有用于描述页面元数据的<meta>元素，还有一些<link>元素涉及外部资源（如图片、CSS 样式等），此时浏览器会去获取这些外部资源。除此之外，我们还能看到<head>元素中还包含着不少的<script>元素，这些<script>元素通过src属性指向外部资源。
（4）当浏览器解析到这里时（步骤 3），会暂停解析并下载 JavaScript 脚本。
（5）当 JavaScript 脚本下载完成后，浏览器的控制权转交给 JavaScript 引擎。当脚本执行完成后，控制权会交回给渲染引擎，渲染引擎继续往下解析 HTML 页面。
（6）此时<body>元素内容开始被解析，浏览器开始渲染页面。
在这个过程中，我们看到<head>中放置的<script>元素会阻塞页面的渲染过程：把 JavaScript 放在<head>里，意味着必须把所有 JavaScript 代码都下载、解析和解释完成后，才能开始渲染页面。
到这里，我们就明白了：如果外部脚本加载时间很长（比如一直无法完成下载），就会造成网页长时间失去响应，浏览器就会呈现“假死”状态，用户体验会变得很糟糕。
因此，对于对性能要求较高、需要快速将内容呈现给用户的网页，常常会将 JavaScript 脚本放在<body>的最后面。这样可以避免资源阻塞，页面得以迅速展示。我们还可以使用defer/async/preload等属性来标记<script>标签，来控制 JavaScript 的加载顺序。
百度首页
对于百度这样的搜索引擎来说，必须要在最短的时间内提供到可用的服务给用户，其中就包括搜索框的显示及可交互，除此之外的内容优先级会相对较低。
浏览器在渲染页面的过程需要解析 HTML、CSS 以得到 DOM 树和 CSS 规则树，它们结合后才生成最终的渲染树并渲染。因此，我们还常常将 CSS 放在<head>里，可用来避免浏览器渲染的重复计算。
我们知道<p>是 HTML 元素，但又常常将<p>这样一个元素称为 DOM 节点，那么 HTML 和 DOM 到底有什么不一样呢？
根据 MDN 官方描述：文档对象模型（DOM）是 HTML 和 XML 文档的编程接口。
也就是说，DOM 是用来操作和描述 HTML 文档的接口。如果说浏览器用 HTML 来描述网页的结构并渲染，那么使用 DOM 则可以获取网页的结构并进行操作。一般来说，我们使用 JavaScript 来操作 DOM 接口，从而实现页面的动态变化，以及用户的交互操作。
在开发过程中，常常用对象的方式来描述某一类事物，用特定的结构集合来描述某些事物的集合。DOM 也一样，它将 HTML 文档解析成一个由 DOM 节点以及包含属性和方法的相关对象组成的结构集合。
我们常见的 HTML 元素，在浏览器中会被解析成节点。比如下面这样的 HTML 内容：
<html>
<head>
<title>标题</title>
</head>
<body>
<a href='xx.com'>我的超链接</a>
<h1>页面第一标题</h1>
</body>
</html>打开控制台 Elements 面板，可以看到这样的 HTML 结构，如下图所示：
在浏览器中，上面的 HTML 会被解析成这样的 DOM 树，如下图所示：
我们都知道，对于树状结构来说，常常使用parent/child/sibling等方式来描述各个节点之间的关系，对于 DOM 树也不例外。
举个例子，我们常常会对页面功能进行抽象，并封装成组件。但不管怎么进行整理，页面最终依然是基于 DOM 的树状结构，因此组件也是呈树状结构，组件间的关系也同样可以使用parent/child/sibling这样的方式来描述。同时，现在大多数应用程序同样以root为根节点展开，我们进行状态管理、数据管理也常常会呈现出树状结构。
我们知道，浏览器中各个元素从页面中接收事件的顺序包括事件捕获阶段、目标阶段、事件冒泡阶段。其中，基于事件冒泡机制，我们可以实现将子元素的事件委托给父级元素来进行处理，这便是事件委托。
如果我们在每个元素上都进行监听的话，则需要绑定三个事件;(假设页面上有a,b,c三个兄弟节点)
function clickEventFunction(e) {
console.log(e.target === this); // logs `true`
// 这里可以用 this 获取当前元素
}
// 元素a,b,c绑定
element2.addEventListener("click", clickEventFunction, false);
element5.addEventListener("click", clickEventFunction, false);
element8.addEventListener("click", clickEventFunction, false);使用事件委托，可以通过将事件添加到它们的父节点，而将事件委托给父节点来触发处理函数：
function clickEventFunction(event) {
console.log(e.target === this); // logs `false`
// 获取被点击的元素
const eventTarget = event.target;
// 检查源元素`event.target`是否符合预期
// 此处控制广告面板的展示内容
}
// 元素1绑定
element1.addEventListener("click", clickEventFunction, false);这样能解决什么问题呢？
常见的使用方式主要是上述这种列表结构，每个选项都可以进行编辑、删除、添加标签等功能，而把事件委托给父元素，不管我们新增、删除、更新选项，都不需要手动去绑定和移除事件。
如果在列表数量内容较大的时候，对成千上万节点进行事件监听，也是不小的性能消耗。使用事件委托的方式，我们可以大量减少浏览器对元素的监听，也是在前端性能优化中比较简单和基础的一个做法。
注意:
我们了解了 HTML 的作用，以及它是如何影响浏览器中页面的加载过程的，同时还介绍了使用 DOM 接口来控制 HTML 的展示和功能逻辑。我们了解了DOM解析事件委托等相关概念。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> // 页面源代码内容 </body> </html>
动手小练习：
1.试着默写HTML基本结构
*请认真填写需求信息，我们会在24小时内与您取得联系。
