前端Html的演变

　　总结一下这部分的知识，这样JavaScript、Css、Html就全了。

　　HTML（Hypertext Markup Language）是超文本标记语言，是用来创建网页的基本语言。它的演变主要分为以下几个阶段：
　　1、HTML 1.0 (1991年) - HTML 1.0是最早的版本，只支持文本、链接和图像。
　　2、HTML 2.0 (1995年) - HTML 2.0引入了表格、表单和框架等新特性。
　　3、HTML 3.2 (1997年) - HTML 3.2增加了对文本格式化、字体设置和背景颜色等的支持。

　　1998年的时候，当时需要我开发一个浏览器版本的调度系统，前端使用的是HTML+CSS+VBScript，后端使用的是Powerbuilder的CGI，使用了HTML的框架来达到提交数据时页面不进行跳转，源代码早就忘记了，大概的示例。

　　主页面内容

<html>
<html>
<head>
<meta charset="utf-8">
<title>主页</title>
<frameset id="main" cols="15%,85%">
  <frame src="HtmlButton.html">
  <frame id="contentPage" src="welcome.html">
</frameset>
</head>
</html>

　　HtmlButton.html的内容

<html>
<head>
    <title>Document</title>
    <script>
        function changeFrame(url) {
            this.parent.document.getElementById("contentPage").src = url;
        }
      </script>    
</head>
<body>
    <table>
        <tr>
            <td>
                <button onclick="changeFrame('网页1.html')">Button 1</button>
            </td>
        </tr>
        <tr>
            <td>
                <button onclick="changeFrame('网页2.html')">Button 2</button>
            </td>
        </tr>
        <tr>
            <td>
                <button onclick="changeFrame('网页3.html')">Button 3</button>
            </td>
        </tr>
    </table>
</body>
</html>

　　当时用的是VBScript脚本语言，现在早已销声匿迹了。
　　那个时候已经有了DIV元素，可是那个时候国内还没有人使用，资料也特别少，2001年我做网站的时候定位还在使用HTML的表格，DIV逐渐热起来好像是2003年以后了。

　　4、HTML 4.01 (1999年) - HTML 4.01增加了对可访问性、语义和国际化等的支持。
　　5、XHTML 1.0 (2000年) - XHTML 1.0是HTML 4.01的扩展版本，它严格遵循XML语法。
　　这一点印象比较深，很多元素需要封闭，哪怕最后加以个“/”也可以保证完整语法。

　　6、HTML5 (2008年起) - HTML5是最新的版本，它支持视频、音频、地理定位、离线存储、多线程以及更多其他特性。
　　HTML5 中新增了许多元素和属性来支持视频、音频、图像、地图、表单等功能。下面是一些 HTML5 的新特性的代码示例:
　　1、视频播放

<video controls>
   <source src="test.mp4" type="video/mp4">
   <source src="test.ogg" type="video/ogg">
   浏览器不支持视频标记.
</video>

　　2、音频播放

<audio controls>
   <source src="test.mp3" type="audio/mpeg">
   <source src="test.ogg" type="audio/ogg">
   浏览器不支持音频标记.
</audio>

　　3、图像绘制

<canvas id="myCanvas"></canvas>

　　4、地图显示

<iframe src="地图网址" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

　　5、表单元素

<form>
   <label for="email">邮件地址:</label>
   <input type="email" id="email" name="email" required>
   <br>
   <label for="password">密码:</label>
   <input type="password" id="password" name="password" required>
   <br>
   <input type="submit" value="提交">
</form>

　　6、新的语义元素

<header>
   <nav>
      <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>
      </ul>
   </nav>
</header>
<section>
   <article>
      <h1>HTML5</h1>
      <p>HTML5 is the latest version of HTML.</p>
   </article>
</section>
<footer>版本信息</footer>

　　●　HTML5以前在网页里播放MP4，没有<video>标签，需要使用Adobe Flash或者Microsoft Silverlight。

<object type="application/x-shockwave-flash" data="your-flash-player.swf" width="320" height="240">
  <param name="movie" value="test.mp4">
  <param name="allowFullScreen" value="true">
  <param name="wmode" value="transparent">
  <p>浏览器不支持 Flash Player.</p>
</object>

　　说明：
　　<object> 标签使用插件来播放视频，type 属性指定插件类型，data 属性指定插件文件路径；
　　<param> 标签提供插件的配置参数，如视频文件路径、是否允许全屏播放等。

　　●　<!DOCTYPE> 是 HTML 文档的第一行，用于声明文档类型。它告诉浏览器文档所采用的 HTML 版本和 DTD (Document Type Definition)。
　　<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> 是 HTML 2.0 的 DTD 声明，它告诉浏览器文档采用的是 HTML 2.0 版本并采用 IETF 的 DTD。
　　 <!DOCTYPE> 是HTML5版本中的声明，它是更简单的声明方式，不需要指定具体的版本和DTD，浏览器会自动识别。

秒客网

前端Html的演变

相关文章