第二章 HTML5简述
1.1、甚么是HTML
HTML（HyperText Markup Language，LZ77记号词汇）是用以叙述页面的一类词汇，它不是一类编程词汇，而要一类记号词汇。
1.2、甚么是HTML5
HTML5是构筑Web文本的一类词汇叙述形式，HTML5是网络的新一代国际标准，是构筑和呈现出网络文本的一类词汇形式，被认为是网络的核心理念控制技术之一。HTML产生于1990年，1997年HTML4正式成为网络国际标准，并广为应用领域于网络应用领域的合作开发。
HTML5是Web中核心理念词汇HTML的规范化，使用者使用任何人方式展开页面下载时看见的文本原先都是HTML文件格式的，在应用领域程序中透过许多控制技术处置将其切换正式成为了可辨识的重要信息，HTML5在萨德基HTML4.01的基础上展开了一定的改良。
1.3、责任编辑重要表明
由于HTML5只是在HTML的基础上展开了追加或是弃置许多条码或是优点，责任编辑预设均为HTML5句法，被弃置的部分就无须提出诉讼，HTML一般用作叙述页面的结构，所以许多式样和JAVA方面的条码和特性和有关JavaScript部份的优点也无须提到，重点项目是剖析常见条码管理体系。
1.4、应用领域程序的版
时至今日应用领域程序的许多新功能都从HTML5国际标准中产业发展得来的。目前常见的应用领域程序有IE、UCS、Google、Safari和Opera之类，透过对这些非主流web应用领域程序的产业发展思路进行调查，发现它都全力支持HTML5上采行了举措。
（1）IE应用领域程序
2010年3月16日，GoogleMIX10控制技术讨论会上正式宣布其面世的IE9应用领域程序已经全力支持HTML5。同时还宣称，随即Sonbhadra更多的全力支持HTML新国际标准和CSS3新优点。
（2）FireFox应用领域程序
2010年7月，Mozilla基金会发布了即将面世的Firefox4应用领域程序的第一个早期测试版，该版中Firefox应用领域程序中展开了大幅改良，包括新的HTML5句法分析器，和全力支持更多的HTML5句法分析器，和全力支持更多的HTML5形式的控制等。从官方文档来看，Firefox4对HTML5是完全级别的全力支持。目前，包括在线视频，在线音频在内的多种应用领域都已经在版中实现。
（3）Google应用领域程序
2010年2月19日，GoogleGears项目经理透过微博正式宣布，Google将放弃对Gears应用领域程序插件项目的全力支持，以重点项目合作开发HTML5项目。据费特表示，目前在Google看来，Gears应用领域用作HTML5的诸多创新非常相似，并且Google一直积极产业发展HTML5项目。因此只要Google不断以加强网络国际标准的应用领域功能为工作重点项目，那么为Gears增加新功能就无太大意义了。另外，Gears面临的需求也在日益下降，这也是Google做出吊证的重要原因。
（4）Safari应用领域程序
2010年6月7日，苹果在合作开发者发布会公布Safari5，这款应用领域程序全力支持10个以上的HTML5新控制技术，包括全屏幕播放、HTML5视频、HTML5地理位置、HTML5切片元素、HTML5的可拖动特性、HTML5的形式验证、HTML5的Ruby、HTML5的Ajaxl.ishi和WebSocket字幕。
（5）Opera应用领域程序
2010年5月5日，Opera软件公司首席控制技术官，号称“CSS之父”的Hakon Wium Lie认为，HTML5和CSS3，Sonbhadra是全球网络产业发展的未来趋势，包括目前Opera在内的诸多应用领域程序厂商，纷纷研发HTML5的相关产品，web未来属于HTML5。
综上所述，目前这些应用领域程序纷纷朝着HTML5的方向迈进，HTML5的时代即将来临。
1.5、选择合作开发工具
●Notepad++
官方地址：点击打开是否免费：免费●Visual Studio Code
官方地址：点击打开是否免费：免费●HBuilderX
官方地址：点击打开是否免费：免费●Dreamweaver
官方地址：点击打开是否免费：收费●Sublime Text
官方地址：点击打开是否免费：收费●Webstorm
官方地址：点击打开是否免费：收费Webstorm为责任编辑使用的工具，请自行购买激活，也可以使用以上的免费工具，安装步骤都较为简单，在此省略！
第二章 HTML5句法
2.1、基本结构
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title></title>
</head>
<body>
</body>
</html>
2.2、句法规范化
HTML中不区分大小写，但是我们一般都使用小写HTML中的注释不能嵌套HTML条码必须结构完整，要么成对出现，要么自结束条码HTML条码可以嵌套，但是不能交叉嵌套HTML条码中的特性必须有值，且值必须加引号(双引号单引号都可以)2.3、条码规范化
单条码：
<条码名 [特性名=特性值,…]>
成对条码：
<条码名 [特性名=特性值,…]></条码名>
第三章 HTML5条码
3.1、标题条码
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
3.2、段落条码
<p>这是一个段落</p>
3.3、链接条码
使用示例：
<a href=”百度一下，你就知道”>打开百度，你就知道！</a>
常见特性：
属
3.4、图像条码
https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png” alt=”百度LOGO”>
3.5、表格条码
<table border=”1px” cellpadding=”0px” cellspacing=”0px”>
<tr>
<th>表头一</th>
<th>表头二</th>
<th>表头三</th>
<th>表头四</th>
</tr>
<tr>
<td>单元格一</td>
<td>单元格二</td>
<td>单元格三</td>
<td>单元格四</td>
</tr>
</table>
3.6、列表条码
无序列表：
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
有序列表：
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
自定义列表：
<dl>
<dt>+</dt><dd>列表项</dd>
<dt>+</dt><dd>列表项</dd>
<dt>+</dt><dd>列表项</dd>
</dl>
3.7、分组条码
<div>具体文本</div>
<span>具体文本</span>
3.8、语义条码
常见条码：
基本布局：
3.9、表单标签
常见条码：
案例演示：
1、form、input、label演示
<form action=”” method=”get”>
<p>
<label for=”username”>账户：</label>
<input type=”text” name=”username” id=”username”>
</p>
<p>
<label for=”password”>密码：</label>
<input type=”password” name=”password” id=”password”>
</p>
<p><input type=”submit”></p>
</form>
2、textarea演示
<form action=”” method=”post”>
<textarea name=”mycontext” cols=”30″ rows=”10″></textarea>
<input type=”submit”>
</form>
3、fieldset、legend、select、optgroup、option演示
<form action=”” method=”post”>
<fieldset>
<legend>请选择你的爱好：</legend>
<select name=”myhobby” id=”myhobby”>
<optgroup label=”运动”>
<option value=”篮球”>篮球</option>
<option value=”足球”>足球</option>
</optgroup>
<optgroup label=”电子”>
<option value=”看电影”>看电影</option>
<option value=”看电视”>看电视</option>
</optgroup>
</select>
</fieldset>
</form>
4、datalist演示
<form action=”” method=”post”>
<input list=”browsers”>
<datalist id=”browsers”>
<option value=”Internet Explorer”>
<option value=”Firefox”>
<option value=”Chrome”>
<option value=”Opera”>
<option value=”Safari”>
</datalist>
</form>
5、单选框演示
<form action=”” method=”post”>
<input type=”radio” name=”sex” id=”male” value=”male” checked>
<label for=”male”>Male</label>
<input type=”radio” name=”sex” id=”female” value=”female”>
<label for=”female”>female</label>
</form>
6、复选框演示
<form action=”” method=”post”>
<input type=”checkbox” name=”vehicle” id=”bike” value=”bike”>
<label for=”bike”>I have a bike</label>
<input type=”checkbox” name=”vehicle” id=”car” value=”car”>
<label for=”car”>I have a car</label>
</form>
3.10、框架条码
<iframe src=”百度一下，你就知道” frameborder=”0″ width=”500px” height=”500px”></iframe>
3.11、音频条码
<audio controls>
<source src=”horse.ogg” type=”audio/ogg”>
<source src=”horse.mp3″ type=”audio/mpeg”>
您的应用领域程序不全力支持 Audio 条码。
</audio>
3.12、视频条码
<video width=”320″ height=”240″ controls>
<source src=”movie.mp4″ type=”video/mp4″>
<source src=”movie.ogg” type=”video/ogg”>
您的应用领域程序不全力支持 Video 条码。
</video>
3.13、其它条码
水平线：<hr>
换行：<br>
<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预文件格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<abbr>缩写词或是首字母缩略词</abbr>
<address>联系重要信息</address>
<bdo>文字方向</bdo>
<blockquote>从另一个源引用的部份</blockquote>
<cite>工作的名称</cite>
<del>删除的文本</del>
<ins>插入的文本</ins>
<sub>下标文本</sub>
<sup>上标文本</sup>
3.14、头部条码
第四章 HTML5特性
4.1、特性简述
HTML条码可以设置特性，特性总是以名称/值对的形式出现，比如：name=“value”，它的主要作用是控制或修饰条码。
4.2、通用特性
第五章 HTML5事件
5.1、事件简述
HTML事件可以触发应用领域程序中的行为，比方说当使用者点击某个 HTML 元素时启动一段 JavaScript。
5.2、窗口事件
由窗口触发该事件 (同样适用作 <body> 条码)：
5.3、表单事件
表单事件在HTML表单中触发 (适用于所有 HTML 元素，但该HTML元素需在form表单内)：
5.4、键盘事件
透过键盘触发事件，类似使用者的行为：
5.5、鼠标事件
透过鼠标触发事件，类似使用者的行为：
5.6、媒体事件
透过视频（videos），图像（images）或音频（audio） 触发该事件，多应用领域于HTML媒体元素比如：<embed>，<object>，<img>，<audio>和<video>。
5.7、其它事件
课件资料▶腾讯文档
