整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
出目标文件
语法格式: gitbook build [book] [output]
默认情况下,gitbook 输出方式是静态网站,其实 gitbook 的输出方式有三种: website, json,和 ebook.
只不过另外两种不是很常用,更多情况下我们是使用静态网页搭建个人官网,或托管到第三方平台,或部署到私有云服务器,但不管怎么样,还是离不开生成这一步.
示例:
默认情况下输出目录: _book/,整个项目的入口文件是: index.html
集成 github 网站
本教程的电子书源码和输出文件均托管到 github 网站,所以这里介绍下如何利用 Github Pages 静态网页服务与 gitbook 进行集成.
什么是 GitHub Pages ?
Github Pages 是 github 网站推出的一种免费的静态网页托管服务,适合搭建静态的项目主页或个人官网.
其中,网站项目的源码直接托管在 github 仓库中,当仓库文件更新后,该仓库所关联的网站自动更新,从而实现了源码与官网的联动更新.
gitbook-publish-github-pages-preview.png
如果想了解更多详情,请参考官网: https://pages.github.com/
怎么做 GitHub Pages ?
每个账号有且只有一个主页站点,但允许无限制多的项目站点.
啥是主页站点,项目站点又是啥?
别急,让我先举个例子看一下最终效果.
假如用户名: zhangsan 名下有四个公开仓库,一个仓库名叫做: zhangsan.github.io,另外三种分别是: project01,project02,project03 .
如果想要对外暴露上述四个仓库作为我们的静态网站,那么最终效果就是下面这样的.
注意将 zhangsan 替换成自己的 github 用户名,否则八成是打不开网站,除非真的有 zhangsan 这个用户.
其实上述规则很好理解,github 网站作为一个托管中心,有成千上万的用户在使用 github 并且每个用户的用户名都是唯一并且不同的,因此 *.github.io 通配符域名刚好充当命名空间.
可以预料的是,不仅仅有 <username>.github.io 这种二级域名,说不定还有 api.github.io,docs.github.io 等等,毕竟只需要购买 *.github.io 通配符域名证书就可以支持任意多的二级域名了,感谢 github 赠送我们免费的 https 网站.
说到这里,不得不吐槽下 gitbook 的命名空间策略了,gitbook 也有自己的电子书托管服务,但访问地址是 <username>.gitbook.io/<namespace> .
很显然,gitbook 没有区分主页站点和项目站点,相当于全部都是项目站点,缺少主次之分.
闲言少叙,既然知道了输入内容和输出效果,那么接下来的任务就是了解中间过程了,让我们一起探讨下怎么发布网站吧!
主页站点
创建 <username>.github.io 公开仓库
前往 https://github.com/ 网站创建名为 <username>.github.io 的公开仓库.
比如我的用户名是: snowdreams1006 ,那么我的主页站点仓库就是: snowdreams1006.github.io
创建首页 index.html 文件
不管是在线直接创建 index.html 还是克隆到本地创建 index.html ,最终的 <username>.github.io 仓库一定要有 index.html 首页文件.
示例:
访问主页站点 https://username.github.io
打开浏览器,输入网址: https://username.github.io 访问主页站点,显示的内容正是我们刚刚提交的 index.html 文件内容.
如果没有正常显示,清除浏览器缓存强制刷新试试看!
项目站点
相比主页站点来说,项目站点命名比较随意了,作为静态网站不可或缺的文件仍然是 index.html.
创建首页 index.html 文件
创建首页文件并添加测试内容,方便待会在线访问项目站点测试是否部署成功.
设置 GitHub Pages 选项
点击仓库首页右上方设置(Settings)选项卡,往下翻到 GitHub Pages 选项,选择源码目录,根据实际情况选择源码来源于 master 分支还是其他分支或者docs/ 目录.
gitbook-publish-project-setting.png
方便起见,选择第一个 master 分支即可,注意下面的主题和这一步的来源只能两者选其一,否则主题优先级更高!
访问主页站点 https://username.github.io/<repository>
打开浏览器,输入网址: https://username.github.io/repository 访问项目站点,显示的内容正是我们刚刚提交的 index.html 文件内容.
如果没有正常显示,清除浏览器缓存强制刷新试试看!
如何集成 gitbook ?
我们已经知道 Github Pages 是提供静态网站的免费托管,而 gitbook 默认生成的内容就是静态网站,两者如何结合自然不用我多说了吧?
gitbook 默认输出目录 _book/ 包括了静态网站所需的全部资源,其中就包括 index.html 首页文件.
因此我们只需要每次生成后将 _book/ 整个目录复制到项目根目录,那么推送到远程仓库时自然就是输出后静态网站了啊!
示例:
现在登录 github 网站看一下静态网站是否成功上传以及访问主页站点或项目站点看一下最新内容是否成功渲染吧!
小结
本节我们学习 gitbook 有三种输出方式,其中默认的网页输出最为常用.
除此之外,还讲解了如何与 github pages 进行结合,从而实现源码和网站的自动更新维护.
如果源码没有托管到 github 这种第三方服务商,你也可以搭建自己的服务器,比如将 _book/ 目录全部扔到 nginx 服务器做静态资源服务器等.
毕竟,源码和输出内容都在你手中,想怎么玩还不是自己说了算?
本文，有很多很棘手的问题，例如使用sublime 编辑器可能安装插件的时候会使用不了view in browser我公司的电脑可以安装、结果家里的电脑就报编码错误、需要改sublime插件源代码解码成utf8就可以了、还有一直连不上packagecontrol的网页，可以群（526929231）使劲砸我得到解决~ sublime编辑器对于前端来说确实很好用！很好用！很好用！ SublimeText、Webstorm推荐这两个编辑器
刚开始设计HTML语言是为了將文字图像关联在一起，用另一台发送或接收
HTML 不是一种编程语言，而是一中标记语言(mark-up language),标记语言是一套标记标签(mark-up tag)
标签是由尖括号 < > 把关键词括起来，标签通常是成对出现的
读取 HTML 文档，使用标签来解析页面的内容，以网页的形式现实，浏览器不会现实HTML标签
每种浏览器都有自己的内核(引擎)（解析网页的一个程序，io以什么方式去渲染它都要通过引擎去执行）
目前主流的浏览器分为五种
Chrome谷歌浏览器 （Webkit内核，V8 js引擎）
Firefox火狐浏览器 （Gecko内核）
Internet Explorer IE浏览器（ Trident内核）
Opera 欧朋浏览器 （Presto内核） 主要市场：移动端
Safari 苹果浏览器 （Webkit内核，但JS引擎为Nitro）
不需要去记，简单了解下
标签必须闭合
所有标签名一律小写
代码缩进，使阅读代码更加易懂
特殊符号规范使用
命名规范，见名之意
PS: 所有的标记符号都是半角英文
众说纷纭编辑器太多，最终只是一个工具，希望同学们能从万千世界中找到适合自己的编辑器伙伴
| 编辑器 | 描述 |
|---|---|
| EditPlus | 手写模式，适合初学手写，无代码提示(有IE调试视图) |
| Sublime | 插件特别多，占用内存小，启动速度快，打开大项目较慢，管理文件方式有些缺陷 |
| webstorm | 集成插件特别多，启动较慢，占用内存大，开发和管理视图都很方便 |
| Dreamweaver | 适合初学，主要代码提示和代码插入功能强大，主要偏向于设计(有设计视图) |
| 插件名 | 描述 | 详情请戳 |
|---|---|---|
| emmet | 前端自动补全，提供快捷补全方式 | |
| ColorPicker | 调色板，颜色选择器 | |
| SublimeTmpl | sublime模板，可以快速创建一个HTML模板 | |
| view in browser | 用快捷方式打开浏览器进行调试HTML(需要配置参考后面网页) | |
| LiveReload | 实时刷新HTML(编辑器里按下保存ctrl+s的时候，已经打开的HTMl会自动刷新) | 谷歌插件文件安装方法需要配合谷歌LiveReload插件插件文件下载 |
| Color Highlighter | CSS颜色代码高亮及颜色预览提示 | |
| CSS3 | CSS3的代码高亮提示 | 还针对了CSS3的选择器及锚类选择器:hover :first-child :first-child ...的高亮 |
| JavaScript Completions | 原生js 代码提示 | |
| Sublime-Better-Completion | 可自选开启代码提示，支持jQ、js、bootstrap、php、sql ... | 仓库地址此插件只能通过Github克隆下载安装安装方法 |
注：Github 网页中 下面是有详细的使用方法 packagecontrol.io官网 里面search 可以进行搜索插件名字来找到具体使用方法，还有什么不懂或者安装出现编码错误以及安装不上的可以拍打我~
| 配置 | 描述 |
|---|---|
| !DOCTYPE html | 不是标签，主要用于文档类型的声明 |
| charset="utf-8" | 声明字符编码集 |
| http-equiv="Content-Type" | 把Content属性关联到HTTP头部(协议头) |
HTML模板
简单了解，并不需要熟练掌握
Dom节点树
.html .htm这两种是比较常见的
在早期系统中文件名是有8+3组成 三个扩展名所以不支持四个字母的扩展采用.htm
现在通常使用.html作为扩展名
接下来所有的标签元素学习都在body标签里面去敲打实现、
为了突出标题，字体大小和加粗发生相应的改变
<h1>我是大主题</h1> <h2>我是大主题</h2> <h3>我是大主题</h3> <h4>我是大主题</h4> <h5>我是大主题</h5> <h6>我是大主题</h6>
<!doctype html><!-- 让浏览器使用html5的标准解析 --> <html> <head> <!-- 设置字符编码集让浏览器使用utf8解析当前网页 --> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <meta name="keywords" content="SEO搜索引擎，关键词，多个请用逗号分开" /> <meta name="description" content="网页描述，八十字内" /> <title>浏览器标签页上的网页标题</title> </head> <body> <!-- 所有的标签学习都在这body里面去敲，上面head元素里面的内容做个了解就可以了 --> <h1>我是大标题</h1> <h2>我是主题2</h2> <h3>我是主题3</h3> <h4>我是主题4</h4> <h5>我是主题5</h5> <h6>我是主题6</h6> </body> </html>
可以发现h标签从h1到h6会随着数值越小字越小，并且都是会加粗和各占一行的状态（前后的元素都会被换行）
h1标签一般一个页面里面只会写一次，为了让搜索引擎爬取到 (写一次利于SEO搜索引擎优化)
<p> 冬着一身素衣，缓缓而来，季节没有了往日的姹紫嫣红，却用简单的线条，勾勒出一幅洁白的画，纯洁通透，轻盈自然。 </p>
刚我们了解到了浏览器是识别尖括号的，如果要在页面中显示html标记那要怎么做呢？这时候就需要特殊符号的表示来显示
| 符号 | 描述 |
|---|---|
| 空格 | |
| 小于 | < |
| 大于 | > |
| 引号 | " |
| 版权 | © |
| ×叉 | × |
| & | & |
| 符号 | 描述 |
|---|---|
| B标签 | 物理加粗，页面呈现加粗状态. |
| Strong标签 | 不仅能加粗，还利于搜索引擎优化 |
<b>物理加粗，页面呈现加粗状态.</b> <strong>不仅能加粗，还利于搜索引擎优化，就是类似于百度、谷歌这种搜索引擎爬取你的网页的时候会查找这个标签里面的内容来优化显示网页的排名</strong>
可以根据word文档上面发现 b是加粗 u是下划线 i是倾斜 同样适用于标签
<i>我是倾斜</i> <u>我加了下划线</u>
链接一个页面,点击则会跳转这个链接页面
使用锚点滚动到设定的位置
<a href=""></a> a标签中的href控制点击的时候跳转到哪里如果没写表示刷新当前页面 <a href="#"></a> 跳转到当前页面(回归到页面顶部) <a href="javascript： void(0);"></a> 死链接，不会跳转，一般用于js特效 <a href="#name">锚点到一个标签上所对应的ID名字，点击则跳到那个标签位置</a> <a href="http://baidu.com">跳转到百度</a> 跳转到百度 需要注意的是 http 协议不能少
点击#flag的a标签的时候会跳到到上面h2标签
只有拥有name属性的
a标签
才能锚点,还有一种方式是通过ID标识唯一元素，也可以跳转(不仅仅是a标签)
| 描述 | 标签 |
|---|---|
| 滚动标签 | marquee |
| 字体标签 | font |
| 定义水平线 | hr |
marquee
| 属性 | 描述 |
|---|---|
| direction | 滚动方向 |
| behivior | 行为 |
behivior
| 值 | 描述 |
|---|---|
| alternate | 交替滚动 |
| scroll | 滚动 |
| slide | 滑落 |
| 属性 | 描述 |
|---|---|
| color | 颜色 |
| size | 0-7 |
| face | 字体 |
与font相似，拥有color和size属性
hr标签没有结束标签 按照早期的习惯也H5也遵循XHTML的解析 所以统一会加一个反斜杠表示结束这个标签，不加也能够正确显示，但是养成一个良好的习惯确实重要，比如微信小程序就是没有结束标签必须要使用一个反斜杠结尾否则直接报错、
结合今天所学，写一个简单的网页
内容如下：
写一篇收获或感受 / 写一篇文章 ————> 为什么要自己写，网上一大把哈哈，可以自己写下，锻炼下思维
需要包括h、p、a、加粗
题材不限，至少200字
在习题一的文章底部，使用滚动标签进行滚动方向为45°
们会有这种需求，看到有个网站很多文章内容不错，想把它们全部保存下来在手机上或电脑上有空看，但是不想联网看，或者我们想在公司内网搭个网站，和这个网站内容一模一样，方便公司人员阅读，这时候我们如何做这个网站的镜像呢？
网上当然有很多工具能用，但很多都是收费的，我们考虑一个免费小巧的工具来实现我们的要求，那就是Linux上一个有名的工具wget。
这个工具有windows版本，网上搜一下wget for windows，找到合适地址下载。
因为我是64位系统，所以下载了上面标红的地址
下载下来后，为了能在命令行中方便使用，我把它放到了C:\Windows\System32目录下（如果你会设置环境变量可以设置上，你也可以用cd命令切换到wget所在目录操作）。
把wget.exe放到C:\Windows\System32以方便命令行使用
我们WIN+R，输入cmd进入到命令行界面
输入wget -h看下帮助信息
wget的命令行参数太多了，我们只考虑做网站镜像的有用参数。
标红的即为做镜像的参数
我们来看一个学习编程的网站w3school
假如我们想做这个网站的镜像怎么办呢？
直接用wget -m http://www.w3school.com.cn/
这种是最简单暴力的用法，但是如果网站引用了外部的链接，这个下载下来的东西太多了，而且有些asp后缀的页面，我们如果想在本地用浏览器打开看没法直接打开，而且有时候我们可能只想下载某个网站目录下的文件，不想下载太多。
我们需要限制下。
我们用-np参数来限制只拉取当前目录不拉取父目录的网址数据
我们用-k参数链接指向本地，便于浏览
我们用-p参数让图片等信息需要来展示在HTML上的我们全下载
假如我们只想下载w3school上的JS教程，我们用如下命令即可：
wget -m -k -np -p http://www.w3school.com.cn/js/index.asp
但是这个命令还是缺少一些东西，比如后缀有ASP，其它的还有断点续传，文件后缀，模拟浏览器，https下是否检查证书等。
我们最后总结下最合适的镜像网站语法，假如想对网站http://www.XXXX.com做镜像，而且做出来的镜像方便本地浏览器直接打开查看，用如下命令：
wget -c -m -k -np -p -E -U Mozilla --no-check-certificate http://www.XXXX.com
我们先实际操作一下，我们下载下JS的教程.。
wget -c -m -k -np -p -E -U Mozilla --no-check-certificate http://www.w3school.com.cn/js/index.asp
下载中……
下载完成
镜像放在单独的目录，以网址命名
网站目录结构
我们用浏览器直接双击打开上面标红的index.asp.html，如下图：
我们在左侧标红区域点击，跳转到的页面还是本地
测试看来，我们成功的镜像了JS教程的页面，而且页面显示完好。
总结：最终用到的命令如下：
wget -c -m -k -np -p -E -U Mozilla --no-check-certificate 欲镜像的网址
你也可以用一些CHM制作软件把镜像完的本地HTML制成CHM格式的教程发布出去。
如果你想进行限速，间隔下载等特殊需求可以网上查找下wget的命令帮助进行解决，这个比较简单，就不一一介绍了。
如果命令语法在实际测试中有问题，欢迎提出建议。
*请认真填写需求信息，我们会在24小时内与您取得联系。
