html篇

2023-10-03 17:32:58

1. HTML、XML、XHTML 的区别

  • HTML：超文本标记语言，是语法较为松散的、不严格的Web语言；
  • XML：可扩展的标记语言，主要用于存储数据和结构，可扩展；
  • XHTML：可扩展的超文本标记语言，基于XML，作用与HTML类似，但语法更严格。

2. 什么是HTML5以及和HTML的区别是什么

概念

HTML5是HTML的新标准，其主要目标是无需任何额外的插件如Flash、Silverlight等，就可以传输所有内容。它囊括了动画、视频、丰富的图形用户界面等。

HTML5是由万维网联盟（W3C）和Web Hypertext Application Technology Working Group 合作创建的HTML新版本。

区别

从文档声明类型上看：

  • HTML是很长的一段代码，很难记住。如下代码：
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  • HTML5却只有简简单单的声明，方便记忆。如下：
<!DOCTYPE html>
 

从语义结构上看：

  • HTML4.0：没有体现结构语义化的标签，通常都是这样来命名的<div id="header"></div>，这样表示网站的头部。
  • HTML5：在语义上却有很大的优势。提供了一些新的标签，比如：<header><article><footer>。

拓展： 不输入<!DOCTYPE HTML>，浏览器将无法识别html文件，因此html将无法正常工作。

3. HTML、XHTML和HTML5区别以及有什么联系

XHTML与HTML的区别

  • XHTML标签名必须小写；
  • XHTML元素必须被关闭；
  • XHTML元素必须被正确的嵌套；
  • XHTML元素必须要有根元素。

XHTML与HTML5的区别

  • HTML5新增了canvas绘画元素；
  • HTML5新增了用于绘媒介回放的video和audio元素；
  • 更具语义化的标签，便于浏览器识别；
  • 对本地离线存储有更好的支持；
  • MATHML，SVG等，可以更好的render；
  • 添加了新的表单控件：calendar、date、time、email等。

HTML、XHTML、HTML5之间联系

  • XHTML是HTML规范版本；
  • HTML5是HTML、XHTML以及HTML DOM的新标准。

4. HTML5 为什么只需要写

这是因为HTML5不基于SGML，因此不需要对DTD进行引用，但是需要DOCTYPE来规范浏览器的行为（让浏览器按照他们应该的方式来运行）而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

5. 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

  • 行内元素： a, b, span, img, input, select, strong;
  • 块级元素： div, ul, li, dl, dt, dd, h1-5, p等；
  • 空元素： <br>, <hr>, <img>, <link>, <meta>;

6. 页面导入样式时，使用link和@import有什么区别

  • link属于HTML标签，而@import是css提供的；
  • 页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载；
  • @import只在IE5以上才能识别，而link是XHTML标签，无兼容问题；
  • link方式的样式的权重高于@import的权重。

7. 支持HTML5的浏览器有哪些

现在几乎所有现有的浏览器都支持HTML5，例如Chrome, Opera, Safari, IE, 火狐等；

8. Label 的作用是什么？ 怎么用？

label 标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

<label for="Name">Number:</label> 
<input type=“text“ name="Name" id="Name"/>

9. html篇标签上title属性与alt属性的区别是什么

  • alt是为了在图片未能正常显示时（屏幕阅读器）给予文字说明。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。
  • title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。

10. 如何理解语义化标签

概念

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。

语义化的好处

  • 用正确的标签做正确的事情；
  • 去掉或者丢失样式的时候能够让页面呈现出清晰的结构；
  • 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
  • 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
  • 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

11. 文档声明（Doctype）和<!Doctype html>有何作用? 严格模式与混杂模式如何区分？它们有何意义?

文档声明的作用

文档声明是为了告诉浏览器，我们写的HTML文档当前使用什么版本的HTML来写的，这样浏览器才能按照我们声明的版本来正确的解析。

<!Doctype html>的作用

<!doctype html> 的作用就是让浏览器进入标准模式，使用最新的 HTML5标准来解析渲染页面；如果不写，浏览器就会进入混杂模式，我们需要避免此类情况发生。

