初识HTML
HTML与XML与XHTML三者之间的区别
HTML的简介
超文本标记语言（HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS(层叠样式表)、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页
HTML是一种语法较为松散，不严格的Web语言
- HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
XML的简介
简单来说，XML是一种可扩展标记语言，主要用于存储数据和结构
- XML 指可扩展标记语言（EXtensible Markup Language）
- XML 是一种标记语言，很类似 HTML
- XML 的设计宗旨是传输数据，而非显示数据
- XML 标签没有被预定义。您需要自行定义标签。
- XML 被设计为具有自我描述性。
- XML 是 W3C 的推荐标准
- XML 不会做任何事情,XML 被设计用来结构化、存储以及传输信息。
HTML与XML的主要差异
- XML 不是 HTML 的替代。
- XML 和 HTML 为不同的目的而设计：
- XML 被设计为传输和存储数据，其焦点是数据的内容。
- HTML 被设计用来显示数据，其焦点是数据的外观。
- HTML 旨在显示信息，而 XML 旨在传输信息。
XHTML的简介
简单来说，XHTML是一种可扩展超文本标记语言，基于XML，作用与HTML类似，但语法更严格
- XHTML（Extensible Hyper Text Markup Language) 是 HTML 与 XML（扩展标记语言）的结合物。
- XHTML 包含了所有与 XML 语法结合的 HTML 4.01 元素。
与前两者最主要的差异
- XHTML 元素必须被正确地嵌套。
- XHTML 元素必须被关闭。
- 标签名必须用小写字母。
- XHTML 文档必须拥有根元素。
语义化HTML
简单来说，语义化HTML是一种编写HTML的方式，需要选择合适的标签、使用合理的代码结构，便于开发者阅读，同时让浏览器的爬虫和机器很好地解析。
编写HTML时，表现内容，样式和行为的分离
- 写 HTML 的时候先不管样式, 重点放在HTML的结构和语义化上，让 HTML 能体现页面结构或者内容。之后再去写样式。
- 写 JS 的时候，尽量不要用 JS 去直接操作样式，而是通过给元素添加删除class来控制样式变化
- HTML 内不允许出现属性样式，尽量不要出现行内样式
meta标签
- <meta charest="utf-8">:设置当前页面编码格式“utf-8”
- <meta http-equip="X-UA-Compatible" content="IE=edge chrome=1">：针对双核浏览器选择合适的内核来渲染
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">：在移动端合理的展示你的页面
- <meta name="keywords" content="前端 饥人谷">
<meta name="description" content="最有爱的前端学习社区">：通过name的keywords或者description更方便的搜索到当前页面
常见标签
- **
- <!DOCTYPE>：
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前;<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。- a 定义超链接，用于从一张页面链接到另一张页面；a元素最重要的属性是 href 属性，它指示链接的目标。
- <abbr>：指示简称或缩写，比如 "WWW" 或 "NATO"。
- <acroym>:定义首字母缩写。HTML5 中不支持 <acronym> 标签。请使用 <abbr>标签代替。
- <address>:定义文档或文章的作者/拥有者的联系信息；如果 <address> 元素位于 <body> 元素内，则它表示文档联系信息；如果 <address> 元素位于 <article> 元素内，则它表示文章的联系信息。
- <applet>:定义嵌入的 applet。
- <area>:定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。
area 元素总是嵌套在 <map> 标签中。 - <article>:<article> 规定独立的自包含内容。
- <aside>:定义其所处内容之外的内容。
aside 的内容应该与附近的内容相关。 - <audio>:定义声音，比如音乐或其他音频流。
- b: 标签规定粗体文本
- <base>:为页面上的所有链接规定默认地址或默认目标。
- <basefont>:定义基准字体。该标签可以为文档中的所有文本定义默认字体颜色、字体大小和字体系列。
- <bdi>:允许您设置一段文本，使其脱离其父元素的文本方向设置。
- <bdo>:可覆盖默认的文本方向。
- big:标签呈现大号字体效果。
- blockquote:定义块引用.
- <body>:定义文档的主体。
- br:可插入一个简单的换行符。
- <button>:定义一个按钮。
- <canvas>:定义图形，比如图表和其他图像。
- caption:定义表格标题。
- <center>:对其所包括的文本进行水平居中。
- col：为表格中一个或多个列定义属性值。
- colgroup：用于对表格中的列进行组合，以便对其进行格式化。
以下都是短语元素，不建议使用，建议使用样式表
- cite:定义引用，通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
- em:把文本定义为强调的内容
- strong:把文本定义为
- dfn：定义一个定义项目
- code：定义计算机代码文本
- samp：定义样本文本
- kbd：定义键盘文本
- var：定义变量
参见标签列表
文档声明的作用
文档声明用来告知浏览器当前文档所使用的HTML或XHTML规范。是用来声明当前文档为html5的方法
严格模式是指按照浏览器所支持的最高版本来实现效果；混杂模式则相反，尽可能向后兼容。使用老版本浏览器的显示模式。
浏览器乱码原因
1、比如网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码。反之网页是编码utf-8，内容是gbk也会出现乱码。
2、html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码。
3、浏览器不能自动检测网页编码，造成网页乱码。
常见内核及其对应的浏览器
Trident
大部分人都简称为IE内核。是微软开发的一种排版引擎。
IE、The World
Geckos：
Gecko是套开放源代码的、以C++编写的网页排版引擎。这软件原本是由网景通讯公司开发的，Netcape6开始采用该内核。后来的 Mozilla FireFox也采用了该内核，Geckos的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。Geckos 现在由Mozilla基金会维护。
Firefox
Presto:
Presto是一个由Opera Software开发的浏览器排版引擎，该内核在2003年的Opera7中首次被使用。
Opera
Webkit:
苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。
Safari、Chrome
国内的双核浏览器:
由于IE浏览器在国内的普及率非常高，所以造成了很多网上银行和支付系统只支持IE的Trident内核，其他浏览器访问根本无法进行正常支付和转账等业务。而WebKit内核的非IE浏览器以更高的性能和更好的用户体验拥有了越来越多的用户。于是双核浏览器应运而生。
360、猎豹、搜狗、百度、遨游、QQ
