整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
1.对WEB标准以及W3C的理解与认识。
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。
2.xhtml和html有什么区别？
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言。
最主要的不同：
XHTML元素必须被正确地嵌套；
XHTML元素必须被关闭；
标签名必须用小写字母；
XHTML文档必须拥有根元素。
3.Doctype的作用？严格模式和混杂模式的区别？它们有什么意义？
1）<!DOCTYPE>声名位于文档的最前面，在<HTML> 标签的前面，告知浏览器以何种模式来渲染文档。
2）严格模式的排版和JS运作模式都是以浏览器支持的最高的标准运行。按照W3C的标准来解析代码。
3）混杂模式是以宽松的，向后兼容的方式来解析代码。是指浏览器用自己的方式解析代码，模拟老式浏览器的行为以防止网站停止工作。
4）若DOCTYPE为声名或格式不正确，页面将会以怪异模式的方式解析。
5）Doctype标签可声明三种DLD类型，分别是严格型，过渡型，框架型。
4.行内元素有哪些?块级元素有哪些?CSS的盒模型?
块级元素：div p h1 h2 h3 h4 form ul
行内元素：a b br i span input select
CSS盒模型：内容、填充（padding）、边框（border）、外边界（margin）
5.CSS引入的方式有哪些? link和@import的区别是?
方式：
内联方式、嵌入方式、链接方式、导入方式。
区别：
1）link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
2）link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
3）link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
4）ink支持使用Javascript控制DOM去改变样式；而@import不支持。
6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?
CSS选择符：
1）id选择器(# myid)
2）类选择器(.myclassname)
3）标签选择器(div, h1, p)
4）相邻选择器(h1 + p)
5）子选择器(ul > li)
6）后代选择器(li a)
7）通配符选择器( * )
8）属性选择器(a[rel="external"])
9）伪类选择器(a: hover, li:nth-child)
可继承的样式：
1）font-size
2）font-family
3）color
4）text-indent
优先级算法：
1）优先级就近原则，同权重情况下样式定义最近者为准
2）载入样式以最后载入的定位为准
3）!important > id > class > tag
4）important 比 内联优先级高，但内联比 id 要高
7.前端页面有哪三层构成，分别是什么?作用是什么?
结构层 HTML：
由HTML或XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”
表示层 CSS：
由CSS负责创建，CSS对“如何显示有关内容”的问题做出了回答。
行为层 JS：
负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。
8.CSS的基本语句构成是?
选择器{属性 1:值 1;属性 2:值 2;……}
9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
Ie(Ie 内核)、火狐（Gecko）、谷歌（webkit）、opear(Presto)
10.标签上title与alt属性的区别是什么?
Alt当图片不显示时，用文字代表
Title 为该属性提供信息
11.描述css reset的作用和用途。
每个浏览器都有一些自带的或者共有的默认样式，或造成一些布局上的困扰，css reset的作用就是重置这些默认样式，使样式表现一致。
为了让页面获得浏览器跨浏览器的兼容性，需要用重置文件css代码覆盖浏览器默认的样式来统一样式。
12.解释css sprites，如何使用。
css sprites：
精灵图（雪碧图），把一堆小图片整合在一张大图上，通过背景图片相关设置（背景图片、背景图是否重复、背景图定位），显示图片，减轻服务器对图片的请求数量
使用步骤：
1）制作一张具有多状态的拼合图片，需要按照一定规律处理
2）给要显示背景的盒（一个固定尺寸，宽width、高height），以背景的方式加载，让其局部显示
3）通过背景图定位（background-position）控制不同的显示状态
13.浏览器标准模式和怪异模式之间的区别是什么?
所谓的标准模式是指，浏览器按W3C标准解析执行代码；怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。
使用window.top.document.compatMode可显示为什么模式。
14.你如何对网站的文件和资源进行优化?期待的解决方案包括：
1）文件合并
2）文件最小化/文件压缩
3）使用 CDN 托管
4）缓存的使用
5）GZIP压缩你的JS和CSS文件
15.什么是语义化的HTML？为什么要做到语义化？
语义化的HTML就是写出的HTML代码，符合内容的结构化（内容语义化），选择合适的标签（代码语义化），能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
语义化的优点：
1）有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。
2）在没有CSS的时候能够清晰的看出网页的结构，增强可读性。
3）便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。
4）支持多终端设备的浏览器渲染。
16.清除浮动的几种方式，各自的优缺点：
1）使用空标签清除浮动clear:both（理论上能清楚任何标签，增加无意义的标签）
2）使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端，使用 zoom:1 用于兼容 IE）
3）是用afert伪元素清除浮动（用于非 IE 浏览器）
17.如何居中div?如何居中一个浮动元素?
给div设置一个宽度，然后设置元素的左右外边距为 auto，比如，margin:0px auto。则可以实现 div 居中显示。
对于浮动元素，设置其左右外边距为关键字 auto 是无效的。此时，如果需要设置其居中显示，可以：
1）精确计算其左外边距并进行设置，实现居中显示
2）使用一个居中显示的 div 元素包含此浮动元素
18.CSS3新增伪类举例：
p:first-of-type 选择属于其父元素的首个元素的每个元素。
p:last-of-type 选择属于其父元素的最后元素的每个元素。 p:only-of-type 选择属于其父 元素唯一的元素的每个元素。 p:only-child 选择属于其父元素的唯一子元素的每个元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。 :enabled :disabled 控制 表单控件的禁用态。
:checked 单选框或复选框被选中。
19.HTML5 的离线储存有几种方式?
localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 数据在浏览器关闭后自动删除。
20.请描述一下cookies，sessionStorage和localStorage的区别?
相同点：
都存储在客户端
不同点：
1）存储大小
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
2）有效时间
localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。
sessionStorage数据在当前浏览器窗口关闭后自动删除。
cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
3）数据与服务器之间的交互方式
cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
21.简述一下src与href的区别。
href是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执 行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
22.简述同步和异步的区别。
同步是阻塞模式，异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么 这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
23.HTML5为什么只需要写 <!DOCTYPE HTML>？
HTML5不基于SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
24.CSS清除浮动的几种方法。
1）使用带clear属性的空元素
2）使用CSS的overflow属性
3）使用CSS的after伪元素
4）使用邻接元素处理
超链接是互联网最突出的功能之一，添加超链接也是所有网络用户需要掌握的基本功。
然而，「会用」超链接并不等于能「用好」超链接。或许是因为操作太过容易，我们在添加超链接的时候往往颇为随意，而不会仔细考虑做成超链接的内容和地址是否合理。
回想一下，你是否遇到过下面这样的超链接用法，或者自己这样用过：
这些用法都是值得商榷的。
超链接的正确用法并不是个新话题。早在 2004 年，谷歌工程师 Jed Hartman 就撰文讨论过链接文本的合理用法；上面列举的几种不当用例正是来源于该文。
一些开发文档也涉及了这个问题。谷歌的《开发文档风格指南》（Developer Documentation Style Guide）就为此专设一节，并指出链接文本应该「描述读者点击链接后将会看到的内容」，如被引文档的标题或对其内容的描述。Mozilla 维护的 MDN 文档库也讨论了「链接最佳实践」（link best practices），同样建议回避上述几种做法。
但正如我们所见，时至今日，超链接的使用在实践中仍然是很随意的；不少网站超链接的外观设计也往往不尽人意。
为此，我想从链接文本和链接地址的选择、链接外观的设计等方面，讨论自己认为较优的用法，希望能为超链接的规范使用提供一些参考。
要回答链接文本如何设置，首先要从什么是超链接说起。
根据 HTML 标准，超链接是「指向其他资源的链接，通常由用户代理（一般即为浏览器——笔者注）展示给用户，使用户可以令用户代理导航到这些资源」。
此外，超链接通常是通过「锚」（anchor）元素（a）构造的；当一个锚元素含有 href 属性时，该元素就代表一个由其内容标记（label）的超链接。
这些定义固然晦涩，但我们仍然可以从中得出一些有用结论：
在此基础上，我们就可以说明为什么前面提到的几种「流行」用法是有待商榷的：
第一种用法（将操作指示作为链接文本）的主要问题在于赘余。既然锚元素的存在本身就说明有链接、可点击，再加入「点击」「更多」之类的描述，就好像是在说「这是一个有链接的链接」一样，成了同义反复。
早年，并非人人都「认识」超链接，这么写或许还有些教育用户的意义，但这在今天已经不是个问题了。此外，这样的链接文本也无法说明被链接的内容。因此，不妨删去「点击」「更多」，代之对被引内容的说明：
要进一步了解某话题，可以参阅某文章。
第二种用法（将网址作为链接文本）同样会让读者无从知晓其内容。此外，从排版角度，冗长的网址也会给断行、对齐的处理造成不便，影响版面的整洁度。因此，更好的做法仍然是描述链接地址的内容，而不是直接把地址写进正文（当然，因行文需要展示链接地址的场合除外）。
第三种用法（将超链接的连用作为列举手段）可谓有利有弊。一方面，这么做确实具有一定「修辞」功能，可以传达俏皮、讽刺等意味。但正如那些被滥用的「梗」一样，其新意和趣味会随着反复使用而磨损，最终引起读者的厌倦；这么做也违反了「名副其实」的原则，给阅读造成不便。因此，最好还是把「文采」留给别处，用更清晰的方式来列举超链接。
例如，与其使用上述那种抖机灵写法：「苹果在过去几个月和开发者可谓 冲 突 不 断」，不如原原本本地把具体内容呈现给读者：
苹果在过去几个月和开发者可谓冲突不断，先后拒收了电邮服务 Hey 的官方 app、下架了人气游戏 Fortnite、强迫 WordPress 通过内购销售域名，并「言而有信」地关停了 Epic 的开发者账号。
第四种用法（链接文本过长）是否不值得鼓励，现有讨论并未达成共识，但我的观点仍然是应该尽量避免。理由是，如果链接文本很长，它很可能是在摘录或描述被引内容的局部，而非全文；如果给这样的局部引用加上指向原文整体的超链接，不仅不具有对应关系，也不便于读者跳转之后找到相关段落。
因此，更好的做法是把链接加在文章标题上（同时说明被引段落的位置），然后用普通文本做摘录和总结：
根据某文章 [某节] 的观点，「……」。
另外，不合规范的链接用法还会产生一些较为间接、但同样不容忽视的负面影响。例如，这会降低网页的可访问性（accessibility），给依赖于读屏器的用户造成不便，使他们很难通过听到的链接文本判断目标页面的内容（参见不同读屏器对于链接文本的处理方式）。又如，搜索引擎在索引网站时，常常通过链接来判断网站的关键词。如果一个网站的链接文本都是「跑题」的，它给搜索引擎的「印象分」就会大打折扣，导致搜索排名降低。
从上文的讨论可以看出，要修正超链接的「问题用法」，只靠给链接换个位置可能是不够的，往往还需要调整甚至重写相关表述。
这是因为，超链接的质量间接反映了写作的质量：如果你发现难以从文本中找出合适的部分做成链接，那么很可能是因为行文表述不够具体、充分，信息标注不够明确、规范。
这里，超链接的便捷再次埋下了隐患。过去，我们用括号、脚注提示相关信息，用引注、参考文献表明内容来源。到了面向网页的写作中，这些传统注记方式的职能在很大程度上被超链接包揽了。但与此同时，那些原本需要研究、检索支撑的工作，被简化成了复制粘贴网址；原本写成白纸黑字、受读者审视的引文，被藏到了链接背后。在方便的同时，这也为我们提供了「纵容」自己降低写作标准、滥用超链接的借口。
因此，比起「在哪里添加超链接」，一个更优先的问题或许还是「要不要添加超链接」。
如果文章讨论的话题线索复杂、众说纷纭，那么我们就有责任先梳理、溯源，筛选出尽可能一手、高质量的来源做成链接，而不是将大把链接一股脑塞给读者，同时产生「内容充实」的良好自我感觉。如果被引文章篇幅较长、内容艰深，或与当前段落的关系并不一目了然，那么我们也有责任作出必要的标注和解释，而不是抛出一个超链接，让读者自己点开「细品」「领悟」。
例如，前段时间，美国国会召集四大科技公司 CEO 的反垄断听证会受到了媒体的广泛关注（可参阅我介绍此事的文章）。不少报道在行文中提及了微软 20 年前受到的司法部指控，以此介绍美国法院的反垄断判案标准。
这个案例引用当然是切题的，但到了为其添加超链接时，很多文章就颇为随意，一般都选择链接到自己网站的其他文章，或是当年的媒体报道。然而，这并不符合前面介绍的「名副其实」原则（最相关的文件应当是判决书，或至少是对判决结果的报道），也不足以使读者了解判决逻辑是什么、从何而来。
实际上，如果遵循法律引注的要求，提及判例应当附上相关案件的完整索引信息和必要的解释说明：
United States v. Microsoft Corp., 253 F.3d 34, 59 (D.C. Cir. 2001) (holding that a balancing approach under the rubric of the “rule of reason” is applied for the analysis under §2 of the Sherman Act).
这样，读者不仅能了解案件的当事方（联邦政府诉微软公司）、审理的时间地点（2001 年由联邦法院哥伦比亚特区巡回法庭审理），主要的判决理由（法院可以通过衡量利弊判断垄断行为是否合法），而且如有兴趣进一步探究，还可以自己找到判决原文阅读（《联邦案例汇编》第三辑第 253 卷，第 34 页以下，相关段落位于第 59 页）。
诚然，出于效率和简洁的考虑，网上写作没有必要像学术写作那样一板一眼地遵循引注规范（Bluebook 等引注标准确实也因为繁琐、封闭而颇受诟病）。但功夫有时需要下在那些看不见的地方；如果下笔前对写作对象做了充分的研究，写作时做了充分的说明和标注，「超链接加在哪」几乎不会是个问题。
要做出好的超链接，除了关注链接文本的选择，链接地址的规范性也不应忽视。
一方面，做成超链接的地址应当尽量精简，即在不影响链接功能的前提下，包含尽量少的无关信息。直接从浏览器地址栏复制的 URL 未必适合直接拿来做成链接，因为其中可能包含了很多无关的参数（parameter）。
例如，搜索结果页和邮件通讯中很多 URL 都含有 utm_source 等用于流量分析的参数：
https://example.com?utm_source=news4&utm_medium=email&utm_campaign=spring-summer将其留在超链接中不仅没有实际功能，而且不利于保护读者的隐私。
又如，在插入商品销售页的链接时，应当从中删除无关的引荐代码（affiliate token）；如果要加入自己的引荐代码，则应当作出明确披露。
另一方面，链接地址又应当足够具体，即尽可能精准定位到相关资源。如果引述的内容集中于文章的某一节，那么插入的 URL 最好具体到片段（fragment）。
例如，如果撰文讨论常见的网页标准，那么在插入相关维基词条的链接时，就可以具体到：
https://en.wikipedia.org/wiki/Web_standards#Common_usage这样，读者在点击后就可以直接跳转到其中最相关的「Common Usage」一节。
类似地，如果文章涉及 GitHub 代码或 YouTube 视频，也不妨利用它们为特定行号或时间戳创建链接的功能。
前不久，谷歌还为 Chrome 浏览器开发了一个名为「链接到文本片段」（Link to Text Fragment）的插件，可以帮助用户制作出指向页面上任意文本的链接。遗憾的是，这个插件背后的标准仍处于早期草案阶段。在它被广泛采纳之前，更务实的做法或许还是像上文建议的那样，不怕啰嗦地向读者尽量具体描述引文的位置。
最后，超链接的质量并不只取决于文章作者；网站的设计者对此也有一份责任，那就是合理地设计超链接的外观。
传统网页中的超链接是其貌不扬的，始终以蓝色文字加下划线的形态示人。但在近年，给链接文本加粗、添加夸张的下划线、换用高饱和度的颜色似乎蔚然成风；超链接俨然成了很多网站彰显个性的秀场。
Vox 的超链接；彩色粗体的设计在链接密集时让版面不整洁且缺乏层次
然而，网页元素的外观应该与其功能相匹配。正如前文反复强调的，超链接只能说明链接文本存在一个关联页面，而不能说明它相对于上下文更加重要。因此，也就没有理由使其在视觉上过分突出。此外，过度设计超链接还会进一步放大前述滥用行为的危害，让版面效果变得凌乱而没有层次。
当然，这并不是说超链接的设计就只能是死气沉沉的。我就曾见过不少既恰如其分、又不失新意的超链接设计。试举两例：
一是排版设计师 Matthew Butterick 的 Butterick’s Practical Typography 网站。这个网站实际是一本电子书，深入浅出地讲解了很多实用的排版技巧和关注点。它的设计抛弃了「下划线=超链接」的传统做法，转而通过 CSS 的 :after 在每个超链接之后加上一个小红圈，同时链接文本会在鼠标悬停时被淡红底色高亮。这样的设计既降低了侵略感，又保留了视觉提示功能，与中国传统的「圈点」批注有着微妙的相似。
Practical Typography 的链接设计
二是软件工程师 Jestem Króliczkiem 的个人博客 beepb00p。作为一个技术向、长篇说明文为主的博客，它的设计亮点在于为常用的外部网站（例如 GitHub、维基百科等）的链接添加了 SVG 图标，并为跳转到文内其他段落的链接添加了上下箭头。这些图标的加入不仅使链接对象一目了然，也给原本「素面朝天」的文本页面平添了几分趣味。
beepb00p 的链接设计
你可能已经注意到，本文在讨论各种链接用法时，一直回避使用「正确」「错误」等定性的标签，而代之以「合适」「更好」等评价。的确，超链接的用法和设计并没有成文的标准，而更多是一种「风格」（style）。既然是风格，就没有绝对的对错之分，而是会随着时代、技术、观念等外部因素而变，并且体现着不同写作者、设计者的个性。
然而，随性不等于随意。从小处说，链接的质量体现了作者的态度，反映了文章的质量。往大处说，互联网是由超链接织成的，它的价值也很大程度上取决于超链接的广度、深度和精度。在筑篱修渠成为科技巨头的发展要务、互联网的开放价值备受威胁的今天，用高质量的超链接拓展信息的边界，或许就是我们作为普通用户守护互联网为数不多的方式之一。
CSS 面试题
## 01. 盒模型
盒模型分为标准盒模型和怪异盒模型
- 标准盒模型：实际宽度由 宽度 + padding + border 组成(box-sizing: content-box)- 怪异盒模型：内容宽度为 定义的宽度 - padding - border(box-sizing: border-box)
## 02. 什么是文档流
文档流是元素在 web 页面上的一种呈现方式，按照出现的先后顺序进行排列
## 03. 什么是 BFC
BFC 即 Block Formatting Contexts(块级格式上下文)。它是页面中的一块区域，它决定了子元素将如何定位，以及和其他元素的关系和相互作用。
具有 BFC 特性的元素可以看做是隔离的容器，它的子元素在布局上不会影响到外面的元素
## 04. 触发 BFC 的条件
- float 不为 none- position 的值不是 static 或 relative- overflow 的值不是 visible- display 的值是 inline-block / table-cell / flex / inline-flex / table-caption
## 05. BFC 的作用
- 解决 margin-top 向上传递的问题- 解决 margin 上下叠加的问题- 清除浮动
## 06. 清除浮动的方式
同一层级的元素：另外的元素设置样式 clear: both;
子元素清除父元素的浮动：
- clear 属性- BFC- 空元素- 给父元素设置 .clearfix::after{}
```css.clearfix::after { content: ""; display: block; clear: both;}```
## 07. 盒子里的文字上下居中
```css.box { height: 100px; line-height: 100px;}```
```css.box { display: table-cell; vertical-align: middle;}```
```css.box { display: flex; align-items: center;}```
```css.box { display: flex; flex-wrap: wrap; align-content: center;}```
## 08. 盒子里的盒子上下左右居中
```css.container { position: relative;}.box { display: absolute; top: 0; left: 0; transform: translate(-50%, -50%);}```
```css.container { display: flex; justify-content: center; align-items: center;}```
```css.container { display: grid; justify-content: center; align-content: center;}```
```css.container { display: flex; /* display: inline-flex; */}.box { margin: 0 auto;}```
```css.container { position: relative;}.box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}```
```css.container { display: table-cell; vertical-align: middle;}.box { margin: 0 auto;}```
## 09. rem 和 em 的区别
- rem 是相对于根元素(html)的 font-size 的，1rem=根元素的 font-size- em 如果元素自身定义了 font-size，1em=元素自身的 font-size，如果元素自身没有定义 font-size，那么 1em=元素的父元素(设置了 font-size 的父元素)的 font-size- 如果元素自身的 font-size 设置的就是 em，那么元素自身的 font-size 就根据父元素的 font-size 计算得到
*请认真填写需求信息，我们会在24小时内与您取得联系。
