HTML5基础

HTML5中新增的布局标签

html 1990 html4.0.1 1997 html5 2008 稳定版 2012年

新增的结构标签 （更加语义化）

  • header标签 <header>这里是头部区</header>
  • footer标签 <footer>这里是页脚区</footer>
  • main标签 <main>这里是主体区</main>
  • nav标签 <nav> 我是导航 </nav>
  • article标签 <article>这里是一个有完整含义的内容区</article>
  • section标签 <section>   <h2>标题一</h2>    <p>内容区域</p> </section> <section>   <h2>标题二</h2>    <p>内容区域</p> </section>
  • aside标签 <aside>这里是侧边栏</aside>

新增的其他标签

  • mark标签 <p>今天天气<mark>晴朗</mark></p>
  • progress标签
  • progress 标签标示任务的进度（进程）。
  • <progress value="30" max="100"></progress>

HTML5兼容

  • 方案一：使用javascript新增元素的方法解决 <!--[if lt IE 9]> 
•   <script>
        document.createElement("header");
        document.createElement("footer");
  </script>
<![endif]--> 由于创建出来的元素是内联元素，所以需要转换成块级，宽度和高度才能生效
 header,footer,nav,article,section,aside{
 		display: block;
 }
  • 方案二：使用封装好的插件html5shiv.js解决兼容性问题 <!--[if IE]> 
•      <script src="https://cdn.bootcdn.net/ajax/libs/html5shiv/r29/html5.js"></script>
<![endif]-->

HTML5已移除的标签

● <acronym> 定义只取首字母缩写 ● <basefont> 定义文档中所有文本的默认颜色、大小和字体 ● <big> 呈现大号字体效果 ● <center> 标签控制文本的居中显示 ● <dir> <dir> 标签定义目录列表 ● <font> 标签规定文本的字体、字体尺寸、字体颜色

● <strike> strike 标签可定义加删除线文本定义。

新增多媒体标签

  • audio标签 音频标签
  • 浏览器支持
  • ie8不支持audio标签
  • HTML5支持的音频格式
  • Ogg audio/ogg 支持的浏览器：Chrome、Firefox、Opera10+
  • MP3 audio/mpeg 支持的浏览器：Chrome、Firefox、Opera10+、IE9+、Safari5+
  • audio标签相关的属性
  • src属性规定要播放的音频/视频的URL
  • controls属性规定浏览器应该为音频/视频提供播放控件
  • loop属性规定当音频/视频结束后将重新开始播放：如果设置该属性，则音频/视频将循环播放
  • muted属性规定要播放的音频/视频为静音 <audio src="./media/happy birthday.mp3" controls="controls" muted loop></audio>
  • video标签 视频标签
  • 浏览器支持
  • ie8不支持video标签
  • HTML5支持的视频格式
  • Ogg ：支持的浏览器：Firefox、Chrome、Opera
  • MEPG4：支持的浏览器：Safari、Chrome、IE9+、Firefox
  • WebM：支持的浏览器：Firefox、Chrome、Opera
  • video标签相关的属性
  • src属性规定要播放的音频/视频的URL
  • controls属性规定浏览器应该为音频/视频提供播放控件
  • autoplay如果出现该属性，则视频在就绪后马上播放。谷歌浏览器不支持该属性
  • loop属性规定当音频/视频结束后将重新开始播放：如果设置该属性，则音频/视频将循环播放
  • muted属性规定要播放的音频/视频为静音
  • 只属于video标签的属性
  • width属性规定视频播放器的宽度
  • height属性规定视频播放器的高度 <video src="videoAudio/butterfly.ogg" width="400" height="400"></video>
  • poster预览图片 <video src="videoAudio/butterfly.ogg" controls width="200" poster="pic.png"></video>
  • source标签：source 可以引入多个文件，当以第一个不生效，顺延到第二个，以此类推
  • 为媒介元素（比如video和audio）定义媒介资源
  • 允许使用source标签 引入多个音频资源
  • 浏览器会播放第一个可识别的格式 <video controls="controls" width="300"> 
• 
<source src="videoAudio/movie.ogg" type="video/ogg">

   <source src="videoAudio/movie.mp4" type="video/mp4">

</video>
  • src属性规定要播放的音频/视频的URL
  • type属性规定媒体资源的MIME类型

新增表单元素

新增input类型

  • url
• <input type="url" name="myurl">
  • email
• <input type="email" name="usremail">
  • search
• <input type="search" value="在这里搜索">
  • number
