Q：浏览器的内核分别是什么？
| 浏览器 |
内核 |
| IE |
trident内核 |
| Firefox |
gecko内核 |
| safari |
webkit内核 |
| opera |
以前是presto内核，现在改用google chrome的Blink内核 |
| Chrome |
Blink（基于webkit，google与opera software共同开发） |
Q：行内元素有哪些？块级元素有哪些？空（void )元素有哪些？
| 类型 |
元素 |
| 行内元素 |
a、b、span、img、input、strong、select、label、em、button、textarea、... |
| 块级元素 |
div、ul、li、dl、dt、dd、p、h1-h6、blockquote、... |
| 空元素 |
即系没有内容的HTML元素，例如：br、meta、hr、link、input、img、... |
Q：DOCTYPE的作用？严格模式与混杂模式如何区分？它们有什么意义？
- <!Doctype> 声明必须在文档的第一行，它并不是一个html标签；
<!Doctype> 声明叫做文件类型定义（DTD），作用是为了告知浏览器该文件的类型，让浏览器知道以何种规范来对文档进行解析；
- 严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。
混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。
浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。
1、如果文档包含严格的Doctype，那么它一般以严格模式呈现；
2、包含过渡DTD和URL，也已严格模式呈现，只有过度DTD，没有URL会导致混杂模式呈现；
3、<!Doctype>不存在或形式不正确，会导致文档以混杂模式呈现；
4、HTML5没有DTD，因此也没有严格和混杂模式的区分，且有相对宽松的语法，已经尽最大的可能实现向后兼容；
- 严格模式和混杂模式，相信存在即合理，他们存在的意义与两者的来源密切相关，如果只有严格模式，那么很多老旧浏览器必然会受到影响，如果只存在混杂模式，每个浏览器都有自己的解析模式，这样就又回到了浏览器大战的混乱时代；
Q：CSS的盒子模型？
- 盒模型有两种
-- IE盒模型：content 包含border和padding;
-- 标准盒模型：内容(content)、填充(padding)、边界(margin)、 边框(border)。
Q：语义化的理解
- 用正确的标签做正确的事情，html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
- 即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
- 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO；
- 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
1、常用的一些语义化标签
<h1>~<h6> ，作为标题使用，并且依据重要性递减，<h1> 是最高的等级。
<p>段落标记，知道了 <p> 作为段落，你就不会再使用 <br /> 来换行了，而且不需要 <br /> 来区分段落与段落。<p> 中的文字会自动换行，而且换行的效果优于 <br />。段落与段落之间的空隙也可以利用 CSS 来控制，很容易而且清晰的区分出段落与段落。
<ul>、<ol>、<li>，<ul> 无序列表，这个被大家广泛的使用，<ol> 有序列表不常用。在 Web 标准化过程中，<ul> 还被更多的用于导航条，本来导航条就是个列表，这样做是完全正确的，而且当你的浏览器不支持 CSS 的时候，导航链接仍然很好使，只是美观方面差了一点而已。
<dl>、<dt>、<dd>，<dl> 就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。dl不单独使用，它通常与dt和dd一起使用。dl开启一个定义列表，dt表示要定义的项目名称，dd表示对dt的项目的描述。
<em>、<strong>，<em> 是用作强调，<strong> 是用作重点强调。
<table>、<thead>、<tbody>、<td>、<th>、<caption>， 就是用来做表格不要用来布局
2、HTML5新增
header元素：header 元素代表“网页”或“section”的页眉。
footer元素：footer元素代表“网页”或“section”的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。
hgroup元素：
nav元素：nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。
aside元素：aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。（特殊的section）
section元素：section元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。section通常还带标题，虽然html5中section会自动给标题h1-h6降级，但是最好手动给他们降级。
article元素：article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。（特殊的section）除了它的内容，article会有一个标题（通常会在header里），会有一个footer页脚。
Q：写一段语义的HTML5代码
<body>
<header><h1><a href='/'><img src='logo.png' /></a></h1>这是页头</header>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
<div class="container">
<aside>
这是左侧边栏
</aside>
<div class="content">
这是内容区域
</div>
</div>
<footer>这是页脚</footer>
</body>
Q：CSS引入的方式有哪些？ link和@import的区别是？
- 有 4 种方式可以在 HTML 中引入 CSS：
1⃣️内联方式: <div style="background: red"></div>
2⃣️嵌入方式: <style>.content {background: red;}</style>
3⃣️链接方式: <link rel="stylesheet" type="text/css" href="style.css">
4⃣️导入方式: <style>@import url(style.css);</style>
- link和@import都是外部引用CSS的方式,但有区别：
1、link是XHTML标签，除了加载CSS外，还可以定义RSS、rel等其他事务；@import属于CSS范畴，只能加载CSS。
2、link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载
3、link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
4、ink支持使用Javascript控制DOM去改变样式；而@import不支持。
Q： cookie和session的区别
- cookie数据存在客户的浏览器上，session数据存放在服务器端；
- cookie不安全；
- session会在一定时间内保存在服务器端，访问增多，占用服务器性能；
- 单个cookie保存的数据不超过4K；
Q：居中显示DIV
<div class="box" style="
width: 200px;
height: 200px;
background: green;
position: absolute;
top: calc(50vh - 100px);
left: calc(50vw - 100px);
// top:50%;
// left:50%;
// transform:translate(-50%，-50%);
">
</div>
<div style="
display: flex;
justify-content: center;
align-items: center;
height: 500px;
width: 500px;
background: bisque;
">
<div class="box" style="
width: 200px;
height: 200px;
background: green;
"></div>
</div >
<div style="
width: 100px;
height: 100px;
float: left;
background: red;
margin-left: calc(50vw - 50px);
margin-top: calc(50vh - 50px);
"></div>
Q：请描述一下 cookies，sessionStorage 和 localStorage ？
- 共同点：三者都保存在浏览器端，且同源；
- 不同点：
i、cookie始终在同源的http请求中携带，在客户端和服务端来回传递；
ii、sessionStorage和localStorage仅把数据保存在本地，cookie数据有路径概念，可以限制cookie只属于某个路径下面；
iii、存储大小限制不同，cookie数据不超过4k，因为每次http请求都会携带，所以cookie只适合存储较小的数据；sessionStorage和localStorage虽然也有限制，但是比cookie大的多得多，一般可以达到5M或者更大；
iV、作用域不同，sessionStorage不会在不同的浏览器窗口中共享，localStorage和cookie在所有的同源窗口下都是共享的；
V、数据有效期不同，sessionStorage只会在当前窗口关闭前有效，不会持久保存；localStorage存储的数据始终有效，窗口或浏览器关闭的情况下也会一直保存，可用作持久数据；cookie在设置的过期时间之前会一直有效，窗口或浏览器关闭的情况下也会一直保存；
Vi、webStorage支持事件通知机制，可以将数据更新的通知发送给监听者；
Vii、webStorage的API接口相对cookie使用起来更为方便；
网友评论