HTML5新特性与实战应用-优快云博客

本文链接：https://blog.youkuaiyun.com/ILove_bugs/article/details/120075027

day11

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}$