严格模式与混杂模式的区分

严格模式： 又称为标准模式，指浏览器按照W3C标准解析代码；

混杂模式： 又称怪异模式、兼容模式，是指浏览器用自己的方式解析代码.混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作；

区分：

网页中的DTD，直接影响到使用的是严格模式还是浏览模式，可以说DTD的使用与这两种方式的区别息息相关。

  • 如果文档包含严格的DOCTYPE ，那么它一般以严格模式呈现（严格 DTD ——严格模式）；
  • 包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式）；
  • DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现（DTD不存在或者格式不正确——混杂模式）；
  • HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容(HTML5 没有严格和混杂之分)。

总的来说，严格模式让各个浏览器统一执行一套规范.兼容模式保证了旧网站的正常运行。

12. 如何实现浏览器内多个标签页之间的通信

可以通过调用localstorge、cookies等本地存储方式。

13. webSocket如何兼容低浏览器

  • Adobe Flash Socket；
  • ActiveX HTMLFile (IE) ；
  • 基于 multipart 编码发送 XHR；
  • 基于长轮询的 XHR；

14. iframe有哪些优缺点

优点

  • iframe可以实现无刷新文件上传；
  • iframe可以跨域通信；
  • 解决了加载缓慢的第三方内容如图标和广告等的加载问题。

缺点

  • iframe会阻塞主页面的Onload事件;
  • 无法被一些搜索引擎索引到;
  • 页面会增加服务器的http请求;
  • 会产生很多页面，不容易管理。

15. src与href有什么区别

  • src用于替换当前元素；href用于在当前文档和引用资源之间确立联系；
  • src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；而href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。

16. table的作用以及其优缺点

作用

  • 可用于布局（已过时）；
  • 用于显示批量数据；

优点

在某些场合，使用Table是100%的适合、恰当和正确。比如，用table做表格是完全正确的

缺点

  • Table要比其它html标记占更多的字节，会导致延迟下载时间，占用服务器更多的流量资源；
  • Table会阻挡浏览器渲染引擎的渲染顺序，这会导致延迟页面的生成速度，让用户等待更久的时间；
  • 灵活性差，比如要通多td才能设置tr的border属性；
  • 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱；
  • 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱；
  • 深层的嵌套，导致搜索引擎读取困难，同时还很大程度上增加了代码冗余；
  • 不够语义。

17. 浏览器乱码的原因是什么？如何解决？

产生乱码的原因

  • 网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码。反之也会出现乱码；
  • html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码；
  • 浏览器不能自动检测网页编码，造成网页乱码。

解决办法

  • 使用软件进行编辑HTML网页内容；
  • 如果网页设置编码是gbk，而数据库储存数据编码格式是UTF-8，此时需要程序查询数据库数据显示数据前进程序转码；
  • 如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单进行转换；

18. HTML和DOM有何关系？

HTML是死的，只是一个字符串；而DOM是由html解析而来，是活的，我们可以通过Javascript维护DOM。

19. property和attribute的区别是什么

  • property是DOM中的属性，是JavaScript里的对象;
  • attribute是HTML标签上的特性，它的值只能够是字符串;

简单的理解就是：Attribute就是DOM节点自带的属性，例如html中常用的id、class、title、align等；而Property是这个DOM元素作为对象，其附加的内容，例如childNodes、firstChild等。

20. HTML元素如何体现其嵌套关系

  • 块级元素可以包含行内元素；
  • 块级元素不一定能包含块级元素；
  • 行内元素一般不能包含块级元素（a元素例外）

21. 几种Doctype文档类型

标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

  • HTML 4.01 规定了三种文档类型：分别是Strict、Transitional 以及 Frameset；
  • XHTML 1.0 规定了三种 XML 文档类型：分别是Strict、Transitional 以及 Frameset；
  • Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页；
  • Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

22. html5有哪些新特性、移除了那些元素

