《HTML编程入门-基础元素》-软件开发回顾篇
当你能跟着指导老师的讲解过程来到这节课，对你的坚持不懈，我们感到由衷的钦佩。人的天性是趋利避害的，面对未知而庞大的软件编程世界，面对未知的改变，你没有害怕、烦躁、退缩，这种勇气是非常可嘉的。精诚所至，金石为开，与君共勉。
今天跟大家一起回顾下HTML基础知识。
今天，继续HTML的基础知识学习。
首先，我们需要将视角从单个的HTML元素，提升到整个HTML文档，学习和理解HTML文档。
其次，再认识并掌握一些基础的HTML元素使用。掌握了这些，才能为我们以后的学习打下扎实的基础。
文档结构，通常是指按照大家公认的一种约束结构来规范内容，而HTML的官方组织（W3C）也给出了HTML文档的定义，以及基础结构。
先来看一个基础的html文档，结构如下：
<html><head><title></title></head><body></body></html>
我们可以用已掌握的标签语法来简单理解下。
首先，可以看到一堆堆的标签，大致有：
html
head
title
body
标签之间还有包含、嵌套的关系。
是的，在HTML语法中一些标签之间是可以进行嵌套的。而在嵌套中，应该要注意结束标签的顺序问题。这里的顺序关系似于汉语的回文体，比如大家熟知的对联：香山碧云寺云碧山香，黄山落叶松叶落山黄，HTML中则为
：<html><head><title></title></head></html>我们，为什么要使用html、head、title、body这些标签名，而不是kaishi、neirong这类的呢？
其实在HTML语法规范中，已经约定了非常多的基础标签，而不用我们凭空来制造标签。每个标签都应该具有可读性、语义性。我们学习HTML语法的重中之重则就是认识、学习、以及灵活应用这些标签。
通过上面的示例，咱们又将学习几个特别的HTML标签。为什么说特别呢？主要是因为，正是这几个标签构成了基础的、标准的HTML文档结构，在一个文档中，有且仅能存在一个。
新的标签 - <html>
在示例中，可以看到，最外层的标签为<html>。所以，<html>标签的含义就是定义一个Html文档，表示了文档的开始和结束。那么同理，其他的标签都应该在<html>标签的内部。
新的标签 - <head>
head [h?d]，含有头部的意思。在文档结构中，可以理解为，是这个Html文档的头部标签。作为文档头，当然是对这个文档进行说明。如果沿用咱们前面的标签具有属性的概念，那么，文档头，相当于是Html文档的属性信息。
新的标签 - <title>
title [?ta?tl]，标题。从结构中看，放置在<head></head>中间，表示<title></title>标签定义的是文档属性，根据词义，那么就是指文档的标题
新的标签 - <body>
body [?bɑ:di]，身体、主体。可以看到与<head></head>是并列的，表示为Html文档的的主体内容。
那么，总的来看，一个Html文档的基础结构为：
接下来，让我们来创建一个网页文件(我的第一个网页.html)，还不会创建的，可以通过文后课程列表回顾上一节。这里建议同学们实际动手做一做，因为，后续我们的课程内容都会基于这个示例进行扩展。
然后用记事本打开，敲下属于自己的第一段html代码吧
在实际编写的时候，可以从上图中看到，为了保证良好、直观的阅读性，在标签进行嵌套的时候，内部标签需要进行两个空格(敲两次空格)宽度的缩进。
编写完成后并保存，然后双击我们的网页文件，会自动打开系统默认浏览器来完成预览。
千里之行，始于足下。再漂亮绚丽的网页，也是从基础的Html文档开始编写，当我们慢慢学习，掌握越来越多的知识，那么，距离那一天，不会太远。
心细的同学，可能已经发现了。我们的标题已经从HTML语法介绍变成了HTML学习，这也表示，你已经迈过了HTML最基础的部分。最基础的语法，你已经完全掌握了。
那么，我们接下来的HTML学习重心，将会转移到对HTML自带元素的学习。
前面也有提过，我们虽然掌握了HTML标签的写法，但是在HTML的编写中，标签又是不能瞎写的。也就是说，虽然我们已经掌握了基础的声母、韵母、汉字笔画结构，但是，我们又不能瞎组合与创造。因为，咱们使用语言的目的是为了与别人沟通，如果我们瞎创造、瞎拼写，那么如何让别大众能看的懂、听的懂呢。
所以，我们不仅要学会一门语言的语法，还更要学习这么语言的单词、词组。
而在HTML中，官方规范已经定义好了很多，常用的标签，我们接下来就是要一一学习、使用这些标签。
我们本次要学习的标签有：
一个小技巧，在认识、理解标签的同时，我们可以拿常用的MS Office Word(文字编辑排版软件)来对应学习。HTML的一些标签的意义会与Word中一些功能一致。
1、h1、h2、h3、h4、h5、h6 标题元素，类似于在word中的一级标题、二级标题等等，而在HTML中，可以这样表示：
<h1>这是一级标题</h1><h2>这是二级标题</h2><h3>这是三级标题</h3><h4>这是四级标题</h4><h5>这是五级标题</h5><h6>这是六级标题</h6>
2、img 图片(image)元素，类似于在word中插入一张图片到当前文档。HTML中表示为：
<img src="图片地址" ></img>这里，我们看到了前面介绍的属性概念。img是一个标签，表示一张图片，它的 src(source，来源)属性值为图片地址。
3、input 输入框元素，这是继前面<button>元素后的又一个交互控件。输入框，会提供一个文本框，来让使用者来进行内容填写。类似于我们熟知的登陆框。在HTML中，写为：
<input></input>4、hr 水平线(Horizontal Rule)元素，表现为一个水平（横向）的分割线，不太常用。HTML中可以写为：
<hr></hr>5、ul 无序列表(Unordered List)元素，这个在word中应该会频繁使用，咱们最后对照实际效果来在理解。在HTML中写为：
<ul>
<li>第一项</li><li>第二项</li><li>第三项</li></ul>
6、ol 有序列表(Ordered List)元素，和ul对应，都表示为列表形式。在HTML中写为：
<ol><li>第一项</li><li>第二项</li><li>第三项</li></ol>
空说无意，看的在做，不如实际动手敲一敲。在前面，咱们又简单的了解了6个元素，接下来，配上咱们的HTML文档格式，来写一个完整的HTML示例。下面会给出HTML代码，强烈建议同学们看着手敲一边，可不能简单的复制粘贴。(可以在上一节中的我的第一个网页.html中进行扩展)
本篇完整示例如下
<html><head><title>我的第一个网页</title></head><body><button id="btnOne" class="btn" style="color:red">我是一个按钮</button>HTML基础元素的学习<h1>这是一级标题</h1><h2>这是二级标题</h2><h3>这是三级标题</h3><h4>这是一个图片</h4><img src="http://chonger.org/2018/12/04/20181204085000/activity1.png" ></img><h4>这是一个输入框</h4><input ></input><h5>这是一条水平线</h5><hr></hr><h6>这是一个无序列表</h6><ul><li>列表项1</li><li>列表项2</li><li>列表项3</li></ul><h6>这是一个有序列表</h6><ol><li>列表项1</li><li>列表项2</li><li>列表项3</li></ol></body></html>
编辑完后，记得保存，然后在浏览器中观察运行效果。
嗨，各位可爱的同学们，从本期开始，咱们要开始一个前端问答（Q&A）的小板块。非常感谢在前面课程，踊跃提出问题的同学。在学习群中，指导老师们不仅会随时解答同学们的问题，还会收集整理常见的问题并归纳到这里，分享给更多的同学。
问题1：在上一期课程中，按照老师的过程，写完HTML后，双击打开，显示为乱码。
指导老师：非常感谢这位同学的提问，这个问题提的非常好。为什么呢？主要是因为在课程前期，我们的前端老师，为了让同学们能更基础的理解HTML知识，尽量简化内容，缩减代码，希望能通过最少量的代码来让同学们入门学习。
为什么有的同学会遇到乱码问题，有的同学没遇到呢？根本的原因是浏览器的默认解析编码，在互联网的世界中，数据的传输都是以0、1二进制方式进行传输，在处理的时候会进行编码操作，相同的二进制数据，在不同的编码方式处理下，会出现不同的结果。
我们可以将上一期的示例，在不同浏览器中看一下。这里简单的使用了三种浏览器
上图可以看到，在选择的浏览中，只有Chrome中显示正常，其余两个MS(微软)系的均为乱码。
那么怎么解决呢？简单的可以通过设置浏览器的编码方式来解决，但是，这样需要所有的使用者都要统一设置浏览器，不是最好的方案。最好的解决办法是：在我们的HTML文档中，设置文档的编码方式
在上一节示例中，修改代码如下：
<meta charset="utf-8" /><button id="btnOne" class="btn" style="color:red">我是一个按钮</button>
添加了一个<meta>（元数据）标签，它的属性charset值为utf-8，表示当前的HTML文档内容以utf-8编码来进行解析。然后重新来看下浏览器效果：
同样，为了让本节课的示例也解决乱码问题，那么，我们扩展基础的HTML文档格式为：
<html><head><meta charset="utf-8" /><title></title></head><body></body></html>
感谢各位同学，在学习的过程中，有遇到什么问题可以随时与我们的指导老师取得联系,关注公众号，回复”加入觅识帮“，识别群二维码，期待你的加入。
让我们共同相伴，开启软件知识之旅。
关注我们
