首页 前端知识 HTML5新增

HTML5新增

2024-08-24 23:08:27 前端知识 前端哥 325 350 我要收藏

1.文档类型设定

(1)HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

(2)XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

(3)HTML5

<!DOCTYPE html>

2.字符设定

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">: HTML与XHTML中建议写法
<meta charset="UTF-8" />: HTMl5中建议写法

3.常用新标签

     w3c手册中文官网: w3school 在线教程

(1)header:定义文档的头部区域

(2)nav:定义导航链接的部分

(3)footer:定义section或document的页脚

(4)article:定义页面独立的内容区域

(5)section:定义文档的节(section、区段)

(6)aside:定义页面的侧边栏内容

<header>定义网页的头部  页眉</header>
<nav>定义导航链接部分</nav>
<footer>定义网页的底部  页脚</footer>
<article>定义文章</article>
<section>定义区域</section>
<aside>定义侧边栏</aside>

(7)datalist:定义选项列表,与input结合使用

<!-- input使用list属性 -->
<input type="text"  value="输入明星" list="star"/>  
<!-- datalist使用id属性,list属性与id属性的值一致,表示与input形成链接 -->
<datalist id="star">	
	<option>12</option>
	<option>13</option>
	<option>14</option>
	<option>15</option>
	<option>16</option>
	<option>17</option>
</datalist>

(8)fieldset:可将表单内的相关元素分组打包,与legend搭配使用

<fieldset>
	<legend>登录页面</legend> <!--  外边框的标题 -->
	用户名:<input type="text"><br><br>
	密 码:<input type="password">
</fieldset>

(9)mark:用于定义带有记号的文本。在需要突出显示文本时可使用 <mark> 标签。

<p>这是一个段落,中间的<mark>文本</mark>需要标记</p>

         注意:IE 8及之前的版本不支持mark标签

(10)meter:定义度量衡,仅用于已知最大和最小值的度量。比如:磁盘使用情况,查询结果的相关性等。不能当做进度条使用。

           min:规定范围最小值

           max:规定范围最大值

           value:规定度量的当前值,是必须的属性。可以用数值表示

           low:范围界定的最低值

           high:范围界定的最大值

           注意:IE浏览器不支持meter标签。

<meter min="0" max="10" value="6"></meter> <br>

<!-- value的值超过high的值 -->
<meter min="0" max="100" value="95" low="30" high="90"></meter><br>

<!-- value的值在low与high之间 -->
<meter min="0" max="100" value="60" low="30" high="90"></meter><br>

<!-- value的值低于low的值 -->
<meter min="0" max="100" value="25" low="30" high="90"></meter>

(10) progress:定义运行中的任务进度,通常与JavaScript结合使用来显示当前的任务进度。不能作为度量值使用

<progress value="20" max="100"></progress>

4.新增的input type属性值

类型使用示例含义
email<input type="email">输入邮箱格式,如:xx@163.com
url<input type="url">输入url格式,如:http://www.baidu.com
number<input type="number">输入数字格式,只能是数字
search<input type="search">搜索框
range<input type="range">自由拖动滑块
time<input type="time">小时分钟
date<input type="date">年月日
datetime<input type="datetime">时间
month<input type="month">年月
week<input type="week">星期
color<input type="color">颜色
hidden/show<input type="hidden">定义表单隐藏/显示
<form action="">
	邮箱:<input type="email"><br><br>
	url: <input type="url"><br><br>
	数字:<input type="number"><br><br>
	搜索:<input type="search"><br><br>
	滑块:<input type="range"><br><br>
	时分:<input type="time"><br><br>
	年月日:<input type="date"><br><br>
	年月:<input type="month"><br><br>
	星期:<input type="week"><br><br>
	颜色:<input type="color"><br><br>
	<input type="submit">
</form>

(1)hidden/show属性的使用:


<script type="text/javascript">
	var flag = true;
	function hide() {
		var input = document.getElementById("myinput");
		var btn = document.getElementById("btn")
		if(flag) {
			input.type = "hidden";
			btn.innerHTML = "显示";
			flag = false;
		} else {
			input.type = "show";
			btn.innerHTML = "隐藏";
			flag = true;
		}
	}	
</script>

<button id="btn" onclick="hide()">隐藏</button><br>
<input id="myinput" name="myinput" type="show" value="小明">

5.常用新属性

