页面结构
*Web前端汇总
1、行内元素有哪些?块级元素有哪些? 空(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
2、src与href的区别
- href 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。
- src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
3、同步和异步的区别
- 同步是阻塞模式,异步是非阻塞模式。 同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去;
- 异步是指进程不需要一直等下去,而是继续执行下面的操作,不管其他进程的状态。当有消息返回时系统会通知进程进行处理,这样可以提高执行的效率。
4、cookies,sessionStorage和localStorage的区别
- sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
- web storage和cookie的区别
Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。 除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生。
5、一次完整的HTTP事务是怎样的一个过程?
基本流程:
a. 域名解析
b. 发起TCP的3次握手
c. 建立TCP连接后发起http请求
d. 服务器端响应http请求,浏览器得到html代码
e. 浏览器解析html代码,并请求html代码中的资源
f. 浏览器对页面进行渲染呈现给用户
* Html页面
1、页面结构
1.首先要了解页面的结构(包含哪些元素?哪些计算机语言能够在页面中运行 )
- <code class="language-html">html的基本结构
- <html>
- <head>
- <!-- 头部中包含的标记是页面的标题、序言、说明等内容,它本身不作为内容来显示,但影响网页显示的效果 -->
- </head>
- <body>
- <!-- 显示实际内容 -->
- </body>
- </html></code>
2.加载顺序
<script>
标签引用了外部脚本,就下载该脚本,否则就直接执行,执行完毕后将控制权交给浏览器渲染引擎;
所以js文件应当放在body的最后。
3. onload 和 ready的区别
4. JS事件绑定
<!--this指当前被点击的DOM对象--> <div id="outestA" onclick="var id=this.id; alert(id); return false;">方式一</div> <button id="test2" onclick="btnClick(this);">方式二</button> <button id="test3">方式三</button> <script type="text/javascript"> /*1、谁调用,this就指向谁 * 2、事件冒泡:由内而外;事件捕获:由外而内*/ /*1、事件处理函数中的this指windwon*/ function btnClick(obj){ //事件处理函数中的this指window对象,此处的obj才指dom对象 alert(this.id); alert(obj.id); } //用bind或者on绑定事件,可以注册多个事件 $("#test3").bind("click",function (e) { //此处的this指向dom对象 alert(this.id); }); $(function(){ //使用dom绑定事件 var dom = document.getElementById("test3"); //false阻止事件冒泡,使用事件捕获 dom.addEventListener('click', a, false); function a(){ alert(this.id); } }) </script>
JS加载执行顺序:
- 1、加载顺序:引入标记<script/>的出现顺序。 js相当文档的一部分;
- 2、每个脚本定义的全局变量和函数,都可以被后执行的脚本所调用;