龙岗企业网站设计公司,阿坝网站制作,wordpress edit lock,免费的网站空间申请【前端实习生备战秋招】—HTML 和 CSS面试题总结#xff08;一#xff09; 1. 你做的页面在哪些流览器测试过#xff1f;这些浏览器的内核分别是什么? IE:trident内核 Firefox#xff1a;gecko内核 Safari:webkit内核 Opera:以前是presto内核#xff0c;Opera现已改用Goo…【前端实习生备战秋招】—HTML 和 CSS面试题总结一 1. 你做的页面在哪些流览器测试过这些浏览器的内核分别是什么? IE:trident内核 Firefoxgecko内核 Safari:webkit内核 Opera:以前是presto内核Opera现已改用GoogleChrome的Blink内核Chrome:Blink(基于webkitGoogle与OperaSoftware共同开发) 2.每个HTML文件里开头都有个很重要的东西Doctype知道这是干什么的吗
声明位于文档中的最前面的位置处于html标签之前。此标签用于告知浏览器文档使用哪种HTML或XHTML规范。 重点是告诉浏览器按照何种规范解析页面 3.divcss 的布局较 table 布局有什么优点
改版的时候更方便 只要改 css 文件。页面加载速度更快、结构化清晰、页面显示简洁。表现与结构相分离。易于优化seo搜索引擎更友好排名更容易靠前。
4. Quirks 模式是什么它和 Standards 模式有什么区别
从 IE6 开始引入了 Standards 模式标准模式中浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。
在 IE6 之前 CSS 还不够成熟所以 IE5 等之前的浏览器对 CSS 的支持很差 IE6 将对CSS 提供更好的支持然而这时的问题就来了因为有很多页面是基于旧的布局方式写的而如果 IE6 支持 CSS 则将令这些页面显示不正常如何在即保证不破坏现有页面又提供新的渲染机制呢
在写程序时我们也会经常遇到这样的问题如何保证原来的接口不变又提供更强大的功能尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支即当某个参数为真时我们就使用新功能而如果这个参数 不为真时就使用旧功能这样就能不破坏原有的程序又提供新功能。
IE6 也是类似这样做的它将 DTD 当成了这个“参数”因为以前的页面大家都不会去写 DTD所以 IE6 就假定 如果写了 DTD就意味着这个页面将采用对 CSS 支持更好的布局而如果没有则采用兼容之前的布局方式。这就是 Quirks 模式怪癖模式诡异模式怪异模式
区别总体会有布局、样式解析和脚本执行三个方面的区别 5. img 的 alt 与 title 有何异同 strong 与 em 的异同 alt(alt text):为不能显示图像、窗体或 applets 的用户代理UAalt 属性用来指定替换文字。替换文字的语言由lang 属性指定。(在 IE 浏览器下会在没有 title 时把 alt 当成 tool tip 显示) title(tool tip):该属性为设置该属性的元素提供建议性的信息。 strong:粗体强调标签强调表示内容的重要性 em:斜体强调标签更强烈强调表示内容的强调点
6. 为什么利用多个域名来存储网站资源会更有效
CDN 缓存更方便突破浏览器并发限制节约 cookie 带宽节约主域名的连接数优化页面响应速度防止不必要的安全问题
7. 请谈一下你对网页标准和标准制定机构重要性的理解。
网页标准和标准制定机构都是为了能让 web 发展的更‘健康’开发者遵循统一的标准降低开发难度开发成本SEO 也会更好做也不会因为滥用代码导致各种 BUG、安全问题最终提高网站易用性。
8.请描述一下 cookiessessionStorage 和 localStorage 的区别
sessionStorage 用于本地存储一个会话session中的数据这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久化的本地存储仅仅是会话级别的存储。而 localStorage 用于持久化的本地存储除非主动删除数据否则数据是永远不会过期的。
web storage 和 cookie 的区别
Web Storage 的概念和 cookie 相似区别是它是为了更大容量存储设计的。Cookie 的大小是受限的并且每次你请求一个新的页面的时候 Cookie 都会被发送过去这样无形中浪费了带宽另外 cookie 还需要指定作用域不可以跨域调用。
除此之外Web Storage 拥有 setItem,getItem,removeItem,clear 等方法不像 cookie需要前端开发者自己封装 setCookiegetCookie。但是 Cookie 也是不可以或缺的。Cookie 的作用是与服务器进行交互作为 HTTP 规范的一部分而存在 而 Web Storage仅仅是为了在本地“存储”数据而生。
这部分的详细内容可以看一下我之前的专栏 写的比较详细也有案例 点我跳转到专栏
9.简述一下 src 与 href 的区别。
src 用于替换当前元素href 用于在当前文档和引用资源之间确立联系
src 是 source 的缩写指向外部资源的位置指向的内容将会嵌入到文档中当前标签所在位置在请求 src 资源时会将其指向的资源下载并应用到文档内例如 js 脚本img 图片和 frame 等元素。
script src ”js.js”/script当浏览器解析到该元素时会暂停其他资源的下载和处理直到将该资源加载、编译、执行完毕图片和框架等元素也如此类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头部。
href 是 Hypertext Reference 的缩写指向网络资源所在位置建立和当前元素锚点或当前文档链接之间的链接如果我们在文档中添加
link href”common.css” rel”stylesheet”/那么浏览器会识别该文档为 css 文件就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css而不是使用import 方式。
10.知道的网页制作会用到的图片格式有哪些
png-8png-24jpeggifsvg。但是上面的那些都不是面试官想要的最后答案。面试官希望听到是 Webp。是否有关注新技术新鲜事物
科普一下 WebpWebP 格式谷歌google开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有 JPEG 的 2/3并能节省大量的服务器带宽资源和数据空间。Facebook Ebay 等知名网站已经开始测试并使用 WebP 格式。 在质量相同的情况下WebP 格式图像的体积要比 JPEG 格式图像小 40%
11.知道什么是微格式吗谈谈理解。 微格式Microformats是一种让机器可读的语义化 XHTML 词汇的集合是结构化数据的开放标准。是为特殊应用而制定的特殊格式。 优点将智能数据添加到网页上让网站内容在搜索引擎结果界面可以显示额外的提示。
12. 在 css/js 代码上线之后开发人员经常会优化性能从用户刷新网页开 始一次 js 请求一般情况下有哪些地方会有缓存处理 答案dns 缓存cdn 缓存浏览器缓存服务器缓存。 13.一个页面上有大量的图片大型电商网站加载很慢你有哪些方法 优化这些图片的加载给用户更好的体验。 图片懒加载在页面上的未可视区域可以添加一个滚动条事件判断图片位置与浏览器顶端的距离与页面的距离如果前者小于后者优先加载。如果为幻灯片、相册等可以使用图片预加载技术将当前展示图片的前一张和后一张优先下载。 如果图片为 css 图片可以使用 CSSspriteSVGspriteIconfont、Base64 等技术。如果图片过大可以使用特殊编码的图片加载时会先加载一张压缩的特别厉害的缩略图以提高用户体验。 如果图片展示区域小于图片的真实大小则因在服务器端根据业务需要先行进行图片压缩图片压缩后大小与展示一致
14. 你如何理解 HTML 结构的语义化
去掉或样式丢失的时候能让页面呈现清晰的结构
html 本身是没有表现的我们看到例如h1是粗体字体大小 2em加粗strong是加粗的不要认为这是 html 的表现这些其实 html 默认的 css 样式在起作用所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的 HTML 结构的优点但是浏览器都有有默认样式默认样式的目的也是为了更好的表达 html 的语义可以说浏览器的默认样式和语义化的 HTML 结构是不可分割的。 屏幕阅读器如果访客有视障会完全根据你的标记来“读”你的网页。例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音. PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页通常是因为这些设备对CSS 的支持较弱。使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页. 语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况包括现有的或者将来新的设备.例如,一部手机可以选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显示.无论哪种方式一旦你对文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面. 搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”,但现在它们他们实际上是极其宝贵的用户.没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问。 你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.SEO 主要还是靠你网站的内容和外部链接的。 便于团队开发和维护。W3C 给我们定了一个很好的标准在团队中大家都遵循这个标准可以减少很多差异化的东西方便开发和维护提高开发效率甚至实现模块化开发。
15.谈谈以前端角度出发做好 SEO 需要考虑什么
了解搜索引擎如何抓取网页和如何索引网页。你需要知道一些搜索引擎的基本工作原理各个搜索引擎之间的区别搜索机器人SE robot 或叫 web crawler如何进行工作搜索引擎如何对搜索结果进行排序等等。
Meta 标签优化。主要包括主题Title)网站描述(Description)和关键词Keywords。还有一些其它的隐藏文字比如 Author作者Category目录Language编码语种等。
如何选取关键词并在网页中放置关键词。 搜索就得用关键词。关键词分析和选择是 SEO 最重要的工作之一。首先要给网站确定主关键词一般在 5 个上下然后针对这些关键词进行优化包括关键词密度Density相关度Relavancy突出性Prominency等等。
了解主要的搜索引擎虽然搜索引擎有很多但是对网站流量起决定作用的就那么几个。比如英文的主要有GoogleYahooBing 等中文的有百度搜狗有道等。不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。还要了解各搜索门户和搜索引擎之间的关系比如 AOL网页搜索用的是 Google 的搜索技术MSN 用的是 Bing 的技术。
主要的互联网目录。 Open Directory 自身不是搜索引擎而是一个大型的网站目录他和搜索引擎的主要区别是网站内容的收集方式不同。目录是人工编辑的主要收录网站主页搜索引擎是自动收集的除了主页外还抓取大量的内容页面。
按点击付费的搜索引擎。 搜索引擎也需要生存随着互联网商务的越来越成熟收费的搜索引擎也开始大行其道。最典型的有 Overture 和百度当然也包括 Google 的广告项目 Google Adwords。越来越多的人通过搜索引擎的点击广告来定位商业网站这里面也大有优化和排名的学问你得学会用最少的广告投入获得最多的点击。
搜索引擎登录网站做完了以后别躺在那里等着客人从天而降。要让别人找到你最简单的办法就是将网站提交submit到搜索引擎。如果你的是商业网站主要的搜索引擎和目录都会要求你付费来获得收录比如 Yahoo 要 299 美元但是好消息是至少到目前为止最大的搜索引擎 Google 目前还是免费而且它主宰着 60以上的搜索市场。
链接交换和链接广泛度Link Popularity 网页内容都是以超文本Hypertext的方式来互相链接的网站之间也是如此。除了搜索引擎以外人们也每天通过不同网站之间的链接来 Surfing“冲浪”。其它网站到你的网站的链接越多你也就会获得更多的访问量。更重要的是你的网站的外部链接数越多会被搜索引擎认为它的重要性越大从而给你更高的排名。
