Html 小结

小鱼儿 2022-11-14 13:28 259阅读 0赞

**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. 标签上title属性与alt属性的区别是什么**

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

**10. 如何理解语义化标签**

概念

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

语义化的好处

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

**11. 文档声明（Doctype）和<!Doctype 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的缩写，`指向网络资源所在位置`，`建立和当前元素（锚点）或当前文档（链接）之间的链接`。

**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元素例外)`

**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`优化；

**28. Html5中本地存储概念是什么，有什么优点，与cookie有什么区别？**  
HTML5的Web storage的存储方式有两种：`sessionStorage`和`localStorage`。

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应`与设备无关`；  
`开发过程必须可视化`；

**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中新的输入类型属性**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70]  
**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宽带；
 *  节约主域名的连接数，优化页面下响应速度；
 *  防止不必要的安全问题；

**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. 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标志的一个重要因素，此外，还可以根据新增的结构，功能元素来加以区分。

参考：[https://juejin.cn/post/6844904180943945742\#heading-55][https_juejin.cn_post_6844904180943945742_heading-55]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70]: /images/20221022/fe2faedc776044d5aa7072685cda0d96.png
[https_juejin.cn_post_6844904180943945742_heading-55]: https://juejin.cn/post/6844904180943945742#heading-55