视频video
<video src="视频的路径"controls="控制播放、暂停、音量等"autoplay="自动播放"loop="循环播放"width="视频播放器的宽度"height="视频播放器的高度">
</video>
还有做浏览器兼容的方式：
<video controls autoplay loop width="500" height="500"><source src="video/hhxd.mp4" type="video/mp4"></source><source src="video/ghsy.ogg" type="audio/ogg"></source>
flash支持
当所有不支持时，就提供一个下载路径。
</video>
音频audio
<audio src=”音频的路径”controls=”控制播放、暂停、音量等”autoplay=”自动播放”loop=”循环播放”>
</audio>
兼容类似视频方式
页面布局
- div : 单纯的容器
- header: 头部
- footer: 页脚
- nav : 导航
- section : 一块单独的区域
- article : 一篇独立的文章
- aside : 侧边栏
内联框架**iframe
<iframe src=”显示的地址”width=”内联框架的宽度”height=” 内联框架的高度”frameborder=” 内联框架的边框”scrolling=”滚动条no yes”>
</iframe>
注意：
结合超级链接的标签如：
<a href="http://www.baidu.com" target="内联框架的name">百度</a>
<iframe src=”” name=”内联框架的name” ></iframe>
表单元素
<form action="提交地址" method="提交方式">表单元素
</form>
表单元素的一般语法：<input type="元素类型" name="元素名称" />特殊的：<select name=""><option value="选项的值">选项的文本</option></select>
<textarea rows="行数" cols="列数" >值</textarea>
1、 用来填的
-
text: 单行文本框
-
password: 密码输入框
-
textarea: 多行文本框
-
email: 邮件地址输入框
-
url: 网址输入框
-
number: 数字输入框
-
属性：
- size: 可控制宽度
- maxlength: 可控制最大输入字符数
- max（最大值）、min（最小值）只对number有效
2、 用来选的
-
checkbox: 多选框
-
radio: 单选框
-
select: 下拉列表
-
属性：
- checked: 用于默认选择checkbox与radio
- selected: 用于默认选择select
3、 用来点的
- submit: 提交按钮
- reset: 重置按钮
- button: 一般按钮，没有功能
- image: 图片按钮，功能上和submit一样
4、 其他
- hidden: 隐藏域，作用不明
- file: 文件域，用于文件上传
设置表单要注意什么：
- 一组radio应该设置name，这样才能互斥
- 除按钮外，其他元素都应该设置name属性
- 用于选择元素都应该设置value
表单元素的只读和隐藏
- readonly 只读
- disabled 禁用
使用label提高用户体
label又称为“标注”用于扩大表单元素的可操作区域，点了label就等价于点了相应的表单元素。
方式一：
<label for="表单元素的id">文本</label
方式二：
<label>
文本
<input />
</label>
使用HTML5内置的表单验证
1、 用户提示placeholder
<input type="password" placeholder="请输入用户密码" /
2、 实现必填信息required
<input type="text" required="required" />
3、 使用正则表达式验证pattern，实现一些复杂的文本信息验证
<input type="text" pattern="[a-zA-Z]{4,16}"> //必须由4到16位字母组成
<input type="text" pattern="1[39][0-9]{9}"> //必须由13XXXXXXXX开头或者19xxxxxxxxxxpattern="[-\w\u4E00-\u9FA5]{4,10}" //可以是-数字字母下划线或中组成
补充：
// 日期选择器
<input type="date" />
// 下拉列表
<select><option value="1980">1980<option>
</select>
)
