HTML
关注
分享
扫一扫
HTML专栏
LuckXinXin
加油
展开
-
git fetch和git pull的区别
git pull：相当于是从远程获取最新版本并merge到本地git fetch：相当于是从远程获取最新版本到本地，不会自动merge原创 2021-01-24 12:10:25 · 80 阅读 · 0 评论 -
请你谈谈Cookie的弊端
cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的每个特定的域名下最多生成20个cookieIE6或更低版本最多20个cookieIE7和之后的版本最后可以有50个cookieFirefox最多50个cookiechrome和Safari没有做硬性限制IE 和 Opera 会清理近期最少使用的 cookie，Firefox 会随机清理 cookiecookie 的最大大约为 4096 字节，为了兼容性，一般设置不超过 4095 字节如果 coo.原创 2021-01-24 12:08:32 · 111 阅读 · 0 评论 -
title与h1的区别、b与strong的区别、i与em的区别
title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：<strong>会重读，而<B>是展示强调内容i内容展示为斜体，em表示强调的文本...原创 2021-01-23 11:00:29 · 293 阅读 · 0 评论 -
HTTP response报文结构是怎样的
首行是状态行包括：HTTP版本，状态码，状态描述，后面跟一个CRLF首行之后是若干行响应头，包括：通用头部，响应头部，实体头部响应头部和响应实体之间用一个CRLF空行分隔最后是一个可能的消息实体 响应报文例子如下：HTTP/1.1 200 OKDate: Tue, 08 Jul 2014 05:28:43 GMTServer: Apache/2Last-Modified: Wed, 01 Sep 2004 13:24:52 GMTETag: "40d7-3e3073913b100"Ac.原创 2021-01-23 11:00:10 · 213 阅读 · 0 评论 -
HTTP request报文结构是怎样的
首行是Request-Line包括：请求方法，请求URI，协议版本，CRLF首行之后是若干行请求头，包括general-header，request-header或者entity-header，每个一行以CRLF结束请求头和消息实体之间有一个CRLF分隔根据实际请求需要可能包含一个消息实体 一个请求报文例子如下：GET /Protocols/rfc2616/rfc2616-sec5.html HTTP/1.1Host: www.w3.orgConnection: keep-aliveCac.原创 2021-01-23 10:59:56 · 192 阅读 · 0 评论 -
web开发中会话跟踪的方法有哪些
cookiesessionurl重写隐藏inputip地址原创 2021-01-22 17:57:51 · 98 阅读 · 0 评论 -
一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
图片懒加载，在页面上的未可视区域可以添加一个滚动事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压.转载 2021-01-22 17:57:34 · 351 阅读 · 0 评论 -
在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？
dns缓存，cdn缓存，浏览器缓存，服务器缓存原创 2021-01-22 17:55:11 · 144 阅读 · 1 评论 -
知道的网页制作会用到的图片格式有哪些？
png-8、png-24、jpeg、gif、svg但是上面的那些都不是面试官想要的最后答案。面试官希望听到是Webp,Apng。（是否有关注新技术，新鲜事物）Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%。Apng：全称是“Animate.原创 2021-01-21 20:04:01 · 779 阅读 · 0 评论 -
简述一下src与href的区别
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素<script src ="js.js"></script> 当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将.原创 2021-01-21 20:03:47 · 213 阅读 · 0 评论 -
为什么利用多个域名来存储网站资源会更有效？
CDN缓存更方便突破浏览器并发限制节约cookie带宽节约主域名的连接数，优化页面响应速度防止不必要的安全问题原创 2021-01-21 20:03:36 · 271 阅读 · 0 评论 -
你能描述一下渐进增强和优雅降级之间的不同吗
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带...原创 2021-01-20 19:20:29 · 97 阅读 · 0 评论 -
a：img的alt与title有何异同？b：strong与em的异同？
alt(alt text):为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip显示)title(tool tip):该属性为设置该属性的元素提供建议性的信息strong:粗体强调标签，强调，表示内容的重要性em:斜体强调标签，更强烈强调，表示内容的强调点...原创 2021-01-20 19:20:14 · 133 阅读 · 0 评论 -
div+css的布局较table布局有什么优点？
改版的时候更方便 只要改css文件。页面加载速度更快、结构化清晰、页面显示简洁。表现与结构相分离。易于优化（seo）搜索引擎更友好，排名更容易靠前。原创 2021-01-20 19:20:03 · 149 阅读 · 1 评论 -
你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
IE: trident内核Firefox：gecko内核Safari:webkit内核Opera:以前是presto内核，Opera现已改用Google - Chrome的Blink内核Chrome:Blink(基于webkit，Google与Opera Software共同开发)原创 2021-01-19 22:07:40 · 140 阅读 · 0 评论 -
meta viewport相关
<!DOCTYPE html> <!--H5标准声明，使用 HTML5 doctype，不区分大小写--><head lang=”en”> <!--标准的 lang 属性写法--><meta charset=’utf-8′> <!--声明文档使用的字符编码--><meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> <!--优先使原创 2021-01-19 22:07:22 · 200 阅读 · 0 评论 -
渲染优化
禁止使用iframe（阻塞父文档onload事件）iframe会阻塞主页面的Onload事件搜索引擎的检索程序无法解读这种页面，不利于SEOiframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题禁止使用gif图片实现loading效果（降低CPU消耗，提升渲染性能）使用CSS3代码代替JS动画（尽可能避免原创 2021-01-19 22:07:05 · 105 阅读 · 0 评论 -
怎样处理 移动端 1px 被 渲染成 2px问题
局部处理meta标签中的 viewport属性 ，initial-scale 设置为 1rem按照设计稿标准走，外加利用transfrome 的scale(0.5) 缩小一倍即可；全局处理mate标签中的 viewport属性 ，initial-scale 设置为 0.5rem 按照设计稿标准走即可...原创 2021-01-18 21:20:37 · 710 阅读 · 0 评论 -
viewport
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> // width 设置viewport宽度，为一个正整数，或字符串‘device-width’ // device-width 设备宽度 // height 设置viewport高度，一般设置了宽度，会自动解析出.原创 2021-01-18 21:19:25 · 79 阅读 · 0 评论 -
网页验证码是干嘛的，是为了解决什么安全问题
区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试原创 2021-01-18 21:18:19 · 472 阅读 · 0 评论 -
如何在页面上实现一个圆形的可点击区域？
svgborder-radius纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等原创 2021-01-17 09:46:01 · 137 阅读 · 0 评论 -
HTML5 为什么只需要写 ＜!DOCTYPE HTML＞
HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型原创 2021-01-17 09:45:29 · 159 阅读 · 0 评论 -
Canvas和SVG有什么区别？
svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改。canvas输出的是一整幅画布svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会失真和锯齿。而canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿...原创 2021-01-17 09:45:18 · 110 阅读 · 0 评论 -
HTML全局属性(global attribute)有哪些
class:为元素设置类标识data-*: 为元素增加自定义属性draggable: 设置元素是否可拖拽id: 元素id，文档内唯一lang: 元素内容的的语言style: 行内css样式title: 元素相关的建议信息原创 2021-01-16 15:19:02 · 94 阅读 · 0 评论 -
行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？
行内元素有：a b span img input select strong块级元素有：div ul ol li dl dt dd h1 h2 h3 h4… p空元素：<br> <hr> <img> <input> <link> <meta>行内元素不可以设置宽高，不独占一行块级元素可以设置宽高，独占一行...原创 2021-01-16 15:17:54 · 102 阅读 · 0 评论 -
Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
页面被加载的时，link会同时被加载，而@imort页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载 import只在IE5以上才能识别，而link是XHTML标签，无兼容问题 link方式的样式的权重 高于@import的权重<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器， 用什么文档类型 规范来解析这个文档严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行在混杂模式中，.原创 2021-01-16 15:16:58 · 87 阅读 · 0 评论 -
xhtml和html有什么区别?
一个是功能上的差别主要是XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页另外是书写习惯的差别XHTML 元素必须被正确地嵌套，闭合，区分大小写，文档必须拥有根元素...原创 2021-01-15 22:34:46 · 113 阅读 · 0 评论 -
WEB标准以及W3C标准是什么?
标签闭合、标签小写、不乱嵌套、使用外链css和js、结构行为表现的分离原创 2021-01-15 22:33:23 · 256 阅读 · 0 评论 -
iframe有那些缺点？
iframe会阻塞主页面的Onload事件搜索引擎的检索程序无法解读这种页面，不利于SEOiframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题...原创 2021-01-15 22:32:46 · 100 阅读 · 0 评论 -
请描述一下 cookies，sessionStorage 和 localStorage 的区别？
cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存存储大小：cookie数据大小不能超过4ksessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大有期时间：localStorage 存储持久数.原创 2021-01-14 22:30:06 · 73 阅读 · 0 评论 -
浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢
在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。离线的情况下，浏览器就直接使用离线存储的资源。...原创 2021-01-14 22:29:35 · 210 阅读 · 0 评论 -
HTML5的离线储存怎么使用，工作原理能不能解释一下？
在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示如何使用：页面头部像下面一样加入一个manifest的属性；在cache.manifest文件的编写离线存储的资源在离线状态时，操作window.ap..原创 2021-01-14 22:29:09 · 368 阅读 · 0 评论 -
介绍一下你对浏览器内核的理解？
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核JS引擎则：解析和执行javascript来实现网页的动态效果最开始渲染引擎和JS引擎并没有区分的很明确，后来.原创 2021-01-13 21:09:41 · 114 阅读 · 0 评论 -
常见的浏览器内核有哪些
Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]Webkit内核：Safari,Chrome等。 [ Chrome的Blink（WebKit的分支）]...原创 2021-01-13 21:09:27 · 87 阅读 · 0 评论 -
html5有哪些新特性、移除了那些元素？
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加新增选择器 document.querySelector、document.querySelectorAll拖拽释放(Drag and drop) API媒体播放的 video 和 audio本地存储 localStorage 和 sessionStorage离线应用 manifest桌面通知 Notifications语意化标签 article、footer、header、nav、section增强原创 2021-01-13 21:09:09 · 114 阅读 · 0 评论 -
语义化的理解
用正确的标签做正确的事情！HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解...原创 2021-01-12 18:43:44 · 93 阅读 · 0 评论 -
HTTP状态码及其含义
**1XX：信息状态码 **100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息**2XX：成功状态码 **200 OK 正常返回信息201 Created 请求成功并且服务器创建了新的资源202 Accepted 服务器已接受请求，但尚未处理**3XX：重定向 **301 Moved Permanently 请求的网页已永久移动到新位置。302 Found 临时性重定向。303 See O原创 2021-01-12 18:43:33 · 99 阅读 · 0 评论 -
前端性能优化最佳实践？
性能评级工具（PageSpeed 或 YSlow）合理设置 HTTP 缓存：Expires 与 Cache-control静态资源打包，开启 Gzip 压缩（节省响应流量）CSS3 模拟图像，图标base64（降低请求数）模块延迟(defer)加载/异步(async)加载Cookie 隔离（节省请求流量）localStorage（本地存储）使用 CDN 加速（访问最近服务器）启用 HTTP/2（多路复用，并行加载）前端自动化（gulp/webpack）...原创 2021-01-11 20:18:02 · 95 阅读 · 0 评论 -
谈谈前端性能优化问题
代码层面：避免使用css表达式，避免使用高级选择器，通配选择器缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等请求数量：合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载请求带宽：压缩文件，开启GZIP...原创 2021-01-11 20:16:00 · 117 阅读 · 0 评论 -
你有用过哪些前端性能优化的方法？
减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。当需要设置的样式很多时设置className而不是直接操作style少用全局变量、缓存DOM节点查找的结果。减少IO读取操作避免使用CSS E.原创 2021-01-11 20:14:52 · 112 阅读 · 0 评论