HTML基本概念
HTML、XML、XHTML 有什么区别
定义
- HTML，超文本标记语言，是语法较为松散的、不严格的Web语言；
- XML，可扩展标记语言，主要用于存储数据和结构参考；
设计宗旨是传输数据，而非显示数据。
需自行定义标签。- XHTML，可扩展超文本标记语言，基于XML，作用与HTML类似，但语法更严格，包含了所有与XML语法结合的HTML 4.01元素（参考w3school）。
XML与HTML主要差异：HTML 旨在显示信息，而 XML 旨在传输信息。
XHTML与HTML 类似，但语法更严格，如下：
- XHTML 元素必须被正确地嵌套。
- XHTML 元素必须被关闭。
- 标签名必须用小写字母。
- XHTML 文档必须拥有根元素
<html>
<head> ... </head>
<body> ... </body>
</html>
怎样理解 HTML 语义化 怎样理解内容与样式分离的原则
HTML语义化
-
WHAT：根据内容的的结构化含义，选用合适的标签。
-
WHY
-
有利于SEO:搜索引擎的爬虫是读不懂无语义的span和div的，因此语义化标签能使爬虫抓取更多的有效信息。
-
有助于爬虫抓取更多的有效信息（爬虫是依赖于标签来确定上下文和各个关键字的权重）
-
语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构
-
方便其他设备的解析(如屏幕阅读器、盲人阅读器、移动设备)
-
便于团队开发和维护
内容与样式分离原则
HTML负责内容与结构，CSS负责样式，JS负责行为，各司其职。即HTML内不出现行内样式，JS也不去直接操作样式（可通过给元素添加删除class来控制样式变化）。
有哪些常见的meta标签
-
http-equiv（模拟HTTP的响应消息头）
<meta http-equiv="Content-Type" content="text/html;charset=gb_2312-80"> <meta http-equiv="Content-Language" content="zh-CN"> <meta http-equiv="Refresh" content="n;url=http://yourlink"> <meta http-equiv="Expires" content="Mon,12 May 2001 00:20:00 GMT"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="set-cookie" content="Mon,12 May 2001 00:20:00 GMT"> <meta http-equiv="windows-Target" content="_top"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> -
name & content（网页的描述信息）
<meta name="author" content="">
<meta name="description" content="">
<meta name="keywords" content="">
文档声明的作用?严格模式和混杂模式指什么? < !doctype html> 的作用?
文档声明位于文档中的最前面的位置，用于告知浏览器文档使用哪种 HTML 或XHTML 规范。
常见的DOCTYPE声明：
HTML 5
<!DOCTYPE html>HTML 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
严格模式和混杂模式区别
- 严格模式：包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
- 混杂模式：包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE html>用于告知浏览器用HTML5的语法来解析文档。
浏览器乱码的原因是什么？如何解决
代码在编辑器中保存时使用的编码方式，与浏览器在解析时使用的解码方式不一致。
html 的 <head>里添加<meta charset="编码方式">保持与编辑器中设置的编码方式一致即可解决。
（常见的字符编码方式资料参考）
常见的浏览器有哪些，什么内核
- IE
IE 使用 Trident ，闭源，只有微软的 IE 在使用，只能用于Windows平台。存在与W3C标准脱节、大量Bug未修复的问题。- Firefox
Firefox 使用 Gecko ，就是以前的 Netscape 使用的 Mozilla 引擎，Netscape 倒了以后，成立了Mozilla基金会，将这个引擎完全重写，开源。此外Gecko也是一个跨平台内核，可以在Windows、BSD、Linux和Mac OS X中使用。- Safari
Safari 使用的是苹果公司根据 KHTML 修改来的 WebKit），闭源。 WebKit本身主要是由两个引擎构成的，一个正是渲染引擎“WebCore”，另一个则是javascript解释引擎“JSCore”，它们均是从KDE的渲染引擎KHTML及javascript解释引擎KJS衍生而来。- Chrome
谷歌Chrome/Chromium浏览器从08年创始至今一直使用苹果公司的WebKit作为浏览器内核原型，是WebKit的一个分支，我们可以称之为Chromium引擎。在13年发布的Chrome 28.0.1469.0版本开始，Chrome放弃Chromium引擎转而使用最新的Blink引擎（基于WebKit2——苹果公司于2010年推出的新的WebKit引擎），Blink对比上一代的引擎精简了代码、改善了DOM框架，也提升了安全性。
列出常见的标签，并简单介绍这些标签用在什么场景
- 换行
<br/>
- 横线
<hr/>
- 文本突出
<mark>Text</mark>
<strong>Text</strong>
<em>Text</em>>
- 标题1~6
<h1>h1</h1>
- 段落
<p>This is a paragragh.</p>
- 块
<div>Text</div>
- 图片（自闭合标签在HTML 5标准中可不加“/”，XHTML必须加）
- 有序列表
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
- 无序列表
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
-
标题：内容
<dl> <dt>商品名称:</dt> <dd>青花瓷</dd> <dt>特征:</dt> <dd>白色</dd> <dd>圆口</dd> <dt>商品介绍</dt> <dd>这是一个年代久远的瓷器，很贵，易碎</dd> </dl> -
超链接
<a target="_blank" href="http://www.baidu.com/">百度</a>
<a href="mailto:xxx@qq.com">联系我们</a>
<a href="#">联系我们</a>
- 按钮
<button>按钮</button>
-
table
<table cellpadding="4" cellspacing="10" border="1" width="100%"> <thead> <caption>Kaisla's Table</caption> <colgroup> <col span="2" align="left"> <col align="right"> </colgroup> <th>A</th> <th>B</th> <th>C</th> </thead> <tbody> <tr> <td align="right">00</td> <td valign="bottom">01</td> <td>02</td> </tr> <tr> <td>10</td> <td>11</td> <td>12</td> </tr> </tbody> <tfoot> <td>20</td> <td>21</td> <td>22</td> </tfoot> </table>