新特性

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

  • 拖拽释放(Drag and drop) API；
  • 语义化更好的内容标签（header, nav, footer, aside, article, section）;
  • 音频、视频API(audio, video);
  • 画布(Canvas) API;
  • 地理(Geolocation) API;
  • 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
  • sessionStorage 的数据在浏览器关闭后自动删除;
  • 表单控件:calendar、date、time、email、url、search ;
  • 新的技术webworker, websocket, Geolocation等；

移除元素

纯表现元素：

  • <basefont> 默认字体，不设置字体，以此渲染；
  • <font> 字体标签；
  • <center> 水平居中；
  • <u> 下划线；
  • <big>字体；
  • <strike>中横字；
  • <tt>文本等宽；

对可用性产生负面影响的元素：

<frameset>,<noframes>和<frame>；

23. Quirks模式是什么？它和Standards模式有什么区别？

Quirks模式

Quirks模式，又称怪癖模式、诡异模式、怪异模式。

Quirks和Standards模式的区别

当我们在写程序时，遇到新旧功能不兼容的时候，如何做才能保证原来的接口不变，又可以提供强大的功能？

一般情况下可以通过增加参数和分支来解决。也就是当某个参数为true时，使用新功能，为false时使用旧功能，这样就能不破坏原有的程序，又能提供新功能。

IE6也是类似这样做的，它将DTD当成了这个“参数”，因为以前的页面大家都不会去写DTD，第一IE6就假定，如果写了DTD就意味这个页面将采用对CSS支持更好的布局，而如果没有就采用兼容之前的布局方式，这就是Quirks模式（怪癖，诡异，怪异模式）。

其与Standards的区别总体会有布局、样式解析、和脚本执行三个方面的区别：

  • 盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border；
  • 设置行内元素的高宽：在Standards模式下，给等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效；
  • 设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用；
  • 设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。

24. 什么是前端的结构，样式和行为相分离？以及分离的好处是什么？

结构，样式和行为分离

小编的理解是： 若是将前端比作一个人来举例子，结构（HTML）就相当于是人体的“骨架”，样式就相当于人体的“装饰”，例如衣服，首饰等；行为就相当于人做出的一系列“动作”。

在结构，样式和行为分离，就是将三者分离开，各自负责各自的内容，各部分可以通过引用进行使用。

在分离的基础上，我们需要做到代码的：精简， 重用， 有序。

分离的好处

  • 代码分离，利于团队的开发和后期的维护；
  • 减少维护成本，提高可读性和更好的兼容性；

25. 对HTML5有什么了解？

  • 良好的移动性，以移动设备为主；
  • 响应式设计，以适应自动变化的屏幕尺寸；
  • 支持离线缓存技术，webStorage本地缓存；
  • 新增了canvas，video，audio等新标签元素；以及特殊内容元素：article，footer，header，nav，section等；以及表单控件：calendar，date，time，email，url，search等；
  • 新增webSocket/webWork技术；
  • 还有新增的地理位置等。

26. 如何对网站的文件和资源进行优化

  • 文件合并（目的是减少http请求）；
  • 文件压缩 （目的是直接减少文件下载的体积）；
  • 使用缓存；
  • 使用cdn托管资源；
  • gizp压缩需要的js和css文件；
  • 反向链接，网站外链接优化；
  • meta标签优化（title, description, keywords）,heading标签的优化,alt优化；

27. Html5中datalist是什么

<datalist>标签，用来定义选项列表，与input元素配合使用钙元素，来定义input可能的值。

datalist及其选项不会被显示出来，他仅仅是合法的输入列表值。

<input id="fruits" list="fruit" /><datalist id="fruit">  <option value="apple">  <option value="orange">  <option value="banana"></datalist>
复制代码

28. Html5中本地存储概念是什么，有什么优点，与cookie有什么区别？

HTML5的Web storage的存储方式有两种：sessionStorage和localStorage。

  • sessionStorage用于本地存储一个会话中的数据，当会话结束后就会销毁；
  • 和sessionStorage不同，localStorage用于持久化的本地存储，除非用户主动删除数据，否则数据永远不会过期；
  • cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。

