学习前端，大家最开始接触的就是HTML(Hyper Text Markup Language,超文本标记语言),它是网页的基本组成部分，它承担着展现页面的基本结构与内容的责任，而HTML则是由各类由<>或者<>...</>包裹的标签组成的,接下来看看下面的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1>"
<title>这里是页面的标题</title>
<meta name="discription" content="网页介绍">
<meta name="keywords" content="html">
</head>
<body>
<h1>标题</h1>
<p>这里是第一个段落</p>
</body>
</html>
以上就是一个页面HTML部分的一个大致结构，
<!DOCTYPE html>它是申明了一个文档类型，这里表示为HTML5文档，一个页面的HTML结构中，第一行都的文档声明是为了告诉浏览器以哪种文档标准来进行解析，如果未申明，浏览器则会以兼容模式进行解析；除了HTML5这个文档类型，我们应该还会看到下面2种：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!--以上表明是HTML4.01文档-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--以上表明是XHTML1.0文档-->
那这两种文档标准和HTML5有什么区别呢？
- HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行），推荐使用；
- 而HTML4.01和XHTML1.0是基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型；
<html>...</html>它表示的是页面的根元素，在它里面包含着2个标签，分别是<head>...</head>和<body>...</body>，这两个标签就构成了一个页面完整的内容，这里需要重点讲解一下head标签中的内容，它里面包含的是一些页面的头信息，
-
<meta charset="utf-8">这一行用于声明文档使用的字符编码使用utf-8,页面的乱码多是因为这里设置的字符编码与浏览器设置的编码方式不一致导致的；
知识拓展：
UNICODE:是一种只用2个字节（16位）就可以编码地球上几乎所有地区的文字的一种编码；
UTF-8（8-bit Unicode Transformation Format）:它是一种针对Unicode的可变长度字符编码，又称万国码。utf-8用1到6个字节编码UNICODE字符。用在网页上可以同一页面显示中文简体的繁体的其他语言（如英文、日文、韩文）；
GBK：它是中国制定的一套自己的规则，它使用2个字节来表示一个汉字，总共可以覆盖2万多个文字，对与英文，它还是保留了和utf-8同样的方式使用一个字节来表示；
UNICODE只是给字符一个代号，而GBK和UTF-8使用不同的规则来表示同一代号
-
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1>"这一行表示优先使用IE最高版本和chrome； -
<title>这里是页面的标题</title>,这个标签表示网页的标题名称， -
<meta name="discription" content="网页介绍">，它用来告诉搜索引擎你的网站主要内容； -
<meta name="keywords" content="html">,它是为搜索引擎提供的关键字列表；
以上是head标签中的meta是用来表示文档的一些常用信息的；另外在head中也常引入css样式文件和js脚本文件，如以下两种方式：
<!--引用文件-->
<head>
...前面的省略...
<link type="text.css" href="...路径..." >
<script type="text/javascript" src=""></script>
</head>
或
<!--内嵌式-->
<head>
...前面的省略...
<style>
...css样式代码
</style>
<script type="text/javascript">
...js代码
</script>
</head>
虽然js可以放在head中，但考虑到浏览器上页面的展现问题，我们一般不建议放在head标签中，最好是放在body标签的最后面进行加载；
以上就是head中内容的一些描述，接下来就是body标签内容介绍，在body标签中摆放的是用于浏览器展现的网页的主体内容，至于各个标签的用法大家可以我w3c上做个了解，这里需要关注的就是对语义化的理解，那什么是HTML语义化呢？
我个人的理解就是在合适的场景下使用正确的标签元素进行表达；html语义化可以让页面的内容结构化，并且使结构更加清晰，便于浏览器的搜索引擎的解析，同时搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO；好的语义化结构也更加利于开发人员的理解和维护；
经过上面的学习，我向大家已经对前端中HTML的基本结构有个大致的认识了，对于初学者我们要根据每个标签对应的含义去合理的使用它们，以上内容如有错误欢迎指正。
