模拟买票练习多线程使用Thread和Runable练习买票和练习共享资源问题方式一：继承Thread类 1.首先定义一个ticks变量为总票数为10 2.定义run方法，循环的扣除票数量（简单写一下打印ticks票数） 3.模拟四个窗口购买票问题1：打印的结果是每个窗口都打印了10张票，也就是说变量tickets没有共享解决1：通过给变量添加static，使变量变为共享变量如（代码1）解决2：通过实现runable接口解决共享变量问题（代码2）问题2：打印的ticks数量顺序不是从10->1，顺序乱了，也就是数据不同步解决：通过代码块同步或者方法同步解决问题（加锁）（代码3、4）代码1：package com.lzw.java_thread.tickets;/** * 使用Thread和Runable练习买票和练习共享资源问题 * 方式一：继承Thread类 * 1.首先定义一个ticks变量为总票数为10 * 2.定义run方法，循环的扣除票数量（简单写一下打印ticks票数） * 3.模拟四个窗口购买票 */public class ThreadTicks extends Thread{ private static int tickets = 10; @Override public void run() { while (tickets>0){ try { Thread.sleep(1); } catch (InterruptedException e) { e.printStackTrace(); } synchronized (this){ if (tickets>0){ System.out.println(Thread.currentThread().getName() + " 剩余" + (tickets--) + "张票"); } } } } public static void main(String[] args) { ThreadTicks tt1 = new ThreadTicks(); ThreadTicks tt2 = new ThreadTicks(); ThreadTicks tt3 = new ThreadTicks(); ThreadTicks tt4 = new ThreadTicks(); tt1.start(); tt2.start(); tt3.start(); tt4.start(); }}1234567891011121314151617181920212223242526272829303132333435363738代码2：package com.lzw.java_thread.tickets;/** *第二种方式： * 1.实现Runable接口 * 2.创建四个线程都传入一个Runable子类，实现对象资源共享 * 3.调用start()方法 */public class RunableTickets implements Runnable{ private int tickets = 10; @Override public void run() { while (tickets>0){ try { Thread.sleep(1); } catch (InterruptedException e) { e.printStackTrace(); } if (tickets>0){ System.out.println(Thread.currentThread().getName()+" 剩余"+(tickets--)+"张票"); } } } public static void main(String[] args) { RunableTickets rtt = new RunableTickets(); Thread td1 = new Thread(rtt); Thread td2 = new Thread(rtt); Thread td3 = new Thread(rtt); Thread td4 = new Thread(rtt); td1.start(); td2.start(); td3.start(); td4.start(); }}123456789101112131415161718192021222324252627282930313233343536代码3：package com.lzw.java_thread.tickets;/** * @Auther: lzw * 使用同步代码块，实现共享资源同步 */public class RunableTickets1 implements Runnable{ private int tickets = 10; @Override public void run() { while (tickets>0){ try { Thread.sleep(100); } catch (InterruptedException e) { e.printStackTrace(); } synchronized (this){ if (tickets>0){ System.out.println(Thread.currentThread().getName()+" 剩余"+(tickets--)+"张票"); } } } } public static void main(String[] args) { RunableTickets1 rtt = new RunableTickets1(); Thread td1 = new Thread(rtt); Thread td2 = new Thread(rtt); Thread td3 = new Thread(rtt); Thread td4 = new Thread(rtt); td1.start(); td2.start(); td3.start(); td4.start(); }}12345678910111213141516171819202122232425262728293031323334353637代码4：package com.lzw.java_thread.tickets;/** * @Auther: lzw * 使用同步方法，实现共享资源同步 */public class RunableTickets2 implements Runnable{ private int tickets = 10; @Override public void run() { while (tickets>0){ try { Thread.sleep(100); } catch (InterruptedException e) { e.printStackTrace(); } this.sale(); } } public synchronized void sale(){ if (tickets>0){ System.out.println(Thread.currentThread().getName()+" 剩余"+(tickets--)+"张票"); } } public static void main(String[] args) { RunableTickets2 rtt = new RunableTickets2(); Thread td1 = new Thread(rtt); Thread td2 = new Thread(rtt); Thread td3 = new Thread(rtt); Thread td4 = new Thread(rtt); td1.start(); td2.start(); td3.start(); td4.start(); }}

前言我们都知道，活动的启动方式有两种：一种是显示启动，或者很简单，指定一个活动的class就可以了；另外一种就是隐式启动，这种要指定action，category，data信息，例如我们在启动系统相机的时候。看一下代码：123Intent intent =new Intent("android.media.action.IMAGE_CAPTURE");    intent.putExtra(MediaStore.EXTRA_OUTPUT,imageUri);    startActivityForResult(intent,1);其中的”android.media.action.IMAGE_CAPTURE”就是相机的action，这样就可以启动相机了。隐式启动我们在平时也用的比较少，对于自己应用中的Activity都是直接显示启动了。那什么时候用到隐式启动呢？一般是在启动别的应用的activity的时候，例如上面讲到的相机。上面讲到的action，category，data就是intent-filer，也就是过滤器，筛选要启动的activity。intentFiler有什么用？就像给自己上个标签。例 如，你给自己上个标签是大学生，那么，当说学生出来，欸那么就匹配到你了。这个就是intentfiler的作用。用于筛选匹配。那么这三个action，category，data究竟是什么？他们的具体匹配规则又是什么样的？上面讲到intentFiler是用于启动别的应用，有哪些常用的intentfiler可以使用？接下来我们就来看看。intentFilter的结构前面讲到intentFilter包含三个：action，category，data，让我看一下代码熟悉一下：1234<intent-filter>    <action android:name="huan"/>    <category android:name="android.intent.category.DEFAULT"/>   </intent-filter>另外包括我们最熟悉的：12345<intent-filter>    <action android:name="android.intent.action.MAIN" />    <category android:name="android.intent.category.LAUNCHER" />   </intent-filter>这三个分别表示不同的意义。你想要启动什么样的activity就通过设置这些属性来启动到对应的activity。当我们自己设置intentFiler的时候也要注意他的意义性，虽然很多可以随便设置，但是就像变量名称一样，不要随便起。Actionaction是最简单也是最常用的。意义：这个参数表示启动这个活动要干嘛。例如上面相机的是android.media.action.IMAGE_CAPTURE，很明显就是拍照功能。action的本质也是一个字符串，匹配就必须每个字符都一样，包括大小写。上面说过，虽然可以随便写这个字符串，但是要有意义。匹配规则：action的匹配规则也很简单，Intent中的action和intentFilter中的任意一个action匹配，那么匹配成功。但是如果Intent中的action是空的，那么匹配失败。Category这个参数平时用得比较少，一般在一些比较特殊的情况才会用到意义：这个参数平常使用的意义是表示实现这个action动作的类别，也就是可以响应这个Intent的组件类别。例如上面的category android:name=”android.intent.category.LAUNCHER”，表示这个action将会在顶级执行，什么意思呢？就是我们每次打开应用都会打开的第一个activity。匹配规则：可以设置多个category。但是intent中的每一个category都必须和intentFilter中的其中一条category匹配才能匹配成功。注意：给activity设置intentFilter的时候，如果没有其他的category，必须设置category android:name=”android.intent.category.DEFAULT”这个category。原因是startActivity或者starActivityForResult这两个方法执行的时候，如果intent中没有category的话，那么就会自动加上”android.intent.category.DEFAULT”这个category。Datadata是三个中最复杂的一个，顾名思义，这个参数就是用来传递数据的。data不同于前面两个，他由两部分组成：Uri+mimeType.我们先来看看data的组成：1234567<data android:scheme=""     android:host=""     android:port=""     android:path=""     android:pathPattern=""     android:pathPrefix=""     android:mimeType=""/>data一共由7个参数组成，一起来看看分别是什么意思：scheme：这个表示uri的模式，有最熟悉的http：//这就是一种模式，另外安卓中还有比较常见的两种是：content：//和file：//。有学过ContentProvider的读者应该对content模式就很熟悉了。host，port：host是主机，port是端口号，这两个合称authority。例如www.baidu.com这个应该就很熟悉了吧。在ContentProvider中表示哪一个contentProvider。path，pathPattern，pathPrefix：这三个表示路径信息。一是完整的路径，二是可以用通配符来表示例如image/*，三是路径的前缀。mimeType：这个表示媒体类型。例如image/jpeg讲完他的结构后，有的读者可能会发现，这个data不就是一个地址+文件类型吗？是的，uri本身就是地址的意思。我们平时什么时候用到data呢？举个例子，我们调用相机拍照并存储到指定的文件夹，那么怎么让相机知道地址呢？就是data了，我们通过intent启动相机，并把地址放在data传输过去。这里的uri还涉及到安卓版本的影响有所不用，有兴趣的读者可以去了解一下。那么，data的匹配规则是怎么样的呢？和action是一样的，要求intent中必须要有data，而且和intentFilter中的一个相匹配就可以匹配成功。注意：如果在intentFilter中的data没有设置uri，那么默认的schme就是content和file。设置intentFilter看完了上面知道intentFilter中的三个参数怎么去匹配了，那怎么给活动设置intentFilter，怎么给intent传输参数知道吗？这个比较简单也简单讲一下：给活动设置intentFilter比较简单，只要在AndroidManifest中设置就可以了，看示例代码：1234567<activity android:name=".MainActivity">   <intent-filter>    <action android:name="android.intent.action.MAIN" />    <category android:name="android.intent.category.LAUNCHER" />   </intent-filter>  </activity>给intent设置参数也不难，一个一个来看：action：可以在新建Intent对象的时候顺便写进去，例如：Intent intent = new Intent("android.intent.action.GET_CONTENT");或者调用Intent的setAction方法：intent.setAction("android.intent.action.GET_CONTENT");caterogy：通过intent的方法intent.addCategory();data：这个比较特殊一点因为他有两个部分：uri和mimeType。有三个方法：其中setType和setData分别是设置mimeType和uri的。但是这两个方法都分别会清空另一个的数据。什么意思呢？例如我通过setData设置了一个uri，然后再通过setType设置一个mimeType，那么第一个的uri就会不见了，被删除了。所以就有第三个方法：intent.setDataAndType。这个方法接受两个参数，uri和mimeType，同时设置两个参数，就不会被清除了。常用的intentFilter上面讲到intentFilter主要是用来启动别的应用的,例如相机，电话，那么有什么是比较常用的呢？具体可以查看这篇博客android 常用URI 值得记住。不懂得也可以百度或者评论区留言。小结我们上面讲到intentFilter可以用来筛选要启动的activity，同样对于service和broadcast也是一样，也同样可以给他们设置intentFilter来隐式启动对应的组件。而平时用的最多还是隐式启动活动，特别是在调用别的应用的活动的时候。要掌握一些常见的调用，这也是很重要的。同时intentFilter的匹配规则也是很重要，熟记才不会在自己设置intentFilter的时候出错。

