html学习笔记5——媒体元素、内联框架与表单(＜input＞|＜select＞|＜option＞)

媒体元素

插入视频

<video src="../resourcse/video/墨韵东方.mp4" controls autoplay></video>

插入音频

<audio src="../resourcse/audio/东方萃梦想.wav" controls autoplay></audio>

controls：显示控件
​autoplay：自动播放
​muted：静音
​loop：循环播放
poster：缩略图

iframe内联框架

<iframe src="//baidu.com" scrolling=""></iframe>

scrolling规定进度条是否滚动，有yes|no|auto三种状态

表单标签

<form action="//baidu.com" method="" target="">
    
</form>

action=服务器文件名，默认提交给当前的文件
method=post|get，grt会在浏览器地址显示参数，post则能够提供更多参数内容。默认get，但通常用post。
target=窗口名称，表示提交后的页面在哪个窗口打开。默认当前窗口。

< input>标签

<input type="" name="" value="">

#define TP text或password

name是输入域的名字
value是输入域的默认值
size设置表单初始宽度，以字符(type=TP)或像素为单位
maxlength设置最大输入字符数（type=TP）
checked设置默认选中（type=radio|checkbox）

type表示这个输入域的类型：
​ text——文本
​ password——字符显示为*的文本
​ hidden——隐藏的文本
​ submit——提交按钮
​ reset——重置按钮
​ button——一般按钮
​ radio——单选框
​ checkbox——多选框

< select>及< option>标签

<select name="">
	<option value="" selected></option>
</select>

select 可以创建一个选择列表

option 元素定义列表项目
​ value 规定了表单被提交时发送到服务器的值，默认设置为 标签中的内容
​ selected——默认标签

代码演示

<form action="//baidu.com" method="post">
    <h1>欢迎注册</h1><b>已有</b>账号？
    <a href="//passport.baidu.com" target="_blank" style="text-decoration:none">登陆</a>
    <p>邮&nbsp&nbsp&nbsp箱：<input type="text" name="email"></p>
    <p>用户名：<input type="text" name="userName" maxlength="10"></p>
    <p>手机号：<input type="text" name="phoneNumber" maxlength="11"></p>
    <p>密&nbsp&nbsp&nbsp码：<input type="password" name="password"></p>
    <p>
        验证码：<input type="text" name="CAPTCHA_t" style="width:70px;height:16px" maxlength="8">
        <button type="button" name="CAPTCHA_b">获取验证码</button>
    </p>
    性别
    <input type="radio" name="sex" checked>男
    <input type="radio" name="sex">女
    <p>
        年龄区间&nbsp&nbsp
        <select name="age">
            <option>18岁以下</option>
            <option>18——30</option>
            <option>30——45</option>
            <option>45——60</option>
            <option>60岁以上</option>
        </select>
    </p>
    <p>
        爱好&nbsp
        <input type="checkbox" name="hobby" value="sport">运动
        <input type="checkbox" name="hobby" value="music">音乐
        <input type="checkbox" name="hobby" value="literature">文学
        <input type="checkbox" name="hobby" value="game">游戏
    </p>
    <p>
        <input type="checkbox">您已阅读并同意
        <a href="//baidu.com" target="_blank">用户协议</a>
    </p>
    <p>
        <input type="submit" value="注册">
        <input type="reset" value="清空">
    </p>
</form>

注解

< input>和< button>的区别

​ button和input type="button"作用相同，但可操控性更强。
​ 因为input是自闭合标签，而button是开始&闭合标签。button的厉害在于它可以包含内容，它的值并不是写在value属性里，而是包含在标签中，这样你便获得了对内容的主导权。
比如加粗文字

<button>
<b>打南边来了个喇嘛</b>
</button>

或者插入图片

<button>
<img src="https://s.yam.com/WTnUT">手里提拉着五斤鳎目
</button>

有点类似于< input type=“image”>，但是比它强大多了。