区别：

  • 从浏览器和服务器间的传递看： cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
  • 从大小看： 存储大小限制不同，cookie数据不能超过4k，只适合保存很小的数据；而sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
  • 从数据有效期看： sessionStorage在会话关闭会立刻关闭，因此持续性不久；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。而localStorage始终有效。
  • 从作用域看： sessionStorage不在不同的浏览器窗口*享，即使是同一个页面；而localStorage和cookie都是可以在所有的同源窗口*享的。

29. 常见的浏览器内核有哪些

  • Trident内核：IE最先开发或使用的， 360浏览器；
  • Webkit内核：Google Chrome，Safari， 搜狗浏览器，360极速浏览器， 阿里云浏览器等；
  • Gecko内核： Mozilla FireFox (火狐浏览器) ，K-Meleon浏览器；
  • Presto内核：Opera浏览器；

30. Canvas是什么？怎样写Canvas？

概念

Canvas是HTML5的一个元素，它使用JavaScript在网页上绘制图形。Canvas是一个矩形区域。它的每一个像素都可以由HTML5语言来控制。使用Canvas绘制路径、框、圆、字符和添加图像有几种方法。

使用方式

如果要在我们的HTML文档中添加Canvas标签，我们需要ID、宽度和高度。下面是如何将基本Canvas标签写入HTML文档的示例。

<canvas id="myCanvas" width="100" height="100"> </canvas>

31. 使用HTML5需要遵守哪些规则

  • 新的特性应该基于HTML、CSS、DOM和JavaScript,
  • 减少对外部插件的需求（如Flash）;
  • 更好的错误处理；
  • 更多的替换脚本的标志；
  • HTML5应与设备无关；
  • 开发过程必须可视化；

32. Html5应用程序缓存和HTML浏览器缓存有什么区别

新的HTML5规范的应用缓存最关键的就是支持离线应用，允许浏览器在链接客户端时预取一些或全部网站资产，如HTML文件，图像，CSS以及JS等，预取文件加速了站点的性能。换句话说，应用程序缓存可以预取完全未被访问的页面，从而在常规的浏览器缓存中不可用。与传统的浏览器缓存比较，该特性并不强制要求用户访问网站。

33. 最新的HTML5标准中的API是什么

  • Canvas ：Canvas由HTML代码中定义的具有高度和宽度属性的可绘制区域组成。JavaScript代码可以通过一组完整的绘图函数访问该区域，这与其他常见的2D API类似，因此允许动态生成图形。Canvas 的一些预期用途包括构建图形、动画、游戏和图像合成。
  • 媒体定时回放；
  • 离线存储数据库；
  • 文档编辑；
  • 拖放；
  • 跨文档消息传递；
  • 浏览器历史管理；
  • MIME类型和协议处理程序注册；

34. LocalStorage本地存储在HTML5中有什么用途

localStorage本地存储相当于一个轻量级的数据库，可以在本地永久的储存数据（除非人为删除）。此外，还可以在断网情况下读取本地缓存的cookies。

  • 使用localStorage保存数据： localStorage.setItem(key, value);
  • 使用localStorage获取保存的数据: localStorage.getItem(key);
  • 清除localStorage保存的数据： localStorage.removeItem(key);
  • 清除全部localStorage对象保存的数据: localStorage.clear( );

35. 有关HTML5中新的输入类型属性

类型 作用
search 用于搜索域 ，域显示为常规的文本域
email 用于应该包含email地址的输入域，在提交表单时，自动验证email域的值
url 用于应该包含url地址的输入域在提交表单时，会自动验证url的域值
number 用于应该包含数值的输入域，可自定义数字限定
range 用于应该包含一定范围内数字值的输入域，类型显示为滑动条
dateTime 用于选取时间，日，月，年（为UTC时间）
date 用于选取日，月，年
month 用于选取月，年
week 用于选取周和年
time 用于选取时间（分钟和小时）
dateTime-local 用于选取时间，日，月，年（当地时间）

36. 对于web标准以及w3c有何理解与认识

