HTML5第九天学习内容( H5新增标签 )

H5新增标签 : 使用量 / 进度条 / audio / video / embed / iframe / figure 标签等等

               H5:   H5标签 一般都是在 标准浏览器 和 IE8 之后的版本支持

                                     1️⃣ 新增了很多标签

                                     2️⃣ 支持本地持久化

                                     3️⃣ 废弃了很多能用CSS修饰的标签

                                     4️⃣ 增加了 音频,视频 ,标签

                                     5️⃣ 增加了 Canvas 标签

                                   

   1️⃣  使用量标签 ( meter ) :

                                   属性值:  电池的使用量,内容的使用量等等

                                            min:    最小值

                                           max:    最大值

                                           value:  当前值

                                           low:    最小预警值

                                           high:   最高预警值

                                          当浏览器不支持该标签的时候,会显示标签中的文字

                                  例 :  <meter min="0" max="100" value="10" low="20" high="80"></meter>

                   2️⃣  进度条标签 ( progress ): 支持 min,默认值为0

                                   例 :  <progress max="100" value="50">进度条</progress>

                   3️⃣  单词内换行( webr ) :  

                                    例 :  

                                            <p>

                                           <webr></webr>

                                          agdihdijahda kldkw

                                          <webr>k</webr>hjihgg

                                          </p>

                   4️⃣  ruby标签 ( ruby ) :   拼音,注音,注释等

                                                                        属性值  :

                                                                                        rt: 要注释的内容

                                                                                        rp: 浏览器不支持当前标签时,会显示的内容          

                                         例 : 

                                               <ruby>

                                               闲心

                                             <rt>闲心xianxin</rt>

                                            <rp>浏览器不支持该标签</rp>

                                            </ruby>

                   5️⃣  datalist 标签 :  结合 input 使用

                                       例 :  

                                  <form action="###">

                                            <!--input标签的 list 属性与 datalist 的id 配合使用-->

                                           <input type="text" list="show" />

                                           <datalist id="show">

                                          <option value="一支"></option>

                                         <option value="红杏"></option>

                                        <option value="出墙来"></option>

                                        </datalist>

                           </form>

                   6️⃣  details 标签 :  自带折叠效果(可以 点击上下 箭头) summary 与 details 是一个组合,summary 是 details 的标题

                                    例 :  

                                          <details>

                                                    <summary>金钱</summary>

                                                    <p>万恶金钱</p>

                                                   <p>都砸过来</p>

                                          </details>

 

                   7️⃣  audio :  播放音频文件,支持 mp3, ogg, wav 类型的文件

                                             属性值 : 

                                                       autop:  自动播放         controls: 循环播放         muted: 静音     

                                                       preload  属性值: 预加载

                                                                            auto, 默认值, 在网页加载完成之后,就开始加载整个音频文件

                                                                            metadata: 只加载音乐yuan文件

                                                                            none: 不加载(减少服务器压力)

                                                                           注: 写了 autoplay 就不要写 preload 了

                      例  : <audio src="source 2/一双人-原声带.mp3"  autop="autop" controls="controls"  preload="metadata"></audio>

                          audio 结合 source 标签使用 

                         一个 source 代表一个播放资源 

                        source 是用来解决不同浏览器版本支持的音频格式不统一的问题

                      例 : 

                           <audio autop  controls>

                                    <source src="source 2/一双人-原声带.mp3"></source>

                                   <source src="source 2/一双人-原声带.ogg"></source>

                                 <source src="source 2/一双人-原声带.wav"></source>

                         </audio>

 

                   8️⃣ video用户播放视频   : 支持三种格式: mp4, ogg, webm

                      例 :   

                           <video src="source 2/levelVedio.mp4" controls="controls" width="500px"></video>

                           <!--不同浏览器下的兼容格式-->

                          <video width="800" height="">

                                  <source src="source 2/levelVedio.mp4" type="video/mp4"></source>

                                 <source src="myvideo.ogv" type="video/ogg"></source>

                                <source src="myvideo.webm" type="video/webm"></source>

                        </video>

                   9️⃣  figure注释标签 : 包裹一段独立的内容,一般用来包裹图片,统计类的图表,代码等.(注释的内容写在 figcaption 标签中)

                     例 :  

                            <figure>阳光明媚</figure>

                            <img width="300" src="source 2/1.jpg" />

附加 :      

          1️⃣  input :  type (text,password,submit,checkbox,radio,buttom,file,image,reset)

                             1, email 类型用于应在包含E-mail地址的输入域

                                       例 :   <input type="email" />

                             2, url类型用于应在包含url地址的输入域

                                        例 : <input type="url" />

                             3 ,颜色盘

                                        例 : <input type="color" />

                             4, number类型用于应在包含数值的输入域    step 设置步长(每次的变化量)

                                        例 :  <input type="number" value="2" step="10" />

                            5, 滑竿  min: 最小值   max: 最大值  valie: 当前值

                                        例 :  <input type="range" min="0" max="100" value="20" />

                            6, date 选取日月年

                                         例 : <input type="date" />

                             7, month 选取月年

                                          例 : <input type="month" />

                            8, week 选取周和年

                                          例 : <input type="week" />

                            9, time 选取时间（小时和分钟）

                                          例 : <input type="time" />

                           10, datetime选取时间、日、月、年（UTC时间）

                                          例 : <input type="datetimel" />

                           11, datetime-local 选取时间、日、月、年（本地时间）

                                         例 : <input type="datetime-local" />

                           12, required: 修饰文本输入框,文本内容不能为空

                                         例 : <input type="text" required="required" />

                           13, autofocus 修饰输入框,自动获取焦点

                                        例 : <input type="text" autofocus="autofocus" />

         2️⃣ time : 标签语义化

                           第一种用法 : 修饰时间

                                         例 : <time>15:00</time>喊了一声....

                          第二种用法 :  内容展示给用户,具体的时间不会显示出来,隐藏的来获取事件

                                         例 : <time datetime="2018-07-23 15:03:06">说点啥了,不知道该说啥</time>

           3️⃣ iframe :在当期的网页中展示另一个网页,被称为网页中的网页 

                                        例 :  <iframe src="http://www.baidu.com" width="500" height="500"></iframe>

           4️⃣ embed: 用来嵌入对应的一些插件,比如flash插件 等,注意修改对应的type类型

 

                                       例 : <embed src="source 2/levelVedio.mp4" type="" width="500" height="500"/></embed>