参考链接：https://www.cnblogs.com/king18181753985/p/6510756.html
DOCTYPE是document type (文档类型) 的缩写。 < !DOCTYPE > 声明位于文档的最前面，处于标签之前，它不是html标签。主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。
严格模式和混杂模式都是浏览器的呈现模式，浏览器究竟使用混杂模式还是严格模式呈现页面与网页中的DTD（文件类型定义）有关，DTD里面包含了文档的规则。比如：loose.dtd
HTML5不基于 SGML （标准通用标记语言），因此不需要对DTD（ DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。）进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
<a>、<abbr>、<acronym>、<b>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、<em>、<i>、<img>、<input>、<kbd>、<label>、<q>、<samp>、<select>、<small>、<span>、<strong>、<sub>、<sup>、<textarea>、<tt>、<var>
<address>、<caption>、<dd>、<div>、<dl>、<dt>、<fieldset>、<form>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<hr>、<legend>、<li>、<noframes>、<noscript>、<ol>、<ul>、<p>、<pre>、<table>、<tbody>、<td>、<tfoot>、<th>、<thead>、<tr>
常见的：<br> <hr> <img> <input> <link> <meta>
鲜为人知的：<area> <base> <col> <command> <embed> <link> <meta><keygen> <param> <source> <track> <wbr>
主要分成两部分：渲染引擎(layout engineer或 Rendering Engine) 和 JS 引擎。
渲染引擎：用于获取html、css和图片,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
JS引擎：解析和执行 javascript 来实现网页的动态效果。
HTML5 现在已经不是SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->在结构语义上不同：
HTML：没有体现结构语义化的标签，通常都是这样来命名的<div id="header"></div>，这样表示网站的头部。
HTML5：在语义上却有很大的优势。提供了一些新的标签，比如：<header><article><footer>
用正确的标签做正确的事情:使用：
1.页面头部像下面一样加入一个manifest的属性
html <html manifest = "cache.manifest">
2.在cache.manifest文件的编写离线存储的资源
```html
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
```
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
在线的情况下，浏览器发现Html头部有manifest属性，它会请求manifest文件。
如果是第一次访问APP，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。
如果已经访问过APP并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面。然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。
存储大小
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。有效时间
sessionStorage和localStorage：虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
sessionStorage：数据在当前浏览器窗口关闭后自动删除。
cookie：设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭数据与服务器之间的交互方式
cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。<label for="Name">Number:</label> <input type=“text“name="Name" id="Name"/>
或者
<label>Date:<input type="text" name="B" /></label>给不想要的提示信息标签里设置：autocomplete为"on"或者"off"来开启或者关闭自动完成功能
<!--在一个标签页里面使用 localStorage.setItem(key,value)添加（修改、删除）内容；-->
<input id="name">
<input type="button" id="btn" value="提交">
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
var name=$("#name").val();
localStorage.setItem("name", name);
});
});
</script>
<!--在另一个标签页里面监听 storage 事件。
即可得到 localstorge 存储的值，实现不同标签页之间的通信。-->
<script type="text/javascript">
$(function(){
window.addEventListener("storage", function(event){
console.log(event.key + "=" + event.newValue);
});
});
</script>
将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。
页面1：
将：
localStorage.setItem("name", name);
改为：
document.cookie="name="+name; 页面2：
<script type="text/javascript">
$(function(){
function getCookie(key) {
return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key];
}
setInterval(function(){
console.log("name=" + getCookie("name"));
}, 10000);
});
</script>
原文链接：https://blog.csdn.net/meijory/article/details/76358570
<img src="task6.jpg" width="1366" height="768" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="circle" coords="100,100,50" href="https://www.baidu.com" target="_blank" />
</map> <style>
.disc{
width:100px;
height:100px;
background-color:dimgray;
border-radius: 50%;
cursor: pointer;
position: absolute;
left:50px;
top:50px;
line-height: 100px;
text-align: center;
color: white;
}
</style>
<div class="disc">点击区域</div> <script>
document.onclick = function(e){
var r = 50; //圆的半径
var x1 = 100, y1 = 100;
var x2 = e.clientX,
y2 = e.clientY;
var len=Math.abs(Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)));
if(len<=50){
console.log("Inner");
}else{
console.log("Outer");
}
}
</script>参考链接：https://www.cnblogs.com/guorange/p/7155164.html
<div style="height:1px;overflow:hidden;background:red"></div><strong>会重读，而<B>是展示强调内容。原文：https://www.cnblogs.com/hefeifei/p/11671472.html