接触web前端开发的这几周为了深入了解前端开发包括企业中维护等探究了一些git开发的命令：   git init 初始化程序   git clone 克隆什么   git  add 提交   git status 检查当前状态   git pull 拉取 除了这些还有很多的关于git 的命令还有angular的开发命令：   nmp start 开始   nmp  new 什么 新建一个程序   新建模块  moudle   ng g m xxx  带有路由的模块   ng  g c （componet）xxx//组件前端开发总结了一下几个技术html5:          html5是万维网发布的最新语言规范，做web前端，精通html5是必须具备的技能之一css3:          css语言开发时朝着模块化发展的包括：盒子模型、列表模块、文字特效和多栏布局等css对整个web前端设计是必备的技能java:         java是一种直译式的脚本语言，是一种动态类型、弱类型、基于原类型的语言、内置支持类型掌握了java就掌握了前端不同动态的效果jquery:        是轻量级 js库它兼容css3JQuery，能够使用户更方便的处理html 实现动画效果 更方便的为网站提供ajax交互AjAx:      若是ui设计和服务框架之间的范围被严格的区分开，程序员就需要更新和变化技术集合了1：静态页面很早之前web界面都是在互联网上使用，网民浏览某个界面填写标签或列表后进行提交，有时候使用js来作为客户端校验的功能<html><head><title>测试一</title></head><body><h1>主题</h1><p>段落内容</p></body>2：带有简单逻辑的界面设计用于将first和two的俩个输入框中的字符串连接然后弹出窗口显示<html>    <head>        <title>测试</title>    </head>    <body>        <input id="firstNameInput" type="text" />         <input id="twoNameInput" type="text" />         <input type="button" onclick="greet()" />        <script language="JavaScript">        function greet() {            var firstName = document.getElementById("firstNameInput").value;            var lastName = document.getElementById("twoNameInput").value;            alert("Hello, " + firstName + "." + twoName);        }        </script>     </body></html>3：结合服务端技术的编程语言由于web前端 html界面不能进行数据保存所以出现了很多关于服务器的技术 那么如何实现把服务器和前端技术连接并保存前端内容呢？使用post来提交数据如：<form method="post" action="username.asp">form在前面的学习我们已经学过了包括action的运用<p>First Name: <input type="text" name="firstName" /></p><p>Last Name: <input type="text" name="twoName" /></p><input type="submit" value="Submit" /></form>那么问题来了如果客户端和服务端的任务职责没明确划分比如一个字符串可以用js语言输出也可以用服务器语言输出，所以用到<%和%>标记的部分会在服务端执行，然后输出结果如：<html><body><p>Hello hauwei!</p><p><%response.write("Hello huawei from server!")%></p></body>到后来就有了JavaScript基础库Prototype框架主要是为JavaScript代码提供了一种组织方式，对一些原生的JavaScript类型提供了一些扩展，比如数组、字符串，又额外提供了一些实用的数据结构，如：枚举，Hash等，除此之外，还对dom操作，事件，表单和Ajax做了一些封装。前面我们提到的jQuery和他们就有所不同，比如jQuery提供了选择器用来选取界面的元素基本语法是：$("*") //选取所有元素$("#lastname") //选取id为lastname的元素$(".intro") //选取所有class="intro"的元素$("p") //选取所有&lt;p&gt;元素$(".intro.demo") //选取所有 class="intro"且class="demo"的元素 链式表达式：            在jQuery中可以使用链式表达来连续操作dom当然也可以不适用链式我们可以按下方法写出：                                              var neat = $("p.neat");neat.addClass("ohmy");neat.show("slow");但是有了链式表达式，我们只需要这么一行代码就可以完成这些：$("p.neat").addClass("ohmy").show("slow");最后一次出现了实质性变化数据模型和控制器：数据模型主要是用来JavaScript类型上做一层封装，在数据中添加getset就更加有意义了比如把getset绑在restful服务商这样对于某处的读写就可以更新到数据库中，另一个特征是提供某一个时间用来监控数据的变化如：var Todo = Backbone.Model.extend({// Default attributes for the todo item.defaults : function() {return {title : "empty todo...",order : Todos.nextOrder(),done : false};},// Ensure that each todo created has `title`.initialize : function() {if (!this.get("title")) {this.set({"title" : this.defaults().title});}},// Toggle the 'done' state of this todo item.toggle : function() {this.save({done : !this.get("done")});}});上述例子中，defaults方法用于提供模型的默认值，initialize方法用于做一些初始化工作，这两个都是约定的方法，toggle是自定义的，用于保存todo的选中状态在Backbone中，是没有独立的控制器的，它的一些控制的职责都放在了视图里，所以其实这是一种MVP（Model View Presentation）模式，而AngularJS有很清晰的控制器层。还是以这个todo为例，在AngularJS中，会有一些约定的注入，比如$scope，它是控制器、模型和视图之间的桥梁。在控制器定义的时候，将$scope作为参数，然后，就可以在控制器里面为它添加模型的支持。function TodoCtrl($scope) {$scope.todos = [{text : 'learn angular',done : true}, {text : 'build an angular app',done : false}];$scope.addTodo = function() {$scope.todos.push({text : $scope.todoText,done : false});$scope.todoText = '';};$scope.remaining = function() {var count = 0;angular.forEach($scope.todos, function(todo) {count += todo.done ? 0 : 1;});return count;};$scope.archive = function() {var oldTodos = $scope.todos;$scope.todos = [];angular.forEach(oldTodos, function(todo) {if (!todo.done)$scope.todos.push(todo);});};}对于html前端还有很多技术比如：视图、模板、路由、自定义标签随着web的变化让我们对语言需要更深入速度的了解他的情况，所以很感谢华为的这次课程让我们对html前端从远古社会到工业革命的一个转变理念

