面试题：html-CSDN博客

本文链接：https://blog.csdn.net/namejs/article/details/79434793

什么是语义化的html?

用有一定语义的英文字母（标签）标记，因为HTML本身就是标记语言，以前的html结构都是一堆没有语义的冷冰冰的标签。

为什么要做到语义化？

①利于SEO，语义化能和搜索引擎建立良好的联系，搜索引擎爬虫依赖于标签来确定上下文和各个关键字的权重，有利于抓取更多的有效信息。

②让页面的内容结构化，便于对浏览器、搜索引擎解析。

③在没有CSS的时候能够清晰的看出网页的结构，增强可读性。

④支持多终端设备的浏览器渲染,方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。

⑤便于团队开发和维护，语义化更具可读性，如果遵循W3C标准的团队都遵循这个标准，可以减少差异化，利于规范化。

⑥用正确的标签做正确的事情。

cookies，sessionStorage 和 localStorage 的区别？

①cookie在浏览器和服务器端来回传递数据，而localStorage和sessionStorage不会自动把数据发送给服务器，仅会保存在本地。cookie会在浏览器请求头或者ajax请求头中发送cookie内容。

②cookie可以设置过期日期，sessionStorage是会话级的数据，浏览器窗口关闭即清除，localStorage是永久性的数据，一旦赋值，不管多长时间这值都是存在的，除非手动清除。

③cookie的存储大小受限制，单个域名存储量一般不超过4k，而localStorage和sessionStorage的单个域名存储量存储大小一般不超过5M，大大提高了存储的体积。

④使用场景：

cookie一般存储用户名密码相关信息，一般使用escape转义编码后存储。

localStorage可以用来统计页面访问次数。

sessionStorage可以用来统计当前页面元素的点击次数。

html5 第一行为什么只需要写<!DOCTYPE html>（大小写不敏感）？

说明：DTD（Document Type Definition文档类型定义）规定了标记语言的规则，这样浏览器才能正确地呈现内容。

说明：SGML 是一种很强大但很复杂的标记语言，HTML、XML 就是从中衍生出来的。

html 4.01 中的 DOCTYPE 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。而html5不基于 SGML，因此不需要对 DTD 进行引用，但是需要 DOCTYPE 来规范浏览器的行为。

如果我不放入<! DOCTYPE html> ，HTML5还会工作么？

不会，浏览器将不能识别他是HTML文档，同时HTML5的标签将不能正常工作。

html5有哪些新特性？

html5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

①绘画 canvas；

②用于媒介回放的 video 和 audio 元素；

③本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

④本地离线存储 sessionStorage 数据在浏览器关闭后自动删除；

⑤语意化更好的内容元素，比如 article、footer、header、nav、section；

⑥表单控件，calendar、date、time、email、url、search；

⑦新的技术webworker, websockt, Geolocation；

如何处理html5新标签的浏览器兼容问题？

①IE8/IE7/IE6支持通过document.createElement方法产生的标签。

②当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架：

<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

<![endif]-->

SGML（标准通用标记语言）和HTML（超文本标记语言），XML（可扩展标记语言）和HTML的之间有什么关系？

SGML（标准通用标记语言）是一个标准，告诉我们怎么去指定文档标记。它只描述文档标记是怎么样的元语言，HTML是被用SGML描述的标记语言。因此利用SGML创建了HTML参照和必须共同遵守的DTD，你会经常在HTML页面的头部发现“DOCTYPE”属性，用来定义用于解析目标DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

现在解析SGML是一件痛苦的事情，所以创建了XML使事情更好。XML使用了SGML，例如：在SGML中你必须使用起始和结束标签，但是在XML你可以有自动关闭的结束标签。

XHTML创建于XML，它被使用在HTML4.0中。你可以参考下面代码片段中展示的XML DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

总之，SGML是所有类型的父类，较旧的HTML利用SGML，HTML4.0使用派生自XML的XHTML

