前端基础知识-HTML
大约 6 分钟
前端基础知识-HTML
主要是前端开发的一些基础知识的整理,本部分着重在HTML和HTTP方向
关于HTML的编码相关知识，详见HTML详细教程
1.HTML与XHTML
HTML是超文本标记语言（Hyper Text Markup Language）,通过一系列标签统一网络文档格式
XHTML是可扩展超文本标记语言（eXtensible HyperText Markup Language），基于XML和HTML发展而来的新兴网络设计语言。
从书写习惯上来说，XHTML有更严格的要求，元素必须严格闭合、嵌套、区分大小写，文档必须拥有根元素 从功能上来说，XHTML可以更好地兼容各大浏览器，手机和PDA，浏览器也能更快地编译网页
2. HTML语义化是什么
根据内容的结构化来确定代码标签的语义化，不一定会影响最终结果，主要是影响代码书写。 主要目的是更好地明确HTML节点层次、嵌套关系，从而提高代码的可读性
对比如下
<!--语义化的HTML代码-->
<header>
<h1></h1>
</header>
<section></section>
<footer></footer>
<!--非语义化的-->
<div>
<span style="font-size:16px;font-weight:bold;"></span>
</div>
<div></div>
<div></div>
3.标签上的 title 与 alt 属性
alt属性的值是在浏览器未显示图像时的代替文本 title属性的值是注释，页面中将鼠标悬停至图片上时可以看到
4.优雅降级（Graceful Degradation）与渐进增强（Progressive Enhancement）
优雅降级：从针对高级浏览器设计逐渐向下兼容 渐进增强：从低级浏览器向上针对高级浏览器设计
5.HTTP的请求方法
- GET：发送一个请求来取得服务器上的某一资源
- POST：向URL指定的资源提交数据或附加新的数据
- PUT：跟POST方法很像，也是想服务器提交数据。但是，它们之间有不同。PUT指定了资源在服务器上的位置，而POST没有
- HEAD：只请求页面的首部
- DELETE：删除服务器上的某资源
- OPTIONS：它用于获取当前URL所支持的方法。如果请求成功，会有一个Allow的头包含类似“GET,POST”这样的信息
- TRACE：TRACE方法被用于激发一个远程的，应用层的请求消息回路
- CONNECT：把请求连接转换到透明的TCP/IP通道
6.HTTP状态码合集
临时响应（响应中）1xx
| 状态码 | 解释 |
|---|---|
| 100 | 客户必须继续发出请求 |
| 101 | 客户要求服务器根据请求转换HTTP协议版本 |
成功 2xx
| 状态码 | 解释 |
|---|---|
| 200 | 服务器成功返回网页 |
| 201 | （已创建）请求成功并且服务器创建了新的资源 |
| 202 | （已接受）服务器已接受请求，但尚未处理 |
| 203 | （非授权信息）返回信息不确定或不完整 |
| 204 | （无内容）请求收到，但返回信息为空 |
| 205 | （重置内容）服务器完成了请求，用户代理必须复位当前已经浏览过的文件 |
| 206 | （部分内容）服务器已经完成了部分用户的GET请求 |
重定向 3xx
| 状态码 | 解释 |
|---|---|
| 300 | 请求的资源可在多处得到 |
| 301 | （永久移动）请求的网页已永久移动到新位置 |
| 302 | 服务器目前从不同位置的网页响应请求 |
| 303 | 建议客户访问其他URL或访问方式 |
| 304 | 从上次请求后，请求的网页未修改过 |
| 305 | 请求者只能使用代理访问请求的网页 |
| 306 | 前一版本HTTP中使用的代码，现行版本中不再使用 |
| 307 | 服务器目前从不同位置的网页响应请求 |
请求错误 4xx
| 状态码 | 解释 |
|---|---|
| 400 | 错误请求 |
| 401 | 请求要求身份验证 |
| 402 | 在其他地址发现了请求数据 |
| 403 | 服务器拒绝请求(或跨域) |
| 404 | 服务器找不到请求的网页 |
| 405 | 禁用请求中指定的方法 |
| 406 | 无法使用请求的内容特性响应请求的网页 |
| 407 | 请求者应当使用代理 |
| 408 | 服务器等候请求时发生超时 |
| 409 | 服务器在完成请求时发生冲突 |
| 410 | 请求的资源已永久删除 |
| 411 | 不接受不含有效内容长度标头字段的请求 |
| 412 | 未满足请求者在请求中设置的其中一个前提条件 |
| 413 | 无法处理请求，因为请求实体过大 |
| 414 | 请求的 URI（通常为网址）过长 |
| 415 | 请求的格式不受请求页面的支持 |
| 416 | 页面无法提供请求的范围 |
| 417 | 未满足”期望”请求标头字段的要求 |
服务器错误 5xx
| 状态码 | 解释 |
|---|---|
| 500 | 服务器遇到错误，无法完成请求 |
| 501 | 服务器不具备完成请求的功能 |
| 502 | （错误网关）从上游服务器收到无效响应 |
| 503 | 服务器目前无法使用（由于超载或停机维护） |
| 504 | （网关超时）没有及时从上游服务器收到请求 |
| 505 | 服务器不支持请求中所用的 HTTP 协议版本 |
7.DOCTYPE (文档类型)的作用
告诉浏览器（解析器）解析文档使用的文档类型定义（HTML,XHTML），必须声明在HTML文档首行
8.script标签中defer和async的区别
决定了script脚本在网页中的加载顺序，如果没有defer或者async会在载入网页时立即加载
async属性，文档加载与js加载同时进行 defer属性，js脚本在最后执行
多个async属性无法保证实际执行顺序，多个defer属性会按照加载顺序执行
9.浏览器一次完整的HTTP事务
- 浏览器的地址栏输入URL并按下回车
- 浏览器查找当前URL是否存在缓存，并比较缓存是否过期
- DNS解析URL对应的IP
- 根据IP建立TCP连接（三次握手）
- HTTP发起请求
- 服务器处理请求，浏览器接收HTTP响应
- 渲染页面，构建DOM树
- 关闭TCP连接（四次挥手）
10.SSL协议和TLS协议
SSL(安全套接字层Secure Sockets Layer)协议是用于网络通信的加密协议。曾用于HTTPS，现已被TLS代替