项目1：前端导航网站源码地址： https://github.com/atlfsj/nov-1 做好一个项目：1.定一个

做好一个项目：1.定一个目标逐步完成 2.做出看不出bug的就行

禁止双指放大的meta：抄现成网站的（换成手机页面点刷新）

css中的层级关系可以跳级，只要是层级嵌套就行
body{backgroundcolor: red}会自动渲染整个页面
少用一点height，大部分用flex布局解决
当css加了border-radius时样式很怪，是因为body有默认的border，要覆盖掉
一般情况下块级元素不放入内联元素里。但(内联)特殊，他允许

实现搜索：form表单功能，构造请求。

但加了form后css会失效，因此要给form加class再调试
indexOf()函数 //查找字串中指定字符或字串首次出现的位置,返首索引值

创建站点：jquery操作

引入BootCDN中的jquery的min.js的script标签
console.log(jQuery)判断是否引入成功

跳转链接后回到导航页面，储存之前创建的站点：hashMap，localStorage

此时你会发现，hashMap直接生成了logo和url，就没必要在html里写了，直接遍历生成对应的li即可

const hashMap = [
    { logo:'A', logoType:'text', url:'https://www.acfun.cn'},
    { logo:'B', logoType:'text', url:'https://www.bilibili.com'},
]
hashMap.forEach(node=>{
    const $li = $(`<li>
        <a href="${node.url}">
            <div class="site">
                <div class="logo">${node.logo[0]}</div>
                <div class="link">${node.url}</div>
            </div>
        </a>
    </li>`).insertBefore($lastLi) 
})

此时你会发现，addButton里的li也不需要了，每次点击新增网站只需要重新渲染hashMap即可

hashMap.push({
            logo: url[0],
            logoType: 'text',
            url: url
        })

因为AB站点已经添加过了，因此再渲染hashMap会又出现AB，需要remove()掉第一次的再渲染

$siteList.find('li:not(.last)').remove()

然后你又发现了，forEach用一个函数封装起来调用就行
当用户要关闭页面时，需要用 window.onbeforeunload 获取。为了能看到是否获取到，要打开preserve log；查看localStorage，在Application里。

console.log('页面要关闭了)
const string = JSON.stringify(hashMap)      //对象变成字符串
console.log(typeof hashMap)     //object
console.log(hashMap)            //(2)[{..},{..}]
console.log(typeof string)      //string
console.log(string)   
localStorage.setItem('x',string)    //在本地存储里面设置一个key=x，value=string

再往后就捏妈的真难懂，艹

const x = localStorage.getItem('x')         //从onbeforeunload尝试读取了一个（类型string的）x
const xObject = JSON.parse(x)               //字符串变对象
const hashMap = xObject || [                //如果有object，就渲染；没有就渲染AB
    { logo:'A', logoType:'text', url:'https://www.acfun.cn'},
    { logo:'B', logoType:'text', url:'https://www.bilibili.com'}
]

这三行啥意思？
就是有了localhostStorage（x开始为空）了，hashMap这时候的值就不只是AB了，而是localhostStorage中的x不为空的时候就用x，没有就用AB

让localstorage储存的数据消失：

隐私设置-清除cookie即可
无痕浏览

点击关闭按扭会触发站点跳转：阻止冒泡 stopPropagation

这时候你会发现，a标签的存在无法阻止冒泡，所以去掉a标签用js代替

<a href="${node.url}"><div class="site"><div class="logo">${node.logo}</div><div class="link">${simplifyUrl(node.url)}</div></div></a>

去掉a，添加

$li.on('click',()=>{
    window.open(node.url)
})

PC端页面大小：媒体查询@media

做pc后要注意可能会影响到手机样式，所以要及时检查，用媒体查询修改 justify-content :flex-start

监听键盘事件：document比较好用

新的知识点:

搜索页面跳转：form表单
新增网站的样式：jquery操作获取新增的站点，填入初始站点结构的新站点，插入‘新增站点’前面
多行字符串``
parcel会默认产生一个作用域，因此定义全局变量的时候要用window
const string = JSON.stringify(hashMap) //对象变成字符串
const xObject = JSON.parse(x) //字符串变对象
首字母去掉w/h：设置一个函数simplifyUrl,它不会改变原来的url 【mian.js第十行】
字符变大写:toUpperCase()---js ； text-transform:uppercase---css
三十分钟入门正则表达式：.replace(//.*/, '') // 删除 / 开头的内容
@media(){} //if()则{}

display :none      //图像消失
.site:hover > .close{display :block}    //鼠标悬浮图像显示
cursor：pointer    //鼠标变手型
cursor : default   //手型鼠标到图像变回默认