前端随机问答(一)

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的作用?严格模式与混杂模式如何区分?它们有什么意义?

  • 声明必须在文档的第一行,它并不是一个html标签;
    声明叫做文件类型定义(DTD),作用是为了告知浏览器该文件的类型,让浏览器知道以何种规范来对文档进行解析;
  • 严格模式:又称标准模式,是指浏览器按照 W3C 标准解析代码。
    混杂模式:又称怪异模式或兼容模式,是指浏览器用自己的方式解析代码。
    浏览器解析时到底使用严格模式还是混杂模式,与网页中的 DTD 直接相关。
    1、如果文档包含严格的Doctype,那么它一般以严格模式呈现;
    2、包含过渡DTD和URL,也已严格模式呈现,只有过度DTD,没有URL会导致混杂模式呈现;
    3、不存在或形式不正确,会导致文档以混杂模式呈现;
    4、HTML5没有DTD,因此也没有严格和混杂模式的区分,且有相对宽松的语法,已经尽最大的可能实现向后兼容;
  • 严格模式和混杂模式,相信存在即合理,他们存在的意义与两者的来源密切相关,如果只有严格模式,那么很多老旧浏览器必然会受到影响,如果只存在混杂模式,每个浏览器都有自己的解析模式,这样就又回到了浏览器大战的混乱时代;

Q:CSS的盒子模型?

  • 盒模型有两种
    -- IE盒模型:content 包含border和padding;
    -- 标准盒模型:内容(content)、填充(padding)、边界(margin)、 边框(border)。

Q:语义化的理解

  • 用正确的标签做正确的事情,html语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;
  • 即使在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的;
  • 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,利于SEO;
  • 使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。
1、常用的一些语义化标签  
   

~

,作为标题使用,并且依据重要性递减,

是最高的等级。

段落标记,知道了

作为段落,你就不会再使用
来换行了,而且不需要
来区分段落与段落。

中的文字会自动换行,而且换行的效果优于
。段落与段落之间的空隙也可以利用 CSS 来控制,很容易而且清晰的区分出段落与段落。

      • 无序列表,这个被大家广泛的使用,
          有序列表不常用。在 Web 标准化过程中,
            还被更多的用于导航条,本来导航条就是个列表,这样做是完全正确的,而且当你的浏览器不支持 CSS 的时候,导航链接仍然很好使,只是美观方面差了一点而已。
            就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。dl不单独使用,它通常与dt和dd一起使用。dl开启一个定义列表,dt表示要定义的项目名称,dd表示对dt的项目的描述。 是用作强调, 是用作重点强调。 、、、
            , 就是用来做表格不要用来布局 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代码

            
              

            这是页头
            这是内容区域
            这是页脚

            Q:CSS引入的方式有哪些? link和@import的区别是?

            • 有 4 种方式可以在 HTML 中引入 CSS:
              1⃣️内联方式:

              2⃣️嵌入方式:
              3⃣️链接方式:
              4⃣️导入方式:
            • 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

            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使用起来更为方便;

            你可能感兴趣的:(前端随机问答(一))