-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
小职
2020-08-12
来源 ：
阅读 937
评论 0
摘要：本篇文章总结了HTML知识点，希望阅读本篇文章以后对大家有所收获，也能帮助大家对HTML的理解更加深入。
随着技术的逐渐提升，对于一些底层的概念性的知识点却有些遗忘。有时候知道是这么个意思，但是表述出来的时候也没能完整的说到点子上。
以下就是HTML常见的问题知识点整理，用于整理以及巩固基础，快来查收。
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" "
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//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. 标签上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文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
在离线情况下：浏览器直接使用离线缓存的资源；
44. 页面可见性（Page Visibility）API 可以有哪些用途
在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放。
45. HTML5的form如何关闭自动完成功能
给不想要提示的input是设置autocomplete=off即可。
46. HTML中几种图片格式的区别以及使用
页面中常用的几种图片格式有: png, jpg(jpeg),gif, bmp等；
（1）、Png格式的特征
特征：图片背景透明，可以支持的颜色有很多。
使用范围: 比较广，在目前使用频率最高。
（2）、jpg格式特征
特征：图片不支持透明，静态图，支持的颜色也比较多，可压缩。
使用范围：使用范围较广，可使用作为电脑做面壁纸，手机屏保等，可根据需求来确实使用图片的分辨率，
（3）、gif格式特征
特征：动态图，支持的颜色较少。
使用范围：在目前看到的在网站内使用频率较低。
47. 处理兼容问题有两种方式
IE6/IE7/IE8支持通过document方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签；
使用是html5shim框架 另外，DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构，功能元素来加以区分。
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
