前端知识_第几个div-优快云博客

本文链接：https://blog.youkuaiyun.com/XKX13419613290/article/details/81392554

能让网页中第5个div隐藏的：$("div:nth-child(5)").hide()；而隐藏段落<p hidden>这个段落应该被隐藏。</p>

HTML

Doctype的作用？标准模式与兼容模式有什么区别？

（1）<!DOCTYPE>告知浏览器的解析器用什么文档标准解析文档，声明位于HTML文档的第一行，
        若DOCTYPE不存在或者不正确会导致文档以兼容模式呈现。
（2）标准模式的排版和JS运作模式模式都是以该浏览器支持的最高标准运行。
     在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。

HTML5为什么只需要写<!DOCTYPE HTML>?

html5不基于SGML,因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）;而HTML4.0基于sgml,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

行内元素有哪些？块级元素有哪些？空（void) 元素有哪些？

首先：css规范规定，每个元素都有display属性，确定该属性的类型。每个元素都有默认的display值，如div的display默认值为“block”,则为“块级”元素；span默认dispaly属性值为“inline”是行内元素。
（1）行内元素有：strong select a b span img input select
（2）块状元素：div ul li ol dl dt p h1 h2 ..
（3）常见的空元素：<br> <hr> <img> <input> <link> <meta>
鲜为人知的是：<area> <base> <command> <source>

页面导入样式时，使用link和@import有什么区别

（1）link属于XHTNL标签，除了加载css外，还能用于定义RSS，定义rel连接属性等作用；而@import是css提供的，只能用于加载css,
(2)页面加载时，link会同时被加载，而@input引用的css会等到页面被加载完再加载；
（3）import是CSS2.1提出的，只在IE5以上才能被识别，而link是HTML标签，无兼容问题。

介绍一下对于浏览器内核的理解？

主要分为两部分：渲染引擎和JS引擎
渲染引擎：负责取得网页的内容（HTML,XML,图像等）、整理讯息（加入CSS等），以及网页的显示方法，然后会 
         输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相 
         同。所有的网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用都需要内核。
JS引擎：解析和执行javascript来实现网页的动态效果。
最开始的渲染引擎与JS引擎没有很大区分，后来JS越来越独立，内核就倾向只指向渲染引擎

常见的浏览器内核有哪些？

Trident内核：IE,MAXThon,World,360,搜狗。
Gecko内核：Netscape6以上版本，seamonkey
Presto内核：opera7及以上，现在是blink
Webkit内核：safari,chrome（webkit的分支blink）等

HTML5有哪些新特性，移除了哪些元素？如何处理html5新标签的浏览器兼容问题？如何区分HTML和HTML5？

*HTML现在不是sgml的子元素，主要是关于图像，位置，存储，多任务等功能的增加。
    新标签      绘画 canvas；
               用于媒介回访放的video和audio元素
               本地离线存储localstorage长期存储数据，浏览器关闭后数据不丢失；
               sessionstorage的数据在浏览器关闭后自动删除；
               语意画更好的内容元素、比如article、footer、header、nav、section;
               表单控件：calendar、data、time、Email、URL、search；
               新的技术webworker、websocker、Geolocation.
 移除的元素：
              纯表现的元素：basefont,big,center,font,s,strike,tt,u;
              对性能产生负面影响的元素：frame、frameset、noframes
*支持HTML5新标签
            IE8/IE7/IE6支持通过document。createElement方法产生的标签，可以利用这一特性
            让这些浏览器支持HTML5的新标签。浏览器支持新标签后，还需要添加标签默认的样式。
           当然也可以使用成熟的框架、比如HTML5shim;
           <!--[if lt IE 9]>
        <script> src="//cdn.bootcss.com/html5shiv/r29/html5.min.js"</script>
           <![endif]-->
*如何区分HTML5：        DOCTYPE声明  \  新增的结构元素   \   功能元素

简述一下你对HTML语义化的理解？

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

HTML5的离线式存储怎么使用，工作原理能不能解释下？

在用户没有与英特网连接时，可以正常访问站点或应用，在用户与英特网连接时，更新用户机器上的缓存文件。原理：HTML5的离线存储是基于一个新建.appcache文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
如何使用：
1：页面头部像下面加入manifest的属性；
2、在cache.manifest文件的编写离线存储的资源；
   CACHE MANIFEST   #V0.11    CACHE   JS/APP.js  css/style.css  network：  resourse/logo.png    fallback   offline.html
3:在离线状态下，操作window.applicationCache进行需求实现

浏览器是怎么对HTML5的离线存储资源进行管理和加载的呢？

在线的情况下，浏览器发现HTML头部有manifest属性，它会请求manifest文件，如果是第一次访问APP，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过APP并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不会做任何操作，如果文件改变了，就会重新下载文件中的资源并进行离线存储。     离线状态下，浏览器就会直接使用离线存储的资源。

请描述一下cookie，sessionStorage和localStorage的区别

cookie是网站为了表示用户身份而存储在用户本地终端上的数据（通常经过加密）
cookie数据始终在同源的http请求中携带（即使不需要），记住在浏览器和服务器来回传递。
sessionSeorage和localStorage不会自动把数据发给服务器，仅在本地保存。
存储大小：
        cookie数据大小不能超过4k.
  sessionStorage和localstorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
有效时间：
localStorage   存储持久数据，浏览器关闭后数据不会丢失除非主动删除数据；
sessionStorage   数据在当前浏览器窗口关闭后自动删除。
cookie           设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

iframe有哪些缺点

*iframe会阻塞主页面的onload事件
*搜索引擎的检索程序无法解读这种页面，不利于SEO
*iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面并进行加载
如果要使用iframe，最好是通过JavaScript动态给iframe添加src属性值，这样可以绕开以上两个问题

label的作用是什么？是怎么用的？

label标签来定义表单控制间的关系。当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。              <label for="Name">Number:</label>
                   <input type=“text“name="Name" id="Name"/>
                                   <label>Date:<input type="text" name="B"/></label>

HTML5的form如何关闭自动完成功能？

给input设置或不想要提示的form设置为autocomplete=off

如何实现浏览器多个标签之间的通信？（阿里）