HTML知识点总结

一、 HTML、XML、XHTML 有什么区别

HTML （Hyper Text markup language）超文本标记语言，语法比较松散，是不严格的web语言，HTML有固定的标签来显示网页内容，如h1 h2
XML （Extensible Markup Language）可扩展标记语言，可扩展，XML总是需要一个关闭标签，例如 < img src="funfun.jpg"/>. 在HTML中可以写成
< img src="funfun.jpg">，另外，XML有严格的错误处理规则。如果一个XML文档中遇到的最简单的语法错误会解析失败，这会生成有效的XML，但是简单的错误也很容易破坏文档。见Understanding HTML, XML and XHTML
XML也可以自定义标签，也常用来存储数据，
XHTML （Extensible Hyper Text Markup Language）可扩展超文本标记语言，基于XML，语法更严格
其中
所以标签必须闭合
所有标签必须小写
所有参数值必须用双引号括起来
不允许省略参数，比如<option selected>是不允许的，必须用<option selected="selected">

二、怎样理解 HTML 语义化

主要体现在三个方面

页面内容结构化，如h1~h6、thead、ul、ol的HTML标签
搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，便于搜索引擎抓取内容，利于SEO。
利于开发人员后期维护，随着页面越来越复杂，后期维护也越来越困难，HTML语义化便于开发人员理解代码，后期维护更易进行。

三、怎样理解内容与样式分离的原则

页面内容即页面想要表达的信息，如文字、图片、标签等，当页面内容与样式不分离，页面结构变得混乱，随着网页内容的增多，内容与样式耦合在一起，后期维护变得困难，因此页面内容与样式分离可以让页面变得简洁，后期维护便于维护，同时，爬虫抓取内容是不考虑样式的，因此也更利于搜索引擎抓取内容。

四、有哪些常见的meta标签

charset

<meta charset="utf-8">
// 对于文档设置字符编码为UTF-8。

name 定义网页作者。

<meta name="author" content="author name">

description用来告诉搜索引擎搜索你的网站主要内容。

<meta name="description" content="meta常见的属性">

规定可视窗的宽为设备宽，初始缩放比例为1，主要在响应式页面应用较多。

<meta name="viewport" content="width=device-width,initial-scale=1.0">

定义文档关键词，便于搜索引擎搜索。

<meta name="keywords" content="HTTP HTML CSS JavaScript">

http头文件，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<meta http-equiv="content-Type" content="text/html;charset=utf-8">
// meta标签的charset的信息参数如UTF-8时，网页采用世界通用的语言编码。

表示强制浏览器按照最新的标准去渲染。

<meta http-equiv="x-ua-compatible" content="ie=edge">

五、文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?

文档声明的作用?
文档声明告知浏览器文档使用哪种 HTML 或 XHTML 规范。
严格模式和混杂模式指什么?
严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。
混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。
<!doctype html> 的作用?
声明文档类型为HTML5

六、浏览器乱码的原因是什么？如何解决

比如网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码。反之网页是编码utf-8，内容是gbk也会出现乱码。
html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码。
浏览器不能自动检测网页编码，造成网页乱码。

从上述可知，你保存的编码格式和浏览器解析时的解码格式不匹配时，就会产生乱码，并且一般是英文以外的字符才会出现乱码。
解决办法：
如果你的文件是保存为utf-8格式，那么一定要在html 的 <head>里添加<meta charset="utf-8">，这句话的意思是告诉浏览器在打开这个页面的时候不要去猜了，直接用utf-8去解码。同理，如果你的文件保存为gbk格式，一定在文件里添加<meta charset="gbk">。

七、常见的浏览器有哪些，什么内核

Chrome：Chromium/Blink
Firefox：Gecko
Safari：Webkit
IE：Trident
Opera：Presto，现为Webkit

八、列出常见的标签，并简单介绍这些标签用在什么场景

<html>        // 是 HTML 页面的根元素；
<body>        // 包含页面的主体内容；
<head>        // 包含了文档的元（meta）数据；
<meta>        // 提供了元数据.元数据也不显示在页面上，被浏览器解析；
<link>        // 定义了文档与外部资源之间的关系。通常用于链接到样式表；
<style>       // 定义了HTML文档的样式   
<script>      // 用于加载脚本文件
<title>       // 描述了文档的标题；
<h1>-<h6>     // 定义了一级标题到六级标题，标题字体大小逐渐减弱；
<p>           // 定义一个段落；
<a>           // 网页链接。通过href属性，来指定链接地址。通过target属性，来指定链接页面打开的方式。通过title，来指定鼠标移到标签上时出现的文字提示；
<image>       // 定义html图像。可通过width和heigth属性来指定图像的大小；
<div>         // 是块级元素，它可用于组合其他 HTML 元素的容器,没有特定的含义。它属于块级元素，浏览器会在其前后显示折行；
<span>        // 是内联元素，也没有特定的含义，可用作文本的容器；
<ol><li>      // 有序列表始于 标签。每个列表项始于 标签。列表项目会使用数字进行标记；
<ul><li>      // 无序列表，列表项目会使用粗体圆点（典型的小黑圆圈）进行标记；
<table>       // 定义表格；
<tr>          // 定义表格的行；
<td>          // 定义表格每行的列；
<th>          // 定义表格的表头；
<tbody>       // 定义表格的主体；
<tfoot>       // 定义表格的页脚 ；
<iframe>      // 用于在当前页面嵌入新页面；
<strong>      // 定义重要的文本；
<em>          // 定义被强调的文本。

参考