最近用MarkDown，然后好多语法可以直接用html的，所以就有了学习一下html的想法，教程主要就是来自菜鸟教程吧，不确定的就会去Google直接搜索。
HTML
HTML基础
HTML标题
使用h1到h6表示，基本和MarkDown里面的#的用法一致，但是使用html标题的话没办法再hexo博客上面单击目录跳转(不太懂什么原因)。
<h1-6>标题内容</h1-6>
HTML段落
使用p来定义段落，但是好像不会自动首行缩减。要加上空格(&emsp或者是 )
<p>段落内容</p>
HTML链接
使用a来定义，和MarkDown的方括号加圆括号一样效果。
<a href="链接url">链接的名称</a>
HTML图片
使用img来定义，和MarkDown的叹号加方括号加圆括号一样效果，只是markdown无法改变图片的尺寸。
<img src="图片链接" width='258' hight="39" />
可以使用属性来限制图片的属性。
HTML元素
| 开始标签 | 元素内容 | 结束标签 |
|---|---|---|
| < p > | 段落内容 | < /p > |
| < br > | 换行 |
HTML元素一般以开始标签开始，结束标签为结束，位于开始标签和结束标签之间的内容称为元素的内容，某些元素内容可以为空的元素称为空元素，它们一般就在开始标签中关闭。
1. 一些标签的使用，切记所有标签都需要闭合，不管是单体标签还是成对标签。（尽管目前浏览器是识别有些标签不闭合的情况，但是取的最好的保证兼容性，使用闭合）
2. 标签写法要用小写字母（有些版本对大小写可认为相同，而xhtml中强制使用小写）
HTML属性
HTML元素可以设置属性，一般放在开始标签中，属性总是以__名称-值__的方式出现，值使用引号包括，如果值中本身存在双引号，那么外部只能使用双引号，其余都可。
常用的HTML属性：
| 属性 | 描述 |
|---|---|
| class | 为html元素定义一个或多个类名 |
| id | 定义元素的唯一id |
| style | 规定元素的行内样式 |
| title | 描述了元素的额外信息 |
HTML标题
html标题就是使用< h1 >到< h6 >来定义。
html水平线使用< hr >定义
注释使用< !–注释内容-- >表示
HTML段落
段落使用< p >标签定义。
在不产生一个新段落的情况下进行换行，使用< br >
HTML文本格式化
使用标签< b >(“bold[粗体]”)和< i >(“italic[斜体]”)对文本进行格式化。
< strong >和< b >,< em >和< i >,< strong >或者< em >更加强调文本的重要性，所以突出显示。
HTLM文本格式化标签
| 标签 | 描述 |
|---|---|
| <b> | 定义粗体 |
| <em> | 定义着重文字(斜体) |
| <i> | 定义斜体 |
| <small> | 定义小号字 |
| <big> | 定义大号字 |
| <strong> | 定义加重(粗体) |
| <sub> | 定义下标 |
| <sup> | 定义上标 |
| <ins> | 定义插入字 |
| <del> | 定义删除字 |
上面的< big >我在VScode上面写的话会显示红色，就是这个标签可能是不太支持，但是确实是有大一点的字体。
HTML"计算机输出"标签
| 标签 | 描述 |
|---|---|
| <code> | 定义计算机代码 |
| <kbd> | 定义键盘码 |
| <samp> | 定义计算机代码样本 |
| <var> | 定义变量 |
| <pre> | 定义与格式文本(标签内是什么格式就输出什么格式) |
HTML引文，引用及标签定义
标签|描述
<abbr>|定义缩写
<address>|定义地址(定义作者和联系这的信息)
<bdo>|定义文字方向(无属性时为左到右，添加dir=‘rtl’，可以变为右到左)
<blockquote>|定义长引用
<q>|定义短引用
<cite>|定义引用，引证(定义作品的标题)
<dfn>|第一一个定义项目
The <abbr title="Si Chuan University">SCU</abbr> is very good!(有一点类似脚注，但是这个直接显示在缩写下面)
HTML链接
href属性
html链接使用< a href=“url” >链接的名字< a >来定义，href属性定义链接的地址。
target属性
target属性定义点击链接之后链接在何处打开。
| target属性名 | 作用 |
|---|---|
| _balnk | 在一个新的窗口打开网站 |
| _parent | (具体实施)就是在本窗口上往下跳转一个窗口 |
| _self | (具体实施)就是在本窗口 |
| _top | (具体实施)就是在本窗口 |
后面的三种看了网上的解释也是复杂难懂，所以就没有细究，自己试了一下没感觉出差别，若果以后理解再来作解释。
id属性
id属性可用于创建在一个HTML文档书签标记。
提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。
没看太懂…
HTML头部
< head >元素中包含了所有的标签元素，可以插入脚本，样式文件(CSS)等
可以插入<head>区域的元素：<title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
title元素
< title >标签定义了文档的标题，就是打开网站的时候最上面浏览器窗口那个的名字。添加到收藏夹的时候，显示在收藏夹的名字也是文档标题。在搜索引擎搜索时所显示的结果页面也是该标题。
base元素
< base >标签描述了基本的链接地址/链接目标，该标签作为html文档中所有链接标签的默认链接。(就是在使用< a >进行链接的时候没有指定href属性的值（也就是值为空""），那么就会链接到base标签中href的地址。)
link元素
< link >标签定义文档和外部资源得关系，一般为链接样式表，就是规定文章中不同部分(标题，段落等)的颜色和格式。
style元素
< style >定义html文档样式文件引用地址。也可以直接添加样式来渲染。
mate元素
< mate >描述了一些基本的元数据，通常为网页的描述，关键词，文件最后修改时间，作者等等。
script元素
用于加载脚本文件。
<!DOCTYPE = html>
<html>
<head>
<meta charset="utf-8">
<meta name="keyword" content="test,html,head">
<meta name="description" content="test element head of html！">
<meta name="author" content="JokerJD">
<meta http-equiv="refresh" content="1000"><!--多少秒定时刷新页面-->
<title>html头属性测试文件</title>
<base href="http://AggressiveJokerJD.github.io" target="_blank">
<style>
body {background-color: aquamarine}
p {color: pink}
h1 {color: plum}
</style>
<script>document.write("Hello World!")</script>
</head>
<body>
<h1>测试1</h1>
<hr>
<p>段落一的内容因该为粉红色的吧！</p>
</body>
</html>
这是一个对于上面不同元素的一个示例。
样式CSS
包括内联样式，内部样式表和外部引用三种。
内联样式就是直接在标签的开始括号内直接表明某些样式属性的值即可，如style=“background-color:yellow”
内部样式表就是在head里面直接添加style属性以达到的样式效果。
外部样式就是可以通过link直接指定样式的一个.css文件来达到效果。
通过style可以修改的属性有很多，如背景颜色(background-color)，字体颜色(color)，字体(font-family)，字体大小(font-size)，对齐方式(text-align)等
具体的写法可以直接查看CSS相关教程即可获得相关知识，此处不再过多赘述。
HTML图像
使用< img >定义图像
<ig src="url" alt="some_text" width="480" height="360" title="标题">
其中url为图片的位置(外链),alt为一串可替换文本，当无法访问图片时，alt提示内容可以告诉访问者失去信息。高度和宽度都可以由用户自己定义。title为鼠标移动到图片上显示的文本信息。
< map >定义图片地图，< area >定义图片地图中可点击的区域。
<img src="url" alt="图片的名字" usemap="map的名字(定义map的时候的name)">
<map name="">
<area shape="circle" coords="90，58，3" alt="Sun" href="单机区域链接到的地址(url)">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="poly" coords="x1,y1,x2,y2 ......" (多边形各顶点坐标)href=url>
……
</map>
name是这个图片地图的名字，供图片调用。area定义了可以点击的区域的属性，shape为可点击区域的形状，coords为可点击区域的具体位置，根据不同形状使用不同参数规定，alt为该区域的替换文本，href为点击之后产生链接的地址。
HTML表格
由< table >标签定义。由< tr >定义行数,由< td >定义列数和属性值,< caption >定义了表格的标题，
<table border="0">
<caption>table</caption>
<colgroup>
<col span="1" style="background-color:greenyellow">
<col style="background-color: hotpink">
</colgroup>
<tr>
<td>属性</td>
<td>描述</td>
</tr>
<tr>
<td>border</td>
<td>表格是否存在边框(0无1有)</td>
</tr>
<tr>
<td>td</td>
<td>表示表的内容和具体的列数</td>
</tr>
<tr>
<td>tr</td>
<td>表示表格的具体的行数</td>
</tr>
<tr>
<td>caption</td>
<td>表示表格的标题</td>
</tr>
<tr>
<td>colgroup</td>
<td>表示列的分组，讲列分为若干组来调整颜色或者字体等</td>
</tr>
<tr>
<td>col</td>
<td>具体的描述列的各个属性</td>
</tr>
<tr>
<td>span</td>
<td>表示本条对列的描述具体影响多少列</td>
</tr>
</table>
HTML列表
无须列表使用< ul >定义并表示,< li >，表示列表条目，< ol >定义有序列表，< dl >定义自定义列表< dt >表示自定义列表项目，< dd >表示自定义列表项的描述。
<ul>
<li>期末考试</li>
<ol>
<li>英语</li>
<li>毛概</li>
<li>数据库</li>
<li>架构</li>
<li>软工导</li>
<li>操作系统</li>
</ol>
<li>国际周</li>
<dl>
<dt>CIE</dt>
<dd>两周早上1，2节，每周四天</dd>
<dt>DIT</dt>
<dd>两周早上3，4借，每周四天</dd>
</dl>
<li>小学期</li>
<dl>
<dt>做项目</dt>
<dd>要十天，晕</dd>
</dl>
</ul>
可以嵌套使用。
HTML区块
emsp;定义区块有< div >开辟一块区域专门的定义各种属性，< span >组合行内的元素。div还可以使用不同的属性如weight,height等等来将区块定位到网页的不同的区域。
HTML布局
可以使用div区块的方法和table列表的方法实现，具体参照链接
HTML表单
基本表单属性
定义表单使用< form >定义。允许用户在表单中输入内容，如：文本域，下拉列表，单选框，复选框等等。
| 属性 | 描述 |
|---|---|
| 文本域 | 使用type=“text”，创建一个可见输入的可输入文本的区域 |
| 密码字段 | 使用type=“password”，创建一个不可见输入的可输入文本区域 |
| 单选按钮 | 使用type="radio"创建一个只单选框 |
| 复选框 | 使用type="checkbox"创建一个复选框 |
| 提交按钮 | 使用type="submit"创建一个提交按钮 |
| 重置按钮 | 使用type="reset"创建一个重置按钮(清空选择) |
| 按钮 | 使用type="button"创建一个按钮(没有提交操作) |
<form>
First User Name:<input type="text" name="FUSN"><br>
Last User Name:<input type="text" name="LUSN"><br>
Password:<input type="password" name="PSW">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Famale<br>
<input type="checkbox" name="many choice" value="male">I am a boy!<br>
<input type="checkbox" name="many choice" value="female">I am a girl!<br>
<input type="checkbox" name="many choice" value="student">I am a student!<br>
<input type="submit" value="确认">
<input type="reset" value="重置"><br>
<input type="button" value="这就是个按钮！">
</form>
还可以使用< fieldset >定义表单的边框，使用< legend >定义fieldset边框的标题。
下拉列表属性
下拉列表，就像是选择日期那种下拉然后选择一样，可以设置预选属性(使用selected做限定即可)。
<select name="data">
<optgroup label="day">
<option value="7日">7日</option>
<option value="8日" selected>8日</option>
<option value="9日">9日</option>
<option value="10日">10日</option>
</optgroup>
<optgroup label="month">
<option value="7月">7月</option>
<option value="8月" selected>8月</option>
<option value="9月">9月</option>
<option value="10月">10月</option>
</optgroup>
<input type="reset" value="重置">
</select>
使用< optgroup >定义选项组，就是将选项分类显示，给予一个选择的提示。
文本域
文本域提供一个区域可供用户输入语句。直接使用taxtarea即可实现。
<textarea name="文本域" id="1" cols="30" rows="10">这是一个文本域。</textarea>可以设定文本区域大小和初始显示的字。
HTML框架
可以使用框架在一个窗口显示多个页面。定义框架使用< iframe >。
<iframe src="http://AggressiveJokerJD.github.io" name="iframe_a" width="300" height="300" frameborder="0"></iframe>
使用属性frameborder去除框架的边框。
<a href="http://www.google.cn/" target="iframe_a">google</a>
HTML脚本
使用< script >来定义要使用的脚本，直接在script之间写下脚本语言或者是src指向外部脚本文件,< noscript >定义了无法使用脚本或者是页面禁用脚本之后会替代script里面内容所显示的内容
<h1 id="001">脚本测试</h1>
<script>
function myfunction(){
x = document.getElementById("001");
x.style.color = "#ffff00";
}
</script><noscript>无法进行操作！</noscript>
<button type="button" onclick="myfunction()">button</button>
HTML字符实体
HTML 中的预留字符必须被替换为字符实体。一些在键盘上找不到的字符也可以使用字符实体来替换。
| 音标符 | 显示效果和写法 |
|---|---|
| ̀ | à ̀ |
| ́ | á ́ |
| ̂ | â ̂ |
| ̃ | ã ̃ |
| 结果 | 描述 | 实体名称和编号 |
|---|---|---|
| 空格 |  /emsp   | |
| < | 小于号，左尖括号 | < < |
| > | 大于号，右尖括号 | & > |
| & | 和号 | & & |
| " | 引号 | " " |
| ' | 撇号 | ' ' |
| ¢ | 分 | ¢ ¢ |
| £ | 镑 | £ £ |
| ¥ | 人民币 | ¥ ¥ |
| € | 欧元 | € € |
| § | 小节 | § § |
| © | 版权 | © © |
| ® | 注册商标 | ® ® |
| ™ | 商标 | ™ ™ |
| × | 乘号 | × × |
| ÷ | 除号 | ÷ ÷ |
HTML5
HTML5相较于HTML增加了一些新元素，新属性，提供更多的支持，而且删除了一些HTML4.01中的元素。
HTML5 Canvas
<canvas>定义图形，也就是画布，可以通过脚本来对其进行绘制。
<canvas id="my_canvas" width="500" height="400" style="background-color: azure">
当前浏览器不支持HTML5 canvas标签</canvas><!--如若无法使用提示语句-->
<script>
var c = document.getElementById("my_canvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#ffff00";
ctx.fillRect(0,0,150,130);
ctx.moveTo(0,0);
ctx.lineTo(500,400);
ctx.stroke();
</script>
可以对其进行其他操作，可参考链接
HTML5视频
<video>提供了插入视频的方法，和Canvas一样，开始标签和结束标签之间的位置提供无法使用video时候的提示语句。
<video>支持MP4，WebM和Ogg三种视频格式。
<video width="320" height="240" controls>
<source src="url" type="video/mp4">
您的浏览器不支持 HTML5 video 标签。
</video>
HTML5音频
<audio>和<video>基本相似。
<video controls>
<source src="url" type="video/mp4">
您的浏览器不支持 HTML5 video 标签。
</video>
HTML5 Input
增加了type的类型：date，color，datetime，datatime-local，email，month，nummber等，可以参考链接。
其余HTML5相关知识
其他的HTML5的知识还包括Web存储，Web SQL，SSE等，均可直接查看链接。