HTML5

最新推荐文章于 2024-04-26 21:29:15 发布

king--

最新推荐文章于 2024-04-26 21:29:15 发布

阅读量209

点赞数 1

分类专栏： web前端文章标签： html5

本文链接：https://blog.csdn.net/wenwen_king/article/details/78536494

版权

web前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

HTML5≈HTML+CSS3+Javascript+API
文档声明类型（DTD）：<!DOCTYPE html>
目前支持HTML5的浏览器：IE9+/Firefox/Opera/Safari/Chrome
新增的HTML标签 — 结构标签
- （块状元素）有意义的div
  <article>标记定义一篇文章
  <header>标记定义一个页面或一个区域的头部
  <nav>标记定义导航链接
  <section>标记定义一个区域
  <aside>标记定义页面内容部分的侧边栏
  <hgroup>标记定义文件中一个区块的相关信息
  <figure>标记定义一组媒体内容以及它们的标题
  <figcaption>标记定义figure元素的标题
  <footer>一个页面或一个区域的底部
  <dialog>一个对话框（类似微信）
- web应用标签
  <progress>表进度
  <meter>表程度
- 多媒体标签
  box-sizing:border-box;/*宽=width+margin*/，宽包含了padding和border值。
HTML5能在完全脱离插件的情况下播放音视频，但是不是所有格式都支持。
HTML5支持的视频格式：
Ogg=带有Theora视频编码+Vorbis音频编码的Ogg文件，支持的浏览器:F、C、O
MPEG4=带有H.264视频编码+AAC音频编码的MPEG4文件，支持的浏览器: S、C
WebM=带有VP8视频编码+Vorbis音频编码的WebM格式，支持的浏览器: I、F、C、O
HTML5支持的音频格式：
Ogg 免费支持的浏览器:C、F、O
MP3 收费支持的浏览器: I、C、S
Wav 收费支持的浏览器: F、O、S
- 视频标签<video>:
  muted:ture/false;是否静音（布尔值），属性的用法是直接加muted.
  poster 视频未播放前的显示图片。
  autoplay 自动播放；
  preload 预加载(auto/metadata/none)；
  loop 循环；
  controls 控键
  width height （调整播放器的大小）
  playbackrate 播放的倍速
  volumn 音量值
<video>的使用：

 <video src="文件地址" controls="controls"></video>
 < video  controls="controls"  width="300“ >
    <source src="move.ogg" type="video/ogg" >
    <source src="move.mp4" type="video/mp4" >
    您的浏览器暂不支持video标签播放视频。
 </ video >

<source>标记定义媒体资源
- 音频标签<audio>：
  autoplay 如果出现该属性，则音频在就绪后马上播放。
  controls 如果出现该属性，则向用户显示控件，比如播放按钮。
  loop 如果出现该属性，则每当音频结束时重新开始播放。
  preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
  <src="url">要播放的音频的 URL。
<audio>的使用（同video）：

<audio src="文件地址" controls="controls"></audio>
< audio controls="controls"  >
    <source src="happy.MP3" >
    <source src="happy.ogg" >
    您的浏览器暂不支持audio标签播放音频。
</ audio>

布局的比较

传统div+css页面布局方式
HTML5布局方式

新结构标签意义
Form表单
HTML5中为了方便排版，可以使form中的表单标签脱离form的嵌套。
方法:form指定ID，所有表单标签均添加form=id属性。

<form action="" method="post" id="register" >
</form>
    <input  type="text" name="user" form="register" />
    <select name="year" form="register" >
        <option value="1999"></option>
    </select>
    <textarea name="ext" form="register" ></textarea>
    <button type="submit" form="register" >提交</button>

<form action="" id="myform"></form>
<p>邮箱：<input type="email" form="myform"/></p>
<p>网址：<input type="url" form="myform"/></p>
<p>日期：<input type="date" form="myform"/></p>
<p>时间：<input type="time" form="myform"/></p>
<p>月：<input type="month" form="myform"/></p>
<p>周：<input type="week" form="myform"/></p>
<p>数字：<input type="number" form="myform"/></p>
<p>滑动条：<input type="range" form="myform"/></p>
<p>颜色：<input type="color" form="myform"/></p>
<p>搜索：<input type="search" form="myform" placeholder="请输入查询内容"/></p>
<input type="text" form="myform" required autofocus autocomplete="off" name="username"/>
<input type="submit" form="myform"/>

效果图：
form

标签属性：

required 必填项
placeholder=“提示文本”，默认提示文本
autofocus(on) 自动获取焦点（增加用户体验）
autocomplete=”on/off” 自动完成功能（使用时必须给此标签个name值/id值；若此属性加给form是整个表单都有，加给标签是只有那个标签有。）
pattern 正则表达式输入的内容必须匹配到指定正则

datalist列表：自动填充表单

input中的list跟datalist中的id值必须一致， datalist中option value值是下拉表单中的内容。

<input id="mi" list="music"/>
<datalist id="music">
    <option value="love you"></option>
    <option value="marry me"></option>
    <option value="lalala"></option>
</datalist>