html----------------------------------------html基本结构<html><head></head><body></body></html>body中的各种标签组件：1、正文中的标题标签：h1~h6要注意的是：1)<h1>的字体最大，<h6>字最小。跟<font>标签的size属性是反的，size值为1最小，值为7最大。2)必须是独占一行3)使用<h1>到<h6>标签，会让文字变大变粗。但千万不要因为想让文字变大变粗就给他加一个标题标签，这是错误！你可以使用<font>或<b>标签来实现4)搜索引擎会把文章中出现的<h1>到<h6>标签来作为文章的结构与主次，从而进行索引。懂seo的朋友就知道，这个很重要！2、段落与换行：  换行标记： <br/>  段落标记： <p></p>  把p标记中的文本当做一段文字, 一段文件完毕之后, 会自然换行.3、分割线： <hr 属性名="属性值" />    属性： width： 宽度  300px   ；50% 占用父标记宽度的百分比 align： 对齐方式：left    居左; center  居中; right   居右4、图片标签：  (单标记)：可以在页面中显示一张图片<img />属性：src：指定目标图片的路径width：宽度     pxheight：高度 宽高同时设置时会出现失真的现象,若需要等比例 缩放,则只需要设置其中一个即可.路径：①绝对路径：     操作系统绝对路径：windows： 以盘符开头的路径为绝对路径；c：\Program Files\xxxx.jpg linux / Unix / Mac： 以/(根目录)开头的路径为绝对路径 /home/soft01/xxx.jpg：网络端绝对路径：以http：//开头的url路径： http：//tts6.tarena.com.cn/xxx.jpg②相对路径：  指的是通过当前html文档和目标文件生成的路径.相对路径也可以指向目标文件.不以盘符和/(根目录)开头的路径：网页所支持的图片格式：JPG/JPEG：  体积小    图像有较小的失真png：  显示颜色种类较多  体积较大    图像保存完好gif：  支持动态图  体积小  显示的颜色非常少png/gif：  支持透明色  jpg：  不支持   5、a链接：<a> 链接文本 </a>属性：href： 点击链接之后跳往的目标地址点击图片跳转 ：<a href=""><img src=""/></a>图片热点链接：这种效果的实质是把一幅图片划分为不同的热点区域，再让不同的区域进行超链接。要完成地图区域超链接要用到三种标签：<img><map><area>。     <img src="图形文件名" usemap="#图的名称">     <map name="图的名称">     <area shape=形状 coords=区域座标列表 href="URL资源地址">      <!--可根据需要定义多少个热点区域-->      <area shape=形状 coords=区域座标列表 href="URL资源地址">     </map>【1】shape -- 定义热点形状          shape=rect：   矩形          shape=circle：圆形          shape=poly：   多边形【2】coords -- 定义区域点的坐标     a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标         例：<area shape=rect coords=100,50,200,75 href="URL">     b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度         例：<area shape=circle coords=85,155,30 href="URL">     c.任意图形（多边形）：将图形之每一转折点座标依序填入语法：<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">例：<img src="../menu.gif" width="204" height="510" border="0" usemap="#Map" /><map name="Map" id="Map"> <area shape="rect" coords="12,37,181,88" href="http：//www.qq.com" onFocus="this.blur()"/><area

 距离第一阶段的结束敲响了末尾的声音，抱着初心从开始8号的学习到第一阶段的结束这期间要应付期末考试应付自己的各种事情学习时间总是挤出来的这次学习让我受益匪浅呢？废话不多说上干货1第一阶段html知识都有啥子？           前言我们介绍了什么是html？w3c？还有html5？以及基础的计算机网络知识？1：web是啥？WEB的发展历史:Internet叫做互联网  美国国防局高级研究计划局ArpA建设了军用网叫做‘阿帕网’  与1969年正式启用2： w3c是干啥的？     W3C的成立 1994年10月 Tim berner3-lee 在麻省理工学院创立了word wide  web conscortium 中文为 万维网联盟 联盟简称为w3c W3C最重要的工作是发展web规范  描述了web 的通信协议 比如 html和xhtml成员结构: 美欧日中四大天王 www是word wide web 的缩写 也可以写成w3 中文名万维网 是集文本 声音 图像 视频等多媒体信息于 一身的全球信息资源网络  万维网的呈现形式是Internet3：了解前端关于网络的知识以及协议？网站  Website   人们可以通过网站发布自己想要公开的咨询 或者利用网站提供相关网络的服务网址: 在浏览器中输入网站的地址就可以打开想要访问的网站，那么网站的地址我们称之为url  中文名为统一资源定位符  俗称 网址url格式:协议://主机地址+目录路径+参数http：    超文本传输协议  从万维网服务器 传输文本到本地浏览器的传输协议https实在http基础上增加的更安全的协议ftp协议：文件传输协议  可以通过ftp访问服务器上的文件file协议  主要用于访问本地计算机中的文件1.1html的发展史以及基础标签？Html又叫超文本标记语言  用来构建网页的一种标记语言Html的历史：1993年由互联网工程工作小组 发布工作草案1995年发布html2.0版本1997年12月18日由w3c发布的html3.2版本1999年由w3c发布html4.01版本2000年由w3c发布xhtml1。0版本 她是一种严格的html代码Xhtml时后可扩展的标记语言 是一种更严格 纯净的html语言Html5中新增加了很多语义化标签 不同的html标签代表了不同网页的内容什么是元素？Html是一系列标签组成的 每个标签以<>包裹的按此 通常称之为元素            单标签：只有一个变迁就能表达完整的含义如：<input/> <img/>            双标签：由开始标签和结束标签组成<div></div><span></span>属性: 标签可以有很多属性  属性总是在开始标签中定义  而且是以名值对的形式出现 其中属性值 是以 双引号包裹    1.2html的常用标签基本结构都有啥呢？1:标题：这里我们会用到head的缩写h1到h6表示标签显示出来的结果顺序是从大到小的结构2：段落标签：什么是段落标签？用于定义段落的标签呀！用<p>来表示这里要注意：段落标签用于定义段落 浏览器会自动在其前后创建一些空白                   文字行数取决于浏览器窗口的宽度那么问题来了？如何显示空格呢？html准备了一个专用的空格符 &nbsp来表示3：块级区域 div标签是 division的含义 代表网页中的块 所以一般把他叫做块标签4：span标签是内联将一个span元素标记在span中这个非常重要不是很了解的小伙伴可以查一下知识点5：还有一些我们常用的链接 比如如何点击一个链接跳转到另一个界面呢？这里就可以实现啦那就是a标签 anchor的缩写用于定义网页的链接href指向链接的地址，还有一些我们常用的空连接void（0）6：图片img属性来定义图片的方法 他有俩个属性一个是src代表图片的地址 alt属性代表图片无法显示时的代替文本     1.2.1 为此更加细分会有无序列表和有序列表以及自定义列表情况：1：无序列表？使用ul标签定义无序列表li标签定义列表项无需列标的含义是 前后内容没有顺序2：有序列表？顾名思义就是每一项都有顺序含义 有序列表的前端通常为字母或数字3：自定义列表：使用dl标签定义自定义列表 dt定义标题 用dd来定义列标项    1.3 接下来来到了很重要的重中之重表格标签：      1.3.1 为啥使用表格标签表格标签都有啥子？       在我们浏览网页时总会看见商品的分类在不同的单元中？比如我们在买东西时会出现分类华为手机要什么型号？什么颜色？这样就需要将类品区分开的同时也要在一个手机的类中     表格标签表示方法：          表格元素：<table>标签定义 里面由若干行和列的单元格组成          在表格元素中  使用<tr>表示表格中的一行 使用<td>表示列          表格可以定义标题 用<caption>标签定义      1.3.2 行？      我们可以把一个网页的整体分为三部分：head body 和foot 代表一个完成的人/网页    表格的行 使用<tr>标签定义表格的行    Tr 表哎内部用来包含td标签    例如:   <table>   <tr>   <td>单元格</td>   </tr>   </table>   <th>会把自己的颜色变化 变粗变黑 我们也可以在tr 属性中设置align来调试单元格显示的位置等结尾：1.4表单：        使用表单来简单的设置一个提交的按钮或者是 重置按钮 来实现我们在输入网页信息时的一个小程序？大家可以自主发现！表单元素：使用form标签定义表单，表单有俩个最重要的属性 action和method action属性定义了，表单提交的地址，eod 属性定义了表单提交的方式表单提交有俩种方式： 一种是get  一种是 post其他的表单控件元素 必须放在form标签的内部Form action=www.huawei.com  method=’postInput type =”submit value=”提交Input type = “reset vale = “重置表单元素：使用form标签定义表单，表单有俩个最重要的属性 action和method action属性定义了，表单提交的地址，eod 属性定义了表单提交的方式表单提交有俩种方式： 一种是get  一种是 post其他的表单控件元素 必须放在form标签的内部案例：Form action=www.huawei.com  method=’postInput type =”submit value=”提交Input type = “reset vale = “重置表格中的三个属性？select input textare？          1：input：表格元素： input是一个单标签元素  其属性type代表了input的表单类型 input标签就是通过tupe属性的不同取值来定义不同的表单控件单本框：可以输入一行文本的表单控件例如: <input type=”text/>单选按钮: 具有相同属性的单选按钮只能选择一个例如:<input type = “radio/>多选按钮: 可以选中多个的选择框例如：<input type = “checkbox/>按钮：普通按钮：例如:<input type =”button”/>提交按钮：会触发将表单数据提交到服务器的功能<input type =”submit”/>重置按钮：会清楚表单中的所有数据 回复表单中的原始值<input type =”reset”/>文件上传按钮:用于文件上传      2：select选择？如何选中心仪的商品？Select用来定义列表 option用来定义列表项示例： Select name=”course”>Option value = “Math”>英语</optionOption value = “Math”>数学</option</select>    3：textare来显示多行的文本域？<textarea/>用来表示多行文本域  示例： <textarea rows =”5” col =”10”></textarea>就此我们的前端开发html就告一段落啦 兄弟们一定要不懂多看看 笔下出真知~

