初识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