小言_互联网的博客

前端Html的演变

244人阅读  评论(0)

  总结一下这部分的知识,这样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的框架来达到提交数据时页面不进行跳转,源代码早就忘记了,大概的示例。

  主页面内容


  
  1. <html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>主页 </title>
  6. <frameset id="main" cols="15%,85%">
  7. <frame src="HtmlButton.html">
  8. <frame id="contentPage" src="welcome.html">
  9. </frameset>
  10. </head>
  11. </html>

  HtmlButton.html的内容


  
  1. <html>
  2. <head>
  3. <title>Document </title>
  4. <script>
  5. function changeFrame( url) {
  6. this. parent. document. getElementById( "contentPage"). src = url;
  7. }
  8. </script>
  9. </head>
  10. <body>
  11. <table>
  12. <tr>
  13. <td>
  14. <button onclick="changeFrame('网页1.html')">Button 1 </button>
  15. </td>
  16. </tr>
  17. <tr>
  18. <td>
  19. <button onclick="changeFrame('网页2.html')">Button 2 </button>
  20. </td>
  21. </tr>
  22. <tr>
  23. <td>
  24. <button onclick="changeFrame('网页3.html')">Button 3 </button>
  25. </td>
  26. </tr>
  27. </table>
  28. </body>
  29. </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、视频播放


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

  2、音频播放


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

  3、图像绘制

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

  4、地图显示

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

  5、表单元素


  
  1. <form>
  2.     <label for="email">邮件地址: </label>
  3.     <input type="email" id="email" name="email" required>
  4.     <br>
  5.     <label for="password">密码: </label>
  6.     <input type="password" id="password" name="password" required>
  7.     <br>
  8.     <input type="submit" value="提交">
  9. </form>

  6、新的语义元素


  
  1. <header>
  2.     <nav>
  3.       <ul>
  4.           <li> <a href="#">Home </a> </li>
  5.           <li> <a href="#">About </a> </li>
  6.           <li> <a href="#">Contact </a> </li>
  7.       </ul>
  8.     </nav>
  9. </header>
  10. <section>
  11.     <article>
  12.       <h1>HTML5 </h1>
  13.       <p>HTML5 is the latest version of HTML. </p>
  14.     </article>
  15. </section>
  16. <footer>版本信息 </footer>

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


  
  1. <object type="application/x-shockwave-flash" data="your-flash-player.swf" width="320" height="240">
  2.   <param name="movie" value="test.mp4">
  3.   <param name="allowFullScreen" value="true">
  4.   <param name="wmode" value="transparent">
  5.   <p>浏览器不支持 Flash Player. </p>
  6. </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,浏览器会自动识别。


转载:https://blog.csdn.net/dawn0718/article/details/128779533
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场