在Web开发中，HTTP重定向是一种常用的技术，它允许Web服务器通知浏览器将请求的页面跳转到另一个URL。这种技术对于网站维护、用户体验优化和SEO（搜索引擎优化）都非常有用。本文将详细介绍HTTP重定向的概念、工作原理以及使用场景。什么是HTTP重定向？HTTP重定向是一种HTTP状态码的响应，通常由Web服务器发送给客户端（浏览器），指示客户端应该请求另一个URL。重定向通常是通过特定的HTTP状态码（如301、302）来实现的，这些状态码告诉浏览器这是一个重定向响应，并提供了新的目标URL。常见的HTTP重定向状态码：301 Moved Permanently：永久重定向，表示原始资源已被永久移动到新的URL。302 Found：临时重定向，表示原始资源临时移动到新的URL。303 See Other：表示资源存在另一个URL，通常用于POST请求后的GET请求。307 Temporary Redirect：与302类似，但不会将POST请求转换为GET请求。308 Permanent Redirect：与301类似，但对于非GET请求也保持相同的请求方法。什么情况下要用到重定向？1. 网站维护或更新当网站进行维护或更新时，可能需要将用户重定向到维护页面或临时网站。例如，当电商平台进行系统升级时，可以将用户重定向到一个通知页面，告诉他们网站将在一段时间后恢复。2. 网站重构如果网站进行了重构，URL结构可能发生了变化。在这种情况下，旧的URL需要重定向到新的URL，以保持原有的页面排名和避免用户访问失效的链接。3. SEO优化通过重定向，可以将多个相关的页面合并为一个页面，或者将不再有用的页面重定向到更有价值的页面。这样可以集中页面的权重，提高在搜索引擎中的排名。4. 避免重复内容如果多个URL指向相同的内容，可以使用重定向将它们指向一个主URL，以避免搜索引擎对重复内容的惩罚。5. 安全考虑为了提高网站的安全性，可以将某些敏感的页面或操作重定向到HTTPS版本，或者将用户重定向到安全的登录页面。6. 跟踪用户行为通过重定向，可以将用户从一个广告或推广页面引导到目标页面，并跟踪用户的点击行为，以便于分析广告效果。结语HTTP重定向是Web开发中的一个重要工具，它可以帮助网站管理员维护网站的可用性、优化用户体验和提高SEO表现。合理使用重定向可以提升网站的整体质量和用户体验。希望本文能帮助您更好地理解HTTP重定向的概念和应用场景。

在 Web 开发中，管理用户状态是一个核心话题。随着技术的发展，出现了多种解决方案，其中最经典的莫过于 Cookie 和 Session。那么，这两者到底有什么区别？在什么情况下应该使用它们？本文将为您详细解析。Cookie 简介Cookie 是一种存储在用户本地终端上的数据。它由 Web 服务器生成，发送给浏览器，浏览器会将这些数据以键值对的形式保存下来。当用户再次访问同一网站时，浏览器会将这些数据发送给服务器，以帮助网站识别用户。Cookie 的特点存储在客户端：Cookie 数据存储在用户的浏览器中，不会占用服务器资源。有效期：Cookie 可以设置有效期，过了有效期后，Cookie 将自动删除。安全性：Cookie 可以设置为安全的，即只有通过 HTTPS 请求才能发送给服务器。容量限制：每个域名下的 Cookie 总大小有限制，通常为 4KB。Session 简介Session 是一种服务器端的数据存储机制，用于存储用户会话所需的属性及配置信息。当用户访问网站时，服务器会为每个用户创建一个唯一的 Session ID，用于标识用户的状态。Session 的特点存储在服务器端：Session 数据存储在服务器上，可以存储更复杂的数据类型，如对象。依赖 Cookie：虽然 Session 存储在服务器端，但通常需要依赖 Cookie 将 Session ID 发送给客户端。有效期：Session 通常有一个默认的有效期，如 20 分钟，也可以根据需求进行设置。安全性：Session 数据存储在服务器端，相对更加安全。Cookie 与 Session 的区别数据存储位置Cookie：存储在客户端。Session：存储在服务器端。数据大小Cookie：大小有限制，通常为 4KB。Session：理论上不受大小限制，取决于服务器配置。数据安全性Cookie：相对不太安全，用户可以查看和修改本地存储的 Cookie。Session：相对更安全，数据存储在服务器端，用户无法直接访问。数据传递方式Cookie：每次请求都会携带 Cookie 数据。Session：仅通过 Session ID 传递，减少了数据传输量。应用场景Cookie 的应用场景记住用户偏好：如网站语言、主题等。跟踪用户行为：如购物车内容、最近浏览的商品等。简化登录流程：记住用户登录状态，实现“记住我”功能。Session 的应用场景用户身份验证：存储用户登录信息。订单处理：存储购物车内容和用户购物流程。在线考试：存储考生信息和考试进度。结语Cookie 和 Session 都是管理用户状态的重要技术。Cookie 适用于存储轻量级、对安全性要求不高的数据；而 Session 则适用于存储重要、敏感的用户数据。在实际开发中，应根据具体需求选择合适的技术。希望本文能帮助您更好地理解和使用这两种技术。

