HTML
HTML是超文本标记语言,用于描述网页结构和内容。包含标签、属性、头部信息等,提供多媒体元素、超链接、表格、表单等丰富功能。
声明
HTML5的文档解析不再基于SGML(Standard Generalized Markup Language)标准,而是形成了自己的一套标准
# HTML5 文件类型声明
<!-- HTML 4.01 Strict -->
<!-- HTML 4.01 Transitional -->
<!-- HTML 4.01 Frameset -->
语义化结构标签 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 /> |
多媒体标签
<!-- 音频 -->
<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 新增了一些类型,让开发更加方便
<!-- 此类型要求输入格式正确的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 的值
<input list="keywords" />
<datalist id="keywords">
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
</datalist>
新增图形绘画标签
<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 存储的数据也将被清空