前端之 HTML 知识点扫盲

最新推荐文章于 2024-11-14 00:06:12 发布

原创最新推荐文章于 2024-11-14 00:06:12 发布 · 613 阅读

CC 4.0 BY-SA版权

本文总结了HTML的关键知识点，包括文档类型声明、全局属性、HTTP状态码、FOUC、iframe优缺点、渐进增强与优雅降级、弹性盒模型等，还介绍了Cookie与Web Storage的区别、属性src与href的区别等内容，有助于学习和掌握HTML相关知识。

点击上方蓝色字体关注我吧

一起学习，一起进步，做积极的人！

前言

总结收集HTML的一些关键知识点

什么是 `DOCTYPE`

在HTML中，文档类型声明是必要的。
所有的文档的头部，你都将会看到”DOCTYPE” 的身影。
这个声明的目的是防止浏览器在渲染文档时，切换到我们称为“怪异模式(兼容模式)”的渲染模式。
“DOCTYPE” 确保浏览器按照最佳的相关规范进行渲染，而不是使用一个不符合规范的渲染模式。

HTML5

<!DOCTYPE html>

HTML 4.01 Strict

该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

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

HTML 4.01 Transitional

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

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

HTML 4.01 Frameset

该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。

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

XHTML 1.0 Strict

该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。

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

HTML全局属性都有哪些

accesskey:设置元素访问快捷键
class:一个以空格分隔的元素的类名列表，css和JavaScript可通过此属性获取元素
contenteditable:表示元素是否可被用户编辑。
- true或者空字符串，表明元素是可被编辑的；
- false，表明元素不能被编辑。
data-*:自定义数据属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力。
dir:指示元素中文本方向。
- ltr, 指从左到右，用于那种从左向右书写的语言（比如英语）；
- rtl, 指从右到左，用于那种从右向左书写的语言（比如阿拉伯语）；
- auto, 指由用户代理决定方向。
draggable:设置元素是否可拖拽。
- true, 这表明元素可能被拖动；
- false, 这表明元素可能不会被拖动。
hidden:规定元素仍未或不再相关。样式上会导致元素不显示，但是不能用这个属性实现样式效果。
id:定义唯一标识符，该标识符在整个文档中必须是唯一的。
lang:设置元素内容的的语言
style:行内css样式，建议在单独的文件中定义样式。
title:元素相关建议信息的文本。这些信息通常可以作为提示呈现给用户，但不是必须的。
tabindex:设置元素的 tab 键控制次序（当 tab 键用于导航时）。

HTTP状态码