GatsbyGatsby 是一个基于React的免费开源框架，它帮助开发者构建极速网站和应用程序。它结合了动态渲染站点的控制性和可扩展性以及静态站点生成的速度，创造了全新的网络可能性。Gatsby帮助专业开发者高效创建可维护、高性能、内容丰富的网站。从任何地方加载数据。Gatsby可以从任何数据源获取数据，无论是Markdown文件、像Contentful或WordPress这样的无头CMS，还是REST或GraphQL API。使用源插件加载数据，然后使用Gatsby的统一GraphQL接口进行开发。超越静态网站。享受静态网站的所有优势，但没有任何限制。Gatsby站点是完全功能的React应用程序，因此您可以创建高质量的动态Web应用程序，从博客到电子商务网站再到用户仪表板。选择您的渲染选项。除了静态站点生成（SSG）之外，您还可以根据页面选择替代渲染选项，即延迟静态生成（DSG）和服务器端渲染（SSR）。这种粒度控制使您能够在不牺牲一个方面的情况下优化性能和生产力。性能已经内置。默认情况下通过性能审核。Gatsby自动进行代码拆分、图像优化、内联关键样式、懒加载、预取资源等操作，以确保您的站点快速运行，无需手动调整。为每个站点使用现代技术栈。无论数据来自何处，Gatsby站点都是使用React和GraphQL构建的。为您和您的团队构建统一的工作流程，无论数据来自相同的后端还是不同的后端。以分母为单位大规模托管。Gatsby站点不需要服务器，因此您可以将整个站点托管在CDN上，成本仅为服务器渲染站点的一小部分。许多Gatsby站点可以完全免费托管在Gatsby Cloud和其他类似服务上。在任何地方使用Gatsby的集中式数据层。使用Gatsby的Valhalla内容中心，您可以将Gatsby的数据层引入任何项目中。通过统一的GraphQL API访问它，用于构建内容站点、电子商务平台以及原生和Web应用程序。学习如何在您的下一个项目中使用Gatsby。💻 在5分钟内在本地开始使用Gatsby您可以通过以下四个步骤在本地开发环境上快速启动并运行新的Gatsby站点：初始化一个新项目。这里需要提前安装 npm.  [sh]npm init gatsby给它命名为”My Gatsby Site”。配置选项：  [plaintext]What would you like to call your site? √ · My Gatsby Site What would you like to name the folder where your site will be created? √ gatsby/ my-gatsby-site √ Will you be using JavaScript or TypeScript? · JavaScript √ Will you be using a CMS? · No (or I'll add it later) √ Would you like to install a styling system? · No (or I'll add it later) √ Would you like to install additional features with other plugins? · Add Markdown support (without MDX)以开发模式启动站点。然后，转到您新站点的目录并启动它：  [plaintext]cd my-gatsby-site/ npm run develop打开源代码并开始编辑！您的站点现在正在 http://localhost:8000 上运行。在您选择的代码编辑器中打开my-gatsby-site目录并编辑src/pages/index.js。保存您的更改，浏览器将实时更新！在这一点上，您已经拥有一个完全功能的Gatsby网站。有关如何自定义Gatsby站点的更多信息，请参阅我们的插件和官方教程。参考资料https://github.com/getpelican/pelican转载自https://houbb.github.io/2016/04/13/blog-engine-07-gatsby-01-intro

hugo 博客引擎Hugo 是一个流行的静态网站生成器，它被广泛用于创建博客和静态网站。静态网站生成器：Hugo 是一个静态网站生成器，它将你的博客内容转换为 HTML、CSS 和 JavaScript 文件，这些文件可以直接部署到 Web 服务器上。相比于动态网站，静态网站具有更快的加载速度和更高的安全性。快速高效：Hugo 被设计成非常快速和高效的静态网站生成器。它使用 Go 语言编写，采用了一些优化策略，如并行处理、增量构建等，以确保生成网站的速度和效率。简单易用：Hugo 的使用非常简单，它提供了一个简洁的命令行界面和易于理解的目录结构。你只需编写 Markdown 格式的博客文章，并使用 Hugo 的命令将其转换为静态网页。主题和布局：Hugo 提供了丰富的主题和布局选项，使你能够轻松地自定义你的博客外观。你可以选择一个现成的主题，也可以根据自己的需求创建自定义主题。多语言支持：Hugo 支持多语言功能，你可以轻松创建多语言的博客。它提供了语言文件和语言选择器等功能，方便你管理和展示多语言内容。强大的功能：Hugo 提供了许多强大的功能，如标签、分类、分页、搜索等。它还支持各种插件和扩展，可以满足不同需求的博客功能。Hugo 是一个功能强大、快速高效且易于使用的博客引擎，适合个人博客、技术博客和静态网站的创建。无论你是初学者还是有经验的开发者，都可以通过 Hugo 轻松地构建出专业水平的博客网站。hugo windows 入门例子requireGit  [plaintext]λ git --version git version 2.33.1.windows.1Go  [plaintext]λ go version go version go1.21.5 windows/amd64Dart Sass: 用于做 sass 转换为 cssinstall安装 Hugo。你可以从 Hugo 官网 下载 Hugo 的二进制文件，然后将其解压到你的电脑上。windows 的话：cid:link_2release 地址：cid:link_1这里选择了：https://github.com/gohugoio/hugo/releases/download/v0.121.1/hugo_0.121.1_windows-amd64.zip下载之后解压，这是一个可执行的 exe比如解压到：  [plaintext]C:\Users\dh\Downloads\hugo_0.121.1_windows-amd64quick start使用 WSL 或者 git bash，我们在文件夹 C:\Users\dh\Downloads\hugo_0.121.1_windows-amd64 下打开命令行  [plaintext]hugo new site quickstart cd quickstart git init git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke echo "theme = 'ananke'" >> hugo.toml hugo serverPS: 这里 hugo.toml 估计会报错。建议手动修改：  [toml]baseURL = 'https://example.org/' languageCode = 'en-us' title = 'My New Hugo Site' theme = 'ananke'如果配置了 path，就可以直接执行 hugo server。没配置，可以指定全路径  [plaintext]C:\Users\dh\Downloads\hugo_0.121.1_windows-amd64\hugo server主题https://themes.gohugo.io/access访问你的博客。你可以在浏览器中访问以下地址：http://localhost:1313/你应该会看到你的博客页面，不过默认这里 pages 是空的。添加 page 页面  [plaintext]hugo new content posts/my-first-post.mdor  [plaintext]C:\Users\dh\Downloads\hugo_0.121.1_windows-amd64\hugo new content posts/my-first-post.md创建一个新的文件。修改文件内容  [md]--- title: "My First Post" date: 2022-11-20T09:03:20-08:00 draft: true --- ## Introduction This is **bold** text, and this is *emphasized* text. Visit the [Hugo](https://gohugo.io) website!重新执行  [plaintext]hugo server -D # 若要显示 draft 为 true 的草稿，则用下命令 # 若要在之后网页中显示文章，则要把 draft 改为 falseor  [plaintext]C:\Users\dh\Downloads\hugo_0.121.1_windows-amd64\hugo server -D界面还是很不错的。部署你可以将你的 Hugo 网站部署到任何 Web 服务器上。例如，你可以使用 Nginx 或 Apache 来部署你的 Hugo 网站。或者 github pages参考资料cid:link_5getting-started/quick-start/https://zhuanlan.zhihu.com/p/644838582https://zhuanlan.zhihu.com/p/126298572

