HTML5 发展

HTML5有W3C和WHAT组织机构共同研发出来的，于2014年正式发布

HTML5成为了新一代的网页开发标准

HTML5 的新特性

  • 增加了 audeo 和 video 音频播放， 抛弃了 Flash
  • 新增了canvas 画布， （ 绘画， 制作动画， 如小游戏开发等）
  • 地理定位
  • 增加了离线缓存
  • 硬件加速
  • Web Socket （ 全双工通信）
  • 增加了本地存储
  • 新增了一些语义化标签

HTML5 优势和不足

优势

  • 提高可用性

不足

HTML5 网页布局

网页布局标签 ：

  • <header> : 页首 
    1. <header>页首</header>

  • <main> ： 主体， 文档的主要内容，main 相对文档来说是唯一的，不能重复出现在文档中， 一个文档中，不能出现一个以上的main元素。 mian元素不能是 asdie , footer header nav 的 后代 

    1. <main>
    2.  <h1>
    3.      标题
    4.  </h1>
    6.  <article> 内容区1</article>
    7.  <article> 内容区2 </article>
    8. </main>
  • <nav> : 导航栏 , 一般用无序列表写 
    1. <nav>
    2.  <ul>
    3.      <li>HTML5</li>
    4.      <li>CSS3</li>
    5.      <li>jQuery</li>
    6.  </ul>
    7. </nav>
  • <article> : 文章 
    1. <article>
    2.  <h1>一篇文章</h1>
    3.  <p>一个段落</p>
    4. </article>
  • <aside> : 侧边栏 , 包含在 <article> 中作为内容的附加信息部分 
    1. <article>
    2.  <p>
    3.      内容
    4.  </p>
    5.  <aside>
    6.      <h3>
    7.          作业简介
    8.      </h3>
    9.      <p>
    10.          内容
    11.      </p>
    12.  </aside>
    13. </article>
  • <section> ： 区块 , 代表文档中的 节 和 段 ， 一组 
    1. <section>section 标签</section>
  • <footer> : 页尾， 包含一些作者信息，版权问题 
    1. <footer>
    2.  <p>
    3.      页脚
    4.  </p>
    5. </footer>

html5 网页的一般布局 ：

HTML5 - 图1

HTML5 新增的语义化标签

  1. <mark> ： 高亮显示 
    1. <p> <mark> test</mark> </p>
  1. <details>描述 和 <summary>摘要 ： 一般用于名词解释 或 用于封装一个区块等 
    1. <details>
    2. <summary>前端开发</summary>
    3. <h3>前端开发包括：</h3>
    4. <ul>
    5.     <li>1</li>
    6.     <li>2</li>
    7.     <li>3</li>
    8. </ul>
    9. </details>

  1. <meter>： 定义度量衡

    1. value : 当前值
    2. min ： 最小值
    3. max ： 最大值
    4. low :
    5. high :
      1. <!-- 3. 度量衡 -->
      2. <meter value="110" min="80" max="120"></meter> 公里/小时

  2. <progress>： 进度条

    1. value
    2. min
    3. max
    4. 多个属性
      1. <!-- 4 进度条 -->
      2. <p>任务已完成：<progress value="80" min="0" max="100"></progress></p>

  3. <dialog>: 定义一个对框 ， 可以定义一个小广告， 

    1. <!-- 5, dialog  定义一个对话框 -->
    2. <dialog open>
    3. <span>&times;</span>
    4. <!-- 通过 JS 进行点击关闭，也就是去掉 dialog 中的 open -->
    5. <details>
    6.     <summary>前端开发</summary>
    7.     <h3>前端开发包括：</h3>
    8.     <ul>
    9.         <li>1</li>
    10.         <li>2</li>
    11.         <li>3</li>
    12.     </ul>
    13. </details>
    14. </dialog>
  1. <figure> : 用于对元素进行组合 ，一般用于组合一张图的 标题，图片 和 图片的描述 
    1. <figure align="center">
    2. <h3> 发嘛嘛</h3>
    3. <img class="fa" src="../img5.png" alt="fafa" width="500px">
    4. <p>ffffffff</p>
    5. </figure>

HTML5 的 音频 视频 插件 标签

