关于HTML

超文本标记语言（HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页

发展

年份	版本
1997.1	HTML 3.2
1997.12	HTML 4
1999.12	HTML 4.01
2014.1	HTML 5

一个典型的HTML5页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <header>
      <h1>HTML5</h1>
    </header>
    <main></main>
    <footer></footer>
</body>
</html>

一个典型的HTML4页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="header">
      <h1>HTML4</h1>
    </div>
    <div id="main"></div>
    <div id="footer"></div>
</body>
</html>

HTML vs XML vs XHTML(笔试重点)

HTML，超文本标记语言，是语法较为松散的、不严格的Web语言；
XML，可扩展标记语言，主要用于存储数据和结构参考；
XHTML，可扩展超文本标记语言，基于XML，作用与HTML类似，但语法更严格参考。

表现(内容)、样式、行为分离

写 HTML 的时候先不管样式, 重点放在HTML的结构和语义化上，让 HTML 能体现页面结构或者内容。之后再去写样式。
写 JS 的时候，尽量不要用 JS 去直接操作样式，而是通过给元素添加删除class来控制样式变化
HTML 内不允许出现属性样式，尽量不要出现行内样式

语义化HTML

语义化HTML是一种编写HTML的方式

选择合适的标签、使用合理的代码结构，便于开发者阅读，同时让浏览器的爬虫和机器很好地解析。

1、什么是HTML语义化？
基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等
　　根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
2、为什么要语义化？

为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

3、写HTML代码时应注意什么？

尽可能少的使用无语义的标签div和span；
在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
不要使用纯样式标签，如：b、font、u等，改用css设置。
需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
每个input标签对应的说明文本都需要使用标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

一个简单的页面

<!--标准模式（standard mode）的声明-->
<!DOCTYPE html>
<!--为文档设置语言-->
<html lang="zh">
<head>
    <meta charset="utf-8">      <!--设定字符编码-->
    <meta http-equiv="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="最有爱的前端学习社区">        
    <title>Document</title>
</head>
<body>
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>
    <p>段落 <span>3</span></p>
    <a href="http://jirengu.com" target="_blank">饥人谷.com</a>
                                                                   <!--target为转跳规则-->
    ![](a.png)
    <div class="box"></div>
                                                                  <!--div：语音为一大块-->
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>

</body>
</html>

有哪些常见的meta标签

定义和用法
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
常见标签

标签	说明
`<meta name="keywords" content="">`	向搜索引擎说明你的网页的关键词
`<meta name="description" content="">`	告诉搜索引擎你的站点的主要内容
`<meta name="author" content="你的姓名">`	告诉搜索引擎你的站点的制作的作者
`<meta http-equiv="Content-Type" content="text/html";charset=utf-8">`	指定字符集
`<meta http-equiv="refresh" content="n;url=">`	定时让网页在指定的时间n内跳转
`<meta http-equiv="expires" content="Mon,12 May 2001 00:20:00 GMT">`	可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式
`<meta http-equiv="pragma" content="no-cache">`	禁用缓存
`<meta http-equiv="set-cookie" content="Mon,12 May 2001 00:20:00 GMT">`	cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式

文档声明的作用?

DOCTYPE是docunment type（文档定义）的简写，用来说明web设计中所用的html或xhtml的类型，指出浏览器或者其他阅读程序按照什么样的规则（W3C所发布的一个文档类型定义即DTD）集去解释文档中的标记.

严格模式和混杂模式指什么?

严格模式： 又称标准模式，是指浏览器按照 W3C 标准解析代码。

混杂模式： 又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。

如何区分： 浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。

如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。（严格 DTD ——严格模式）
包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式）
DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。（DTD不存在或者格式不正确——混杂模式）
HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）

意义： 严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。

严格模式与混杂模式的语句解析不同点有哪些？
1）盒模型的高宽包含内边距padding和边框border

