HTML5入门学习总结

时间：2022-02-01 15:07:15

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

HTML5入门学习总结

HTML5的设计

  • 吸取了XHTML2的教训，HTML5的设计有一个主要的原则就是“支持已有的内容”，对于HTML5来说，并不存在创立的起始时间。
  • doctype的格式变得十分简洁，并不含有版本号，因为HTML5支持现有的内容，任何未来的版本也支持HTML5中现有的内容。包含DOCTYPE的唯一原因是为确保浏览器以标准模式显示。
<!DOCTYPE html>
  • 制定标记文档的字符编码简化为
<meta charset="UTF-8">
  • 简化了
<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 元素中。

富媒体

  • canvas 利用javascript和canvas创建动态图像十分不错，其内容可随时更新，通过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>

起始和结束之间的任何非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

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

相关文章