audio : 播放音乐或者音频， IE9 一下的版本不支持

  • 支持的格式 ： .mp3 / .ogg / .wav
  • 属性
    • src ： 文件路径
    • autoplay : 自动播放( 常用)
    • loop : 循环
    • controls : 控制条
    • muted : 静音
    • preload : 预加载（当使用 autoplay 时， preload 自动失效）
  1. <audio src="../11.安和桥.wav" autoplay controls="controls" height="50px" loop muted position></audio>

<video> : 视频播放

  • 支持的格式 ： .mp4 / .ogg / .webm
  • 属性
  • src ： 文件路径
  • autoplay : 自动播放
  • loop : 循环
  • controls : 控制条
  • muted : 静音
  • preload : 预加载（当使用 autoplay 时， preload 自动失效）
  • width : 宽度
  • heigt : 高度
  • poster : 海报 （比上边增加）
  1. <video src="../11.安和桥.wav" autoplay controls="controls" height="50px" loop muted position></video>

<embed> : 嵌入内容或者 插件

  • 支持格式
  • 属性
    • src : 文件路径
    • width : 宽度
    • height ： 高度
    • type : 类型
  1. <embed src="../11.安和桥.wav" type="audio/wav" autoplay autostart="true"></embed>

HTML5 canvas 画布

<canvas> : 画布，是一个容器元素

  1. 单独使用canvas 没有什么意义， 它必须结合 JavaScript使用， 它的具体功能都是通过 JavaScript体现出来的
  2. canvas 的宽高最好不要通过css 实现，而是直接使用标签属性值 width 和 height 实现
  1. <canvas width="400" height="200" style="background: yellow"></canvas>
  1. // 写脚本代码
  2. var canvas = document.getElementsByTagName("canvas")[0]; // DOM 操作 用来获取 canvas 这个操作
  3. var ctx = canvas.getContext("2d"); // 绘制2D图
  4. ctx.fillStyle = "#ff0000"; // 填充颜色
  5. ctx.fillRect(0, 0, 200, 100); // 绘制图形

HTML5 新增常用属性

  1. contentEditable: 将标签转化为可编辑状态 。 可用于所有标签
    • 属性值 ： True / False 
      1. <p contentEditable="true"> contentEdiable : </p>
  1. hidden : 对元素进行隐藏。 一般用来 传值或当某个条件成立时， 执行内容显示
    • 属性默认值为 hidden 
  1. <!-- 2, hidden , 隐藏元素属性  -->
  2. <div class="box">box1</div>
  3. <!-- hidden 隐藏box2 内容 -->
  4. <div class="box" hidden>box2</div>
  5. <div class="box">box3</div>
  1. data-* : 用于存储页面或者应用程序的私有定义数据 ，比如图片懒加载 ， *号表示任意字符 
      1. <p data-id="001">
      2. 文本内容
      3. </p>
  1. multiple : 用于表单组件 ，规定输入域中可以多选个内容 
      1. <!-- 4,  multiple  表单多选 -->
      2. <select multiple>
      3. <option value="1">1</option>
      4. <option value="1">2</option>
      5. <option value="1">3</option>
      6. <option value="1">4</option>
      7. </select>
  1. required : 用来约束表单元素在提交前必须输入值，用于表单组件中， 需要结合提交按钮submit使用 
      1. <!-- 5，required  
      2. required :  用来约束表单元素在提交前必须输入值，用于表单组件中， 需要结合提交按钮`submit`使用 -->
      3. <form action="#">
      4. <input type="text" placeholder="请输入用户名" required><br>
      5. <!-- 不输入就不能提交-->
      6. <input type="submit">
      7. </form>
  1. pattern : 用于验证输入字段的模式 。 用于表单组件中， 需要结合提交按钮submit使用 
      1. <!-- `pattern` : 用于验证输入字段的模式 。 用于表单组件中， 需要结合提交按钮`submit`使用 -->
      2. <form action="#">
      3. <input type="text" placeholder="请输入用户名" pattern="[A-Za-z0-9]{6,10}">请输入用户名<br>
      4. <!-- pattern="[A-Za-z0-9]{6,10} 的属性值是正则" -->
      5. <input type="submit">
      6. </form>