属性用法含义
placeholder<input type="text" placeholder="请输入用户名" >占位符 用于提示用户输入,当用户输入数据时,提示信息会自动消失
autofocus<input type="text" autofocus>规定当页面加载时input元素应该自动获得焦点
multiple<input type="file" multiple>多文件上传
autocomplete<input type="text" autocomplete="off">规定表单是否应该启用自动完成功能,有两个值分别是on和off,on表示记录已经输入的值 。条件是:1.autocomplete首先需要提交按钮 2.这个表单必须给name值
required<input type="text" required>必填项,内容不能为空
accesskey<input type="text" accesskey="s">规定激活(使元素获得焦点)元素的快捷键,采用alt+字母的形式
<!-- placeholder表示占位符,用于提示用户输入,当用户输入数据时,这个提示会自动消失
	autofocus表示页面加载时,input自动获得焦点 -->
	用户名:<input type="text" placeholder="请输入用户名" autofocus><br>
	<!-- multiple表示可以选择多文件上传 -->
	上传头像:<input type="file" multiple><br>
	<h4>自动记录完成</h4>
	<!--1.autocomplete首先需要提交按钮
		2.这个表单必须给name值 -->
	<form action="">
		<!-- autocomplete表示记录之前输入的信息,完成自动输入功能 -->
		姓名:<input type="text" autocomplete name="username"><br>
		<input type="submit">
	</form><br>
	<form action="">
		<!-- required 表示必填项,内容不能为空
		  	 accesskey 表示使用alt+字母可以让input表单快速获得焦点-->
		昵称:<input type="text" required accesskey="s"><br>
		<input type="submit">
	</form>

6.多媒体标签

1.多媒体embed

    embed可以用来插入各种多媒体,格式可以是Midi、Wav、AIFF、AU、MP3等,src为音频或视频文件的路径,可以是相对路径或绝对路径。

<!-- 播放音频文件 -->
<embed width="300px" height="50px" src="./music/loveyou.mp3"/>
<!-- 播放优酷视频 -->
<embed src='http://player.youku.com/player.php/sid/XMjQ4MTc0ODMyOA==/v.swf' width='480' height='400' align='middle'></embed>

2.多媒体audio

    <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg

浏览器MP3WavOgg
IEyesnono
Chromeyesyesyes
Firefoxyesyesyes
Safariyesyesyes
Operayesyesyes

     HTML5通过<audio>标签来解决音频播放的问题。<audio> 标签在 HTML 4 中是无效的,页面无法通过 HTML 4 验证。必须把音频文件转换为不同的格式。<audio> 元素在老式浏览器中不起作用。

    常见属性:

属性描述
autoplayautoplay如果出现该属性,则音频在就绪后马上播放
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮
looploop如果出现该属性,则每当音频结束时重新开始播放
srcurl要播放的音频的url

     在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。

     <audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件,浏览器将使用第一个支持的音频文件。

<audio controls>
	<source src="./music/loveyou.mp3" type="audio/mpeg"></source>
	<source src="./music/loveyou.ogg" type="audio/ogg"></source>
	<source src="./music/loveyou.wav" type="audio/wav"></source>
	您的浏览器不支持 HTML5 audio 标签。
</audio>

3.多媒体video

    当前video元素支持的三种格式,也可以原生的支持视频格式的文件的播放,当然,支持的格式是有限的

浏览器MP4WebMOgg
IEyesnono
Chromeyesyesyes
Firefoxyesyesyes
Safariyesnono
Operayesyesyes

    现在大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。

    HTML5 规定了一种通过 video 元素来包含视频的标准方法。

    <video> 元素提供了播放、暂停和音量控件来控制视频。同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度,所需的视频空间会在页面加载时保留。如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能在加载时保留特定的空间,页面就会根据原始视频的大小而改变。

   <video> 元素支持三种视频格式:

        MP4:带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

        WebM: 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

        Ogg:带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

<video width="420" controls>
	<source src="./music/mov_bbb.mp4" type="video/mp4">
	<source src="./music/mov_bbb.ogg" type="video/ogg"> 
	<source src="./music/mov_bbb.webm" type="video/webm">
	您的浏览器不支持 HTML5 video 标签。
</video>

      video常见属性

属性描述
autoplayautoplay视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放的问题)
controlscontrols向用户显示播放控件
widthpx设置播放器的宽度
heightpx设置播放器的高度
looploop播放完是否继续播放该视频,循环播放
preloadauto(预先加载视频) none(不应加载视频)规定是否预加载视频,如果有了autoplay,就忽略该属性
srcurl视频url地址
poterimgurl加载等待的画面图片
mutedmuted静音播放

7.解决Chrome浏览器无法自动播放音频视频的问题

    谷歌浏览器做了改革,不再允许自动播放音频和视频。Chrome只允许用户对网页进行主动触发后才可自动播放音频和视频

<video autoplay></video>  

(1)比较常规的做法是,为video标签设置muted属性,使它静音,这样视频就能自动播放了,但是没有声音。然后待用户在网页上有了任意触发后,再将muted去掉。或者让用户手动去打开音频(腾讯视频就是这样做的)。

(2)使用iframe来触发权限

<iframe style="display: none" allow="autoplay" src="音频地址"></iframe>

    当你页面加载完成后,将原先video的src地址赋值给iframe ,就可以通过iframe来播放音频文件了

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16803.html
标签
评论
发布的文章

jQuery File Upload 使用教程

2024-09-03 02:09:33

jQuery笔记

2024-05-03 18:05:51

jQuery-Spectragram 使用教程

2024-09-03 02:09:26

echarts问题汇总

2024-09-03 02:09:12

echarts自定义悬浮提示

2024-09-03 02:09:12

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!