前端学习-HTML5的一些属性

HTML5

在之前HTML4之上，新增了一下有语义的标签，属性，还增加了一下api（application programming interface）应用程序接口，绘制图形，地理位置，本地存储等
注：HTML5只能用在高级浏览器中，IE9以下版本不支持，IE9部分支持

较常用标签

禁用属性

disabled：禁用属性  用法和checked，selected一样，共3种

非空验证

required 3种用法
当表单提交时，如果内容为空，会提示填写信息，且不能提交 
另：非空验证必须包含在form中才能实现

自动获取焦点

autofocus
使进入页面时焦点自动放在含有该属性的标签上

例子：

            <!-- 
                禁用属性 
                禁用属性 disabled  用法和checked，selected一样，共3种
            -->
<input type="button" value="按钮" disabled="disabled" />
<input type="button" value="按钮" disabled="" />
<input type="button" value="按钮" disabled />

<form action="http://www.baidu.com">
	<!-- 
		非空验证
		required 3种用法
		当表单提交时，如果内容为空，会提示填写信息，且不能提交 
		另：非空验证必须包含在form中才能实现
	-->
	<input type="text"  required="required" />
	<input type="text"  required="" />
	<input type="text"  required />
	
	<!-- 
		自动获取焦点 
		使进入页面时焦点自动放在含有该属性的标签上
	-->
	<input type="text"  autofocus="autofocus" />
	
	<!--
		自动补全
		autocomplete off(默认值)
		autocomplete on(要配合name属性使用,以组名的形式存储成功提交的历史记录)
	 -->
	<input type="text" autocomplete="on" name="one">
	
	
	
	<input type="submit" value="提交" />
</form>

不常用标签

下列标签只是一些含有语意的盒子标签
header 标题
nav 导航栏
section 区域标签
aside 侧边栏
article 文章标签
footer 底部

新增表单类型

<form action="http://www.baidu.com">
			<!-- 邮箱类型 -->
			<input type="email">
			<!-- 网址类型 -->
			<input type="url">
			<!-- 数字类型 -->
			<input type="number">
			<!-- 颜色类型 -->
			<input type="color">
			<!-- 搜索类型 -->
			<input type="search">
			<!-- 本地时间 -->
			<input type="datetime-local">
			<!-- 月份 -->
			<input type="month">
			<!-- 天(几号) -->
			<input type="date">
			<!-- 时间 -->
			<input type="time">
			<!-- 周 -->
			<input type="week">
			<input type="submit" value="提交">
		</form>

新增下拉菜单

<!--
			新增下拉菜单
			datalist 配合输入框使用,用输入框中的list属性值关联datalist的id值
		 -->
		<input type="text" list="car">
		<datalist id="car">
			<option>奔驰</option>
			<option>特斯拉</option>
			<option>奥拓</option>
			<option>兰博基尼</option>
		</datalist>

新增音频和视频标签

音频audio
source 多个音频文件的标签
属性:
src: 音频路径
controls: 控制面板
autoplay: 自动播放
loop:循环播放

 -->
 <!-- 第一种:单个音频文件 -->
<!-- <audio src="music/yinyue.ogg" controls="controls" autoplay="autoplay" loop="loop"></audio> -->
<!-- 第二种: 多个音频文件 -->
<audio autoplay="autoplay" controls="controls">
	<source src="music/yinyue.ogg"></source>
	<source src="music/yinyue.mp3"></source>
</audio>

视频标签video

属性:
src: 视频频路径
controls: 控制面板
autoplay: 自动播放
loop:循环播放

<!-- 第一种:单个视频文件 -->
		<!-- <video src="video/movie.mp4" controls="controls" autoplay="autoplay"></video>
		 -->
		 <!-- 第二种:多个视频文件 -->
		 <video controls="controls">
			 <source src="video/movie.webm"></source>
			 <source src="video/movie.ogg"></source>
		 </video>