什么是 DOCTYPE， 有何作用？
Doctype是HTML5的文档声明，通过它可以告诉浏览器，使用哪一个HTML版本标准解析文档。
在浏览器发展的过程中，HTML有很多版本，不同的版本之间格式书写上存在差异。
如没有事先告诉浏览器，那么浏览器就不知道文档解析标准是什么？此时，大部分浏览器将开启最大兼容模式来解析网页，我们一般称为怪异模式。
这不仅会降低解析效率，而且会在解析过程中产生一些难以预知的bug，所以文档声明是必须的。
html 语义化的理解
HTML标签的语义化，用正确的标签做正确的事情，使页面有良好的结构，页面元素有含义，无论是谁都能看懂这块内容是什么。
语义化的优点如下：
在没有CSS样式情况下也能够让页面呈现出清晰的结构
有利于SEO和搜索引擎建立良好的沟通，
有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重
方便团队开发和维护，语义化更具可读性，可以减少差异化
有助于一些特殊设备解析代码（移动设备，盲人设备）
Quirks（怪癖）模式是什么？它和Standards（标准）有什么区别？
页面如果写了DTD，就意味着这个页面采用Standards（标准），如果没有，则采用怪癖模式、诡异模式、怪异模式。
区别：总体会有布局、样式解析、脚本执行三个方面区别，这里列举一些比较常见的区别：
盒模型：在W3C标准(content-box)中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，然而在Quirks(border-box)模式下，IE的宽度和高度还包含了padding和border
设置行内元素的高宽：在Standards模式下，给行内元素设置width和height都不会生效，而在Quriks模式下会生效
在Standards模式下，设置margin：0 auto；可以使元素水平居中，但是在Quriks模式下失效
设置百分比高度:在Standards模式下，元素的高度是由包含的内容决定的，如果父元素没有设置百分比的高度，子元素设置百分比的高度是无效的
HTML5为什么只需要写<!DOCTYPE html>?
为什么HTML5只需要写一段：
<!DOCTYPE html>而HTML4却需要写很长的一段
<!DOCTYPE HTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">其实主要是因为HTML5不基于SGML，所以不需要引用DTD。在HTML4中，<!DOCTYPE>声明引用DTD，因为HTML4基于SGML。DTD规定了标记语言的规则，这样浏览器才能正确的呈现内容。
简单介绍对浏览器内核的理解
主要分成两部分：渲染引擎和JS引擎。
渲染引擎：将代码转换成页面。负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等）、以及计算网页的显示方式。
JS引擎：解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分得很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
defer和async的区别
script 标签有2个属性 async（异步） 和 defer（推迟）；他们的功能是：
不带这两个参数即同步执行，从上至下解析文档的时候,遇到script标签引入外部资源是会阻塞代码向下执行，直到文件被下载执行后才会继续执行下面的代码
async：他是异步加载，不确定何时会加载好；页面加载时，带有 async 的脚本也同时加载，加载后会立即执行，如果有一些需要操作 DOM 的脚本加载比较慢时，这样会造成 DOM 还没有加载好，脚本就进行操作，会造成错误。
defer：页面加载时，带有 defer 的脚本也同时加载，加载后会等待 页面加载好后，才执行。
src 和 href 的区别
src和href都是HTML中特定元素的属性，都可以用来引入外部的资源。两者区别如下：
src：全称source，它通常用于img、video、audio、script元素，通过src指向请求外部资源的来源地址，指向的内容会嵌入到文档中当前标签所在位置，在请求src资源时，它会将资源下载并应用到文档内，比如说：js脚本、img图片、frame等元素。当浏览器解析到该元素时，会暂停其它资源下载，直到将该资源加载、编译、执行完毕。这也是为什么将js脚本放在底部而不是头部的原因。
href：全称hyper reference，意味着超链接，指向网络资源，当浏览器识别到它指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理，通常用于a、link元素。
什么是严格模式与混杂模式？
严格模式：是以浏览器支持的最高标准运行（按照W3C标准解析代码）
混杂模式：称为怪异模式或者兼容模式，指浏览器根据自己的标准来解析代码
前端页面有哪三层构成，分别是什么？
构成：结构层、表示层、行为层
结构层（structural layer）
结构层类似于盖房子需要打地基以及房子的悬梁框架，它是由HTML超文本标记语言来创建的，也就是页面中的各种标签，在结构层中保存了用户可以看到的所有内容，比如说：一段文字、一张图片、一段视频等等
表示层（presentation layer）
表示层是由CSS负责创建，它的作用是如何显示有关内容，学名：层叠样式表，也就相当于装修房子，看你要什么风格的，田园的、中式的、地中海的，总之CSS都能办妥
行为层（behaviorlayer）
行为层表示网页内容跟用户之间产生交互性，简单来说就是用户操作了网页，网页给用户一个反馈，这是JavaScript和DOM主宰的领域
iframe的作用以及优缺点
iframe也称作嵌入式框架，把一个网页的框架和内容嵌入到现有的网页中。
优点：
可以用来处理加载缓慢的内容，比如：广告
缺点：
iframe会阻塞主页面的Onload事件 （上述，src加载资源会阻塞）
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。但是可以通过JS动态给ifame添加src属性值来解决这个问题，当然也可以解决iframe会阻塞主页面的Onload事件的问题（如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题）
浏览器的后退按钮没有作用
无法被一些搜索引擎识别
img上 title 与 alt
alt：全称alternate，切换的意思，如无法显示图像，将显示alt指定的内容
title：鼠标移动到元素上时显示title的内容
H5和HTML5区别
H5是一个产品名词，包含了最新的HTML5、CSS3、ES6等新技术来制作的应用(移动端)
HTML5是一个技术名词，指的就是第五代HTML
行内元素和块级元素分别有哪些？有何区别？怎样转换？
常见的块级元素：p、div、form、ul、li、ol、table、h1、h2、h3、h4、h5、h6、dl、dt、dd
常见的行级元素：span、a、img、button、input、select
块级元素：
每个块级元素独占一行，默认从上到下排列
宽度默认为100%
高度、行高以及外边距和内边距都是可以设置的
块级元素可以容纳其它行级元素和块级元素
行内元素：
和其它元素都会在一行显示
高、行高以及外边距和内边距可以设置
宽度就是文字或者图片的宽度，不能改变
行级元素只能容纳文本或者其它行内元素
使用行内元素需要注意的是：
行内元素设置宽度width无效
行内元素设置height无效，但是可以通过line-height来设置
设置margin只有左右有效，上下无效
设置padding只有左右有效，上下无效
可以通过display属性对行内
元素和块级元素进行切换(主要看第 2、3、4三个值)：
label的作用是什么？是怎么用的？
最常用label的地方就是表单中的性别单选框了，当点击文字时也能够自动聚焦绑定的表单控件。
<form>
<label for="male">男</label>
<input type="radio"name="sex"id="male">
<label for="female">女</label>
<input type="radio"name="sex"id="female">
</form>对于Web标准以及W3C的理解
Web标准简单来说可以分为结构、表现、行为。其中结构是由HTML各种标签组成，简单来说就是body里面写入标签是为了页面的结构。
W3C，全称：world wide web consortium是一个制定各种标准的非盈利性组织，也叫万维网联盟，标准包括HTML、CSS、ECMAScript等等，web标准的制定有很多好处，比如说：
可以统一开发流程，统一使用标准化开发工具（VSCode、WebStorm、Sublime），方便多人协作
学习成本降低，只需要学习标准就行，否则就要学习各个浏览器厂商标准
跨平台，方便迁移都不同设备
降低代码维护成本
HTML5新增了哪些新特性？移除了哪些元素？
HTML5主要是关于图像、位置、存储、多任务等功能的增加：
语义化标签，如：article、footer、header、nav等
视频video、音频audio
画布canvas
表单控件，calemdar、date、time、email
地理
本地离线存储，localStorage长期存储数据，浏览器关闭后数据不丢失，sessionStorage的数据在浏览器关闭后自动删除
拖拽释放
新的技术webworker,websockt、Geolocation；
移除的元素：
纯表现的元素：basefont、font、s、strike、tt、u、big、center
对可选用性产生负面影响的元素：frame、frameset、noframes
怎么处理HTML5新标签兼容问题？
主要有两种方式：
实现标签被识别：通过document.createElement(tagName)方法可以让浏览器识别新的标签，浏览器支持新标签后。还可以为新标签添加CSS样式
用JavaScript解决：使用HTML5的shim框架，在head标签中调用以下代码：
<!--[if lt IE9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->a元素除了用于导航外，还有什么作用？
href属性中的url可以是浏览器支持的任何协议，所以a标签可以用来手机拨号<a href="tel:110">110</a>，也可以用来发送短信<a href="sms:110">110</a>，还有邮件等等
当然，a元素最常见的就是用来做锚点和 下载文件。
锚点可以在点击时快速定位到一个页面的某个位置，而下载的原理在于a标签所对应的资源浏览器无法解析，于是浏览器会选择将其下载下来。
你知道SEO中的TDK吗？
在SEO中，TDK其实就是title、description、keywords这三个标签，title表示标题标签，description是描述标签，keywords是关键词标签
扫一扫
3248
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
