HTML（HyperText Markup Language）是一种超文本标记语言，用于创建网页的标准标记语言。它是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。
在认识HTML之前，先分清楚一下 HTML 、 XML 、XHTML 这三者的区别。
HTML、XML、XHTML 这三者之间有什么区别？
- HTML是用于创建Web的标准的标记语言。旨在显示信息。
- XML（Extensible Markup Language） 指可扩展标记语言，它也是一种标记语言，不过它的标签没有被预定义，需自定义标签，通常用来传输和存储数据。（W3C的推荐标准）
- XHTML是根据HTML 4 和 XML 1.0重组而成，是更严格更纯净的 HTML 代码。由于HTML的语法较为松散，对于许多其他设备的要求较高因此就出现了由DTD定义规则,语法要求更加严格的XHTML。
XHTML与HTML的区别
- 最大的变化在于所有标签必须闭合。
- 所有的标签必须小写。
- 元素必须被正确地嵌套。
- 文档必须拥有根元素。
更多内容访问:
XML简介 - W3School
为什么使用XHTML - W3School
<br />
从一个HTML的头部开始说起：
文档声明（DTD）
文档声明 就是写在最前面的部分，叫做文件类型定义（DTD）。且声明必须在 HTML 文档的第一行（这并不是一个 HTML 标签）
声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。
严格模式 又称标准模式，是指浏览器按照 W3C 标准解析代码；
混杂模式 又称兼容模式，不加文档声明，允许浏览器使用自己的方式来渲染页面。
如<!doctype> 就是用来声明文档对象模型，用来告诉浏览器应该使用哪种方式来解析渲染页面。而<!doctype html>就是声明使用HTML5来解析渲染页面。
而常用的DOCTYPE声明还有许多。
<br />
meta标签
meta标签用来提供有关页面的元信息，下面是一些常见的meta标签及其作用。
-
<meta name="keywords" content="your tags" />页面关键词，每个网页应具有描述该网页内容的一组唯一的关键字，便于搜索引擎搜索。 -
<meta name="description" content="150 words" />页面描述，每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。 -
<meta http-equiv="refresh" content="0;url=" />页面重定向和刷新：content内的数字代表多少时间（秒）后自动刷新，如果加url,则会重定向到指定网页。 -
<meta http-equiv="X-UA-Compatible" content="IE=6" >使用IE6 ,或者使用IE7、8。 -
<meta http-equiv="Cache-Control" content="no-siteapp" />转码申明：用百度打开网页可能会对其进行转码（比如贴广告），这样可避免转码。 -
<meta http-equiv="cache-control" content="no-cache" />不缓存该网页。
<br />
HTML标签
在学习使用HTML的标签时要注意闭合标签与一些自闭和标签的区别使用，并且要知道实现后的效果，可以参考W3cSchool或MDN页面的内容。而在博客中罗列这些标签的意义则不是十分大，应该自主学习。
<br />
--- 在使用HTML时要注意HTML 语义化和表现内容、样式、行为分离原则 ---
HTML语义化
语义化的HTML 就是根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
语义化的网页的优点：
- 即使在没有CSS的情况下，页面也能呈现出较好的内容结构；
- 有利于SEO： 和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息；
- 语义 Web 技术有助于利用基于开放标准的技术，从数据、文档内容或应用代码中分离出意义。
H5新增了许多语义化标签，可以参考该文章 —— HTML 5的革新——语义化标签
关于SEO优化 ， 可以参考 搜索引擎优化
<br />
表现内容、样式、行为分离原则
在写网页的时候，我们知道HTML负责表现内容，CSS负责样式，而JS就是行为。
- 写HTML时，需要尽量的考虑语义化与结构，使得在没有样式的情况下也能表现的清晰良好。并且尽量不要把样式写在HTML中
- 在写JS时， 尽量不要使用JS去 操作样式，而是通过添加删除类来控制样式的变化。
这样的分离，一方面是使得文档的内容显现的更加清晰，也使得后期的阅读与维护更加方便。
<br />
常见浏览器及其内核
| 浏览器名称 | 内核 |
|---|---|
| Safari | WebKit |
| Chrome | Blink（WebKit的分支） |
| Opera | Presto |
| FireFox | Geckos |
| IE | Trident |
<br />
浏览器的乱码问题
常见编码集有：UTF-8 UTF-16 GBK Unicode
注 ： 更多参考 编码的发展 ，可以对乱码产生的原因有更好的理解。
浏览器出现乱码的原因：
- 在制作页面时使用非英文字符时，保存的编码格式与浏览器解析时的解码格式不匹配（即与meta中指定的解析格式不一样）
- 没有指定meta的charset
solution： 在页面保存时就在HTML的<head>标签下添加<meta charset="">来声明编码格式，来告诉浏览器应该用什么解码格式来解码。即指定正确的charset值。
例如： 使用UTF-8来编码的页面，添加<meta charset="UTF-8">`来告诉浏览器使用UTF-8格式来解码，就不会出现乱码了。（并非所有乱码问题都可以使用UTF-8格式编码来解决）
网友评论