google/baidu 收录查看  [plaintext]site:https://houbb.github.io/如果提示说：找不到和您查询的“site:https://houbb.github.io/”相符的内容或信息，说明未被收录。如果搜索结果中你第一眼就看到了你的博客站点，说明已被收录，不用再继续看下面的内容了。博客书写规范和心德写了大概3年多的博客，回首看收获了很多。为了以后博客的更好管理，规定如下标准。标题标准时间：2022-05-29发现 search 无法工作，debug 发现标题如果出现 "，会导致 json 的解析失败。url统一采用:  [plaintext]yyyy-MM-dd-${category}-${order}-name-${order}.md所有名称统一使用小写的形式。所有同一个类型的博客，放在一起形成一个系列。除非确定一定不会扩展的内容，建议还是学习所有的知识都是从 00-overview 开始。tag常见的 tag 规定如下：  [plaintext]overview 概览 quick-start 快速开始 why-so-fast 为什么速度这么快 why-choose 为什么选择这个技术 project-architecture 项目架构 in-action 实战 summary 总结 sh 新知识(stay-hungry) sf 旧知识(stay-foolish)技术分类则根据实际需要一遍文章的行文作为技术文章，建议有以下几个部分：开篇：介绍技术的背景，实际的业务场景概念理论：实战测试：拓展发散：总结归纳：转载自https://houbb.github.io/2016/04/13/blog-engine-03-jekyll-04-seo

在 Windows 上安装 Jekyll尽管 Windows 不是官方支持的平台，但可以通过适当的调整来运行 Jekyll。通过 RubyInstaller 安装RubyInstaller for Windows 是安装 Ruby 和 Jekyll 的最简单方法。从 RubyInstaller Downloads 下载并安装 Ruby+Devkit 版本。使用默认选项进行安装。在安装向导的最后阶段运行 ridk install 步骤。这是为了在安装具有本机扩展的 gem 时需要。您可以在 RubyInstaller Documentation 中找到关于此的更多信息。从选项中选择 MSYS2 和 MINGW 开发工具链。从开始菜单打开一个新的命令提示符窗口，以使对 PATH 环境变量的更改生效。使用 gem install jekyll bundler 安装 Jekyll 和 Bundler。检查 Jekyll 是否已正确安装：jekyll -v通过 Windows 10 上的 Bash 安装如果您使用的是 Windows 10 版本 1607 或更高版本，另一种运行 Jekyll 的选择是安装 Windows 子系统用于 Linux。确保已启用 Windows 子系统用于 Linux。确保所有软件包和存储库都是最新的。打开一个新的命令提示符或 PowerShell 窗口并输入 bash。更新您的存储库列表和软件包：  [bash] sudo apt-get update -y && sudo apt-get upgrade -y接下来，安装 Ruby。我们将使用 BrightBox 的存储库来安装 Ruby，该存储库为 Ubuntu 提供了优化版本的 Ruby。  [bash] sudo apt-add-repository ppa:brightbox/ruby-ng sudo apt-get update sudo apt-get install ruby2.5 ruby2.5-dev build-essential dh-autoreconf更新您的 Ruby gem：  [bash] gem update安装 Jekyll：  [bash] gem install jekyll bundler不需要 sudo。检查您的 Jekyll 版本：  [bash] jekyll -v您已经准备好开始使用 Jekyll 了！非超级用户帐户问题如果 jekyll new 命令打印出错误 “Your user account isn’t allowed to install to the system RubyGems”，请参阅Troubleshooting中的“Running Jekyll as Non-Superuser”说明。编码如果您使用 UTF-8 编码，当文件以表示 BOM 的字符开头时，Jekyll 会中断。因此，如果在文件开头出现此字节序列，请将其删除。此外，如果在站点生成过程中遇到 Liquid Exception: Incompatible character encoding 错误，则可能需要将控制台窗口的代码页更改为 UTF-8。运行以下命令：  [bash]chcp 65001时区管理由于 Windows 没有本地的 zoneinfo 数据源，Ruby 解释器不了解 IANA 时区。因此，Jekyll 现在使用一个 rubygem 来基于已建立的 IANA 时区数据库内部配置时区。在使用 Jekyll v3.4 及更高版本创建的“新”博客将默认将以下内容添加到其 Gemfile 中，但现有站点必须更新其 Gemfile（和已安装的 gem）以在 Windows 上启用开发：  [ruby]# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem # and associated library. platforms :mingw, :x64_mingw, :mswin, :jruby do gem "tzinfo", ">= 1", "< 3" gem "tzinfo-data" end自动重新生成当使用 --watch 开关指定进行构建或 serve 时，Jekyll 使用 listen gem 监视更改。虽然 listen 内置支持 UNIX 系统，但可能需要额外的 gem 与 Windows 兼容。如果在仅在 Windows 上自动重新生成时出现问题，请将以下内容添加到站点的 Gemfile 中：  [ruby]gem "wdm", "~> 0.1.1", :install_if => Gem.win_platform?您必须使用 RubyInstaller 的 Ruby+Devkit 版本，并安装 MSYS2 构建工具以成功安装 wdm gem。转载自https://houbb.github.io/2016/04/13/blog-engine-03-jekyll-03-install-on-windows-doc

详细介绍一下 jekyll 博客引擎Jekyll 是一个简单、轻量级的静态网站生成工具，被广泛用于搭建个人博客、项目文档和小型网站。它使用 Ruby 编程语言，是由 GitHub 的创始人之一 Tom Preston-Werner 创建的。Jekyll 的设计理念是将文本内容与样式分离，以便更好地管理和维护网站。以下是 Jekyll 博客引擎的一些主要特点和组成部分：静态网站生成： Jekyll 不同于传统的动态网站，它是一个静态网站生成器。它通过解析文本文件（通常是 Markdown 或 Textile 格式）和 Liquid 模板引擎，生成静态 HTML 页面。Markdown 支持： Jekyll 使用 Markdown 作为默认的文本格式，这使得写作更加简单，同时生成的网页也具有良好的可读性。Liquid 模板引擎： Liquid 是一个轻量级的模板语言，用于在 Jekyll 中构建动态内容。它允许你插入变量、条件语句、循环等，以便更灵活地定制页面布局和内容展示。布局和模板： Jekyll 支持使用布局和模板来定义网站的整体结构和样式。这样可以使网站保持一致的外观，同时方便进行更改。插件系统： Jekyll 具有强大的插件系统，可以通过插件扩展其功能。这使得用户可以根据自己的需求添加各种功能，如社交分享、评论系统等。GitHub Pages 集成： Jekyll 与 GitHub Pages 高度集成，允许用户在 GitHub 上托管他们的博客。GitHub Pages 支持 Jekyll，并自动构建并托管用户的 Jekyll 网站。易于部署： 由于 Jekyll 生成的是静态文件，部署非常简单。你只需将生成的文件上传到任何支持静态文件托管的地方，如 GitHub Pages、Netlify、或自己的服务器。使用 Jekyll 构建博客的一般步骤包括安装 Jekyll、创建博客项目、编写文章、配置样式和布局，最后生成并部署静态网站。Jekyll 提供了详细的文档，可以在官方网站（https://jekyllrb.com/）上找到。快速入门Jekyll是一个静态网站生成器。它接受您喜欢的标记语言编写的文本，并使用布局来创建静态网站。您可以调整网站的外观和感觉、URL、页面上显示的数据等等。先决条件Ruby 版本 2.5.0 或更高，包括所有开发标头（使用 ruby -v 检查您的 Ruby 版本）RubyGems（使用 gem -v 检查您的 Gems 版本）GCC 和 Make（使用 gcc -v、g++ -v 和 make -v 检查版本）指令安装所有先决条件。安装 jekyll 和 bundler gems。  [bash] gem install jekyll bundler在 ./myblog 创建一个新的 Jekyll 站点。  [bash] jekyll new myblog切换到您的新目录。  [bash] cd myblog构建站点并在本地服务器上提供访问。  [bash] bundle exec jekyll serve浏览至 http://localhost:4000如果您使用的是 Ruby 版本 3.0.0 或更高版本，则第 5 步可能会失败。您可以通过将 webrick 添加到您的依赖项来解决此问题：  [bash]bundle add webrick通过将 –livereload 选项传递给 serve，以便在对源文件进行更改时自动刷新页面：  [bash]bundle exec jekyll serve --livereload如果在此过程中遇到任何错误，请检查是否已安装了所有先决条件。如果仍然有问题，请参见Troubleshooting。转载自https://houbb.github.io/2016/04/13/blog-engine-03-jekyll-02-intro

