H5中的相关知识点笔记

H5学习中相关的笔记

(一) 常见的标签：

1. base标签：可以设置整体连接的打开方式

实例：

   <base traget = "_blank" />	    <!-- 新窗口中打开 -->
   <base traget = "_parent" />	<!-- 父窗口中打开 -->
   <base traget = "_self" />	    <!-- 原窗口中打开 -->
   <base traget = "_top" />
   <base traget = "framename" />

   <a href="www.baidu.com"/>
   <a>...	  

---

2.label标签的使用：

<label for="mi">请输入密码：</label>
<input type="password" id="mi"/>

---

3.fieldest标签的使用：
fieldest可将表单内的相关的元素进行分组，打包；通常和legend标签搭配使用。

实例：

<fieldset>
    <legend>用户登录</legend>   <!--标题-->
    用户名：<input type="text"/><br>
    密  码：<input type="password">
</fieldset>

(二) 表格

表格可以分为三大部分：caption标题；thead头部；tbody身体。

代码示例：

<table width="500" border="1" cellpadding="0" cellspacing="0" align="center">
        <caption>信息</caption>   <!--表格的标题-->
        <thead>
            <th>姓名</th>
            <th>年龄</th>
        </thead>
        <tbody>
            <tr>
                <td>张飒</td>
                <td>15</td>
            </tr>
            <tr>
                <td rowspan="2"></td>   <!--跨2行合并 该td占两行-->
                <td colspan="2"></td>   <!--跨2列合并 该td占两列-->
            </tr>
        </tbody>
    </table>                            

效果图：

合并单元格

• rowspan跨行合并
• colspan跨列合并
• 示例：

<label for="mi">请输入密码：</label>
<input type="password" id="mi"/>

(三) 新增的input type属性值

类型	使用示例	含义
email	<input type="email" />	输入邮箱格式
tel	<input type="tel" />	输入手机号码格式
url	<input type="url" />	输入url格式
number	<input type="number" />	输入数字格式
search	<input type="search" />	搜索框（体现语义化）
range	<input type="range" />	自动拖动滑块
time	<input type="time" />	小时分钟
date	<input type="date" />	年月日
datetime	<input type="datetime" />	时间
month	<input type="month" />	月年
week	<input type="" />	星期 年

---

(四) 新增表单属性

1. placeholder
   占位符，当用户输入的时候，里面的文字消失，删除所有文字，提示自动返回

用户名：<input type="text" placeholder="请输入用户名" />

2. autofocus
   规定当页面加载时 input元素自动获取到焦点

用户名：<input type="text"  autofocus />

3. multiple
   可支持同时上传多个文件

上传文件：<input type="file" multiple />

4. autocomplete
   • (1).在使用autocomplete 首先需要提交按钮
   • (2).该表单项必须定义name属性
   • 使用方式：
     i).autocomplete 直接写 表示提交之后后提示
     ii).autocomplete = "on" 表示提交之后后提示 自动记录已输入提交的内容
     iii).autocomplete = "off" 关闭提示

<form action="">
        姓名:<input type="text" placeholder="请输入用户名" autocomplete name="username">
        <input type="submit" value="提交">
    </form>

5. required必填项

<input type="text"  required/>

6. accesskey
   规定激活元素的快捷键(使得元素获得焦点) 采用alt+ 字母的形式。

   eg. alt + s

    用户名：<input type="text" placeholder="输入用户名" accesskey="s">

(五) audeo音频

audeo

音乐播放器

1. 通过附加属性来更好的控制音频的播放

   • 示例:
     autoplay:自动播放
     controls:是否显示默认播放控件
     loop：循环播放
     循环次数：loop=2 循环两次
     无限循环：loop 或 loop="-1"

<audio src="resouse/11.mp3" autoplay controls loop></audio>

---

2. 浏览器兼容性

<!--声音格式的浏览器兼容性问题-->
<!--不同的浏览器支持不同格式的音频播放-->
<!--多浏览器支持方法，如下：-->
<audio controls autoplay>
    <source src="***.mp3" />
    <source src="***.ogg" />
    <source src="***.wav" />
</audio>

(六) video视频

video

视频播放器

1. 通过附加属性来更好的控制视频的播放

   • 示例:
     autoplay:自动播放
     controls:是否显示默认播放控件

<video src="mp4.mp4" controls autoplay></video>

---

2. 浏览器兼容性

<!--视频支持格式：ogg  mp4  webM-->
<!--浏览器兼容问题-->
<video controls>
    <resourc src="mp4.mp4" />
    <resourc src="mp4.ogg" />
    <resourc src="mp4.webM" />
</video>