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必须加)
![](xxx.jpg)
- 有序列表
<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>