jekyll 搭建教程jekyll 搭建教程https://segmentfault.com/a/1190000002539546?_ea=304992Gem安装 Ruby，请访问 下载地址。http://rubyinstaller.org/downloadsJekyllJekyll 是一个简单且具备博客特性的静态网站生成器。https://jekyllrb.com/docs/home/使用以下命令安装 Jekyll。  [plaintext]$ gem install jekyll在中国可能需要使用代理软件。然后，请等待并学习如何使用它。或者，您可以使用 rails 替代 Jekyll。如果您使用的是 Mac，请使用以下命令。  [plaintext]$ sudo gem install jekyllGit您需要了解如何使用 Git。Git 文档http://www.runoob.com/git/git-tutorial.html在 Windows 下安装 Jekyll有时候工作需要，在 Windows 系统下编辑博客，想要看到效果却十分麻烦。因此尝试在 Windows 下安装 Jekyll。安装 Ruby下载下载 适合你计算机的合适版本的安装程序；http://rubyinstaller.org/downloads/安装安装时勾选上 Add Ruby executables to your PATH;查看版本在命令行中输入如下命令：  [plaintext]$ ruby -v ruby 2.3.3p222 (2016-11-21 revision 56859) [x64-mingw32]安装 DevKit下载下载 适合你计算机的合适版本的安装程序；选择匹配的软件。本次选择 DevKit-mingw64-64-4.7.2-20130224-1432-sfx.exe, For use with Ruby 2.0 to 2.3 (x64 - 64bits only)解压下载并解压文件至路径如D:\Devkit下：运行  [plaintext]$ cd d:\Devkit [D:\Devkit]$ ruby dk.rb init [INFO] found RubyInstaller v2.3.3 at D:/Ruby23-x64 Initialization complete! Please review and modify the auto-generated 'config.yml' file to ensure it contains the root directories to all of the installed Rubies you want enhanced by the DevKit.查看 config.yml 应该有如下内容  [yml]# This configuration file contains the absolute path locations of all # installed Rubies to be enhanced to work with the DevKit. This config # file is generated by the 'ruby dk.rb init' step and may be modified # before running the 'ruby dk.rb install' step. To include any installed # Rubies that were not automagically discovered, simply add a line below # the triple hyphens with the absolute path to the Ruby root directory. # # Example: # # --- # - C:/ruby19trunk # - C:/ruby192dev # --- - D:/Ruby23-x64查看和安装  [plaintext][D:\Devkit]$ ruby dk.rb review Based upon the settings in the 'config.yml' file generated from running 'ruby dk.rb init' and any of your customizations, DevKit functionality will be injected into the following Rubies when you run 'ruby dk.rb install'. D:/Ruby23-x64 [D:\Devkit]$ ruby dk.rb install [INFO] Updating convenience notice gem override for 'D:/Ruby23-x64' [INFO] Installing 'D:/Ruby23-x64/lib/ruby/site_ruby/devkit.rb'安装 Jekyll确保 gem 已安装  [plaintext][D:\Devkit]$ gem -v 2.5.2安装 Jekyll  [plaintext]$ gem install jekyll问题错误：Permission denied - bind(2) for 127.0.0.1:4000bind localhost:4000 failed使用如下命令：  [plaintext]$ netstat -ano $ tasklist /svc /FI "PID eq ${pid}"pid 是占用 localhost:4000 的线程的结果；使用任务管理器结束该线程；请在 Gemfile 中添加以下内容以避免轮询更改：  [plaintext]gem 'wdm', '>= 0.1.0' if Gem.win_platform?gem ‘wdm’, ‘>= 0.1.0’ if Gem.win_platform?我尝试了很多次，但仍然失败。幸运的是，Jekyll 仍然可以正常工作jekyll-paginate  [plaintext]配置文件: /Users/houbinbin/blog/houbb.github.io/_config.yml 依赖错误: 哎呀！看起来你没有安装 jekyll-paginate 或者它的某个依赖项。为了按照当前配置使用 Jekyll，你需要安装这个 gem。来自 Ruby 的完整错误信息是: 'cannot load such file -- jekyll-paginate' 如果遇到问题，你可以在 http://jekyllrb.com/help/ 找到有用的资源！ jekyll 3.1.3 | 错误: jekyll-paginate解决方法：  [plaintext]$ sudo gem install jekyll-paginate谷歌文件加载慢fonts.googleapis.com加载慢解决办法我是直接将semantic引用此文件的地方注释掉了。TOC 目录TOC把这个添加到文件中，就可以生成目录。  [plaintext]* any list {:toc}分页base page zh_CN最多页数限制分页功能插件使得 paginator liquid 对象具有下列属性：属性说明page当前页码per_page每页文章数量posts当前页的文章列表total_posts总文章数total_pages总页数previous_page上一页页码 或 nil（如果上一页不存在）previous_page_path上一页路径 或 nil（如果上一页不存在）next_page下一页页码 或 nil（如果下一页不存在）next_page_path下一页路径 或 nil（如果下一页不存在）Searchnice querySEO掌心 SEORang SEO优化 jekyll 站点的 SEO 技巧博客写好之后，直接搜索基本搜索不到。双边括号特殊符号，比如使用 vue 学习的时候，就会用到双边花括号，但是这个是 jekyll 的内置符号。解决方案如下：  [plaintext]{% comment %} 这里是各种包含奇怪花括号 {{{0}}} 的地方 {% endcomment %} TODO文章置顶has done!多说sitemap报错  [plaintext]$ gem install jekyll-sitemap ERROR: Could not find a valid gem 'Jekyll-sitemap' (>= 0), here is why: Unable to download data from https://gems.ruby-china.org/ - bad response Not Found 404 (https://gems.ruby-china.org/specs.4.8.gz)解决  [plaintext]gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/日志  [plaintext]https://gems.ruby-china.com/ added to sources source https://rubygems.org/ not present in cache重新执行  [plaintext]sudo gem install jekyll-sitemap日志  [plaintext]Fetching: jekyll-sitemap-1.2.0.gem (100%) Successfully installed jekyll-sitemap-1.2.0 Parsing documentation for jekyll-sitemap-1.2.0 Installing ri documentation for jekyll-sitemap-1.2.0 Done installing documentation for jekyll-sitemap after 0 seconds WARNING: Unable to pull data from 'https://gems.ruby-china.org/': bad response Not Found 404 (https://gems.ruby-china.org/specs.4.8.gz) 1 gem installed参考资料seohttp://vdaubry.github.io/2014/10/21/SEO-for-your-Jekyll-blog/https://crispgm.com/page/48-tips-for-jekyll-you-should-know.htmlJekyll自动生成站点地图如何让谷歌和百度搜索到自己GitHub上的博客Jekyll SEO Taghttps://github.com/jekyll/jekyll-seo-tagsitemaphttp://faso.me/notes/2013/07/27/jekyll-sitemap-without-plugin/index.htmlrubyhttps://www.jianshu.com/p/60f3707cb3ce?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendationGitHub 博客– Jekyll–代码高亮，Liquid 转义字符Jekyll 中文文档极客学院中文文档转载自https://houbb.github.io/2016/04/13/blog-engine-02-jekyll-01-install

