HTML 5 基础

HTML 5 基础

一、概览

New Elements + New JavaScript APIs = HTML 5

二、HTML 5 基本语法

  • 新的 DOCTYPE

    1
    <!DOCTYPE html>
  • 新的字符编码

    1
    <meta charset="utf-8">
  • 引用链接和样式表

    1
    2
    <link rel="stylesheet" href=""/>
    <script src=""></script>

三、HTML 5 元素

结构元素

  • <header> - 页面头部
  • <footer> - 页面底部
  • <address> - 联系信息
  • <article> - 文章
  • <nav> - 导航
  • <section> - 章节
  • <aside> - 侧边栏

语义元素

  • <bdi> - 设置一段脱离父元素文本方向的文本
  • <command> - 命令
  • <details> - 描述细节
  • <dialog> - 对话框
  • <summary> - 包含<details> 素的标题
  • <figure> - 独立的流内容
  • <figcaption> - <figure>元素的标题
  • <mark> - 标记文本
  • <meter> - 度量
  • <progress> - 任务进度
  • <ruby> - ruby 注释
  • <rt> - <ruby>元素的注音
  • <rp> - 不支持<ruby>元素的注释
  • <time> - 时间日期
  • <wbr> - 换行符

表单元素

  • <datalist> - 选项列表
  • <keygen> - 表单的密钥对生成器
  • <output> - 输出

多媒体元素

  • <audio> - 音频内容
  • <video> - 视频内容
  • <source> - 多媒体资源
  • <embed> - 嵌入内容
  • <track> - 音轨

画布元素

  • <canvas> - 图形画布

四、 HTML 5 表单

<input>元素的类型:

  • search - 搜索
  • tel - 电话
  • url - 链接
  • emial - 电子邮件
  • number - 数值
  • color - 取色器
  • range - 数值滑动条
  • date - 日期
  • datetime - 日期
  • datetime-local - 时间日期
  • month - 月份
  • week - 星期

五、Web 存储

  • localStorage - 用于长久保存整个网站的数据,没有过期时间,直到手动删除。
  • sessionStorage - 针对一个 session 进行数据存储,当关闭浏览器窗口数据会被删除。

六、Web SQL

  • openDatabase - 使用现有数据库或新建数据库创建一个数据库对象。
  • transaction - 控制一个事务,执行提交或回滚。
  • execute - 执行 SQL 语句。

七、代码规范

  • 使用正确的文档类型

    文档类型声明位于 HTML 文档的第一行:

    1
    <!DOCTYPE html>
  • 使用小写元素名

  • 关闭所有 HTML 元素

  • 关闭空的 HTML 元素

  • 使用小写属性名

  • 属性值使用双引号

  • 图片使用 alt 属性

  • 等号前后不使用空格

  • 合理使用空行和缩进

  • 使用小写文件名

-------------本文结束 感谢您的阅读-------------
您的支持将鼓励我继续创作!