1.href 和 src的区别
href和src都是对外部资源进行引入,比如图片,css,js等资源
但href不会阻塞页面的加载和解析,src会阻塞,遇到标签含有src属性时,页面的加载和解析会暂停,只到对应的资源加载完成
关于详细的区别可以参考这篇文章:谈谈src和href的区别 - 简书
2.对HTML语义化的理解
使用语义化标签能让代码看起来更好理解,增强可读性,也能够更清晰的看懂网页的结构。同时使用语义化标签也有利于SEO
常见的语义化标签:
<header></header> 头部
<nav></nav> 导航栏
<section></section> 区块(有语义化的div)
<main></main> 主要区域
<article></article> 主要内容
<aside></aside> 侧边栏
<footer></footer> 底部
3. DOCTYPE(⽂档类型) 的作用
告诉浏览器用什么样的文档类型来解析文档
html5的doctype为
<!DOCTYPE html>
4. script标签中defer和async的区别
不带defer和async的话,加载js的话是会阻塞后面页面的解析和加载的。可以看一下下面的示例图:
加了async后,js加载(下载)就会和页面解析异步进行,但是执行还是会阻塞后面的加载和解析
加了defer后,js加载和页面解析会异步进行,但执行会等待页面解析完成后再去执行
总之,async会在加载完js脚本后立即执行,执行部分阻塞页面解析,加载部分不阻塞页面解析
defer会一开始先加载脚本,但会等到页面解析完成后再进行执行
具体区别可参考这篇文章:
https://segmentfault.com/q/1010000000640869
5.meta标签的作用?常⽤的meta标签有哪些
meta标签可以存放一些数据,例如关键词,编码,页面描述等。这些数据用于浏览器解析,搜索引擎爬取和解析数据,或者其他web服务
meta标签作用文章:
https://www.w3cplus.com/html5/meta-tags-and-seo.html
①定义charset编码类型
<meta charset="UTF-8" >
②页面关键词
<meta name="keywords" content="关键词" />
③页面定时刷新和重定向
<meta http-equiv="refresh" content="0;url=" />
④适配移动端
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
6.HTML5新特性
①新增语义化标签
②表单增加更多输入类型,便于检查填写格式和类型,且表单新增了一些属性便于验证,比如required,pattern属性
③dom查询操作优化,可以用document.querySelector(),查询起来更方便
④web存储,新增local storage和session storage
⑤新增画布canvas,可以使用JavaScript在网页上绘制图像
⑥提供了音频和视频的标准,可以使用audio和video标签更好的处理音频和视频
html5新特性文章:HTML5的十大新特性 - Vicky_YU - 博客园
7.清除浮动的办法
1.额外标签法(在最后一个浮动标签后,新加一个标签,给其设置clear:both;)(不推荐)
2.父级添加overflow属性(父元素添加overflow:hidden)(不推荐)
3.使用after伪元素清除浮动(推荐使用)
清除浮动的最常用的四种方法,以及优缺点_h_qingyi的博客-CSDN博客_清除浮动
8.BFC是什么
BFC叫块格式化上下文,对应的英文为Block Formatting Context,
BFC可以简单的理解为是一个独立的布局环境,BFC内部的元素布局与外部互不影响
用bfc可以解决一些问题,例如
- 浮动元素令父元素高度坍塌的问题
- 非浮动元素被浮动元素覆盖(一个div是float,另外一个div是普通的div,但这两个div会重叠)
- 外边距垂直方向重合的问题
BFC的产生条件:()<