参考学习：w3school.com.cn/html5/html_5_intro.asp
H5分为：html(内容和结构),css（样式）,javascript（交互）
Html(表示：<标签 属性> 内容（元素）</标签>)
html文档中主要分为head，和body两部分；
head:包含title，文章的标题，可以包含javascript；
body:文档主体，包含段落，标题，链接，javascript等标签；
* 元素：标签开始到标签结束的部分全部是元素；
* 标签（大小写不敏感）：
<br/>：定义空元素，标签一开始就结束，如不产生新段落的情况下，可以用作换行（新增一行）；
<p 属性> 内容</p>: 定义段落；
<h1>-<h6>：定义标题，h1为最大标题,h6为最小标题；
<hr/>: 定义水平线；
<!-->：定义注释；
<abbr>:定义缩写；
<a>:定义链接；
备注：后续文章会详细介绍标签；
* 属性：键值对的形式，紧跟在开始标签中，如name="value"
<a href="http://www.w3school.com.cn"> This is a link</a>
备注：href="http://www.w3school.com.cn"为属性，This is a link为内容；
* 样式（俗称内联样式）：style属性用于改变html元素的样式，直接放在标签后面的，如
<h1 style="font-family:verdana">A heading</h1>
style属性：它是一种新的首选的改变html元素样式的方式，通过HTML样式，能够通过使用style属性直接将样式添加到html元素中，或者间接地在独立的样式表中进行定义(稍后介绍)；
属性包含：font-family：字体
* 格式化：
** 文本格式化：在一个 HTML 文件中对文本进行格式化
<b>: 定义粗体文本；
<big>: 定义大号字；
<em>: 定义着重文本；
<i>: 定义斜体字；
<small>: 定义小体字；
<strong>: 定义加重字体；
<sub>: 定义下标字；
<sup>: 定义上标字；
<ins>: 定义插入字；
<del>: 定义删除字；
** 预格式文本：使用 pre 标签对空行和空格进行控制
<pre>: pre中的元素的空格和空行全部保留；
** “计算机”输出标签
<code>: 定义计算机代码，不保留多余的空格和折行。
<kbd>: 定义键盘码；
<samp>: 定义计算机代码样本；
<tt>: 定义打字机代码；
<var>: 定义变量；
<pre>: 定义预定义格式，保留空格和折行；
** 地址:在 HTML 文件中写地址
<address>:定义地址；
** 缩写与首字母缩写：当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。
<abbr>:缩写 <abbr> title="etcetera">etc. <abbr/>
<acronym> :这是首字母缩写 <acronym title="World Wide Web"></acronym>
** 文字方向：改变文字的方向
<bdo> : dir="rtl" 为向左输出；
** 块引用：使用 blockquote 元素的话，浏览器会插入换行和外边距
<blockquote>：长引用
<q>:定义短引用，带双引号
** 删除字效果和插入字效果
<del>: 删除 <del >二十< /del>
<ins>: 增加
*引用
<dfn>:定义项目或所写的定义； <dfn title="World Health Organization">WHO</dfn>
<city>:定义著作的标题；
* 注释
<!-->:注释
* 块：大多数的html元素被定义为块级元素或内联元素
HTML 块元素：块级元素在浏览器显示时，通常会以新行来开始（和结束）
内联元素：内联元素在显示时通常不会以新行开始，就是一行内突然加入几个字，格式、字体与其他字体都不一样；
html <div>块元素：是块级元素，它是可用于组合其他html元素的容器，没有特定含义，由于是块级元素，浏览器会在其前后显示折行，如果与 CSS 一同使用，<div>元素可用于对大的内容块设置样式属性。<div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table>元素进行文档布局不是表格的正确用法。<table>元素的作用是显示表格化的数据。
html <span>元素：是内联元素，可用于文本的容器，没特定含义，当与 CSS 一同使用时， <span>元素可用于为部分文本设置样式属性。
标签：
*
<div>:可定义文档中的分区或节（division/section）。
eg：
<div style="color:#00FF00">
<h1>标题</h1>
<p>段落部分</p>
</div>
用法： <div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且
不使用任何格式与其关联。如果用 id 或 class 来标记，那么该标签的作用会变得更加有效。
<div>是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是<div>固有的唯一格式表现。可以通过<div>的 class 或 id 应用额外的样式。
* *不必为每一个<div>都加上类或 id，虽然这样做也有一定的好处。
* * 可以对同一个<div>元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组(类似的元素，或者可以理解为某一类元素），而id 用于标识单独的唯一的元素。
*<span>:组合文档中的行内元素；span 没有固定的格式表现，当对它应用样式时，它才会产生视觉上的变化；
eg：
<p>
文档前面部分
<span
style="color:red">这部分内容很特殊
</span>
文档后面部分
</p>
* 如果不对 span 应用样式，那么span 元素中的文本与其他文本不会任何视觉上的差异。
*可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。
*提示：事实上，您也许已经注意到了，一些站点上有一些文本的样式与其他文本是不同的。比如“提示”使用了粗体的橘红色。尽管实现这种效果的方法非常多，但是我们的做法是：使用“提示”使用 span 元素，然后对这个span 元素的父元素，即p 元素应用 class，这样就可以对这个类的子元素 span 应用相应的样式了可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。
* 列表：
**无序列表是一个项目的列表，无序列表始于<ul>标签，每个列表项始于<li>标签，此列项 目使用粗体圆点（典型的小黑圆圈）进行标记；
eg:
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
显示结果：
· Coffee
· Tea
备注：列表内可以使用段落，换行符，图片，链接以及其他列表等等；
**有序列表也是一个项目的列表，列表项目使用数字进行标记；有序列表始于<ol>,每个列表项始于<li>标签；
eg:
<ol>
<li>Coffee</li>
<li>Tea</li>
</ol>
显示结果：
1.Coffee
2.Tea
备注：列表内可以使用段落，换行符，图片，链接以及其他列表等等；
定义列表:自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以<dl>标签开始。每个自定义列表项目以<dt>开始。每个自定义列表项的定义（描述）<dd>开始;
<dl>
<dt>Coffee</dt>
<dd>Tea and Coffee</dd>
<dt>Test</dt>
<dd>RRRRRR</dd>
</dl>
显示结果为：
Coffee
Tea and Coffee
Test
RRRRRR
css:独立的在样式表中进行定义；
* 外部样式表（.css文件）：当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观,在head部分通过link标签定义。
eg：
<head >
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
* 内部样式表（.css文件）（用的比较多）：当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过标签定义内部样式表。
eg：
<head>
<style type="text/css">
body{ //对body主体元素进行全面设置
background-color:red //设置本html文档的主体背景为红色
}
p { //对段落进行设置
margin-left: 20px //对每个段落全部左缩进20px
}
</style>
</head>
* 内联样式(不推荐使用)：当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
eg：
<p style="color：red ; margin-left: 20px"> This is a paragraph</p>
备注：单个属性不需要标点符号，多个属性时候需要用；进行分割
* 用到的标签：
**<style>:定义样式定义；
**<link>：定义资源引用；
**<div>：定义文档中的区域或块；
<div>
<h1>标题</h1>
<p>这是段落</p>
</div>
**<span>：定义文章行内的块或区域；
<p>
<span>这是行内块</span>
</p>
**<font>：规定字体大小和颜色，不赞成使用，请使用样式，<font font size="3" face="verdana" color="red"> this is some Text</font>
**<basefont>:定义基准文字，不赞成使用，请使用样式；
**<center>:对文本进行水平居中；不赞成使用，请使用样式；
注意：
**对html文档中对标签包括的部分进行样式修订时候：
html中布局文件：<标签> </标签>
eg：针对header标签进行修饰；
<header>
<h1 >City Gallery </h1>
</header>
css样式对应：标签（*）{ }
header { // 标签{ }
background-color:black;
color:white;
text-align:center;
padding:5px;
}
**对html文档中的块<div>中的id（id必须为标签名）进行样式修订时候需要加#：
html布局文件中：
<div id="header">
<h1 >City Gallery</h1> //header为已存在的标签名
</div>
css文件中：
#header{ // #标签名
background-color:black;
color:white;
text-align:center;
padding:5px;
}
**对html文档中的块<div>中的class（class名字为自定义元素的类名）进行样式修订时候需要加 .
html:
<div class="cities">
<h1>London</h1>
<p>London is the Capital of England</p>
</div>
为自定义元素的类定义css中：
.cities{ //.*（类名）
}
**针对文档中固有标签中（除<div>之外）自定义class元素的类的样式修饰，使用 *（某标签） .**（ 定义的class名）及*（某标签） .** （定义的class名字） **(标签中的子元素)
html中的：
eg：标签为table，class名为lamp
<table class="lamp">
<tr>
<th>这里是表格标题</th>
<td>这是表格的单元格</td>
</tr>
</table>
对固定标签中自定义的元素的类的css样式中：
1. table.lamp //* . **
{
width:100%;
border:1px solid#d4d4d4;
}
2.
table.lamp th,td{ //* .** 标签中的子元素，table标签下的子元素为th，td
padding:10px;
}
*伪类:css中特殊的定义的名称，与id和class（可以随意定）不同
标签（*）:伪类
例如：
a:link,a:visited{ //link,visited是链接a中的伪类（规定好的伪类，无法更改）
border-style:solid;
border-width:5px;
border-color:transparent;}
Javascript(html 脚本)
在html中加入javascript代码：
* 可以放在html中的head部分（可以被全局调用），也可以放置在body部分（从性能方便考虑英放在body底部（或者</html>标签之前），因为脚本是从上到下一步步执行的，js放在body顶部，js执行过程耗时越久，浏览器等待响应用户输入的时间就越长，就会影响页面的渲染（h5部分）的时间）；
* 在html中<script ></script>里面就是javascript代码；一个html文件中可以有多个<script ></script>标签；
* 可以引用本页面（html）的js，也可以引用外部js文件；
* 引用本页面代码：
<script type="text/javascript" >
function allowdrop( kk){ //allowdrop为方法名称，可以在本html页面被调用；kk为属性值
}
<script>
* 引用外部js文件：
<script type="text/javascript" src="demo.js"></script>
单独写js文件：
function allowdrop(kk){
//js代码
}
