Words etch cherished moments.
OG

HTML5

3,188 words, 8 min read
2018/04/12 AM
658 views

声明

HTML5的文档解析不再基于SGML(Standard Generalized Markup Language)标准,而是形成了自己的一套标准

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
# HTML5 文件类型声明 <!DOCTYPE html> <!-- HTML 4.01 Strict --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!-- HTML 4.01 Transitional --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!-- HTML 4.01 Frameset --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

语义化结构标签 2010 年以前,我们都是一个 div 走到底,2010 年HTML5 的语义化标签的出现,让开发者更容易读懂代码

HTML4 HTML5
<div class="header"> <header />
<div class="footer"> <footer />
<div class="menu"> <nav />
<div class="content"> <section />
<div class="aside"> <aside />
<div class="article"> <article />

多媒体标签

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
<!-- 音频 --> <audio autoplay="autoplay" controls="true" loop=2> <source src="" type="audio/mp3"> </audio> <!-- 视频 --> <video src="" autoplay="autoplay" controls="true"> <source src="" type="video/mp4"> </video> <!-- source 表示源文件其中 type 可以指定类型 src 表示音频文件的地址 可以是相对路径,也可以是绝对路径 autoplay 自动播放 controls 显示控制栏 -->

新增 input 类型以及属性 在 HTML4.01 中,input 标签的 type 类型只有 text , button , password , submit , radio , checkbox , hidden , HTML5 新增了一些类型,让开发更加方便

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
<!-- 此类型要求输入格式正确的email地址 --> <input type="email" > <!-- 要求输入格式正确的URL地址 --> <input type="url" > <!-- 要求输入格式数字,默认会有上下两个按钮 --> <input type="number" > <!-- 时间系列,但目前只有 Opera和Chrome支持 --> <input type="date" > <input type="time" > <input type="datetime" > <input type="datetime-local" > <input type="month" > <input type="week" > <!-- 颜色 --> <input type="color" > <!-- placeholder:默认占位文字 autofacus:默认聚焦属性 --> <input type="text" placeholder="please input" autofocus="true" > <!-- autocomplete 属性规定输入字段是否应该启用自动完成功能 on为打开 off为关闭 --> <input type="text" autocomplete="off" > <!-- 正则验证 pattern --> <input type="text" pattern="[A-Z]{3}" /> <!-- 只写属性名默认true --> <input type="checkbox" checked /> <!-- 属性名="属性名"也为 true --> <input type="checkbox" checked="checked" />

这里要特别介绍一个和 input 标签搭配的标签 datalist,这个标签和 select 下拉非常相似,唯一的区别是这个标签只是给 input 提供一个提示的功能,你也可以输入在 datalist 中不存在的内容

**用法:**通过给 input 一个 list 属性,然后再 datalist 中定义一个 id ,这个 id 值为 input 中 list 的值

          
  • 1
  • 2
  • 3
  • 4
  • 5
<input list="keywords" /> <datalist id="keywords"> <option value="HTML">HTML</option> <option value="CSS">CSS</option> </datalist>

新增图形绘画标签

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
<html> <head> <meta charset="UTF-8" /> </head> <body> <canvas id="canvas"></canvas> <script> // 绘制一个简单的矩形 var canvas=document.getElementById('canvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); </script> </body> </html>

新增存储 localStorage , sessionStorage

它们都是用来存储客户端临时信息的对象,并且只能存储字符串类型的对象

localStorage: 生命周期是永久,除非用户清除 localStorage 中的信息,否则这些信息将永远存在

sessionStorage: 生命周期为当前窗口或者标签页,一旦窗口或者标签页被关闭,那么通过 sessionStorage 存储的数据也将被清空

Creative Commons BY-NC 4.0
https://zhangwurui.cn/article/2
0/0comments
Guest
Start the discussion...
Be the first to comment