目录
什么是 DOCTYPE, 有何作用?标准模式与兼容模式各有什么区别?
title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别?
Quirks(怪癖)模式是什么?它和Standards(标准)有什么区别?
知道什么是微格式吗?谈谈理解,在前端构建只能应该考虑微格式吗?
页面导入样式时,使用 link 和 @import 有什么区别?
-
什么是 DOCTYPE, 有何作用?标准模式与兼容模式各有什么区别?
Doctype 是 HTML5 的文档声明,通过它可以告诉浏览器,使用哪一个HTML版本解析文档。在浏览器发展的过程中,HTML出现过很多版本,在不同的版本之间格式书写上略有差异。如果没有事先告诉浏览器,那么浏览器就不知道文档解析标准是什么?此时,大部分浏览器将开启最大兼容模式来解析网页,我们一般称为怪异模式,这不仅会降低解析效率,而且会在解析过程中产生一些难以预知的 bug ,所以文档声明是必须的。
标准模式 的排版和JS运作模式都是以浏览器支持的最高标准运行。
兼容模式 页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
-
说说对html 语义化的理解
HTML 标签的语义化,简单来说,就是用正确的标签做正确的事情,给模块内容用上一个最恰当最合适的标签,使页面有良好的结构,页面元素有含义,无论是谁都能看懂这块内容是什么。
语义化的优点如下:
在没有CSS样式情况下页面够让页面呈现出清晰的结构
有利于SEO 和搜索引擎建立良好的沟通,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重
方便团队开发和维护,语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化
-
src 和 href 的区别
src 和 href 都是HTML 中特定元素的属性,都可以用来引入外部的资源。
区别如下:
src:全称 source,它通常用于img、video、audio、script元素,通过src指向请求外部资源的来源地址,指向的内容会嵌入到文档中但钱标签所在位置,在请求src资源时,它会将资源下载并应用到文档内,比如说:js脚本、img图片、frame等元素。当浏览器解析到该元素时,会暂停其他资源下载,直到将该资源加载、编译、执行完毕。这也是为什么将js脚本放在底部而不是头部的原因
href:全称hyper reference,意味着超链接,指向网络资源,但浏览器识别到它指向的文件时,就会并行下载资源,不会停止对当前文档的处理,通常用于a、link元素
-
title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别?
title 属性表示网页的标题,h1元素则表示层次明确的页面内容标题,对页面信息的抓取也有很大的影响
strong 是表明重点内容,有语气加强的含义,使用阅读设备阅读网络时:strong为重读,而 b 是展示强调内容
i 是 italic(斜体)的简写,是早期的斜体元素,表示内容展示为斜体,而em是emphasize(强调)的简写,表示强调的文本
-
什么是严格模式、混杂模式?
严格模式:是以浏览器支持的最高标准运行
混杂模式:页面以宽松向下兼容的方式显示,模拟老式浏览器的行为
-
前端页面有那三层构成,分别是什么?
构成:结构层、表示层、行为层
1、结构层(structural layer)
结构层类似于盖房子需要打地基以及房子的悬梁框架,它是由HTML超文本标记语言来创建的,也就是页面中的各种标签,在结构层中保存了用户可以看到的所有内容,比如说:一段文字、一张图片、一段视频等等
2、表示层(presentation layer)
表示层是由CSS负责创建,它的作用是如何显示有关内容,学名:层叠样式表
3、行为层(behaviorlayer)
行为层表示网页内容跟用户之间产生交互性,简单来说就是用户操作了网页,网页给用户一个反馈,这是JavaScript 和 DOM 主宰的领域
-
iframe 的作用以及优缺点
iframe也称作嵌入式框架,嵌入式框架 和 框架网页类似,它可以把一个网页的框架和内容嵌入到现由的网页中
优点:
可以用来处理加载缓慢的内容,比如:广告
缺点:
iframe 会阻塞主页面的Onload事件
iframe 和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。但是可以通过JS动态给iframe添加src属性值来解决这个问题,当然也可以解决iframe会阻塞主页面的Onload事件的问题
会产生很多页面,不易管理
浏览器的后退按钮没有作用
无法被一些搜索引擎识别
-
img 上 title 与 alt 区别
alt:全称 alternate,切换的意思,如果无法显示图像,浏览器将显示alt指定的内容
title:当鼠标移动到元素上时显示title的内容
区别:
一般当鼠标滑动到元素身上的时候显示 title,而 alt 是 img 标签特有的属性,是图片内容的等价描述,用于图片无法加载时显示,这样用户还能看到关于丢失了什么东西的一些信息,相对来说比较友好
-
h5 和 HTML5 区别
H5 是一个产品名词,包含了最新的HTML5、CSS3、ES6等新技术来制作的应用
HTML5 是一个技术名词,指的就是第五代HTML
-
行内元素 和 块级元素 分别有哪些?有何区别?怎么转换?
常见的块级元素:p、div、form、ul、li、ol、table、h1、h2、h3、dl、dt、dd
常见的行内元素:span、a、img、button、input、select
块级元素:
总是在新行上开始,就是每个块级元素独占一行,默认从上到下排列
宽度缺少时是它的容器的100%,除非设置一个宽度
高度、行高以及外边距和内边距都是可以设置的
块级元素可以容纳其他行内元素和块级元素
行内元素:
和其它元素都会在一行显示
高、行高以及外边距和内边距可以设置
宽度就是文字或者图片的宽度,不能改变
行内元素只能容纳文本或者其它行内元素
使用行内元素需要注意的是:
行内元素设置宽度 width 无效
行内元素设置 height 无效,但是可以通过 line-height 来设置
设置 margin 只有左右有效,上下无效
设置 padding 只有左右有效,上下无效
可以通过 display 属性对行内元素 和 块级元素进行切换:
值 描述 none 此元素不会被显示 block 此元素将显示为块级元素,此元素前后对带有换行符 inline 默认。此元素会被显示为内联元素,元素前后没有换行符 inline-block 行内块元素 list-item 此元素会作为列表显示 run-in 此元素会根据上下文作为块级元素或内联元素显示 table 此元素会作为块级表格来显示(类似<table>),表格前后带有换行符 inline-table 此元素会作为内联表格来显示(类似<table>),表格前后没有换行符 inherit 规定应该从父元素继承 display 属性的值 -
label 的作用是什么?是怎么用的?
label 元素不会向用户呈现任何特殊效果,但是,它为鼠标用户该井了可用性,但完美在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里面写入标签是为了页面的结构;表现指的是CSS层叠样式表,通过CSS可以让我们的页面结构标签更具美感;行为指的是页面和用户具有一定的交互,这部分主要由JS组成
W3C 全称 world wide web consortium 是一个指定各种标准的非营利性组织,也叫万维网联盟,标准包括HTML、CSS、ECMAScript 等等,web标准的定制由很多好处,比如:
可以统一开发交流,统一使用标准化开发工具(VSCode、WebStorm、Sublime),方便多人协作
学习成本降低,只需要学习标准就行,否则就要学习各个浏览器厂商标准
跨平台,方便迁移不同设备
降低代码维护成本
-
Quirks(怪癖)模式是什么?它和Standards(标准)有什么区别?
页面如果写了DTD,就意味着这个页面采用对CSS支持更好的布局,而如果没有,则采用兼容之前的布局方式,这就时Quirks模式,有时候也叫怪癖模式、诡异模式、怪异模式
区别:总体会有布局、样式解析、脚本执行三个方面区别,举例:
盒模型:在W3C标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,然而在QUirks模式下,ID的宽度和高度还包含了padding和border
设置行内元素的高度:在Standards模式下,给行内元素设置width和height都不会生效,而在Quirks模式下会生效;
用margin:0 auto 设置水平居中:在Standards 模式下,可以使元素水平居中,但是Quriks模式下失效
设置百分比高度:在Standards模式下,元素的高度使由包含的内容决定的,如果父元素没有设置百分比高度,子元素设置百分比高度是无效的
-
知道什么是微格式吗?谈谈理解,在前端构建只能应该考虑微格式吗?
微格式 是建立在自己已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式
具体表现是把语义嵌入到HTML中,以便有助于分离式开发,并通过制定一些简单的约定,来兼容HTML文档的人机可读性,相当于对Web网页进行语义注解
采用微格式的Web页面,在HTML文档中给一些标签增加一些属性,这些属性对信息的语义结构进行注解,有助于处理HTML文档的软件,更好的理解HTML文档。当爬取web内容时,能够更为准确地识别内容块地语义,微格式可以对网站进行SEO优化
-
HTML5 为什么只需要写<!DOCTYPE html>?
为什么HTML5 只需要写一段:
<!DOCTYPE html>
而HTML4却需要写很长的一段
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
其实主要时应为HTML5 不基于SGML,所以不需要映入DTD。在HTML4中,<!DOCTYPE>声明应用DTD,应为HTML4基于SGML。DTD规定了标记语言的规则,这样浏览器才能正确的呈现内容
-
HTML5 新增勒哪些新特性?移除了哪些元素?
HTML5 主要时关于图像、位置、存储、多任务等功能的增加:
语义化标签,如:article、footer、header、nav等
视频标签video、音频audio
画布canvas
表单控件,calemadar、date、time、email
地理
本地离线存储,localStorage长期存储数据,浏览器关闭后数据不丢失,sessionStorage的数据在浏览器关闭后自动删除
拖拽释放
移除的元素:
纯表现的元素:basefont、font、s、strike、tt
对可选性产生负面影响的元素:frame、frameset、
-
怎么处理HTML5新标签兼容问题?
主要有两种方式:
1、实现标签被识别:通过 document.createElement(tagName) 方法可以让浏览器识别新的标签,浏览器支持新标签后,还可以为新标签添加CSS样式
2、用jJavaScript 解决:使用HTML5 的shim 框架,在head标签中调用一下代码:
<!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]-->
-
如何实现在一张图片上的某个区域做到点击事件?
我们可以通过图片热区技术:
1、插入一张图片,并设置好图片的有关参数,在<img>标记中设置参数usemap="#map",以表示对图像地图的应用
2、用<map>标记设定图像地图的作用域,并取名:Map
3、分别用 <area> 标记针对响应位置分出多个举行作用域,并设定好链接参数href
body> <img src="./image.jpg" alt="" usemap="#Map" /> <map name="Map" id="Map"> <area alt="" title="" href="#" shape="poly" coords="65,71,98,58,114,90,108,112,79,130,56,116,38,100,41,76,52,53,83,34,110,33,139,46,141,75,145,101,127,115,113,133,85,132,82,131,159,117" /> <area alt="" title="" href="#" shape="poly" coords="28,22,57,20,36,39,27,61" /> </map> </body>
-
a元素处理用于导航外,还有什么作用?
href 属性中的url可以时浏览器支持的任何协议,所以a标签可以用来手机拨号<a href="tel:110">110</a>,也可以用来发短信<a href ="sms:110">110</a>
当然,a元素最常见的就是用来做 锚点和 下载文件
锚点可以在点击时快速定位到以恶个页面的某个位置,而下载的原理在于a标签所对应的资源浏览器无法解析,于是浏览器会选择将其下载下来
-
你知道SEO中的TDK吗?
在SEO中,TDK其实就是title、descrioption、keywords这三个标签,
title 表示标题标签
description 是描述标签
keywords 是关键词标签
-
描述一下 cookies,sessionStorage 和 localStorage的区别?
共同点:都是 保存在浏览器端,且同源的。
不同点:
cookie 是网站为了标示用户身份而存储在用户本地终端(Client Side)上的数据(通常经过加密)
cookie数据始终在同源的http亲求中携带(即使不需要),即会在浏览器和服务器间来回传递
sessionStorage 和 localStorage 不会自动把数据发给服务器,仅在本地保存
存储大小:
cookie 数据大小不能超过4k
sessionStorage 和 localStorage 虽然也有存储大小限制,但是比cookie大得多,可以达到 5M 或者更大
有效时间:
localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据
sessionStorage 数据在当前浏览器窗口关闭后自动删除
cookie 设置的 cookie 过期时间之前一直有效,即使窗口或浏览器关闭
-
页面导入样式时,使用 link 和 @import 有什么区别?
1、link 属于XHTML 标签,处理加载CSS外,还能用于定义RSS,定义rel连接属性等作用;而 @import 是CSS 提供的,只能用于加载CSS;
2、页面被加载时,link 会同时被加载,而 @import 引起的CSS 会等到页面被加载完再加载,容易造成FOUC(文档演示短暂失效)
3、@import 时CSS2.1 提出的,旨在IE5以上才能被识别,而link 时XHTML标签,无兼容问题
4、link 支持使用 js 控制DOM去改变样式,而@import 不支持;