HTML、XML、XHTML 有什么区别
- HTML,超文本标记语言，被设计用来显示数据，使用预定义标签，是语法较为松散的、不严格的Web语言；
- XML,可扩展标记语言，主要用于存储和传输数据，使用自定义标签，语法严格（必须有闭合标签，标签大小写敏感等）；
- XHTML,可扩展超文本标记语言，基于XML，作用与HTML类似，但语法更严格.
怎样理解 HTML 语义化
- 语义化就是选择合适的标签、使用合理的代码结构，便于开发者阅读，同时让浏览器爬虫和机器很好的解析；
- 语义化的好处：
- 有利于SEO，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重。
- 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构
- 方便其他设备的解析（如屏幕阅读器）
- 便于团队开发和维护
怎样理解内容与样式分离的原则
- 内容和样式的分离，就是指在网页编码的过程中，要将HTML和CSS两大部分分开。写HTML的时候先不管样式，重点放在HTML的结构和语义化上，让HTML能体现页面结构和内容；然后进行 CSS 样式的编写，减少内容与样式的耦合；
- 内容与样式分离的好处：
- 浏览器加载网页页面速度变快。分离原则下，页面样式的代码写在了CSS当中，HTML体积变得更小；
- 代码易于维护，修改网页样式时，更有效率。根据html标签内ID或class的标记，到CSS里找到相应的ID或class，可以快速替换指定位置的样式，不会破坏页面架构和其他部分的样式
有哪些常见的meta标签
meta常用于定义页面的说明、关键字、作者、最后修改日期和其它的元数据。这些元数据将服务于浏览器（如何布局或重载页面），搜索引擎和其它web服务
meta标签共有两个属性，分别是http-equiv属性和name属性
常见meta标签：
- keywords(关键字)
<meta name="keywords" content="博客，前端"> - description(网站内容的描述)
<meta name="description" content="热爱前端与编程"> - viewport(移动端的窗口)
<meta name="viewport" content="width=device-width, initial-scale=1"> - author(作者)
<meta name="author" content="author_name,123456789@qq.com"> - copyright(版权)
<meta name="copyright" content="xxx"> - renderer(双核浏览器渲染方式)
<meta name="renderer" content="webkit"> //默认webkit内核
renderer是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面 - 指定网页字符集
<meta charset="utf-8"> - X-UA-Compatible(浏览器采取何种版本渲染当前页面)
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面 - cache-control(指定请求和响应遵循的缓存机制)
<meta http-equiv="cache-control" content="no-cache"> - expires(网页到期时间)
<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" /> - refresh(自动刷新并指向某页面)
<meta http-equiv="refresh" content="2；URL=http://www.XXX.com/"> - Set-Cookie(cookie设定)
<meta http-equiv="Set-Cookie" content="User=xxx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT">
文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?
- 文档声明用来告知浏览器当前文档所使用的类型，让浏览器解析器知道要用什么规范来解析文档;
- 标准模式（standards mode）：浏览器根据标准规约来渲染页面;
- 混杂模式（quirks mode）：浏览器采用更加宽松的、向后兼容的方式来渲染页面。混杂模式下，浏览器会模仿旧浏览器的行为，比如IE6，在此基础上兼容新的标准特性。 混杂模式又称兼容模式、怪异模式等；
-
<!doctype html>是html5标准网页声明,告诉浏览器用最新的HTML5标准来解析渲染页面；如果不写，浏览器就会进入混杂模式。
浏览器乱码的原因是什么？如何解决
- 乱码产生的根本原因是保存的编码格式和浏览器解析时的解码格式不匹配
- 在HTML的
<head>里添加<meta charset='xxx'>并且保存的时候仍选择同样的编码方式；
常见的浏览器有哪些，什么内核
| 浏览器 | 内核 | 说明 |
|---|---|---|
| IE | Trident | 在IE4中被首次采用，并沿用到了IE11，win10的Edge浏览器内核为EdgeHTML |
| Firefox | Gecko | Netscape6开始采用的内核，后来的FireFox也采用了该内核，开源 |
| Opera | Presto -> Blink | Presto引擎的特点就是渲染速度的优化达到了极致，然而代价是牺牲了网页的兼容性 |
| Safari | Webkit | KHTML的分支，从KDE的KHTML及KJS引擎衍生而来，开源 |
| Chrome | Webkit -> Blink | Blink是webkit的分支 |
列出常见的标签，并简单介绍这些标签用在什么场景
| 标签 | 应用 |
|---|---|
<html> |
是 HTML 页面的根元素； |
<body> |
包含页面的主体内容； |
<head> |
包含了文档的元（meta）数据； |
<meta> |
提供了元数据.元数据也不显示在页面上，被浏览器解析； |
<link> |
定义了文档与外部资源之间的关系。通常用于链接到样式表； |
<style> |
定义了HTML文档的样式文件引用地址，在<style> 元素中可直接添加样式来渲染 HTML 文档； |
<script> |
用于加载脚本文件，如： JavaScript； |
<title> |
描述了文档的标题； |
<h1>-<h6> |
定义了一级标题到六级标题，标题字体大小逐渐减弱； |
<p> |
定义一个段落； |
<a> |
定义超链接 |
<image> |
定义html图像。可通过width和heigth属性来指定图像的大小； |
<div> |
定义块级元素，它是可用于组合其他 HTML 元素的容器,没有特定的含义 |
<span> |
是内联元素，也没有特定的含义，可用作文本的容器； |
<ol><li> |
有序列表，列表项目会使用数字进行标记； |
<ul><li> |
无序列表，列表项目会使用粗体圆点（典型的小黑圆圈）进行标记； |
<table> |
定义表格； |
<tr> |
定义表格的行； |
<td> |
定义表格每行的列； |
<th> |
定义表格的表头； |
<tbody> |
定义表格的主体； |
<tfoot> |
定义表格的页脚 ； |
<iframe> |
用于在当前页面嵌入新页面； |
<strong> |
定义重要的文本； |
<em> |
定义被强调的文本。 |
参考：
http://chenhaizhou.github.io/2015/12/09/html-sense.html
https://segmentfault.com/a/1190000004279791
http://harttle.com/2016/01/22/doctype.html
https://juejin.im/entry/57ff3cea0e3dd90057e5f25e
网友评论