html基础问题

作者: 5b5072cc2c5b | 来源:发表于2019-04-16 11:51 被阅读0次

1.<!DOCTYPE HTML>

必须位于html文档第一行，位于<html>标签之前

<!DOCTYPE HTML>作用：

声明文档的解析类型(document.compatMode),指示浏览器的layout引擎用那种方式来解析页面，只是用来选择mode，告诉浏览器dom用哪种词法解析。
document.compatMode：
BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

html4.01和html5声明的不同：

html4.01声明需要引用DTD，分为strict，transitional，frameset三种。
html5不是基于SMGL和XML的，所以可以用简短的声明（!DOCTYPE HTML）

不声明会怎么样

document.compatMode会被浏览器识别并使用，如果不声明的话，浏览器就会使用自己的怪异模式去解析渲染页面。

(1)元素在不同的文档类型中的使用情况不同。例如：<article> <aside><audio><canvas><datalist><header><footer>等在html5模式中可以使用，但是在html4的文档声明中不可使用。
具体的可参考http://www.w3school.com.cn/tags/html_ref_dtd.asp
(2) BackCompat模式下margin: 0 auto 问题。例如：ie在BackCompact模式下，margin: 0 auto不起作用，元素还是居左，不能居中。
(3) BackCompat模式下table的font属性继承问题,white-space:pre会失效，设置图片的padding会失效。例如：在body中设置了body{font-size:30px;}；在ie中，font-size是不会对table起作用的。
(4)BackCompat模式下行内元素可以设置宽高，行为类似display:inline-block;ie，firefox，chrome表现一致。
(5)BackCompat模式下可以设置百分比高度。在standard模式下，元素的高度默认是由包含的内容来决定的，如果父元素没有设置高度，给子元素设置百分比高度是没有作用的。但是在BackCompat模式下，父元素没有高度，或者元素没有内容的时候，都是可以设置百分比高度的。ie，firefox，chrome表现一致。
(6) 元素的宽高不同。在BackCompat模式下，width则是元素的实际宽度，内容宽度 = width - ( padding-left + padding-right + border-left-width + border-right-width)；在严格模式中：width是内容宽度，元素真正的宽度 = border-left-width + padding-left + width + padding-right + border-right-width。

2.html5新特性：

HTML5一共包含了10个大类别，它们是：

离线(offline)
Application cache, localStorage, indexedDB,在线/离线事件
存储(storage)
Application cache, localStorage,sessionStorage,indexedDB等
连接(connectivity)
Web Stockets, Sever-sent事件
文件访问(file access)
File API, File System, FileWriter, ProgressEvents
语义(semantics)
各种新的元素，包括Media, structural, 国际化, Link relation, 属性, form类型, microdata 等
音频和视频(audio/video)
HTML5 Video, Web Audio, WebRTC, Video track等
3D和图形(3D/graphics)
Canvas2D, 3D CSS变换, WebGl, SVG等
展示(persentation)
css3 2D/3D变换，转换，WebFonts等。
性能(performance)
Web Wroker, HTTP caching等
其他(Nuts and bolts)
触控和鼠标, Shadow DOM, CSS masking等

3.列举html5新的标签

<header><footer><nav><aside><section><article><audio><video><embed><figure><figcaption><time><summary><canvas><meter><output><progress><track><rt><rp><ruby>
新的input类型:
email, url, number, range, datepicker(date,month,week,time,date-time,datetime-local,search,color)
废弃的标签:
applet, basefont, big, center, u, noframe, frame, frameset, tt, strike, font, dir

4.离线缓存

application cache：通过创建cache manifest文件，创建web应用离线版本
好处：

离线浏览：用户可在离线时加载他们
速度：已缓存资源的加载速度会很快
减少服务器负载：浏览器只从服务器下载更新过或者更改过的文件

manifest文件告诉浏览器要缓存的内容，文件分为三个部分：

cache manifest:首次下载后进行缓存的文件列表
network:需要与服务器建立连接，且不会被缓存的文件列表
fallback:当页面无法访问时的回退页面列表(比如：404)；

更新缓存：
一旦应用被缓存，它就会保持缓存直到发生下列情况：

用户清空浏览器缓存
manifest文件被修改
由程序来更新应用缓存

使用：
配置html的manifest属性
manifest文件需要配置正确的MIME-type，即text/cache-manifest。必须在web服务器上进行配置

<!doctype html>
<html manifest="test.appcache">
</html>

浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
(1) 在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据 manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
(2)离线的情况下，浏览器就直接使用离线存储的资源。

5.cookie,localStorage,sessionStorage之间的区别

