整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
TML5的基本结构和它的语法变化
HTML5的兼容性，它可以在老版本的浏览器上正常运行。
HTML5的实用性，内部没有特别的复杂功能，只是封装了一些常用的简单功能。
HTML5的基本结构，文档的根元素依然是<html.../>,这个不变。在<html.../>元素里包含<head.../>和<body.../>两个子元素。<head.../>元素主要定义HTML5的页面头，<title.../>元素用于定义页面标量，除了这些在<head.../>元素中定义meta、样式单等信息；<body.../>元素用于定义页面主体，包括页面的文本内容和大部分标签。
HTML5的语法变化
1、标签不再区分大小写
在HTML5中如：<P>程序世界</p>元素的开始标签和结束标签大小写不匹配，但是这符合HTML5的规范。
2、元素可以省略结束标签
HTML5非常宽容，它允许部分HTML元素省略标签，甚至允许同时省略开始标签和结束标签。具体来说有一下三种：
（1）空元素语法的元素：area base br col command embed hr img input keygen link mate param source wbr 。
这些空元素标签不允许将开始标签和结束标签分开定义。
（2）可以省略结束标签的元素：colgroup dt dd li optgroup option p rt rp thead tbody tfoot tr td th。
这种语法纯属向以前那些不规范的HTML页面妥协。
（3）可以省略全部标签的元素：html head body tbody。
3、允许省略属性值的属性
XHTML要求所有元素的所有属性名都应该小写，所有属性都必须指定属性值，不能简写，而且所有属性值必须使用引号引起来。
HTML5相比起来比较松散，允许部分“标志性”的属性可以省略属性值。当然也支持那种严格的语法。
4、允许属性值不使用引号
传统的XHTML按XML规范对属性值进行要求，要求所有的属性值都必须用引号引起来，但HTML5允许直接给出属性值，即使不放在引号中也是正确的。
HTML（HyperText Markup Language，超文本标记语言）是用来描述网页的一种语言，它不是一种编程语言，而是一种标记语言。
HTML5是构建Web内容的一种语言描述方式，HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息，HTML5在从前HTML4.01的基础上进行了一定的改进。
由于HTML5只是在HTML的基础上进行了新增或者废弃一些标签或者特性，本文默认均为HTML5语法，被废弃的部分就不再提起，HTML一般用于描述网页的结构，所以一些样式和脚本方面的标签和属性以及关于JavaScript部分的特性也不再提及，重点在于梳理常用标签体系。
现今浏览器的许多新功能都是从HTML5标准中发展而来的。目前常用的浏览器有IE、火狐、谷歌、Safari和Opera等等，通过对这些主流web浏览器的发展策略调查，发现它们都支持HTML5上采取了措施。
（1）IE浏览器
2010年3月16日，微软MIX10技术大会上宣布其推出的IE9浏览器已经支持HTML5。同时还声称，随后将会更多的支持HTML新标准和CSS3新特性。
（2）FireFox浏览器
2010年7月，Mozilla基金会发布了即将推出的Firefox4浏览器的第一个早期测试版，该版本中Firefox浏览器中进行了大幅改进，包括新的HTML5语法分析器，以及支持更多的HTML5语法分析器，以及支持更多的HTML5形式的控制等。从官方文档来看，Firefox4对HTML5是完全级别的支持。目前，包括在线视频，在线音频在内的多种应用都已经在版本中实现。
（3）Google浏览器
2010年2月19日，谷歌Gears项目经理通过微博宣布，谷歌将放弃对Gears浏览器插件项目的支持，以重点开发HTML5项目。据费特表示，目前在谷歌看来，Gears应用用于HTML5的诸多创新非常相似，并且谷歌一直积极发展HTML5项目。因此只要谷歌不断以加强网络标准的应用功能为工作重点，那么为Gears增加新功能就无太大意义了。另外，Gears面临的需求也在日益下降，这也是谷歌做出吊证的重要原因。
（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，将会是全球互联网发展的未来趋势，包括目前Opera在内的诸多浏览器厂商，纷纷研发HTML5的相关产品，web未来属于HTML5。
综上所述，目前这些浏览器纷纷朝着HTML5的方向迈进，HTML5的时代即将来临。
●Notepad++
●Visual Studio Code
●HBuilderX
●Dreamweaver
●Sublime Text
●Webstorm
Webstorm为本文使用的工具，请自行购买激活，也可以使用以上的免费工具，安装步骤都较为简单，在此省略！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
单标签：
<标签名 [属性名=属性值,...]>
成对标签：
<标签名 [属性名=属性值,...]></标签名>
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
<p>这是一个段落</p>
使用示例：
<a href="百度一下，你就知道">打开百度，你就知道！</a>
常见属性：
属
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度LOGO">
<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>
无序列表：
<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>
<div>具体内容</div>
<span>具体内容</span>
常见标签：
基本布局：
常见标签：
案例演示：
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>
<iframe src="百度一下，你就知道" frameborder="0" width="500px" height="500px"></iframe>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 Audio 标签。
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 Video 标签。
</video>
水平线：<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>
HTML标签可以设置属性，属性总是以名称/值对的形式出现，比如：name=“value”，它的主要作用是控制或修饰标签。
HTML事件可以触发浏览器中的行为，比方说当用户点击某个 HTML 元素时启动一段 JavaScript。
由窗口触发该事件 (同样适用于 <body> 标签)：
表单事件在HTML表单中触发 (适用于所有 HTML 元素，但该HTML元素需在form表单内)：
通过键盘触发事件，类似用户的行为：
通过鼠标触发事件，类似用户的行为：
通过视频（videos），图像（images）或音频（audio） 触发该事件，多应用于HTML媒体元素比如：<embed>，<object>，<img>，<audio>和<video>。
课件资料?腾讯文档
TML5的语法变化
HTML5中，语法发生了很大的变化。或许有人会抱着异常惊讶和不安地问“HTML普及到何种程度”“根本的语法发生了变化，会有多大影响”。
只是，HTML5的“语法变化”和其他编程语言所谓的语法变更意义有所不同。为什么这么说呢？原因比较特殊，因为以前的HTML几乎没有遵循规范实现的Web浏览器。
现有浏览器与规范背离
HTML的语法是在SGML（Standard Generalized Markup Language）语言的基础上来规定的。但是由于SGML的语法非常复杂，文档结构解析程序的开发也不太容易，多数Web浏览器不作为SGML解析器运行。由此，HTML规范中虽然要求“应遵循SGML的语法”，但实际情况却是遵循规范实现的Web浏览器几乎不存在。
规范向实现靠拢
如上所述，HTML5中提高Web浏览器间的兼容性是重大的目标之一。要确保兼容性，必须消除规范与实现的背离。因此HTML5以近似现有的实现，重新定义了新的HTML语法，使规范向实现靠拢。
由于文档结构解析的算法也有着详细的记载，使得Web浏览器开发者可以专注于遵循规范去进行实现工作。在新版本的FireFox和WebKit（Nightly Builder版）中，已经内置了遵循HTML5规范的解析器。IE（Internet Explorer）和Opera也为了能够提供更好的兼容性实现而紧锣密鼓地努力着。
了解更多前端知识，可以点击下方链接和小编一起学习哟~
「链接」
*请认真填写需求信息，我们会在24小时内与您取得联系。
