HTML5入门学习总结

作者: ST_Pace | 来源:发表于2017-05-10 21:53 被阅读82次

    这两天了解学习了一下HTML5的一些特性,做一些简单的知识总结


    HTML5的设计

    • 吸取了XHTML2的教训,HTML5的设计有一个主要的原则就是“支持已有的内容”,对于HTML5来说,并不存在创立的起始时间。
    • doctype的格式变得十分简洁,并不含有版本号,因为HTML5支持现有的内容,任何未来的版本也支持HTML5中现有的内容。包含DOCTYPE的唯一原因是为确保浏览器以标准模式显示。
    <!DOCTYPE html>
    
    • 制定标记文档的字符编码简化为
    <meta charset="UTF-8">
    
    • 简化了<script>标签和CSS文件的链接
    <script src = "file.js"></script>
    <link rel = "stylesheets" href = "file.css">
    
    • 使用HTML5,任何格式的命令都可以,无论大小写,带不带引号,带不带结束符号。使用哪种格式完全取决于程序员。HTML5的语法很随意,但个人应强迫自己使用自己青睐的编码风格。
    • 为了照顾浏览器,向后兼容已有内容,HTML5中不含有废弃元素,却含有大量过时元素和属性
    <frame><frameset><noframes><acronym><font><big><center><strike>
    
    • HTML5中,可以将多个元素封装在一个<a></a>元素中,唯一需要注意,不可以将a元素嵌套在另一个a 元素中。

    富媒体

    • canvas 利用javascriptcanvas创建动态图像十分不错,其内容可随时更新,通过js响应事件使其创建的工具和游戏可以拜托插件
    • 音频,将音频嵌入HTML5文档
    <audio src = "file.mp3">
    </audio>
    

    还具有其他属性autoplay controls autobuffer
    通过source元素来指定多种文件格式

    <audio controls>
    <source src = "file.ogg" type = "audio/ogg">
    <source src = "file.mp3" type = "audio/mpeg">
    </audio>
    

    起始和结束<audio>之间的任何非source元素都会显示在不支持audio元素的浏览器上

    • 视频
    <video src = "file.mp4" controls width = "xxx" heigth = "xxx" poster = "xxx.jpg">
    </video>
    

    poster属性显示实例图像

    Web Forms 2.0

    • placeholder
      输入栏没有值时的显示文本
    • autofocus
      加载文件时自动聚焦到某一个特定的表单栏
    • required
      防止浏览器在必填栏空缺的情况下提交表单
    • autocomplete
      允许用户禁用每张表单或每个表单栏的自动填充,值可以是"on"或"off"
    • datalist
      允许input和select元素相结合,list属性将选项关联到输入栏
    <input type = "text" name= "aaa" id = "aaa" list = "xxx">
    <datalist id = "xxx">
        <option value = "a1">
        <option value = "a2\">
        <option value = "a3">
    </datalist>
    
    • HTML5 扩展了input元素的type属性
      search email url tel range number data color

    作为一个目标而存在的东西,总是那么美丽而优雅

    相关文章

      网友评论

        本文标题:HTML5入门学习总结

        本文链接:https://www.haomeiwen.com/subject/deagtxtx.html