课程任务
1.HTML,XML,XHTML有什么区别
HTML,超文本标记语言，语法较为松散不是严格的标记语言。XML,可扩展标记语言，主要用于存储数据和结构。XHTML,可扩展超文本标记语言，基于XML,作用与HTML类似，但语法更为严格。
2.怎么理解HTML语义化
语义化是前端开发里面的一个专用术语，其优点在于标签语义化有助于构架良好html结构，有利于搜索引擎的建立索引、抓取；另外，亦有利于页面在不同设备上显示尽可能相同；此外，亦有利于构建清晰的结构，有利于团队的开发、维护。
3.怎样理解内容与样式分离的原则
- 写页面的时候先不管样式，重点放在HTML的结构和语义上，让HTML能体现页面结构或者内容。之后再去写样式
- HTML内最好不要写属性样式，最好不要用行内样式。
内容与样式分离的基本目标是机器可读性，也就是要使得机器可以探测含义或者意图，而机器可读性则是之后将要提到的各种目标的实现方式。例如，人类能够区分斜体在某处是强调，而在另一处是书名的情况；然而机器人和网络爬虫要做到这点就难得多。
机器可读性使得实惠地以人类或机器用户们各自可以接受的格式提供信息成为可能。这样做能够将抽象快速经济地套用到新的实例中，实现自动化操作而非人类手工。 在同介质中传递信息，例如，打印展示、在线显示、在线音频、盲文、API输入等。
参考
样式表是一种将网页的内容和表现分离的网页设计形式，在网页设计中网页标记（HTML或XHTML）包含页面的语义内容和结构，但没有定义其可视化布局（风格）。相反，风格的定义是在一个外部的样式表文件中，使用如CSS样式表语言。
形式和内容分离的优点
速度
总的来说，利用样式表的网站的用户体验通常会更快，相比不使用该技术的网站。“整体”来讲第一页可能加载得更慢，因为需要传输样式表和内容。后续页面加载速度会变快，因为没有样式信息需要下载——CSS文件已经在浏览器缓存中了。
可维护性
将所有样式保存在一个文件中可以减少维护时间，减少错误的机会，从而提高表达的一致性。例如，网页上某个级别的标题可能用一种特定的颜色表示，当修改这些标题的颜色的时候，只需要改变CSS文件中一个短短的字符即可。
可访问性
使用CSS的HTML或XHTML网站更容易调整，以适应不同的浏览器。
定制
如果一个页面的布局信息存储在外部，用户可以决定是否完全禁止布局信息，使网站的内容仍保持一种可读的形式。网站的作者也可以提供多个样式表，可以在没有改变它任何内容的情况下，彻底改变网站的外观。
一致性
因为语义只包含作者想要传达的含义，文档内容中各种元素的样式是非常一致的。例如，标题、强调文本、列表和数学表达式都使用样式表中定义的样式。
可移植性
表现的细节可以延迟到展示的时候才考虑，这意味着文档可以很容易的被重新编排，在一个完全不同的媒介上展示，只需要为新的表达媒介准备一个新的样式表，同时符合语义文档中元素或结构的词汇。
缺点
没有解析和生成工具导致应用范围缩小（？未完全理解）
4.有哪些常见的meta标签
<head>
<meta charset="UTF-8">
</head>
通过声明字符编码，能够确保浏览器快速并容易判断页面的渲染方式。这样做的好处是，可以避免在HTML中使用字符实体标记(character entity),从而全部与文档编码一致(一般采用UTF-8编码)。
<meta http-equiv="X-UA-Compatitle" content="IE-Edge,chrome=1">
对于双核浏览器，或者一些IE浏览器里装了插件，若果是IE就用最新的标准去渲染，如果有chrome内核，就用chrome模式去渲染。
<head>
<meta name="keywords" content="width=device-width,initial-scale=1">
</head>
为了使页面在移动端展示得更加合理。
<head>
<meta name="keywords" content="前端 饥人谷">
<meta name="description" content="最有爱的前端社区">
</head>
对搜索引擎优化会偶好处
5.文档声明的作用？严格模式和混杂模式指什么？<!doctype html>
DOCTYPE是用来声明文档类型和文档类型定义规范的，一个用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出差错。HTML编辑器通常也会在语法高亮的同时提供合法性验证。
DOCTYPE声明包括标准版本和一个文档类型定义（document type definition）文件的URI.通常DOCTYPE声明有以下几种：
HTML 5
<!DOCTYPE html>
HTML 4.01 Strict
该文档类型定义包含所有的HTML元素和属性，但不包括展示性和弃用的元素(比如font)。不允许框架集(Framesets)。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
该文档类型定义包含所有HTML元素和属性，包括展示性和弃用性的元素(比如font).不允许框架集(Framesets)。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
浏览器模式
为了能够很好的显示满足标准的页面，又能最大程度兼容不合法的HTML。浏览器厂商一般会提供两种浏览器模式：
- 标准模式（standards mode）：刘拿起根据标准规则来渲染页面。
- 混杂模式（quirks mode）：浏览器采用更加宽松的、向后兼容的方式来渲染页面。
混杂模式下，浏览器会模仿旧浏览器的行为，比如IE6，在此基础上兼容新的标准特性。
DOCTYPE切换
浏览器根据不同的DOCTYPE选择不同的渲染方法。
一下情况会采用标准模式渲染：
- 给出了完整的DOCTYPE声明
- DOCTYPE声明了Strict DTD
- DOCTYPE声明了Transitional DTD和URI
一下情况浏览器会采用混杂模式渲染 - DOCTYPE声明了Transitonal DTD和URI
- DOCTYPE声明不合法
- 未给出DOCTYPE声明
6.浏览器乱码的原因是什么？如何解决
编码和解码不匹配导致乱码的产生。解决方法是在HTML文件中说明编码方式。
7.常见的浏览器有哪些，什么内核
KED的开放源代码KHTML引擎用于KDE的Konqueror页面浏览器，后来成为WebKit的基础，是Apple的Safari的早期和Google的chrome网页浏览器的渲染引擎，根据StateCounter的统计是最被广泛使用的浏览器引擎。而现今Chromium/Chrome(IOS版除外)与Opera的版本则是基于Blink,是WebKit的一个分支。
Gecko，是Mozilla开放源代码项目的网页浏览器引擎，被各种来自基于Mozilla代码的派生产品所使用，包括Firefox网页浏览器、Thunderbird电子邮件客户端以及SeaMonkey网络包。
Trident，Internet Explorer的网页浏览器引擎，使用于Microsoft Windows平台的许多应用程序，如netSmart、Outlook Express、Microsoft Outlook的一些版本和Winamp、RealPlayer中的迷你浏览器。
Opera软件公司的专有引擎Presto已经授权给许多软件供应商，以及Opera自家的网页浏览器所使用，直到2013年它被Blink引擎替换。
8.列出常见的标签，并简单介绍这些标签用在什么场景
h1~h6
页面标题
p 段落
表示大段文字
a 链接
链接到一个地址
<a href="http://jirengu.com" target="_blank" title="饥人谷">饥人谷</a>
<a href="#">饥人谷</a> //点击没有变化
<a href="#about">饥人谷</a> //跳转到锚点
img
插入图片
//加载出错的时候，会显示alt内容。只闭合标签，最后不需加/，为自闭和标签
div
语义为“块”，用于给页面划分区块，让页面结构更清晰
<div id= "header">...</div>
<div id= "content">...</div>
<div id= "footer">...</div>
ul li
用于表示并列的内容，ul的直接子元素是li,它们可以互相嵌套
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
ol li
有序列表
<ol>
<li>把大象变小</li>
<li>打开冰箱</li>
<li>把大象塞进去</li>
</ol>
dl dt dd 自定义列表：designed list，designed title,designed discribe
用于展示“标题：内容”的场景
<dl>
<dt>商品名称：</dt>
<dd>青花瓷</dd>
</dl>
button
按钮
strong em
em需要强调一下
strong着重强调
iframe
用于嵌入一个页面 注意跨域操作问题
<iframe src="http://jirengu.com" name="myPage"></iframe>
<p><a href="http://www.w3cschool.cc target="myPage"></a><\p>
table
用于展示表格，不要用来布；thead,tbody,tfoot可以省略，浏览器会自动添加border-collapse: collapse;用于边框合并
网友评论