HTML5 新增的表单组件

  1. color : 颜色
  2. email : 邮箱
  3. tel : 电话号码
  4. url : 网址
  5. number : 数字
  6. range : 范围
  7. search : 搜索
  8. date : 日期
  9. datetime : 日期时间
  10. datetime-local : 本一日其时间
  11. year : 年份
  12. month : 月份
  13. time : 时间
  1. <form action="#">
  2.       <input type="color"><br>
  3.       <!-- email 输入出错会有提示 -->
  4.       </input><input type="email"><br>
  5.   <!-- tel 电话号码 -->
  6.   </input><input type="tel"><br>
  7.   <!-- url 网址，输错会有提示 -->
  8.   </input><input type="url" value="https://www.baidu.com"><br>
  9.   <!-- 数字 -->
  10.   </input><input type="number" min="10" max="20" value="15"><br>
  11.   <!-- 范围条 -->
  12.   </input><input type="range" min="0" max="10" value="4"><br>
  13.   <!-- search 搜索 , 会有清除符号-->
  14.   </input><input type="search" value="test"><br>
  15.   <!-- date -->
  16.   </input><input type="date"><br>
  17.   </input><input type="datetime"><br>
  18.   </input>
  19.   <input type="datetime-local"><br>
  20.   </input><input type="year"><br>
  21.   </input><input type="month"><br></input>
  22.   <input type="week"><br>
  23.   <input type="submit">
  24. </form>

HTML5 新增的表单属性

  1. formaction: 修改action提交数据的地方 
    1. <!-- 1 ,  formaction 修改提交地方   -->
    2. <form action="www.baidu.com">
    3.     <input type="submit" formaction="https://www.google.com">
    4. </form>
  1. formentype : 修改表单请求的类型 
    1. <!-- 2, formentype 修改表单请求类型 -->
    2. <form action="#" enctype="application/x-www-form-urlencoded">
    3.     <!-- 普通表单-->
    4.     <input type="submit" formentype="multiple/form-date">
    5.     <!-- 上传文件-->
    6. </form>

  1. formmethod : 修改提交类型 get / post 提交方式的区别 

    1. <!-- formmethod : 修改提交类型 -->
    2. <!-- get /  post 的区别 
    3.     1. get 是以字节为单位提交，只接受ASCII码，  post 是以字符为单位提交
    4.     2. get 是以明文的方式 提交时数据会显示在地址栏中，一般不用来传输一些敏感数据 ， 而post是以暗文方式提交， 数据不会出现在地址栏
    5.     3. get 在浏览器中回退是无害的， 而post会再次请求
    6.     4. get 会被浏览器主动缓存，而 post 不会， 除非手动设置
    7.     5. get 和 post 在传输字节数上没有限制，个别浏览器会有， 一般 get 不超过 2K , post 不超过2M  -->
    9. <form action="#" method="get">
    10.     <input type="text" placeholder="请输入用户名">
    11.     <input type="submit" formmethod="POST">
    12. </form>
  1. form ： 设置表单元素属于那个表单 
    1. <!-- 4, form 提交到那个表单 -->
    2. <form action="#" id="user-id">
    3.     <input type="text" name="username"><br>
    4.     <input type="submit">
    5. </form>
    6. <form action="#" id="student-id">
    7.     <input type="text" name="username"><br>
    8.     <input type="submit">
    9. </form>
    10. <!-- 这里 form 提交到 id="user-id" 的表单中 -->
    11. <input type="passwd" name="password" form="user-id">
  1. novalidate: 不验证 
    1. <!-- 5, novalidate 不验证  -->
    2. <form action="#" novalidate>
    3.     <input type="email">
    4.     <!-- 提交没有验证 -->
    5.     <input type="submit">
    6. </form>

HTML5 的 input 属性

  1. autocomplete : 自动完成 ， 用来帮助用户输入， 每一次输入的内容，浏览器是否保存输入值，以备将来使用，有属性值 on / off ， 默认为on 开启 。 为了保护敏感数据，避免本地浏览器对它们不利
  2. autofocus : 自动获焦
  3. step : 步长
  4. multiple : 多选
  5. pattern : 正则匹配
  6. placeholder : 输入提示
  7. required : 必须输入
  1.     <form action="#">
  2.         <!-- 1 . autocomplete ：on/ off 自动完成，保存之前输入的值 -->
  3.         <input type="text" name="test" autocomplete="off">
  4.         <input type="submit">
  6.         <!-- 2 自动聚焦 autofocus 聚焦 -->
  7.         <input type="email" name="email"></br>
  8.         <input type="submit" name="submit" autofocus> <br>
  10.         <!-- 3， placeholder 输入提示  -->
  11.         <input type="text" placeholder="请输入用户名" name="username"> <br>
  12.         <label>请输入用户名：</label> <input type="text"> <br>
  13.         <input type="submit">
  14.     </form>