1.iframe标签有哪些缺点;
1)Iframes 阻塞页面加载
window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发。在 Safari 和 Chrome 里,通过 JavaScript 动态设置 iframe 的 SRC 可以避免这种阻塞情况。
2)唯一的连接池
有人可能希望 iframe 会有自己独立的连接池,但不是这样的。绝大部分浏览器,主页面和其中的 iframe 是共享这些连接的。这意味着 iframe 在加载资源时可能用光了所有的可用连接,从而阻塞了主页面资源的加载。如果 iframe 中的内容比主页面的内容更重要,这当然是很好的。但通常情况下,iframe 里的内容是没有主页面的内容重要的。这时 iframe 中用光了可用的连接就是不值得的了。一种解决办法是,在主页面上重要的元素加载完毕后,再动态设置 iframe 的 SRC。
3)搜做引擎的检索程序无法解读这种页面,不利于SEO
iframe好在能够把原先的网页全部原封不动显示下来,但是如果用在首页,是搜索引擎最讨厌的.那么你的网站即使做的在好,也排不到好的名次!
4)样式/脚本需要额外链入,会增加请求。
2.Doctype作用?严格模式与混杂模式如何区分?它们有何意义?
1)<!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
2)严格模式、混杂模式、怪异模式的区分
1、严格模式:严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。
2、混杂模式:混杂模式的页面以宽松的向后兼容的方式显示;模拟老的浏览器的行为以防止站点无法工作。
3、怪异模式:怪异模式则是使用浏览器自己的方式来解析执行代码。
3)Dcotype不存在或者不正确会导致文档以混杂模式呈现。
3.简述一下src和href的区别;
(1)请求资源类型不同:
href是超文本引用Hypertext Reference的简写,用来为当前元素和文档之间建立连接,常用的是link、a标签。src会将指向的资源下载并引用到当前文档中,常用的标签有script,img,iframe标签。
href是为当前文档和引用资源建立联系;
而src是替换当前的元素。
herf引用的资源,浏览器会将其识别为CSS文档,并行下载资源并且不会停止对当前文档的处理。
当浏览器解析到src时,会暂停其他资源的下载和处理,直接将该资源下载,编译,执行完毕,图片和框架也是如此,类似于将所指资源应用到当前内容。这也是为什么建议使用link方式来加载css,而不是使用@import方式
4.HTML全局属性有哪些;
所谓全局属性是指任何元素都可以使用的属性。
以下是常用的全局属性:
- id、class:分别是为元素设置唯一id和类名。
- style:行内css样式
- title:元素相关的建议信息
- lang:元素内容的语言
- data-*:为元素增加自定义属性
- draggable:设置元素是否可拖拽
- hidden:规定元素为隐藏,为布尔值
- contenteditable:规定元素内容是否可编辑的,"true"表示可编辑,"false"表示不能编辑
- tabindex:规定tab键控制次序(tab键用于导航时),当按tab键时,元素聚焦的次序。tabindex="number","number"代表聚焦的次序。
...
5.viewport详解;
1)移动端与桌面端最明显的区别就在于屏幕的大小。在比桌面端屏幕小不少的手机移动端上做web开发,网页的布局将会是一个全新的课题。因此首先我们需要了解的就是一个与屏幕大小息息相关的属性–Viewport。
2)Viewport翻译成中文可以叫“视窗”或者是“视口”,它表示的是用户网页的可视范围(指页面能够被浏览的范围)
3)viewport的属性值:
<meta name="viewport"
content="width=device-width,
...
initial-scale=1.0"
>
- width:控制viewport的宽度,这个值可以被指定,例如:500px。亦或者是“device-width”,意思是设置视口宽度为设备宽度。
- height:控制viewport的高度,一般设置了宽度会自动解析高度,可以不用设置。
- initial-scale:初始缩放比例,即每一次加载时页面缩放的比例,可以带小数。
- maximum-scale:允许用户缩放到的最大缩放比例,可以带小数。
- minimum-scale:允许用户缩放到的最小缩放比例,可以带小数。
- user-scaleable:是否允许用户缩放,可以传“yes”或“no”。
6.怎样处理移动端1px被渲染成2px的问题;
1、局部处理
meta标签中的 viewport属性 ,initial-scale 设置为 1
rem 按照设计稿标准走,外加利用transform 的scale(0.5) 缩小一倍即可;
2、全局处理
meta标签中的 viewport属性 ,initial-scale 设置为 0.5
rem 按照设计稿标准走即可。
7.渐进增强与优雅降级之间的不同;
1、渐进增强 :针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
2、优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
3、区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。
8.页面导入样式时,使用link和@import有什么区别?
1.link是HTML标签,写在<head>中,@import是css提供的,写在css文件中。
2.link引入的样式页面加载时同时加载,@import引入的样式需等页面加载完成后再加载。
3.link没有兼容性问题,@import不兼容ie5以下。
4.link可以通过js操作DOM动态引入样式表改变样式,而@import不可以。
注:
在html页面中,link标签引用css文件,script标签引用js文件,对于新的HTML5规范,由于现代浏览器默认的script标签里是js代码,script的type属性默认是 text/javascript,因此如果一个script标签里是js代码或引用的是js文件,那么标签里不需要写type=text/javascript,但是如果不是js那就需要添加type。type这个东西是表示标签中脚本的类型的。
9.Label的作用是什么?是怎么用的?
label标签来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到标签相关的表单控件上。
input设置id属性,label设置for属性,for属性的属性值=id属性值。
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
</form>
10.网页代码的SEO优化;
1) meta标签优化:例如:title,description,keywords等的优化;title:只要强调重点即可,重要关键词出现不要超过2次,而且要靠前,每个页面的title要有所不同。description:把网页内容高度概括到这里,长度要合理,不可过分堆砌关键词,每个页面的description要有所不同。keywords:列举几个重要的关键词即可,不可过分堆砌。
2)语义化的HTML代码:符合W3C规范,让搜索引擎更容易理解网页。
3)不建议使用frame和iframe框架结构,通过iframe显示的内容可能会被百度丢弃。
4)重要的内容不要用js输出: 爬虫不会读取js里的内容,所以重要的内容必须放在html里。
5)重要内容的HTML代码一定要放前面:搜索引擎抓取HTML顺序是从上到下。
6)非装饰性图片都要加alt。
...