在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在IE5.5及以下的浏览器及其他版本的Quirks模式下，IE的宽度和高度还包含了padding和border。

2）可以设置行内元素的高宽

在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。

3）可设置百分比的高度

在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。

4）用margin:0 auto设置水平居中在IE下会失效

使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效,quirk模式下的解决办法，用text-align属性:body{text-align:center};#content{text-align:left}

5）quirk模式下设置图片的padding会失效

6）quirk模式下Table中的字体属性不能继承上层的设置
7）quirk模式下white-space:pre会失效

`<!doctype html>` 的作用?

<!DOCTYPE>声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。<!DOCTYPE>声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。

补充内容：

一、常用的具体声明：

1、HTML5（一种）：`<!DOCTYPE html>`

2、HTML 4.01（三种）：严格模式包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font），不允许框架集（Framesets）；过渡模式包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font），不允许框架集（Framesets）；框架模式等同于过渡模式，但允许框架集内容。

HTML 4.01 Strict ：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional ：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset ：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">


3、XHTML 1.0（四种）：前三种模式同上，XHML 必须以格式正确的 XML 来编写标记。

XHTML 1.0 Strict ：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional ：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 该 DTD 等同于 XHTML 1.0 Strict，但允许添加模型。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


二、严格模式与混杂模式的来源

当年Netscape4（网景公司早期的浏览器）和IE4（微软公司早期的浏览器）实现CSS机制时，并没有遵循W3C提出的标准。Netscape4 提供了糟糕的支持，而IE4 虽然接近标准，但依旧未能完全正确的支持标准。尽管IE 5 修复了IE4 许多的问题，但是依然延续CSS实现中的其它故障（主要是盒模型问题）。

为了保障自己的网站在各个浏览器上显示正确，网页开发者们不得不依据各个浏览器自身的规范来使用css，因此大部分网站的css实现并不符合W3C规范的标准。

然而随着标准一致性越来越重要，浏览器开发商不得不面临一个艰难的抉择：逐渐遵循W3C的标准是前进的方向。但是改变现有的 css，完全去遵循标准，会使许多旧网站或多或少受到破坏，如果浏览器突然以正确的方式解析现存的css，陈旧的网站的显示必然会受到影响。所以，所有的浏览器都需要提供两种模式：混杂模式服务于旧式规则，而严格模式服务于标准规则。

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

原因： 网页源代码与浏览器使用了不一致的编码方式。

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

解决方法： 修改编码方式，使之一致。

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

Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

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

标签	场景
head	head标签是页面的“头部”，一般来说，只有6个标签能放在`<head>`标签内`<title>、<meta>、<link>、<style>、<script>、<base>`
body	body标签是页面的“身体”
h1~h6标签	设置不同的标题
p标签	使用p标签来标记一段文字
br/	换行
`<div>`	主要用来为HTML文档内大块的内容提供结构和背景
ul	无序列表
ol	有序列表
form	设置一个表单
img	设置一个图像
a	连接

补充资料
编码规范
 编码与乱码
 饥人谷参考答案

HTML介绍详述

HTML介绍详述

关于HTML

发展

一个典型的HTML5页面

一个典型的HTML4页面

HTML vs XML vs XHTML(笔试重点)

表现(内容)、样式、行为分离

语义化HTML

一个简单的页面

有哪些常见的meta标签

文档声明的作用?

严格模式和混杂模式指什么?

`<!doctype html>` 的作用?

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

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

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

推荐阅读更多精彩内容

HTML介绍详述

关于HTML

发展

一个典型的HTML5页面

一个典型的HTML4页面

HTML vs XML vs XHTML(笔试重点)

表现(内容)、样式、行为分离

语义化HTML

一个简单的页面

有哪些常见的meta标签

文档声明的作用?

严格模式和混杂模式指什么?

<!doctype html> 的作用?

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

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

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

推荐阅读更多精彩内容

`<!doctype html>` 的作用?