HTML5新增语义 标签(二)
<input type="text" value="输入明星" list="star"/>
<!-- input里面用 list -->
<datalist id="star">
<!-- datalist 里面用 id 来实现和 input 链接 -->
<option></option>
<option></option>
</datalist>
<fieldset>
<legend>用户登录</legend>
用户名: <input type="text"><br /><br />
密 码: <input type="password">
</fieldset>
新增type类型
<form action="">
邮箱: <input type="email" /> <!-- aa@aa.com --> <br />
手机: <input type="tel" /> <!-- 手机格式 数字 --> <br />
数字: <input type="number" /> <!-- 只能 是 数字 --> <br />
url: <input type="url" /> <!-- 网址格式的 --> <br />
搜索: <input type="search" /> <!-- 比文本框多了删除符号 --> <br />
区域: <input type="range" /> <!-- 区域 奥哈药 滑块 --> <br />
时间: <input type="time" /> <!--小时 分钟 --> <br />
年月日: <input type="date" /> <!--获得年月日 --> <br />
月份: <input type="month" /> <!--获得年月 --> <br />
星期: <input type="week" /> <!--获得周 --> <br />
颜色: <input type="color" /> <!-- 颜色 --> <br />
<input type="submit" />
</form>
HTML5新增表单属性
属性**** | 用法**** | 含义**** |
---|---|---|
placeholder**** | 占位符提供可描述输入字段预期值的提示信息 | |
autofocus**** | 规定当页面加载时 input 元素应该自动获得焦点 | |
multiple**** | 多文件上传 | |
autocomplete**** | 规定表单是否应该启用自动完成功能 | |
required**** | 必填项 | |
accesskey**** | 规定激活(使元素获得焦点)元素的快捷键 |
<body>
用户名: <input type="text" placeholder="请输入用户名" autofocus/>
上传头像: <input type="file" multiple/>
<h4> 自动记录完成 </h4>
1.autocomplete 首先需要提交按钮 <br/>
2.这个表单您必须给他名字
<form action="">
姓名: <input type="text" autocomplete="on" name="userName"/>
<input type="submit"/>
</form>
昵称: <input type="text" required accesskey="s" />
//快捷键alt+s
</body>
综合案例
<form action="">
<fieldset>
<legend>学生档案</legend>
<label for="userName">姓名:</label>
<input type="text" name="userName" id="userName" placeholder="请输入用户名"> <br>
<label for="userPhone">手机号码:</label>
<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
<label for="email">邮箱地址:</label>
<input type="email" required name="email" id="email"><br>
<label for="collage">所属学院:</label>
<input type="text" name="collage" id="collage" list="cList" placeholder="请选择"><br>
<datalist id="cList">
<option value="前端与移动开发学院"></option>
<option value="java学院"></option>
<option value="c++学院"></option>
</datalist><br>
<label for="score">入学成绩:</label>
<input type="number" max="100" min="0" value="0" id="score"><br>
<label for="level">基础水平:</label>
<meter id="level" max="100" min="0" low="59" high="90"></meter><br>
<label for="inTime">入学日期:</label>
<input type="date" id="inTime" name="inTime"><br>
<label for="leaveTime">毕业日期:</label>
<input type="date" id="leaveTime" name="leaveTime"><br>
<input type="submit">
</fieldset>
</form>
多媒体标签
-
embed:标签定义嵌入的内容
-
audio:播放音频
-
video:播放视频
多媒体embed
优酷,土豆,爱奇艺,腾讯、乐视等等
- 先上传
- 在分享
多媒体audio
为了浏览器兼容, 我们需要做三种声音文件 ogg mp3 wav
<audio controls autoplay>
<source src="bgsound.mp3" />
<source src="music.ogg" />
您的浏览器不支持播放声音
</audio>
并且可以通过附加属性可以更友好控制音频的播放,如:
- autoplay 自动播放
- controls 是否显不默认播放控件
- loop 循环播放
多媒体 video
<body>
<!-- <video src="mp4.mp4" autoplay controls></video> -->
我们的视频支持 ogg mp4 webM 三种视频格式
<video controls autoplay>
<source src="mp4.mp4"/>
<source src="movie04.ogg"/>
您的浏览器不支持视频播放
</video>
</body>
同样,通过附加属性可以更友好的控制视频的播放
- autoplay 自动播放
- controls 是否显示默认播放控件
- loop 循环播放
- width 设置播放窗口宽度
- height 设置播放窗口的高度