入门任务4 HTML
HTML、XML、XHTML 有什么区别
首先，他们都是一种标记语言（Markup Language），不同的是：
- HTML，超文本标记语言，用于创建结构化文档，并提供文档背后的语义化含义，是语法较为松散的、不严格的Web语言；
- XML，可扩展标记语言，提供创建、结构化和编码文档的规则，主要用于存储数据和结构，可扩展，语法结构严谨；
- XHTML，可扩展超文本标记语言，基于XML的规则，作用与HTML类似，但语法更严格。
怎样理解 HTML 语义化
HTML语义化要求我们根据文档的结构、内容使用合适的html标签，便于开发者阅读与维护，同时让浏览器爬虫更好的解析获取。做到HTML语义化有以下几点好处：
- 在没有CSS样式的时候能够清晰的看出网页的结构，增强可读性
- 有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重
- 便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力
- 支持多终端设备的浏览器渲染。PAD、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱），使用语义化可以确保这些设备以一种有意义的方式来渲染网页。
怎样理解内容与样式分离的原则
一个html页面基本上包含内容、样式、行为这3个面，其中行为部分决定页面和用户交互的行为，样式部分决定用户界面的视觉表现，内容部分是结构化的文本信息。分离原则可以让开发人员把精力集中在html的结构和语义化上面，这样有以下几点好处：
- 内容与样式的分离可以在样式或者行为文件出问题的时候，html依然具有完整的可读的正确结构
- 代码结构一目了然，是对语义化的体现
- 提高代码的重用性，减少冗余代码，提高开发速度
- 有利于后期维护，使开发人员把更多的精力集中在文档内容上
有哪些常见的meta标签
html5中有5种有效属性： content、name、http-equiv、、scheme、charset
content用于定义与 http-equiv 或 name 属性相关的元信息，
scheme用于定义用于翻译 content 属性值的格式
charset 用于定义字符集
name属性
| 属性 | 说明 | 用法 |
|---|---|---|
name=”viewport” |
在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。 | <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”> |
name=”description” |
网页的描述，是给搜索引擎看的，搜索引擎根据这个描述进行收录排名，一般是网页内的关键字 | <meta name=”description” content=””> |
name=”keywords” |
keywords用来告诉搜索引擎你网页的关键字是什么，换句话说就是你的网站主题，从一定意义上来说keywords与description其实它们的作用是一样的（突出网站主题），但他们又有所不同（在搜索结果页的展示）（已不再使用）。 | <meta name=”keywords” content=””> |
name=”author” |
标注网站作者是谁 | <meta name=”author” content=””> |
name=”copyright” |
标注网站的版权信息 | <meta name=”copyright” content=””> |
name=”robots” |
robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。content的参数有all,none,index,noindex,follow,nofollow。默认是all。 | <meta name=”robots” content=”all”> |
http-equiv属性
| 属性 | 说明 | 用法 |
|---|---|---|
Refresh |
自动刷新并转到新页面,（注意后面的引号，分别在秒数的前面和网址的后面，URL可为空） | <meta http-equiv=”Refresh” content=”5;URL”>； |
content-Type |
设定页面使用的字符集。在HTML5中已经简写成<meta charset=”utf-8″>
|
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″> |
Window-target |
强制页面在当前窗口以独立页面显示,用来防止别人在iframe(框架)里调用自己的页面，这也算是一个非常实用的属性。 | <meta http-equiv=”Window-target” content=”_top”> |
Set-Cookie |
如果网页过期，那么存盘的cookie将被删除。必须使用GMT的时间格式。 | <meta http-equiv=”Set-Cookie” content=”cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT; path=/”> |
Pragma |
禁止浏览器从本地计算机的缓存中访问页面内容。 | <meta http-equiv=”Pragma” content=”no-cache”> |
Expires |
可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。 | <meta http-equiv=Expires Content=0> <meta http-equiv=”expires” content=”Fri,12 Jan 2001 18:18:18 GMT”> |
文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?
文档声明，它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行；在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
<!doctype html>决定浏览器使用严格模式渲染你的web文档。
模式触发
浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。
- 如果XHTML、HTML 4.01文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。
- 包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现。
- DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。
html5既然没有DTD，也就没有严格模式与宽松模式的区别，html5有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。
浏览器乱码的原因是什么？如何解决##
造成网页乱码原因主要是[html源代码]内中文字内容与html编码不同，或者浏览器不能自动检测网页编码，造成网页乱码。
解决方法：在<meta charset="">中设定字符集与保存时编码类型保持一致；
常见的浏览器有哪些，什么内核##
常见的浏览器有IE、Mozilla Firefox、Google Chrome、Safari、opera、 360，TT，搜狗，遨游等浏览器。
| 浏览器 | 内核 |
|---|---|
| Chrome | Webkit |
| IE | Trident |
| Firefox | Gecko |
| Safari | Webkit |
像360、QQ浏览器等都是用双内核；
列出常见的标签，并简单介绍这些标签用在什么场景##
- h1-h6 标题标签
- p 段落标签
- a 链接标签
- href="#about" 跳转到id为about的位置
- href="/test" 跳转到完整域名+test
- img 图片链接
- alt 图片无法展示时，显示内容，便于视力障碍人士使用
- div 块标签
- ul 无序列表
- li ul的子标签，ul下的直接元素必须是li
- ol 有序列表
- li ol的子元素
- dl 展示有标题和内容的自定义表格
- dt 标题子标签
dl - button 按钮标签
- strong 强调元素
- em 中层强调元素
- span 标记一段行内元素
- iframe 在当前页面嵌入一个页面
- table 用于展示表格，不要用来做布局
- thead、tbody、tfoot 一般不用写
- tr 代表表格的一行
- th 代表表格第一行的列内容
- td 代表表格的一列
