HTML5
来源:互联网 发布:c语言编程求最简分数 编辑:程序博客网 时间:2024/06/06 00:07
- 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>
的使用:- (块状元素 )有意义的div
<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"/>
效果图:
标签属性:
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>
- HTML5
- Html5
- HTML5
- HTML5
- HTML5
- HTML5
- html5
- html5
- HTML5
- html5
- HTML5
- HTML5
- HTML5
- Html5
- HTML5
- Html5
- html5
- HTML5
- 爬虫感悟3
- day-11:读取项目中的所有pom.xml文件中所有的version标签
- 初入IT行业,从小白开始
- Android 视图View的基本属性
- 显式锁(四)--- Lock的等待/通知机制Condition
- HTML5
- Vulkan规范:第八章 8.2 ~ 8.3
- Java反射
- 行程长度编码科普
- 文章标题
- [系统安全]使用OD编写连连看外挂
- day-11
- thinkphp5 静态资源文件引入
- 简图记录-linux文件系统基础