一、实现思路

1. 键盘的生成
   ①通过JS的for循环生成一个一个的字母，而不是直接写在html中，这样会方便很多；
   ②字母、网址的图标（https:// + domain + /favicon.ico）、编辑按钮都是通过JS创建生成，再append到键盘的小格格中；
   ③最后通过CSS写样式整理它们的布局。
2. 存储问题
   ①存储问题就要用到localStorage这个对象，它是HTML5新加的特性，主要用来作为本地存储使用；要注意引用的类型！！！
   ②要存储到本地浏览器时：localStorage.setItem('key',JSON.stringify(value));
   ③要从本地储存中获取数据时：JSON.parse(localStorage.getItem(name) || 'null')
   编辑过网址后要重新存储一下当前数据；获取网址数据时也要检验一下本地是否存储过数据（当然，这个数据的名字要自己命名）

二、代码知识点

1. <kbd></kbd>
   ①<kbd></kbd>定义键盘文字，表示文本是从键盘上键入的，是行内元素。若要定义宽高，要用display: inline-block转化为行内块状元素。
   ② <kbd>定义的字母和<div>定义的字母的区别：
   

   image.png

2. text-transform: uppercase;把小写转换成大写；

3. background: linear-gradient(to bottom, #292929 0%,#111111 100%);背景渐变色；

4. 键盘点击事件
   document.onkeypress = function(e){}

5. textContent与innerHTML、innerText

//HTML
<ul id="myList">
  <li id="item1">Coffee</li>
  <li id="item2">Tea</li>
 </ul> 
//JS
var list = document.getElementById('myList')
console.log(list.textContent)
console.log(list.innerHTML)
console.log(list.innerText)

6. block,inline和inline-block
   ①block将元素显示为块级元素，从而可以更好地操控元素的宽高，以及内外边距，每一个块级元素都是从新的一行开始;
   ②inline将元素显示为行内元素，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以改变。多个相邻的行内元素排在同一行里，知道页面一行排列不下，才会换新的一行;
   ③inline-block将元素显示为行内块状元素，既有行内元素的特性，也有块状元素的特性；设置该属性后，其他的行内块级元素会排列在同一行。比如我们li元素一个inline-block，使其既有block的宽度高度特性，又有inline的同行特性，在同一行内有不同高度内容的元素时，通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。
7. alert(),confirm()和prompt()
   alert()--警告消息框；
   confirm()--确认消息框；
   prompt()--提示消息框，用户可写值；