从浏览器地址栏输入url到显示页面的过程？

①浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；

②服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；

③浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；

④载入解析到的资源文件，渲染页面，完成。

HTTP的几种请求方法用途？

①GET方法：发送一个请求来取得服务器上的某一资源；

②POST方法：向URL指定的资源提交数据或附加新的数据;

③PUT方法：跟POST方法很像，也是想服务器提交数据。但是，它们之间有不同。PUT指定了资源在服务器上的位置，而POST没有；

④HEAD方法：只请求页面的首部；

⑤DELETE方法：删除服务器上的某资源；

⑥OPTIONS方法：它用于获取当前URL所支持的方法。如果请求成功，会有一个Allow的头包含类似“GET,POST”这样的信息；

⑦TRACE方法：被用于激发一个远程的，应用层的请求消息回路；

⑧CONNECT方法：把请求连接转换到透明的TCP/IP通道；

html标签属性src与href的区别？

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

图片格式有哪些？

png-8，png-24，jpeg，gif，svg，webp，apng。

webp格式，谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%。

apng：全称是“Animated Portable Network Graphics”, 是PNG的位图动画扩展，可以实现png格式的动态图片效果。04年诞生，但一直得不到各大浏览器厂商的支持，直到日前得到 iOS safari 8的支持，有望代替GIF成为下一代动态图标准。

一个页面上有大量的图片，加载很慢，你有哪些方法优化这些图片的加载？

①图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。

②如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。

③如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。

④如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。

⑤如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

前端需要注意哪些SEO？

①合理的title、description、keywords：搜索对着三项的权重逐个减小，

title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；

description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；

keywords列举出重要关键词即可；

②语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页重要内容；

③HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取

；

④重要内容不要用js输出：爬虫不会执行js获取内容

⑤少用iframe：搜索引擎不会抓取iframe中的内容；

⑥非装饰性图片必须加alt；

⑦提高网站速度：网站速度是搜索引擎排序的一个重要指标；

img标签的alt和title属性区别？

①alt意思为改变、替换，是给搜索引擎识别，在图像无法显示时的替代文本；

②title是关于元素的注释信息，主要是给用户解读。当鼠标放到文字或是图片上时有title文字显示。（因为IE不标准）在IE浏览器中alt起到了title的作用，变成文字提示。在定义img对象时，将alt和title属性写全，可以保证在各种浏览器中都能正常使用。

什么是CDN？

经过一系列复杂的逻辑运算和数据处理，用于这次给你看的淘宝网首页的HTML内容便生成成功了。对web前端稍微有点常识的童鞋都应该知道，下一步浏览器会去加载页面中用到的css、js、图片、脚本和资源文件。但是可能相对较少的同学才会知道，你的浏览器在同一个域名下并发加载的资源数量是有限制的，例如IE6-7是两个，IE8是6个，Chrome各版本不大一样，一般是4-6个。

我刚刚看了一下，我访问淘宝网首页需要加载126个资源，那么如此小的并发连接数自然会加载很久。所以前端开发人员往往会将上述这些资源文件分布在好多个域名下，变相的绕过浏览器的这个限制，同时也为下文的CDN工作做准备。据不可靠消息，在双十一当天高峰，淘宝的访问流量最巅峰达到871GB/S。这个数字意味着需要178万个4Mb带宽的家庭宽带才能负担的起，也完全有能力拖垮一个中小城市的全部互联网带宽。

那么显然，这些访问流量不可能集中在一起。并且大家都知道，不同地区不同网络（电信、联通等）之间互访会非常缓慢，但是你却发现很少发现淘宝网访问缓慢。这便是CDN(Content Delivery Network)，即内容分发网络的作用。

淘宝在全国各地建立了数十上百个CDN节点，利用一些手段保证你访问的（这里主要指js、css、图片等）地方是离你最近的CDN节点，这样便保证了大流量分散在各地访问的加速节点上。