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”>,但是比它强大多了。

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页