项目简介

使用CSS 、HTML、JavaScript、jQuery技术实现一个导航网站，能够进行搜索、保存网址、快速查询等操作。
相关功能
- 网页可适应pc端和移动端
- 可在搜索栏进行内容搜索
- 可以添加并保存网址
- 对已保存的网址，可通过直接点击其首字母即可完成跳转
效果展示：前航-导航网站 (coolkechang.github.io)
代码链接：github.com/coolkechang…

使用技术

HTML
- form标签、input标签、button标签、ul标签、li标签、div标签、link标签、script标签
CSS
- 相关网站/工具
  - figma：向量图型编辑软件，可在线进行UI界面的设计
  - iconfont：阿里巴巴矢量图标库
  - BootCDN：Bootstrap中文网支持并维护的开源项目免费 CDN 服务
- 相关技术
  - flex布局
  - css reset
  - 媒体查询
  - css 定位
JS
- jQuery
- hashMap
- 正则表达式
- 事件监听
- 阻止冒泡
parcel

一个打包JavaScript应用程序的工具

终端安装 parcel

yarn global add parcel

使用 parcel

parcel src/index.html                                    //在浏览器显示代码效果（实时修改，刷新就可实时显示页面变化）
rm -rf dist                                              //清空 dist 文件夹
parcel build src/index.html --no-minify                  //Parcel 提供了一个额外的命令来生成适合发布的文件，使用 build 生成一个捆绑包
parcel build --help                                      //查看 parcel 中 build 的相关命令
parcel build src/index.html --no-minify --public-url ./  //修改html中的默认路径（默认是直接 / 开头）

Git 命令

创建本地仓库

git init              //生成本地仓库
git add .             //添加当前文件
git commit -v         //提交 并详细说明说明提交理由

上到到远程仓库（GitHub）

（这里使用 ssh 上传）
在 GitHub 上新建一个项目
选择 ssh 方式上传
分别复制三个代码到终端
刷新 GitHub 页面并在 settings >> pages 中加入浏览链接

笔记

HTML

HTML代码中只有一个 header 和 main 。为什么也要加 class ？

养成良好习惯，防止当代码标签多次出现时造成错误引用等问题

a标签的特别之处

一般来说内联元素里面不能放块级元素，但是a标签可以（a是内联元素，div是块级元素)

<a>
  <div>hello</div>
</a>

在 HTML 中引用 CSS 、JS

用 link 将 CSS 放入 head 里，如： <link rel="stylesheet" href="style.css">
用 script 将 JS 放在 body 的最后，如：<script src="main.js"></script>

CSS

css reset

用于消除CSS默认设置，一般写在开头

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

*:befor,
*:after{
    box-sizing: border-box;
}
//使所有伪元素盒模型是 border-box

如果有列表，a标签的也可如下：

ul,ol {
    list-style: none;
}

a {
    color: initial;
    text-decoration: none;
}

给 body 加背景

body {
    background: #eee;
}

这里给 body 加 background 会加给整个页面，不仅仅是body范围内的。因为浏览器会自动把背景色扩展到整个网页

关于CSS中的 height

一般非必要情况不设置 height 。
最小的元素可随意，外面的最好不要写 height。用内容去撑起高度
当需要两块内容高度一致，但实际情况不一致时可设置高度使其强行一致。注意检查效果是否有影响。

选择器书写格式

书写规范：
- 注意空格
- 标签用 >
- 类名用 .

.globalHeader .searchForm > button {
    ...
}

css选择器可以不完全符合HTML

比如 HTML 中：

<ul class="siteList">
  <li>
    <a href="https://www.acfun.cn">
      <div class="site">
        <div class="logo">A</div>
        <div class="link">acfun.cn</div>
      </div>
    </a>
  </li>
</ul>

在 css 中可写为：(跳过了 li )

.siteList .site {
  ...
}

媒体查询

@media:主要是区别pc端和手机端。有时在两者界面会有不同效果。如下：

500px是想做一下PC端和手机端的区分，
大于500（PC端），样式写在@media里面

@media (min-width: 500px) {
    .classNname {
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
        /*当元素有最大宽度时，可以用margin-left: auto;margin-right: auto;来进行居中*/
    }
}

正则表达式

相关内容学习了作者：deerchao写的文章《正则表达式30分钟入门教程》。作者详细讲解了正则表达式。在此感谢作者分享。

文章链接：正则表达式30分钟入门教程 (deerchao.cn)

cursor 属性

cursor 属性规定要显示的光标的类型（形状）

cursor: pointer;  //当鼠标浮在site上时，鼠标指针变成手指形状
cursor: default;  //当鼠标指针浮在关闭按钮时，显示默认形状（箭头)

jQuery

1.引入jQuery：

方式一：将 jQuery 代码文件放入到项目文件中再引用
方式二：
- 在线搜索 bootCDN 网站
- 输入jQuery 并选择点击下方 jQuery 一栏
- 找到最新版本链接，点击复制<script>标签
- 注意：版本链接选择结尾是 /jquery.min.js 的。比如：cdn.bootcdn.net/ajax/libs/j…

`.insertBefore( target )`

在jQuery API 中文文档对其有详细解释

localStorage

何时 localStorage 不会被储存。

当浏览器发现用户硬盘不足时，可能会把早期 localStorage 删掉。不过这种概率很小
使用浏览器“无痕模式”。在“无痕模式”下， localStorage 只会存储在当前页面打开状态下，关闭再次打开会发现 localStorage 就没有再储存了
打开浏览器设置-高级-隐私设置与安全性-清除浏览数据-勾选“cookie及其他网络数据”-清除数据。可以删除 localStorage

前航-导航网站（项目练习）