HTML 知识点
本文导读
- HTML、XML、XHTML 有什么区别
- 怎样理解 HTML 语义化
- 怎样理解内容与样式分离的原则
- 有哪些常见的meta标签
- 文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?
- 浏览器乱码的原因是什么？如何解决
- 常见的浏览器有哪些，什么内核
- 列出常见的标签，并简单介绍这些标签用在什么场景
- 如何在html 页面上展示<div></div>这几个字符
- titile属性和alt实行分别有什么作用
HTML、XML、XHTML 有什么区别
先看一下三者的定义
- HTML：HyperText Markup Language / 超文本标记语言
- XML: Extensible Markup Language / 可扩展标记语言
- XHTML: Extensible Hypertext Markup Language / 可扩展超文本标记语
身为一名前端，HTML是最应该知道的
HTML 是用来描述和定义网页内容的标记语言，是构成网页的最基本的东西。
所谓超文本，就是说它除了能标记文本，还能标记其他的内容，比如：图片，链接，音频，视频等。
它的作用就是一个规范，告诉所有浏览器都统一标准，比如我给这段文字加个 <p> 标签，那就是告诉浏览器：这是一个段落。我加个 <img> 标签：这是一张图片，别弄错了。浏览器看到后，就会正确解析，产生相应的行为。
什么是XML
它的表现形式就是给一个文档加一堆标签，说明每段文字是干什么的，有什么意义。这样做的目的是方便存储、传输、分享数据，人和机器都可以很方便的阅读。XML 和 HTML 有一个明显的区别就是：HTML 的标签都是预定义的，你不可以自己随便增加，比如你不能自造一个标签叫 <nihao>, 但是 XML 可以，你可以自己“发明”标签————这也是“可扩展的”一个含义。
最后，XHTML又是什么
XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。
参考简书：水剑承王《HTML、XML、XHTML 有什么区别》
怎样理解 HTML 语义化
- 浏览器和W3C组织推出的如h1~h6、thead、ul、ol的HTML标签，用于在Web页面中组织对应的内容，如网页标题、表头、无序、有序列表，以达到更方便的协作及传播互联网内容。搜索引擎很好的利用了这些语义化标签抓取内容，又鉴于搜索引擎的巨大流量推荐，Web前端不得不考虑SEO，从而两者实现有益的循环，共同推进着语义化标签的使用。
- 但Web的发展超乎想象，起初定义的HTML语义化标签，不足以实现对Web页面各个部分的功能或位置描述，所以Web前端人员利用HTML标签的id和class属性，进一步对HTML标签进行描述，如对页脚HTML标签添加如id="footer"或者class="footer"的属性（值），以“无声”的方式在不同的前端程序员或者前后端程序员间实现交流。
- W3C组织意识到了之前HTML版本的不足，推出的HTML5进一步推进了Web语义化发展，采用了诸如footer、section等语义化标签，弥补了采用id="footer"或者class="footer"形式的不足，以更好的推动Web的发展。
怎样理解内容与样式分离的原则
内容与样式分离(或“呈现与内容分离”)是网页布局一直倡导的原则，也是当下非常流行的名词之一，可能很多开发人员虽然已经在很好的利用内容与样式分离原则进行网页布局，但是并没有对它有过多的注意，下面就结合代码实例简单介绍一下什么是内容与样式分离。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
<div style="width:200px;">
<font color="red">好好学习</font>
</div>
</body>
</html>
以上代码的内容与样式分离原则做的并不好，因为对文本控制的样式和网页结构都混合在一起。这样不但不利于网页的修改，而且还让网页内容不能够很好的展现于搜索引擎之下，不利于SEO。
以上代码修改如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div
{
width:200px;
color:red;
}
</style>
</head>
<body>
<div>好好学习</div>
</body>
</html>
以上代码实现了内容与样式分离的布局。由上面两个代码可以得出，所谓内容，就是网页的骨架，如果排版网页的结构，而样式就是对内容的润色，比如div的宽度或者高度，字体的颜色大小等等。这样网页的内容就赤裸裸的展现在搜索引擎面前，也利于网站的优化。
参考蚂蚁部落：什么是表现和内容分离
有哪些常见的meta标签
| 标签 | 含义 |
|---|---|
| <meta> | 元数据 |
| <meta charset="utf-8"> | 指定文档编码 |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | 适配移动页面 |
| <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> | 定制页面图标 |
| <meta name="referrer" content="never"> | 设置 referer |
| <meta name="description" content="腾讯网(www.QQ.com)是中国浏览量最大的中文门户网站，是腾讯公司推出的集新闻信息、互动社区、娱乐产品和基础服务为一体的大型综合门户网站。"> | 添加页面描述 |
文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?
文档声明的作用
文档声明是为了告诉浏览器，你的 HTML 文档是用的什么版本的 HTML 来写的，这样浏览器才能按照你声明的版本来正确的解析你的 HTML 文档。
严格模式和混杂模式指什么
- 所谓的严格模式，也就是标准模式，是指浏览器按 W3C 标准解析执行代码；
- 混杂模式，则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，这样做就是为了兼容在W3C标准出现之前就存在的那些“不标准”的页面。
<!doctype html> 的作用
<!doctype html> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器使用最新的HTML 5标准来解析渲染页面。
浏览器乱码的原因是什么？如何解决
产生原因
- 乱码产生的根本原因是你保存的编码格式和浏览器解析时的解码格式不匹配导致的。
- 乱码一般是英文以外的字符才会出现。
如何解决
首页，在文件保存的时候你自己要清楚是用哪种编码方式保存的。如果你的文件是保存为utf-8格式，那么一定要在html 的 <head>里添加<meta charset="utf-8">，这句话的意思是告诉浏览器在打开这个页面的时候不要去猜了，直接用utf-8去解码。 同理，如果你的文件保存为gbk格式，一定在文件里添加<meta charset="gbk">。
参考简书：若愚——聊一聊编码与乱码
常见的浏览器有哪些，什么内核
| 浏览器 | 内核 |
|---|---|
| Internet Explorer | IE内核 |
| Firefox | Gecko |
| Opear | Presto |
| Safari&Chromr | Webkit |
| 国内大部分浏览器 | IE内核 |
列出常见的标签，并简单介绍这些标签用在什么场景
| 标签 | 场景 |
|---|---|
| <head> | 头部，head标签是页面的“头部”， 一般来说，只有6个标签能放在<head>标签内：<title>、<meta>、<link>、<style>、<script>、<base> |
| <body> | html 页面主体 |
| <a> | 设置链接 |
| <h1>~<h6> | 标题 |
| <div> | 块状布局 |
| <img> | 图片 |
| <p> | 段落文字 |
| <ol> <ul> <li> | 有序列表和无序列表 |
| <table><thead><tbody><tr><th><td> | 表格 |
| <form><input> | 表单 |
如何在html 页面上展示<div></div>这几个字符
<div></div>, 这是用html字符实体来替代，
参考资料：W3school——HTML 字符实体
titile属性和alt实行分别有什么作用
比如在<img >中，title 规定有关元素的额外信息,鼠标滑上去后，显示的值。而alt是在图片不能正常加载时，在原来图片位置上展示的值，这对于残障人士使用相关屏幕辅助阅读功能时也有帮助。
网友评论