前端HTML结构详解！

HTML

一、什么是HTML?

1、HTML是网页的结构，就比如工人盖房子一样，首先要用砖把房子的结构搭建起来，有了房子结构才能在其基础上再进行其他作业，HTML就类似于房子的大框架结构。HTML有很多标签组成，不同的标签语义不同，所有的标签内容组合在一起就构成了网页的结构内容。HTML中写了什么内容被浏览器渲染后网页中就有什么内容，这些内容是原生态的无任何修饰。只有当网页中有了这些原生态的内容后才可以在其基础上添加样式进行修饰，让网页变得更美观，用户体验更好。所以HTML就如同整个网页的灵魂，不可或缺。如下图所示：

HTML标签内容

浏览器渲染后网页显示内容（代码只有HTML标签）

在HTML上添加了样式的网页内容

二、HTML初识

       在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面代码中写到的

等都是HTML标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令，称为HTML标签或HTML元素。

1、文档类型：

       此标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能将该网页作为有效的XHTML文档，并按指定的文档类型进行解析。目前最新的HTML版本是HTML5，但是各个浏览器对其支持不统一，所以如今大多数的网站还未完全采用。

2、标签分类：

      HTML标签主要分为两类，一类是双标签，语法：<标签名> 内容 该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，""表示该标签的作用结束，一般称为“结束标签（end tag）”。和开始标签相比，结束标签只是在前面加了一个关闭符“/”。 （比如：

我叫韩梅梅

我叫李雷

等），另一类是单标签，语法：<标签名/> 单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。（比如：

---

等）

3、标签关系：

      嵌套关系：指一个标签里面还包含其他的标签，比如：

     

           

     

      那么head和title标签就属于嵌套关系。

      并列关系：指标签之间层次级别是平行的，内部结构互不影响比如：

     

             

             

     

      那么head和body标签就是并列关系。此时html和head/body标签就是嵌套关系。

      来做个测试题吧，哈哈，请问下列哪个标签是错误的？

      A  

      B

      C

4、XHTML 是什么？

      XHTML 指扩展超文本标签语言（EXtensible HyperText Markup Language）。HTML 松散，浏览器支持不好，  这时候XHTML 要求严谨一些 功能更强大 。打个比喻： HTML 语法太松散了，类似方言， 不同地方听不懂。XHTML就更严谨一些，类似普通话为了保持一致。其实我们现在经常说的HTML就是指XHTML，只不过以前叫习惯了现在即使使用了XHTML也还是叫做HTML，也是为了方便读吧，这个了解就行。

       XHTML 有几点要注意：

      1. 后面的第一个标签必须是 ， < /html>必须是最后一个标签

      2.所有的标签都必须要有一个相应的结束标签

      3.标准的XHTML标签应该使用小写

      4.所有属性值非空，必须双引号

5、字符集是什么？

（1）、utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。

（2）、gb2312 简单中文 包括6763个汉字。

（3）、BIG5 繁体中文 港澳台等用。

（4）、GBK包含全部中文字符 是GB2312的扩展，加入对繁体字的支持，兼容GB2312。

（5）、UTF-8则包含全世界所有国家需要用到的字符。

      注意：我们现在使用的都是UTF-8，防止出现乱码。

三、HTML思维导图

HTML思维导图

四、关于HTML自己总结的一些常见面试题

1、XHTML和HTML有什么区别？

2、什么意思？有什么作用？