前言由于个人一直喜欢使用 markdown 来写 个人博客，最近就整理了一下有哪些博客引擎。感兴趣的小伙伴也可以选择自己合适的。常见的博客引擎有哪些？除了 Jekyll、Hugo 和 Hexo，还有许多其他流行的博客引擎可供选择。以下是一些常见的博客引擎：WordPress：WordPress 是最流行的博客引擎之一，它提供了丰富的插件和主题，使用户能够轻松地创建和管理博客。Ghost：Ghost 是一个专注于博客的开源平台，它提供了简洁的界面和强大的编辑工具，适合那些追求写作体验的用户。Pelican：Pelican 是一个用 Python 编写的静态博客生成器，它使用简单的 Markdown 或 reStructuredText 格式来撰写内容。Gatsby：Gatsby 是一个基于 React 的静态网站生成器，它可以用来创建博客和其他类型的静态网站，具有出色的性能和灵活性。VuePress：VuePress 是一个由 Vue 驱动的静态网站生成器，它具有简单的配置和强大的插件系统，适合那些熟悉 Vue.js 的用户。Nuxt.js：Nuxt.js 是一个基于 Vue.js 的通用应用框架，它可以用来创建静态网站和单页面应用（SPA），具有灵活的路由和组件系统。Harp：Harp 是一个用 Node.js 编写的静态网站生成器，它支持使用 Markdown、Jade 和 EJS 等模板语言来创建内容。Middleman：Middleman 是一个用 Ruby 编写的静态网站生成器，它支持使用 Haml、Slim 和 Sass 等语言来构建网站。这些博客引擎各有特点，你可以根据自己的需求和偏好选择最适合的。博客引擎的对比表格以下是一份对一些常见博客引擎的比较表格。特性/博客引擎JekyllHugoHexoPelicanGatsbyVuePressNuxt.jsMiddleman语言RubyGoNode.jsPythonJavaScript (React)JavaScript (Vue)JavaScript (Vue)Ruby模板引擎LiquidGo TemplatesEJS (Embedded JavaScript)Jinja2React (JSX)VueVueERB (Embedded Ruby)速度中等快速中等中等快速快速快速快速主题系统有有有有有有有有插件系统有有有有插件生态较小插件系统较小有有社区活跃度高高高中等高高高中等数据源YAML、JSON、CSVTOML、YAMLYAML、JSONreStructuredText、Markdown数据源插件MarkdownMarkdownYAML、JSON构建时间取决于网站规模和内容量快速取决于网站规模和内容量取决于网站规模和内容量快速快速快速取决于网站规模和内容量托管支持GitHub Pages、Netlify、自己的服务器GitHub Pages、Netlify、自己的服务器GitHub Pages、Netlify、自己的服务器GitHub Pages、Netlify、自己的服务器Netlify、Vercel、自己的服务器GitHub Pages、Netlify、自己的服务器GitHub Pages、Netlify、自己的服务器GitHub Pages、Netlify、自己的服务器适用场景个人博客、文档个人博客、文档个人博客个人博客、文档博客、文档、应用官网文档、博客文档、博客小型网站、博客小结以下是对各个博客引擎的简单总结：Jekyll：静态网站生成器，使用 Ruby 编写。简单易用，支持 Markdown 和 Liquid 模板语言。社区活跃，有丰富的主题和插件可用。Hugo：快速且高效的静态网站生成器，使用 Go 编写。构建速度快，适合大型网站和博客。支持 Markdown 和自定义模板，具有灵活的主题系统。Hexo：快速的静态网站生成器，使用 Node.js 编写。支持 Markdown，使用 EJS 模板语言。插件丰富，可扩展性强。WordPress：最流行的博客平台之一，使用 PHP 和 MySQL。功能强大，支持插件和主题定制。需要服务器支持，适合有一定技术基础的用户。Ghost：简洁的博客平台，使用 Node.js 和 Ember.js。提供良好的写作体验和编辑工具。面向写作者和博客专业人士。Pelican：Python 编写的静态网站生成器。使用简单，支持 Markdown 和 reStructuredText。社区活跃，有各种插件可用。Gatsby：基于 React 的静态网站生成器，使用 GraphQL 查询数据。具有出色的性能和灵活性，支持 Markdown 和 React 组件。适合构建高度交互的博客和网站。VuePress：基于 Vue.js 的静态网站生成器，使用 Markdown 和 Vue 组件。简单易用，支持自定义主题和插件。适合开发者和技术博客。转载自cid:link_02016/04/13/blog-engine-01-overview

原理讲解当涉及到 HTML5 的 <canvas> 元素和绘图上下文时，你可以使用不同的绘图命令来创建各种形状和效果。在这个代码示例中，我使用了贝塞尔曲线来绘制爱心。贝塞尔曲线是一种数学曲线，用于绘制平滑的曲线形状。HTML5 的 Canvas 提供了贝塞尔曲线绘制函数 ctx.bezierCurveTo()，该函数允许你定义曲线的起始点、结束点以及两个控制点，从而控制曲线的形状。这是贝塞尔曲线的一般格式：ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);其中：(cp1x, cp1y) 和 (cp2x, cp2y) 是两个控制点的坐标。(x, y) 是曲线的结束点坐标。代码示例这个例子使用了二次贝塞尔曲线来绘制爱心图像。你可以在 ctx.bezierCurveTo 函数的参数中调整控制点的位置以及心形的大小。这只是一个简单的爱心图像，如果你想要更多样化的效果，你可以尝试使用其他的绘图方法和图形库。代码如下<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Heart Drawing</title> <style> body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f0f0f0; } canvas { border: 1px solid #000; } </style> </head> <body> <canvas id="heartCanvas" width="400" height="400"></canvas> <script> const canvas = document.getElementById("heartCanvas"); const ctx = canvas.getContext("2d"); const centerX = canvas.width / 2; const centerY = canvas.height / 2; const heartSize = 100; ctx.beginPath(); ctx.moveTo(centerX, centerY + heartSize / 2); ctx.bezierCurveTo( centerX + heartSize / 2, centerY - heartSize / 2, centerX + heartSize, centerY - heartSize / 2, centerX + heartSize, centerY + heartSize / 2 ); ctx.bezierCurveTo( centerX + heartSize, centerY + heartSize, centerX, centerY + heartSize * 1.5, centerX, centerY + heartSize * 1.5 ); ctx.bezierCurveTo( centerX, centerY + heartSize * 1.5, centerX - heartSize, centerY + heartSize, centerX - heartSize, centerY + heartSize / 2 ); ctx.bezierCurveTo( centerX - heartSize, centerY - heartSize / 2, centerX, centerY + heartSize / 2, centerX, centerY + heartSize / 2 ); ctx.fillStyle = "red"; ctx.fill(); </script> </body> </html>运行效果代码讲解在这个例子中，我使用了四个贝塞尔曲线命令来绘制爱心的两个半部分，然后通过填充颜色使其成为一个完整的心形。代码中的绘制步骤：创建了一个 <canvas> 元素，并获取了绘图上下文 ctx。定义了心形的中心点坐标 centerX 和 centerY，以及心形的大小 heartSize。使用 ctx.beginPath() 开始绘制路径。使用 ctx.moveTo() 移动到心形的起始点，即下部的尖端。使用 ctx.bezierCurveTo() 绘制第一段贝塞尔曲线，连接到右上方的控制点和结束点。重复步骤 5，使用两个贝塞尔曲线连接到右下方的控制点和结束点，形成右侧的心形半部分。使用 ctx.bezierCurveTo() 绘制下部的凹陷，连接到底部控制点和起始点。最后，使用填充颜色（ctx.fillStyle = "red"）填充绘制的路径，形成红色的爱心。因此，这个代码通过使用贝塞尔曲线命令，将多个曲线段连接在一起，形成了一个简单的爱心图像。