1.html,http,web综合问题
1.前端要注意哪些seo
- 合理的title,description,keywords:方便爬虫引擎爬取网站，title强调重点，title要靠前，关键词不太多;description尽量精简，高度概括内容即可;keywords:列举出重要的关键词即可
- 语义化的HTML代码，符合W3C规范，让搜索引擎容易理解网页
- 重要的HTML代码尽量靠前，抓取的顺序是从上到下的
- 重要的内容不要用js输出：爬虫不会执行js代码获取内容
- 少用iframe：
- 非装饰图片加上alt属性
- 提高网站的速度
2.img的title和alt区别，em,strong异同
- title:是鼠标滑动到元素上显示的 设置该属性的元素提供建议性信息
- alt:是图片加载失败显示，相当于图片内容的等价描述，这个属性可以提高图片的可访问性
- em：斜体强调 更强烈的强调 表示内容的强调点
- strong：粗体强调，表示内容的重要性
3.http的几种请求方法用途
- get 发送get请求 一般用于一般请求，会在浏览器地址栏上体现
- post 发送post请求 一般用于表单提交之类的
- put 与post类似，put指定了资源在服务器上的位置
- HEAD 请求页面的首部
- delete 删除服务器上某一资源
- options 可以发送get或post请求
- trace 激发一个远程的，应用层的请求消息回路
- connect 把请求连接转换到透明的Tcp/ip通道
4.从浏览器地址栏输入url到显示页面的步骤
- 浏览器根据请求的url交给DNS域名解析，找到真实的IP,向服务器发送请求
- 服务器接收到请求，交给后台处理完成后返回数据，浏览器接收文件(html,css,js,图片et)
- 浏览器对加载到资源(html,css,js,et)进行语法解析，建立相应的内部结构(html的dom)
- 浏览器载入解析到资源文，渲染页面
5.网站性能优化
-
content方面
- 减少http请求：合并文件，css精灵图， inline Image
- 减少DNS查询：将资源分配到恰当数量的主机名
- 减少DOM元素的数量 --- 现在基本不要dom
-
server方面
- 使用CDN
- 配置 ETag
- 对组件使用 Gzip压缩
cookie方面 减少cookie的大小
-
css方面
- 将样式表放到页面顶部
- 不是使用css表达式
- 使用link,不使用@import
-
javascript方面
- 将脚本放到页面底部，body的结束标签之前
- js 和 css 外部引入 并 压缩
- 删除不需要的脚本
- 减少DOM 访问 --- 基本不用到DOM
-
图片方面
- 优化图片 根据实际颜色需要选择色深，压缩
- 优化css精灵
- 不要在html中拉伸图片
6.http状态码及其含义
- 1xx 信息码
- 100 继续
- 2xx 成功
- 200 ok
- 201 请求成功并且服务器创建了新的资源
- 202 服务器接收请求但还未处理
- 3xx 重定向
- 301 请求网页永久移到新的位置
- 302 临时重定向
- 304 上次请求过后，网页没修改过
- 4xx 客户端错误
- 400 服务器无法理解请求格式
- 401 请求未授权
- 403 禁止访问
- 404 找不到与url匹配的资源
- 5xx 服务器错误
- 500 常见的服务器错误
- 503 服务器暂时无法处理 过载或维护
7.语义化理解
- 正确的标签做正确的事情
- 在没有css样式情况下，网页也是易于阅读的
- 搜索引擎或爬虫依赖标记来确定上下文和关键字的权重 利于SEO
- 方便后面阅读代码的人更容易将网站分块，便于阅读维护理解
8.浏览器的内核
- 分成浏览部分 渲染引擎 和 js引擎
- 掌握常见浏览器的内核
- IE --- trident
- chrome --- blink Opera也是这个内核
- firefox --- gecko
- safari --- webkit
9.html5有哪些新特性，移除了哪些元素
- html5现在不在SGML的子集了，主要是关于图像，位置，存储，多任务等的功能的增加
- 绘画 canvas
- 多媒体元素 video audio
- 离线存储 localStorage 浏览器关闭数据不会丢失
- sessionStorage 浏览器关闭数据丢失
- 语义化更好的元素 article ,footer,header,nav,section
- 表单控件 calender,date,time,email,url,search
- 新技术 webworket websocket Geolocation
- 移除元素
- 纯表现元素: basefont big center foot s strike tt,u
- 可能产生负面影响的元素： frame frameset noframes
- 支持html5的新标签
- IE6-8 通过document.createElement产生标签
- 使用成熟的框架 html5shim
10.iframe的缺点
- 会阻塞页面的onload事件
- 搜索引擎无法解读这种页面
- 与主页面共享连接池，但浏览器对相同域的连接有限制，会影响页面的并行加载
- 如果非要使用iframe。可以通过js动态给iframe添加src属性
11.web标准 w3c标准
- 标签： 闭合 小写 不乱嵌套
- css js外链
- 结构行为表现分离
12.xhtml html区别
- 功能上：
- xhtml可以兼容各大浏览器，手机 PDA,浏览器也能快速的正确的编译网页
- 书写习惯的差别
- xhtml必须被正确嵌套，闭合，区分大小写，文档必须有根元素
13.doctype作用 严格与混杂区分，作用
- doctype 位于整个页面最前面，告诉浏览器，用什么文档类型，规范来解析这个文档
- 严格模式 以浏览器的支持的最高标准来运行
- 混杂：浏览器以宽松的方式向后兼容，doctype不存在或者不正确就会导致文档使用混杂模式加载
14.行内元素，块级元素 区别 空元素
- 行内元素：
- 不可以设置宽高，不独占一行
- a,b,span,img,input,select,strong
- 块级元素：
- 可以独占一行，且可设置宽高
- div,p,h1-h6,ul,li,ol,dl,dt,dd
- 空元素： br,hr,img,input,link,meta
15.html的全局属性有哪些
- class 为元素设置类标识
- data-*: 给元素增加自定义属性
- draggable： 设置元素是否可拖拽
- id ：文档内的唯一标识
- lang: 元素的内容的语言
- stlye: 行内css样式
- title: 元素相关信息
16.html5为什么只需要给<!DOCTYPE HTML>
- html5不是基于SGML,因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为
- 而html4.01基于SGML,所有需要对DTD进行引用，才能告知浏览器文档所使用的文档类型
17.网页验证码是干嘛的 为了解决什么安全问题
- 区分用户是计算机还是人发公共安全自动程序，可以防止恶意破解密码，刷票，论坛灌水
- 有效防止黑客对某一个特定注册用户用特定程序暴力破解的方式进行不断的登录尝试
18.页面渲染优化
禁止使用iframe 阻塞父文档onload事件
禁止使用gif图片实现loading效果，降低cpu消耗，提升渲染性能
使用css3代码代替js动画，尽可能避免重绘重排及回流
-
对于一些小图标使用base64编码，减少网络请求，但不建议大图使用，比较消耗cpu
- 小图的优势在于
- 减少HTTP请求
- 避免文件跨域
- 修改及时生效
- 小图的优势在于
页面头部的style,script会阻塞页面(Renderer进程中js线程和渲染线程是互斥的)
页面中空的src和href会阻塞页面其他资源的加载 阻塞下载进程
网页gzip,cdn托管，data缓存，图片服务器
前端模板js+数据，减少html标签导致的浪费带宽，前端变量保存用AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
innerHTML代替DOM，减少DOM，优化js性能
需要设置多个样式用className,而不是直接操作style
少用全局变量，缓存dom节点查找结果，减少io读取操作
图片预加载，样式表在顶部，脚本在底部，加时间戳
尽量向前端优化，减少数据库操作，减少磁盘io
19.div + css布局比table布局的优点
- 改版的时候更方便，只要修改css文件
- 页面加载速度更快，结构化清晰，页面显示简洁
- 表现与结构分离
- 易于优化seo搜索引擎更友好，排名更容易靠前
20.渐进增强 优雅降级
- 渐进增强： 针对低版本浏览器进行构建页面，保证最基本的性能，然后再针对高级浏览器进行效果，交互等改进和追加功能以达到更好的用户体验
- 优雅降级：一开始构建完整的功能然后再针对低版本浏览器进行兼容
21.src 与 href的区别
- src: 用于替换当前元素，href用于当前文档和引用资源之间建立确认关系
- src source 指向外部资源的位置，指向的内容将会被嵌入到文档中，在请求src资源时会将指向的资源下载并应用到文档中
- href hypertext reference 指向网络资源所在位置，建立和当前元素或当前稳点之间的连接。
22.图片格式
- png-8,png-24,jpeg,gif,svg
- webp:谷歌开发的一种加快乳片加载速度的图片格式，只要有jpeg的2/3.节省了服务器的带宽和数据空间
- Apng:png的位图动画扩展，可以实现png图片的动态图片效果，支持的浏览器不多，ios safari8 支持
23.大型电商网站怎么优化图片加载
- 图片懒加载， 页面可视区域的图片才加载，未可视的区域不加载，未可视的区域添加一个滚动事件，判断图片位置与浏览器顶端的距离，如果前者小于后者加载图片
- 如果是幻灯片，相册等,使用图片预加载技术，将当前展示的图片的前一张和后一张优先加载
- 如果图片过大可以使用特殊编码的图片
- 如果图片展示的区域小于真实图片的大小，在服务器端根据业务需要进行图片压缩，图片压缩后大小与展示的一致
24 html5的优缺点
-
优点：
- 网络标准统一，html5本身是w3c推出来的
- 多设备，跨平台
- 即使更新
- 提高可用性和改进用户的友好体验
- 有几个新的标签，这将有助于开发人员定义重要的内容
- 可以给站点带来更多的多媒体元素
- 可以很好的代替flash和silverlight
- 涉及到网站的抓取的索引的时候，对seo友好
- 大量应用于移动端和游戏
-
缺点：
- 安全： websocket和透明代理的是吸纳存在严重的安全问题。web storage,websocket容易被利用，来盗取用户的信息和资料
- 完善性： 许多特性各浏览器的支持程度不一样
- 技术门槛： webworker,websocket,webstorage新特性，后台甚至浏览器原理的知识，带来了挑战
- 性能：某些平台上的引擎问题导致html5性能低下
- 浏览器兼容性：ie9以下浏览几乎全军覆没
25 对hmtl5的认识
- HTML5指的是包括 HTML 、 CSS 和 JavaScript 在内的一套技术组合。它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务
- 为什么：
- HTML4陈旧不能满足日益发展的互联网需要，特别是移动互联网。为了增强浏览器功能 Flash 被广泛使用，但安全与稳定堪忧，不适合在移动端使用（耗电、触摸、不开放）。
- HTML5增强了浏览器的原生功能，符合 HTML5 规范的浏览器功能将更加强大，减少了 Web 应用对插件的依赖，让用户体验更好，让开发更加方便
26 link与@import的区别
两者都是外部引用CSS的方式，但是存在一定的区别：
- 区别1： link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务； @import 属于 CSS 范畴，只能加载 CSS 。
- 区别2： link 引用 CSS 时，在页面载入时同时加载； @import 需要页面网页完全载入以后加载。
- 区别3： link 是 XHTML 标签，无兼容问题； @import 是在 CSS2.1 提出的，低版本的浏览器不支持。
- 区别4： link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持。
27 a标签的target属性的取值和作用
target这个属性指定所链接的页面在浏览器窗口中的打开方式。
- a、 _blank ：在新浏览器窗口中打开链接文件
- b、 _parent ：将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就象 _self 参数一。
- c、 _self ：在同一框架或窗口中打开所链接的文档。此参数为默认值，通常不用指定。但是我不太理解。
- d、 _top ：在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有框架。
28 data-属性的作用
-
data-为H5新增的为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过getAttribute方法获取; - 需要注意的是：
data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。 所有主流浏览器都支持 data-* 属性。即：当没有合适的属性和元素时，自定义的 data 属性是能够存储页面或 App 的私有的自定义数据。
29 label标签的作用
label标签来定义表单控制间的关系 , 当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
注意:label的for属性值要与后面对应的input标签id属性值相同
30 表单的基本组成，用途
- 组成：表单标签、表单域、表单按钮
- a、表单标签：这里面包含了处理表单数据所用 CGI 程序的 URL, 以及数据提交到服务器的方法。
- b、表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等。
- c、表单按钮：包括提交按钮，复位按钮和一般按钮；用于将数据传送到服务器上的 CGI 脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
- 主要用途：表单在网页中主要负责数据采集的功能，和向服务器传送数据。
31 新的html5文档的类型和字符集是什么
- HTML5 文档类型很简单：<!doctype html>
- HTML5 使用 UTF-8 编码示例：<meta charset=” UTF-8 ″ >