• <input type="number" value="10" min="0" max="20" step="2"/>
  • range
• <input type="range" value="5" min="1" max="10" step="1"/>
  • color
• <input type="color">

日期表单标签

  • date
• <input type="date">
  • datetime-local
• <input type="datetime-local">
  • month
• <input type="month">
  • time
• <input type="time">
  • week
• <input type="week">

新增表单属性

  • placeholder属性
• <input type="text" placeholder="请您输入">
  • autofocus
• <input type="text">
<input type="text" autofocus>
  • form属性 <form action="" id="form1"> 
•     <input type="submit">
  </form><br>

  <input type="text" name="b" form="form1">
  • required属性
  • 规定必须在提交之前填写输入域（不能为空）
  • <input type="text" name="username" required>
  • pattern属性 : 设置正则表达式验证
  • <input type="text" name="username" pattern="[0-9]">
  • 校验数字的表达式
  • 1 数字：^[0-9]*$
  • 2 n位的数字：^\d{n}$
  • 3 至少n位的数字：^\d{n,}$
  • 4 m-n位的数字：^\d{m,n}$
  • 5 零和非零开头的数字：^(0|1-9*)$
  • 6 非零开头的最多带两位小数的数字：^(1-9*)+(.[0-9]{1,2})?$
  • 7 带1-2位小数的正数或负数：^(-)?\d+(.\d{1,2})?$
  • 8 正数、负数、和小数：^(-|+)?\d+(.\d+)?$
  • 9 有两位小数的正实数：^[0-9]+(.[0-9]{2})?$
  • 10 有1~3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$
  • 11 非零的正整数：^[1-9]\d$ 或 ^(1-9){1,3}$ 或 ^+?1-9*$
  • 12 非零的负整数：^-1-90-9"$ 或 ^-[1-9]\d$
  • 13 非负整数：^\d+$ 或 ^[1-9]\d*|0$
  • 14 非正整数：^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$
  • 15 非负浮点数：^\d+(.\d+)?$ 或 ^[1-9]\d.\d|0.\d[1-9]\d|0?.0+|0$
  • 16 非正浮点数：^((-\d+(.\d+)?)|(0+(.0+)?))$ 或 ^(-([1-9]\d.\d|0.\d[1-9]\d))|0?.0+|0$
  • 17 正浮点数：^[1-9]\d.\d|0.\d[1-9]\d$ 或 ^(([0-9]+.[0-9]1-9)|([0-9]1-9.[0-9]+)|([0-9]1-9))$
  • 18 负浮点数：^-([1-9]\d.\d|0.\d[1-9]\d)$ 或 ^(-(([0-9]+.[0-9]1-9)|([0-9]1-9.[0-9]+)|([0-9]1-9)))$
  • 19 浮点数：^(-?\d+)(.\d+)?$ 或 ^-?([1-9]\d.\d|0.\d[1-9]\d|0?.0+|0)$
  • 校验字符的表达式
  • 1 汉字：^[\u4e00-\u9fa5]{0,}$
  • 2 英文和数字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
  • 3 长度为3-20的所有字符：^.{3,20}$
  • 4 由26个英文字母组成的字符串：^[A-Za-z]+$
  • 5 由26个大写英文字母组成的字符串：^[A-Z]+$
  • 6 由26个小写英文字母组成的字符串：^[a-z]+$
  • 7 由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$
  • 8 由数字、26个英文字母或者下划线组成的字符串：^\w+$ 或 ^\w{3,20}$
  • 9 中文、英文、数字包括下划线：^[\u4E00-\u9FA5A-Za-z0-9_]+$
  • 10 中文、英文、数字但不包括下划线等符号：^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$
  • 11 可以输入含有^%&',;=?$"等字符：%&',;=?$\x22+
  • 12 禁止输入含有~的字符：~\x22+
  • 特殊需求表达式
  • 1 Email地址：^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$
  • 2 域名：a-zA-Z0-9{0,62}(/.a-zA-Z0-9{0,62})+/.?
  • 3 InternetURL：[a-zA-z]+://\s* 或 ^http://([\w-]+.)+[\w-]+(/[\w-./?%&=]*)?$
  • 4 手机号码：^(13[0-9]|14[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])\d{8}$ (由于工信部放号段不定时，所以建议使用泛解析 ^(1)\d{9}$)
  • 5 电话号码("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX)：^((\d{3,4}-)|\d{3.4}-)?\d{7,8}$