前端随机问答（一）

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使用起来更为方便；
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容