HTML5基本介绍
<h1>HTML5简介</h1><p><span style="font-size: 18px">HTML是互联网上应用最广泛的标记语言。HTML文件就是普通文本+HTML标记，而不同的HTML标记能表示不同的效果。（<span style="color: rgba(51, 153, 102, 1)">简单的说HTML是超文本标记语言</span>）</span></p>
<p><span style="font-size: 18px"><code>HTML5</code>草案的前身名为 <code>Web Applications 1.0</code>，于2004年被<code>WHATWG</code>提出，于2007年被<code>W3C</code>接纳，并成立了新的 <code>HTML</code>工作团队。</span></p>
<p><span style="font-size: 18px">如果从狭义的角度来讲，<code>HTML5</code>就是<code>HTML4</code>的新一代产品。</span></p>
<p><span style="font-size: 18px">而如果从广义的角度来讲，则是<code>新一代的富客户端解决方案</code>。</span></p>
<h1>1. HTML到HTML5</h1>
<ol>
<li>元素的标签名大小写混杂的情况。</li>
<li>元素没有合理结束的情况。</li>
<li>元素中使用了属性，但没有制定属性值的情况。</li>
<li>为元素的属性制定属性值时没有使用引号。</li>
</ol>
<h1>2. HTML5的优势</h1>
<p>支持Html5的浏览器包括<code>Firefox</code>（火狐浏览器），<code>IE9</code>及其更高版本，<code>Chrome</code>（谷歌浏览器），<code>Safari</code>，<code>Opera</code>等；国内的 遨游浏览器（<code>Maxthon</code>），以及基于<code>IE</code>或<code>Chromium</code>（<code>Chrome</code>的工程版或称实验版）所推出的<code>360浏览器</code>、<code>搜狗浏览器</code>、<code>QQ浏览器</code>、<code>猎豹浏览器</code>等国产浏览器同样具备支持HTML5的能力。</p>
<p>需要注意的是，虽然很多浏览器目前已经能够支持<code>HTML5</code>，但是显示效果仍旧存在差异性。这时，我们如果从样式的角度出发，可以采用下面的几种<code>css</code>方案。</p>
<h1>3. HTML5基本结构与语法变化</h1>
<p><strong><span style="font-size: 18px"><strong>HTML5</strong>基本结构</span></strong></p>
<div><!DOCTYPE html></div>
<div> HTML5对元素大小写不再严格区分，开发者可以随意使用大小写字符来定义HTML元素。</div>
<div> 对于一份基本的HTML5文档而言，它总有如下结构：</div>
<div>
<div class="cnblogs_code">
<pre> <!DOCTYPE html> //文档声明
<html>
<head> //负责网页的一些预定义信息
<title>页面标题</title>
<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312”/>//设定字符集
<!- - 此处还可插入其他meta、样式单等信息 -->
</head>
<body>
页面内容
</body>
</html></pre>
</div>
</div>
<div> </div>
<div>
<div>HTML5支持两种方式来指定页面的字符集。</div>
<div> 使用Content-Type指定页面所用的字符集。eg： </div>
<div>
<div class="cnblogs_code">
<pre><meta http-equiv=“Content-Type” content=“text/html; charset=gb2312” /></pre>
</div>
</div>
<div> 直接使用charset指定页面所用的字符集。eg：</div>
<div>
<div class="cnblogs_code">
<pre><meta charset=“gb2312” /></pre>
</div>
</div>
<div> 注意：不要在<html>和<head>，</head>和<body>，</body>和</html>之间插入任何内容！</div>
<div> </div>
<div> </div>
<div><strong><span style="font-size: 18px">HTML5语法变化</span></strong></div>
<div>
<div class="clear"> </div>
<div class="postBody">
<div id="cnblogs_post_body" class="blogpost-body ">
<p>也许会有人问：“HTML4已经很普及了，如果改变基础语法，会不会有什么影响？”</p>
<p> 我们都知道，在HMTL5之前几乎没有符合标准规范的Webu浏览器！在这种情况下，各个浏览器之间的互相兼容性和互操作性在很大程度上取决于网站建设开发者的努力，而浏览器本身始终是存在缺陷的。</p>
<p> 前面章节讲过，HTML5就是把解决各Web浏览器的兼容性作为目标的。所以各Web浏览器的供应商们可以把HTML5分析器集中封装在自己的浏览器中。</p>
<p> 最新的Firefox(默认为4.0以后的版本)与WebKit浏览器引擎中都迅速封装了HTML使用的分析器，IE与Opera也在努力加快对HTML5的支持，浏览器兼容性的提高指日可待！</p>
<div> HTML5的语法发生了一些变化，这些变化的最大特征就是：HTML5更宽容了！HTML5规范的设计初衷就是最大限度地“兼容”互联网上随处可见的不规范页面。</div>
<div> 归纳起来，HTML5存在如下几点语法变化：</div>
<div> <strong> a:标签不在区分大小写</strong></div>
<div> <p>Rodolfo讲述H5</P>中<p.../>元素的开始比爱哦前和结束标签的大小写并不匹配，但这完全符合HTML5规范。</div>
<div><strong> b:元素可以省略结束标签</strong></div>
<div><strong> </strong>HTML5显得十分宽容，它允许部分HTML元素省略结束标签，甚至允许HTML元素同时省略开始标签和结束标签。具体来说，HTML5中的省略标签可分为如下三种：</div>
<div> （1）空元素语法的元素：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、war。</div>
<div> 空元素不允许将开始标签和结束标签分开定义。例如,<img.../>元素不允许写成如下形式： </div>
<div>
<div class="cnblogs_code">
<pre><img src=“a.gif” alt=“a”></img> （这是错误的）</pre>
</div>
</div>
<div> <img…/>元素应该是空元素，应该写成：<em id="__mceDel"> </em></div>
<div>
<div class="cnblogs_code">
<pre><img sec=“a.gif” alt=“a” /></pre>
</div>
</div>
<div> 与此同时，HTML5并不要求遵守XML规范，因此<img.../>元素写成如下形式也是正确的：</div>
<div>
<div class="cnblogs_code">
<pre><img src=“a.gif” alt=“a"></pre>
</div>
</div>
<div> （2）可以省略结束标签的元素：</div>
<div> colgroup、dt、dd、li、optgroup、option、p、rt、rp、thead、tbody、tfoot、tr、td、th。</div>
<div>
<div> （3）可以省略全部标签的元素：html、head、body、tbody。</div>
</div>
<div><strong> c:允许省略属性值的属性</strong></div>
<div><strong> </strong>HTML5中允许省略属性值的属性：</div>
<div> checked、readonly、disabled、selected、defer、ismap、nohref、noshade、nowrap、multiple、noresize。</div>
<div><strong> d:允许属性值不使用引号<br></strong></div>
<div> 传统的XHTML按XML规范对属性值进行要求，要求所有的属性值都必须使用引号引起来，但HTML5允许直接给出顺序性质，及时不放在引号中也是正确的。</div>
<p> </p>
<p> <span style="color: rgba(51, 153, 102, 1)"> 扩展知识：</span></p>
<p> HTML语法是在SGML语言的基础上建立的。但是SGML语法很复杂，要开发能够解析SGML语法的程序也很不容易，所以很多浏览器都不包含SGML 分析器。一次，虽然HTML基本上遵从SGML语法，但是对于HTML的执行在各个浏览器之前没有一个统一的标准。所以也就有了HTML5为之努力实现各 浏览器见的标准。</p>
<p> SGML(Standard Generalized Markup Language)标准通用标记语言，是现时常用的超文本格式的最高层次标准，是可以定义标记语言的元语言，甚至可以定义不必采用< >的常规方式。由于SGML的复杂，因而难以普及。</p>
<p> SGML例子:</p>
<div class="line number1 index0 alt2"><code class="html plain"><</code><code class="html keyword">QUOTE</code> <code class="html color1">TYPE</code><code class="html plain">=</code><code class="html string">"example"</code><code class="html plain">> </code></div>
<div class="line number2 index1 alt1"><code class="html plain">typically something like <</code><code class="html keyword">ITALICS</code><code class="html plain">>this</</code><code class="html keyword">ITALICS</code><code class="html plain">> </code></div>
<p><code class="html plain"></</code><code class="html keyword">QUOTE</code>></p>
<p> </p>
</div>
</div>
</div>
</div><br><br>
来源：https://www.cnblogs.com/yu412/p/11396306.html
頁:
[1]