H5-class1
工欲善其事，必先利其器！正式开始Html5+css3+JS之前，老师介绍了一款记笔记神器：简书。它是一款基于markdown语法的记事本。有点像TXT文档被“html”添加了语义。当然markdown是一个极其基础的语法，需要极少的时间成本我们就能拥有编辑一个漂亮的编辑界面的能力。在今天的笔记中主要是从两个方面记录第一天的学习内容：
(1) markdown语法的简单梳理；
(2) html发展以及简单的几个标签；
…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·
1、 markdown语法的简单梳理:
对于markdown语法的梳理，常用的内容包含一下几个类别：
- 文字首行缩进、换行、标题大小、粗体、斜体；
- 列表、代码块、引用；
- 插入图片与链接；
- 常用字符分割线；
- 字体、大小、颜色、背景颜色；（结合HTML使用）
1.1.1：首行缩进(每个表示一个空格，连续使用两个即可）：
-
 半角的空格 -
 全角的空格
1.1.2 换行：
连续两个以上空格+回车
1.1.3 标题大小：
1.1.4 粗体、斜体：
Markdown 的粗体和斜体也非常简单，用两个* 包含一段文本就是粗体的语法，用一个*包含一段文本就是斜体的语法。
…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·
1.2.1：表格：
表格是我觉得 Markdown 比较累人的地方，例子如下：
| Tables | Are | Cool |
| ------------- |:-------------:| -----:|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
通过这样的语法可以生成如下效果：
| Tables | Are | Cool |
|---|---|---|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
1.2.2：代码块：
因为职业原因，我们会经常展示一些代码块，这个时候我们只需要在需要展示的代码块前面和后面加上```即可。
1.2.3：引用：
如果我们想在文章中引用别人的内容，这个时候用可以在需要引用的内容前面添加>符号即可。
…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·
1.3.1：插入图片：
图片插入格式：！[]()：中括号内容用来说明图片名称，小括号内容填写图片url；
超链接格式：[]()：中括号内容用来说明超链接显示文字，小括号内容填写超链接url；
1.4：分隔符（字符类）：
┄┅┄┅┄┅┄┅┄°┄┅┄┅┄┅┄┅┄°┄┅┄┅
…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·
┉┉∞ ∞┉┉┉┉∞ ∞┉┉┉∞ ∞┉┉┉┉∞ ∞┉┉┉┉┉∞ ∞
…┉═∞═…┉═∞═…┉═∞═…┉═∞═…┉═∞═…┉═∞═
┈━═┈━═┈━═┈━═┈━═☆、┈━═┈━═┈━═┈━═┈━═☆、
━━●●━━━━━━━━━━━━━●●━━━━━━━━━━━━━●●━━
●═════════════●●═══════════════●
▂﹏▂﹏▂﹏▂﹏▂﹏▂﹏▂﹏▂﹏▂﹏▂▂﹏▂﹏▂﹏▂﹏▂﹏▂﹏▂﹏▂﹏▂
━═━═━◥◤━═━═━━═━═━◥◤━═━═━━═━═━◥◤━═━═━
●∞ ∞●∞ ∞●∞ ∞● ●∞ ∞●∞ ∞●∞ ∞● ●∞ ∞●∞ ∞●∞ ∞●
██￣██ ██￣██ ██￣██ ██￣██ █__█￣█
┾━┾━━━━┄·┾━┾━━━━┄·┾━┾━━━━┄·┾━┾━━━━┄
▂▂▂▂▂▂◎。▂▂▂▂▂▂◎。▂▂▂▂▂▂◎。▂▂▂▂▂▂◎。▂▂▂▂
の┅∞┉の┅∞●の┅∞┉の┅∞の┅∞┉の┅∞●の┅∞┉の┅∞の┅∞
━┉… ●━━……━━● …┉━━┉… ●━━……━━● …┉━━┉… ●━━
…·～·…οΟ○の○Οο…·～·……·～·…οΟ○の○Οο…·
."".·°∴☆…·…·…·…·…·…·…·☆．．·°"". ."".·°∴
＊═—═—═—＊＊═—═—═—＊＊═—═—═—＊＊═—═—═—＊＊═—═
-------∽-★-∽------∽-★-∽---------------∽-★-∽------∽-★-∽--------
□■□■□■□■□■□■□■□■□■□■□□■□■□■□■□■□■□■□
╰☆╮╰★╮╰☆╮╰★╮╰☆╮╰★╮╰☆╮╰★╮
＊═—═—═—＊の＊═—═—═—＊＊═—═—═—＊の＊═—═—═
→☆→☆→☆→☆→←★←★←★←★←★←→☆→☆→☆→☆→←★←★←★
╠═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬═╬╣
★☆·☆.∴★*∴*·∴★∴★☆·☆.∴★★☆·☆.~∴~★
◆┈┈┈┈┈┈┈┈┈◆┈┈┈┈┈┈┈┈┈◆┈┈┈┈┈┈┈┈┈
╊═┉∞ ∞┉═∞ ∞┉═╪╊═┉∞ ∞┉═∞ ∞┉═╪╊═┉∞ ∞┉═∞
╳¨◆╳¨◇╳¨◆╳¨◇╳¨◆╳¨◇╳¨◆╳¨◇╳¨◆╳¨◇╳¨◆╳¨◇
§┈┅┈§┈┅┈§┈┅┈§┈┅┈§┈┅┈§┈┅┈§§┈┅┈§┈┅┈§┈┅┈§
.•●•✿.｡.:.•●•✿.｡.:.•●•✿.｡.:.•●•✿.｡.:.•●•✿.｡.:.•●•✿.｡.:.•
☆•:´¨*:•.☆•:*´¨:•.☆•:´¨*:•.☆•:*´¨:•.☆•:´¨`:•.☆•:*´¨
▍|▍▍||▍|▍|▍▍||▍|▍|▍▍||
●∞ ∞●∞ ∞●∞ ∞● ∞ ∞●∞ ∞●∞ ∞●
┍‘●●●●●●’┒
╰●●●●●●●╯
."".""."".""..""."".."".*
◣◤◥◢◣◤◥◢◣◥◢◣◤◥◢◣◤◥◢◣◤◥◢◣◤◥◢◣◤◥◢◣◤◥◢
☺☻☺☻☺☻☺☻☺☻☺☻☺☻☺☻☺☻☺☻☺☻☺☻☺☻☺☻☺☻
☏☎☏☎☏☎☏☎☏☎☏☎☏☎☏☎☏☎☏☎☏☎☏☎☏☎☎☎☏☎
△▲△▲△▲△▲△▲△▲△▲△▲△▲△▲△▲△▲△▲△▲△▲
▽▼▽▼▽▼▽▼▽▼▽▼▽▼▽▼▽▼▽▼▽▼▽▼▽▼▽▼▽▼▽▼
📱📱📱📱📱📱📱📱📱📱📱📱📱📱📱📱📱📱📱📱📱📱📱📱📱📱📱
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※
==========❉==========❉==========❉==========
—————☼—————☼—————☼—————☼—————☼—————
1.5.1： 字体、大小、颜色：
<font face="黑体">我是黑体字</font>
<font face="微软雅黑">我是微软雅黑</font>
<font face="STCAIYUN">我是华文彩云</font>
<font color=#0099ff size=7 face="黑体">color=#0099ff size=72 face="黑体"</font>
<font color=#00ffff size=72>color=#00ffff</font>
<font color=gray size=72>color=gray</font>
Size：规定文本的尺寸大小。可能的值：从 1 到 7 的数字。浏览器默认值是 3
1.5.2： 背景颜色：
<table><tr><td bgcolor=orange>背景色是：orange</td></tr></table>
注意：第五类特性在目前简书中是不能使用的，但是这些也算是markdown的语法，这个语法与html早期的编写规则十分相似。这种写法在其他的编辑器，比如CSDN-markdown中就能使用，作为了解即可。
2、 html发展以及简单的几个标签：
html：本尊叫做HyperText Markup Language，翻译成不能意会的中文名称就叫做超文本传输协议。也就是在网页上可以呈现给大家图片、链接、音乐、程序等等元素。它诞生于1993年。后来经过1代、2代、3代、4代，发展到今天的5代。它的标准主要由W3C来发布，几个大的浏览器厂商来控制。这几大浏览器主要是指谷歌、火狐、IE、欧朋、Safri。我们以后在进一步学习html，css和JS的过程中，避免不了的一个问题就是写一个程序，需要考虑各个厂家的兼容性问题。这个炒蛋的问题只有等到世界大一统才能解决了。不过随着H5时代的来临，程序员的春天也来了，所以接下来的事情，就是埋头苦学，争取早日苦尽甘来了。
- html的基本格式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
2.快捷键：
- 创建文件：Ctrl + Alt + ins
- 书写标签：标签名称+Tab（或者回车键）
- 跳到本行最前面：home键
- 跳到本行最后面：end键
- 复制光标所在的行：Ctrl + d
- 多行编辑：Alt键+按鼠标左键向下滚动
- 给文字添加标签：Ctrl + Alt +t
3.基本标签：
3.1 H标签：将标题大小分为6个级别，1最大，6最小。
3.2 P标签：将一段文字添加上段落的语义。
3.3 hr标签：写法可以是hr或者/hr，给上下面添加一条横线，企业开发中很少使用。
