HTML、XML、XHTML的区别
- HTML是一种超文本标记语言，语法较为松散，不规范。
- XML是一种可扩展标记语言，主要用来存储数据和结构，标签可以自定义。
- XHTML是一种可扩展超文本标记语言，作用与HTML类似，语法更加严格。
怎样理解HTML语义化
语义化 HTML 就是选择合适的标签、使用合理的代码结构来编写HTML的方式，使代码更具可读性，也使得浏览器的爬虫和机器能对代码更好地解析。
要实现HTML的语义化，就要求开发者掌握常用的HTML标签，理解各种标签所代表的含义，在不同的场景能使用合适的标签，尽量不使用没有语义信息的标签。
语义化带来的是更清晰的页面结构，使页面可读性更强；更清晰的代码结构，更利于开发团队的开发和维护；更好的适应性，可以支持更多的设备的不同表现形式；与机器更良好的沟通，使浏览器更容易渲染表现，也使搜索引擎更容易获取有效信息。
语义化的优点：
1.清晰的页面结构：去掉或样式丢失的时候，也能让页面呈现清晰的结构，增强页面的可读性。
2.支持更多的设备：屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。如果你使用的含予以的标记，屏幕阅读器会根据你的标签来判断网页的内容，而不是一个字母一个字母的拼写出来。
3.有利于SEO（搜索引擎优化）：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。
- 便于团队开发和维护：在团队中大家都遵循同一个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。
怎样理解内容与样式分离的原则
- 写 HTML 仅处理内容，不管样式，重点放在 HTML 的结构和语义化，避免出现属性样式，尽量不要出现行内样式。
- 写 JS 的时候，尽量不使用 JS直接操作样式，而是通过给元素添加删除class来控制样式变化。
- 页面展现的所有样式，都由CSS来负责实现。
有哪些常见的meta标签
META标签是HTML标记HEAD区的一个关键标签，它位于HTML文档的<head>和<title>之间（有些也不是在<head>和<title>之间）。它提供的信息虽然用户不可见，但却是文档的最基本的元信息。<meta>除了提供文档字符集、使用语言、作者等基本信息外，还涉及对关键词和网页等级的设定。
meta标签共有两个属性，分别是http-equiv属性和name属性。
| 标签 | 含义 |
|---|---|
<meta name="keywords" content="关键字1，关键字2，....."> |
定义针对搜索引擎的关键词 |
<meta name="description“” content="页面描述”> |
页面描述，告诉搜索引擎你的站点的主要内容 |
<meta name="viewport" content=""> |
移动端窗口 |
<meta name="author" content="姓名"> |
定义网页作者 |
<meta name="robots" content="none"> |
定义搜索引擎爬虫的索引方式 |
<meta name="generator" content="webstorm"> |
标明网页是什么软件制作 |
<meta name="copyright" content="某某"> |
用于标注版权信息 |
<meta name="renderer" content="ie-comp"> |
用于指定双核浏览器默认以何种方式渲染页面 |
<meta name="revised-after" content="7 days"> |
搜索引擎爬虫重访时间 |
<meta charset="utf-8"> |
声明文档使用的字符编码（属于http-equiv属性） |
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> |
告知浏览器以何种版本来渲染页面。（一般都设置为最新模式） |
<meta http-equiv="cache-control" content="no-cache"> |
指导浏览器如何缓存某个响应以及缓存多长时间 |
<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT"> |
网页到期时间，过期后网页必须到服务器上重新传输 |
<meta http-equiv="refresh" content="2;URL=http://www.github.com/"> |
自动刷新并指向某页面 |
<meta http-equiv="Set-Cookie" content="name, date"> |
cookie设定 |
文档声明的作用？严格模式和混杂模式指什么？<doctype html>的作用？
DOCTYPE,简称为DTDs，是英文Document type的缩写，中文“文档类型”，在web设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的XHTML网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS都不会生效。
<!DOCTYPE>声明位于HTML文档中的第一行，处于<html>标签之前。在HTML中doctype有两个主要目的：
- 对文档进行有效性验证。
它告诉用户代理和校验器这个文档是按照什么DTD写的。 - 决定浏览器的呈现模式。
对于实际操作，通知浏览器读取文档是用哪种解析算法。如果没有写，则浏览器根据自身的规则对代码解析，可能会严重影响html排版布局。
浏览器解析代码方式分为严格模式和混杂模式。
- 严格模式：又称标准模式或非怪异模式，是指浏览器按照W3C标准解析代码。
- 混杂模式：又称兼容模式或怪异模式，是指浏览器用自己的方式解析代码。不同浏览器有不同的解析方式。页面以一种比较宽松的向后兼容的方式显示。
- 触发：浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。
- 如果XHTML文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。
- 对于HTML 4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现。
- DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。
HTML 4.01和HTML5 差异
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
HTML5 不基于 SGML，所以不需要引用 DTD。
在 HTML 4.01 中有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种：<!DOCTYPE html>.
浏览器乱码的原因？如何解决？
参考
浏览器乱码根本原因是保存的编码格式和浏览器解析时的解码格式不匹配导致的。
编码方式分为：
- ASCII 美国人发明，为美国人服务，由128个字符组成，每个字符占7位。
- ISOLatin-1 欧洲人发明，为欧洲人服务，由256个字符组成，
- UNICODE:UTF-8 万国码，用1到6个字节（1个字节8位）编码UNICODE字符。
GBK中国人发明，为中国人服务，用2个字节表示一个汉字，比UTF-8省空间。
解决乱码的方法：
保存的文件中声明是用哪种编码方式保存。告诉浏览器打开这个页面时用什么方式解码。
常见的浏览器及使用的内核
浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。JS 引擎则是解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果。
最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。内核的种类很多，如加上没什么人使用的非商业的免费内核，可能会有 10 多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit。
发展历史参考
| 浏览器内核 | 常见浏览器 |
|---|---|
| Trident | E6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）；猎豹安全浏览器：1.0-4.2版本为Trident+Webkit，4.3版本为Trident+Blink；360安全浏览器 ：1.0-5.0为Trident，6.0为Trident+Webkit，7.0为Trident+Blink；360极速浏览器：7.5之前为Trident+Webkit,7.5为Trident+Blink；傲游浏览器 ：傲游1.x、2.x为IE内核，3.x为IE与Webkit双核；搜狗高速浏览器：1.x为Trident，2.0及以后版本为Trident+Webkit； |
| Gecko | Firefox ；Netscape6至9 |
| Blink | Google Chrome ； Opera |
| Webkit | Apple Safari (Win/Mac/iPhone/iPad)；Android 默认浏览器；Google Chrome |
| EdgeHTML内核 | Edge |
| Presto | Opera 12.17之前版本 |
HTML常见标签及使用场景
Basic HTML
| Tag | Description |
|---|---|
<!DOCTYPE> |
Defines the document type |
<html> |
Defines an HTML document |
<title> |
Defines a title for the documenr |
<body> |
defines the document's body |
<h1> to<h6> |
defines HTML headings |
<p> |
defines a paragraph |
<br> |
insets a single line break |
<hr> |
defines a thematic change in the content 表现为水平线 |
<!--......--> |
defines a comment |
Forms and Input
| Tag | Description |
|---|---|
<form> |
defines an HTML form for user input |
<input> |
defines an input control |
<textarea> |
defines a multiline input control(text area) |
<button> |
defines a clickable button |
<select> |
defines a drop-down list |
<optgroup> |
<select>下的小分类example
|
<option> |
defines an option in a drop-down list <select>下最小选项 |
<label> |
defines a label for an <input> element example
|
网友评论