总结收集HTML的一些关键知识点
DOCTYPE
在HTML中,文档类型声明是必要的。 所有的文档的头部,你都将会看到”DOCTYPE” 的身影。 这个声明的目的是防止浏览器在渲染文档时,切换到我们称为“怪异模式(兼容模式)”的渲染模式。 “DOCTYPE” 确保浏览器按照最佳的相关规范进行渲染,而不是使用一个不符合规范的渲染模式。
<!DOCTYPE html>
该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
该 DTD 等同于 HTML 4.01 Transitional,但允许框架集内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
该 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">
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 键用于导航时)。101 Switching Protocols
:100 Continue
:206 Partial Content
:205 Reset Content
:204 No Content
:203 Non-Authoritative Information
:202 Accepted
:201 Created
:200 OK
:307 Temporary Redirect
:305 Use Proxy
:304 Not Modified
:303 See Other
:302 Found
:301 Moved Permanently
:300 Multiple Choices
: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
: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
:Flash Of Unstyled Content
:无样式内容闪烁
用户定义样式表加载之前浏览器使用默认样式显示文档,用户样式加载渲染之后再从新显示文档,造成页面闪烁。
解决方法:只要在之间使用引入外部样式文件。
<iframe>
标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。
优点
缺点
优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。
弹性布局是指通过调整其内元素的宽高,从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间,或将其收缩来避免溢出。
块级元素(block)
width
)、高度(height
)、内边距(padding
)和外边距(margin
)都可控制;宽度缺省是它的容器的100%,除非设定一个宽度。<div>
<p>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<form>
<ul>
<ol>
<table>
<dl>
<canvas>
<footer>
<header>
<dd>
<section>
<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
<input> 、<img> 、<button> 、<textarea> 、<label>
<img>
标签的alt属性和title属性HTTP Cookie(也叫Web Cookie或浏览器Cookie)是服务器发送到用户浏览器并保存在本地的一小块数据,它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。 通常,它用于告知服务端两个请求是否来自同一浏览器,如保持用户的登录状态。Cookie使基于无状态的HTTP协议记录稳定的状态信息成为了可能。
Cookie主要用于以下三个方面:
网页存储使浏览器能以一种比使用Cookie更直观的方式存储键/值对。
Web Storage 包含如下两种存储机制:
sessionStorage
为每一个给定的源维持一个独立的存储区域,该存储区域在页面会话期间可用(即只要浏览器处于打开状态,包括页面重新加载和恢复)。localStorage
同样的功能,但是在浏览器关闭,然后重新打开后数据仍然存在。区别:
sessionStorage
不是一种持久化的本地存储,仅仅是会话级别的存储。localStorage
用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。src
是source的缩写。
href
是Hypertext Reference的缩写,即超文本引用。