于WEB而言：web标准简单来说可以分为结构、表现和行为。web标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰；

于W3C而言： W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范，如下：

结构上的要求：

  • 标签必须闭合、标签小写、不乱嵌套，可以提高搜索机器人对网页内容的搜索几率；

对于css和js来说：

  • 建议使用外链css和js脚本，从而达到结构与行为、结构与表现的分离，提高页面的渲染速度，能更快地显示页面的内容；
  • 样式与标签的分离，更合理的语义化标签，使内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件， 从而降低维护成本、改版更方便；
  • 不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性；

总之，遵循w3c制定的web标准，能够使用户浏览者更方便的阅读，使网页开发者之间更好的交流。

37. 新的HTML5文档类型和字符集是什么

  • HTML5文档类型：<!doctype html>
  • 字符集：HTML5使用的编码<meta charset=”UTF-8”>

38. 渐进增强和优雅降级之间的区别

渐进增强（progressive enhancement）：主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果，交互等方面的改进和追加功能，以达到更好的用户体验。

优雅降级 graceful degradation： 一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。

区别

  • 优雅降级是从复杂的现状开始的，并试图减少用户体验的供给；而渐进增强是从一个非常基础的，能够起作用的版本开始的，并在此基础上不断扩充，以适应未来环境的需要；
  • 降级（功能衰竭）意味着往回看，而渐进增强则意味着往前看，同时保证其根基处于安全地带。

39. 为什么利用多个域名来存储网站资源会更有效

  • CDN缓存更加方便；
  • 突破浏览器并发限制；
  • 节约cookie宽带；
  • 节约主域名的连接数，优化页面下响应速度；
  • 防止不必要的安全问题；

40. 自身对网页标准和标准制定机构重要性有何理解

小编个人觉得：网页标准和标准制定机构是让web更加规范，更加标准，健康的发展所必不可少的东西。

  • 于开发者而言： 开发者可以遵循统一的开发标准，大大降低了开发难度，开发成本，从而也提高了代码的可阅读性以及易于后期维护；
  • 于SEO而言： 对SEO更加友好，提升了搜索效率。

使用网页标准和标准制定机构，对于提高网站的易用性起着非常大的作用。

41. 哪些浏览器支持HTML5

几乎所有的高版本浏览器Safari，Chrome，Firefox，Opera，IE8以上都支持HTML5。

42. 为什么HTML5里面我们不需要DTD

HTML5没有使用SGML或者XHTML，HTML5是一个全新的东西，因此不需要参考DTD，对于HTML5，仅需放置下面的文档类型代码告诉浏览器识别这是HTML5文档就行。

43. .浏览器如何对HTML5的离线储存资源进行管理和加载

  • 有线情况下：

（1），浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据 manifest文件的内容下载相应的资源并且进行离线存储。

（2），如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后 浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。

  • 在离线情况下： 浏览器直接使用离线缓存的资源；

43. 页面可见性（Page Visibility）API 可以有哪些用途

在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放。

44. HTML5的form如何关闭自动完成功能

给不想要提示的input是设置autocomplete=off即可。

45. HTML中几种图片格式的区别以及使用

页面中常用的几种图片格式有: png, jpg(jpeg),gif, bmp等；

（1）Png格式的特征

特征： 图片背景透明，可以支持的颜色有很多。

使用范围: 比较广，在目前使用频率最高。

（2）jpg格式特征

特征： 图片不支持透明，静态图，支持的颜色也比较多，可压缩。

使用范围： 使用范围较广，可使用作为电脑做面壁纸，手机屏保等，可根据需求来确实使用图片的分辨率，

（3）gif格式特征

特征： 动态图，支持的颜色较少。

使用范围： 在目前看到的在网站内使用频率较低。

46. 处理兼容问题有两种方式

  • IE6/IE7/IE8支持通过document方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签；
  • 使用是html5shim框架 另外，DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构，功能元素来加以区分。
上一篇：Jmeter添加自定义请求头


下一篇：Discourse 图片上传的更新