ps: 对于一些大型的，结构化的数据，可以用indexedDB存储。
同：都保存在客户端。
异：

数据的生命期不同：cookie一般由服务器生成，可以设置失效时间，如果是在浏览器生成的，默认是关闭浏览器之后失效；localStorage永久有效，除非清除；sessionStorage浏览器关闭之后失效。
存储大小不同：cookie一般是4kb大小，localStorage和sessionStorage会比cookie大很多，一般为5MB。
是否与服务器端通信：cookie会携带在http请求头部，在浏览器和服务器之间传递，在cookie中存放大量的数据会影响性能，常用的场景为判断用户是否登录；localStorage和sessionStorage不会与服务器通信
作用域不同：localStorage和cookie在所有同源窗口中共享(协议，端口，域名相同)。sessionStorage不能在不同的页面或者标签中共享。需要注意的是，页面及标签页仅仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。（也就是说如果关闭标签页后，通过sessionStorage存储的数据就都被删除了。sessionStorage的作用域不仅被限制在文档源，还被限定在窗口中，也就是同一标签页中。注意，这里说的窗口是指顶级窗口，若果同一标签页中包含多个<iframe>元素，这两者之间也是可以共享sessionStorage的。）

6.lable和input的关系

<label>标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上

label的for属性和input的id绑定

<form>
  <label for="male">male</label>
  <input type="radio" id="male" name="sex" />
  <br>
  <label for="female">female</label>
  <input type="radio" id="female" name="sex" />
</form>

<label>包裹<input>标签，点击<label>，<label>响应两次，即<label>本身出发和<input>触发后冒泡到<label>。

<body>
  <label for="input">
    <input id="input" type="text" /> 
  </label>
  <script>
    var label = document.getElementByTagName("label")[0];
    var input = document.getElementById("input");
    label.addEventListener("click",function(){
      console.log("label");
    },false);
    input.addEventListener("click",function(){
      console.log("input");
    },false)
  </script>
</body>
//output: label  input label

7.标签语义化的理解

语义化：根据内容的结构化，选择合适的标签便于开发者阅读和写出优雅的代码的同时让浏览器的爬虫和机器很好的解析。用正确的标签做正确的事情。
好处：
- 在没有css的情况下，能够呈现出清晰的内容结构和代码结构。
- 好的用户体验：例如title，alt用于解释名词或解释图片信息、label标签的活用。
- 有利于SEO：和搜索引擎建立良好的沟通，有助于爬虫抓取更多的有效信息。爬虫依赖标签确定上下文和各个标签的权重。
- 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
- 便于团队的开发与维护：语义化更具可读性，如果都遵循这个标准，可以减少差异化。
应该注意的事项：
- 尽可能少的使用无语义的标签div和span；
- 在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
- 不要使用纯样式标签，如：b、font、u等，改用css设置。
  需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
- 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
- 表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
- 每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

8.meta标签的作用

概念：定义页面的元信息，比如针对搜索引擎和更新频度的描述和关键字。

属性用法具体可参考：https://www.deanhan.cn/html-meta.html

属性：
- content：必选，定义与http-equiv或者name相关的元信息。
- http-equiv: 可选，把content属性关联到http头部。
  值：content-type, expires, refresh, set-cookie, charset, pragma, windows-target, page-enter，page-exit。
- name: 可选，把content属性关联到一个名称。
  值：author， description，keywords，generator，revised，others
作用：meta标签里的数据是供机器解读的，其主要作用有：
- 搜索引擎优化（SEO）
- 定义页面使用语言
- 自动刷新并指向新的页面
- 实现网页转换时的动态效果
- 控制页面缓存
- 网页定级评价
- 控制网页显示的窗口等等

9.HTML5 标准提供的新的 API

Media API
Text Track API
Application Cache API
User Interaction
Data Transfer API
Command API
Constraint Validation API
History API

10.如何对网站的文件和资源进行优化

文件合并（目的是减少http请求）
文件压缩（目的是直接减少文件下载的体积）
使用cdn托管资源
使用缓存
gzip压缩你的js和css文件
meta标签优化（title,description,keywords）,heading标签的优化,alt优化
反向链接，网站外链接优化。

11. 为什么利用多个域名来提供网站资源会更有效？

突破浏览器的并发限制（浏览器同一域名最大的并发请求数量为6个，ie6为2个）
节约cookie带宽
CDN缓存更方便
防止不必要的安全问题（尤其是cookie的隔离尤为重要）
节约主机域名连接数，优化页面响应速度

参考：https://www.cnblogs.com/libin-1/p/6525128.html