html基础2

视频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>

兼容类似视频方式

页面布局

1. div : 单纯的容器
2. header: 头部
3. footer: 页脚
4. nav : 导航
5. section : 一块单独的区域
6. article : 一篇独立的文章
7. 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: 文件域，用于文件上传

设置表单要注意什么：

1. 一组radio应该设置name，这样才能互斥
2. 除按钮外，其他元素都应该设置name属性
3. 用于选择元素都应该设置value

表单元素的只读和隐藏

1. readonly 只读
2. 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>