html基础2 - 技术栈

视频video

html 复制代码

<video 
       src="视频的路径"
       controls="控制播放、暂停、音量等"
       autoplay="自动播放"
       loop="循环播放"
       width="视频播放器的宽度"
       height="视频播放器的高度">
</video>

还有做浏览器兼容的方式：

html 复制代码

<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

html 复制代码

<audio 
       src="音频的路径"
       controls="控制播放、暂停、音量等"
       autoplay="自动播放"
       loop="循环播放">
</audio>

兼容类似视频方式

页面布局

div : 单纯的容器
header: 头部
footer: 页脚
nav : 导航
section : 一块单独的区域
article : 一篇独立的文章
aside : 侧边栏

内联框架**iframe

html 复制代码

<iframe 
        src="显示的地址"
        width="内联框架的宽度"
        height=" 内联框架的高度"
        frameborder=" 内联框架的边框"
        scrolling="滚动条no yes">
</iframe>

注意：

结合超级链接的标签如：

html 复制代码

<a href="http://www.baidu.com" target="内联框架的name">百度</a>
<iframe src="" name="内联框架的name"  ></iframe>

表单元素

html 复制代码

<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就等价于点了相应的表单元素。

方式一：

html 复制代码

<label for="表单元素的id">文本</label

方式二：

html 复制代码

<label>
文本
<input />
</label>

使用HTML5内置的表单验证

1、用户提示placeholder

html 复制代码

<input type="password" placeholder="请输入用户密码" /

2、实现必填信息required

html 复制代码

<input type="text" required="required" />

3、使用正则表达式验证pattern，实现一些复杂的文本信息验证

html 复制代码

<input type="text" pattern="[a-zA-Z]{4,16}"> //必须由4到16位字母组成
<input type="text" pattern="1[39][0-9]{9}"> //必须由13XXXXXXXX开头或者19xxxxxxxxxx

pattern="[-\w\u4E00-\u9FA5]{4,10}" //可以是-数字字母下划线或中组成

补充：

html 复制代码

// 日期选择器
<input type="date" />
// 下拉列表
<select>
  <option value="1980">1980<option>
</select>