1XX：信息状态码
客户端应当继续发送请求。
这个临时相应是用来通知客户端它的部分请求已经被服务器接收，且仍未被拒绝。
客户端应当继续发送请求的剩余部分，或者如果请求已经完成，忽略这个响应。
服务器必须在请求万仇向客户端发送一个最终响应。
服务器已经理解了客户端的请求，并将通过Upgrade消息头通知客户端采用不同的协议来完成这个请求。
在发送完这个响应最后的空行后，服务器将会切换到Upgrade消息头中定义的那些协议。
- 101 Switching Protocols：
- 100 Continue：
2XX：成功状态码
请求成功，请求所希望的响应头或数据体将随此响应返回
代表成功的应答状态码，表示请求已经被成功处理，并且创建了新的资源。
新的资源在应答返回之前已经被创建。同时新增的资源会在应答消息体中返回，其地址或者是原始请求的路径，或者是 Location 首部的值。
这个状态码的常规使用场景是作为 POST 请求的返回值。
表示服务器端已经收到请求消息，但是尚未进行处理。
但是对于请求的处理确实无保证的，即稍后无法通过 HTTP 协议给客户端发送一个异步请求来告知其请求的处理结果。
这个状态码被设计用来将请求交由另外一个进程或者服务器来进行处理，或者是对请求进行批处理的情形。
表示请求已经成功被响应，但是获得的负载与源头服务器的状态码为 200 (OK)的响应相比，经过了拥有转换功能的 proxy （代理服务器）的修改。
表示目前请求成功，但客户端不需要更新其现有页面。204 响应默认是可以被缓存的。在响应中需要包含头信息 ETag。
通知客户端重置文档视图，比如清空表单内容、重置 canvas 状态或者刷新用户界面。
表示请求已成功，并且主体包含所请求的数据区间，该数据区间是在请求的 Range 首部指定的。
- 206 Partial Content：
- 205 Reset Content：
- 204 No Content：
- 203 Non-Authoritative Information：
- 202 Accepted：
- 201 Created：
- 200 OK：
3XX：重定向
表示该请求拥有多种可能的响应。用户代理或者用户自身应该从中选择一个。
由于没有如何进行选择的标准方法，这个状态码极少使用。
永久重定向说明请求的资源已经被移动到了由 Location 头部指定的url上，是固定的不会再改变。搜索引擎会根据该响应修正。
表明请求的资源被暂时的移动到了由Location 头部指定的 URL 上。浏览器会重定向到这个URL，但是搜索引擎不会对该资源的链接进行更新。
通常作为 PUT 或 POST 操作的返回结果，它表示重定向链接指向的不是新上传的资源，而是另外一个页面，比如消息确认页面或上传进度页面。
说明无需再次传输请求的内容，也就是说可以使用缓存的内容。
被请求的资源必须通过指定的代理才能被访问。
临时重定向是表示重定向的响应状态码，说明请求的资源暂时地被移动到 Location 首部所指向的 URL 上。
- 307 Temporary Redirect：
- 305 Use Proxy：
- 304 Not Modified：
- 303 See Other：
- 302 Found：
- 301 Moved Permanently：
- 300 Multiple Choices：
4XX：客户端错误
表示由于语法无效，服务器无法理解该请求。
由于缺乏目标资源要求的身份验证凭证，发送的请求未得到满足。在该情况下，依然可以进行身份验证。
服务器端有能力处理该请求，但是拒绝授权访问。该访问是永久禁止的，并且与应用逻辑密切相关（例如不正确的密码）。
服务器端无法找到所请求的资源。
返回该响应的链接通常称为坏链（broken link）或死链（dead link），它们会导向链接出错处理页面。
404 状态码并不能说明请求的资源是临时还是永久丢失。如果服务器知道该资源是永久丢失，那么应该返回 410 (Gone) 而不是 404 。
表明服务器禁止了使用当前 HTTP 方法的请求。
表示客户端错误，指代服务器端无法提供与Accept-Charset以及Accept-Language消息头指定的值相匹配的响应。
由于缺乏位于浏览器与可以访问所请求资源的服务器之间的代理服务器（proxy server）要求的身份验证凭证，发送的请求尚未得到满足。
服务器想要将没有在使用的连接关闭。一些服务器会在空闲连接上发送此信息，即便是在客户端没有发送任何请求的情况下。
服务器应该在此类响应中将 Connection 首部的值设置为 “close”，因为408意味着服务器已经决定将连接关闭，而不是继续等待
表示请求与服务器端目标资源的当前状态相冲突。
丢失说明请求的内容在服务器上不存在了，同时是永久性的丢失。
表示由于缺少确定的Content-Length 首部字段，服务器拒绝客户端的请求。
先决条件失败）表示客户端错误，意味着对于目标资源的访问请求被拒绝。
这通常发生于采用除 GET 和 HEAD 之外的方法进行条件请求时，由首部字段If-Unmodified-Since或If-None-Match规定的先决条件不成立的情况下。
表示请求主体的大小超过了服务器愿意或有能力处理的限度，服务器可能会关闭连接以防止客户端继续发送该请求。
表示客户端所请求的 URI 超过了服务器允许的范围。
表示服务器由于不支持其有效载荷的格式，从而拒绝接受客户端的请求。
意味着服务器无法处理所请求的数据区间。
最常见的情况是所请求的数据区间不在文件范围之内，也就是说，Range 首部的值，虽然从语法上来说是没问题的，但是从语义上来说却没有意义。
意味着服务器无法满足 Expect 请求消息头中的期望条件。
- 417 Expectation Failed:
- 416 Requested Range Not Satisfiable:
- 415 Unsupported Media Type:
- 414 Request-URI Too Long:
- 413 Request Entity Too Large:
- 412 Precondition Failed:
- 411 Length Required:
- 410 Gone:
- 409 Conflict:
- 408 Request Timeout:
- 407 Proxy Authentication Required:
- 406 Not Acceptable:
- 405 Method Not Allowed:
- 404 Not Found:
- 403 Forbidden:
- 401 Unauthorized:
- 400 Bad Request:
5XX: 服务器错误
表示服务器端错误的响应状态码，意味着所请求的服务器遇到意外的情况并阻止其执行请求。
这个错误代码是一个通用的“全方位”响应代码。通常服务器管理员对于类似于 500 这样的错误会更加详细地记录相关的请求信息来防止以后同样错误的出现。
表示请求的方法不被服务器支持，因此无法被处理。服务器必须支持的方法（即不会返回这个状态码的方法）只有 GET 和 HEAD。
表示作为网关或代理角色的服务器，从上游服务器（如tomcat、php-fpm）中接收到的响应是无效的。
网关在计算机网络体系中可以指代不同的设备，502 错误通常不是客户端能够修复的，而是需要由途径的Web服务器或者代理服务器对其进行修复。
表示服务器尚未处于可以接受请求的状态。
通常造成这种情况的原因是由于服务器停机维护或者已超载。注意在发送该响应的时候，应该同时发送一个对用户友好的页面来解释问题发生的原因。
该种响应应该用于临时状况下，与之同时，在可行的情况下，应该在 Retry-After 首部字段中包含服务恢复的预期时间。
表示扮演网关或者代理的服务器无法在规定的时间内获得想要的响应。
表示服务器不支持请求所使用的 HTTP 版本。
表示客户端需要通过验证才能使用该网络。
该状态码不是由源头服务器生成的，而是由控制网络访问的拦截代理服务器生成的。
网络运营商们有时候会在准许使用网络之前要求用户进行身份验证、接受某些条款，或者进行其他形式的与用户之间的互动（例如在网络咖啡厅或者机场）。
他们通常用用户设备的 MAC 地址来进行识别。
- 511 Network Authentication Required:
- 505 HTTP Version Not Supported:
- 504 Gateway Timeout:
- 503 Service Unavailable:
- 502 Bad Gateway:
- 501 Not Implemented:
- 500 Internal Server Error:

什么是 FOUC

Flash Of Unstyled Content:无样式内容闪烁

用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再从新显示文档，造成页面闪烁。

解决方法：只要在之间使用引入外部样式文件。

iframe的优缺点

<iframe>标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

优点

iframe能够原封不动地把嵌入的网页展现出来。
如果有多个网页调用iframe，只需要修改iframe的内容，就可以实现对调用iframe的每一个页面内容的更改，方便快捷。
增加代码的可重用性。
遇到加载缓慢的第三方内容，如图标和广告等，可以用iframe来解决。

缺点

产生很多页面，不容易管理。
在几个框架中都出现上下、左右滚动条时，这些滚动条除了会挤占已经非常有限的页面空间外，还会分散访问者的注意力
必须保证正确设置所有的导航链接，否则会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内，导致链接死循环。
兼容性差
增加服务器的http请求，对于大型网站是不可取的。
由于诸多的缺点，不符合标准网页设计的理念，已经被抛弃，目前的HTML5不再支持此标签。

iframe的创建比其它包括scripts和css的 DOM 元素的创建慢了 1-2 个数量级。
window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发。
当 onload 事件加载延迟后，它给用户的感觉就是这个网页非常慢。
在 Safari 和 Chrome 里，通过 JavaScript 动态设置 iframe 的 SRC 可以避免这种阻塞情况。
比较老的浏览器只能开少量的连接到web服务器，有人可能希望 iframe 会有自己独立的连接池，但不是这样的。
绝大部分浏览器，主页面和其中的 iframe 是共享这些连接的。
这意味着 iframe 在加载资源时可能用光了所有的可用连接，从而阻塞了主页面资源的加载。
如果 iframe 中的内容比主页面的内容更重要，这当然是很好的。但通常情况下，iframe 里的内容是没有主页面的内容重要的。
这时 iframe 中用光了可用的连接就是不值得的了。一种解决办法是，在主页面上重要的元素加载完毕后，再动态设置 iframe 的 SRC。

渐进增强&优雅降级

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

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

弹性盒模型

弹性布局是指通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间，或将其收缩来避免溢出。

块级元素&内联元素&inline-block

块级元素（block）

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示；
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制；宽度缺省是它的容器的100%，除非设定一个宽度。

<div>
<p>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<form>
<ul>
<ol>
<table>
<dl>
<canvas> 
<footer> 
<header> 
<dd>
<p> 
<fieldset>
<figcaption> 
<figure> 
<hr>
<noscript>
<output> 
<pre>
<tfoot>
<video> 
<address>
<article> 
<aside> 
<audio> 
<blockquote>

内联元素(inline)

和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom/padding-top/padding-bottom
和外边距的top/bottom/margin-top/margin-bottom都不可改变；
高，行高及顶和底边距不可改变；就是里面文字或图片的大小。（也就是padding和margin的left和right是可以设置的）

b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea

inline-block

应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置元素的宽度和高度属性
设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。
在IE8+，FF和Chrome的浏览器，inline-block可以完美的兼容

<input> 、<img> 、<button> 、<textarea> 、<label>

HTML结构的语义化

`<img>`标签的alt属性和title属性

alt(alt text):规定在图像无法显示时的替代文本。
title(tool tip):为设置该属性的元素提供建议性的信息。

什么是Cookie

HTTP Cookie（也叫Web Cookie或浏览器Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。
通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。Cookie使基于无状态的HTTP协议记录稳定的状态信息成为了可能。

Cookie主要用于以下三个方面：

会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）
个性化设置（如用户自定义设置、主题等）
浏览器行为跟踪（如跟踪分析用户行为等）

什么是Web Storage

网页存储使浏览器能以一种比使用Cookie更直观的方式存储键/值对。

Web Storage 包含如下两种存储机制：

sessionStorage为每一个给定的源维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。
localStorage同样的功能，但是在浏览器关闭，然后重新打开后数据仍然存在。

区别：

sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

Cookie与Web Storage的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。
但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生。

属性src与href的区别

src是source的缩写。

它指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；
在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

href是Hypertext Reference的缩写，即超文本引用。