8.Html笔记（三）

一、 表单标签

• <form>    定义供用户输入的表单。
• <input>    定义输入域。
• <label>    定义了 <input> 元素的标签，一般为输入标题。
• <textarea>    定义文本域 (一个多行的输入控件)。
• <fieldset>    定义了一组相关的表单元素，并使用外框包含起来。
• <legend>    定义了 <fieldset> 元素的标题。
• <select>    定义了下拉选项列表。
• <optgroup>    定义选项组。
• <option>    定义下拉列表中的选项。
• <button>    定义一个点击按钮。
• <datalist>    指定一个预先定义的输入控件选项列表。
• <keygen>    定义了表单的密钥对生成器字段。
• <output>    定义一个计算结果。

案例演示：

1、form、input、label演示

<form action="" method="get">
    <p>
        <label for="username">账户：</label>
        <input type="text" name="username" id="username">
    </p>
    <p>
        <label for="password">密码：</label>
        <input type="password" name="password" id="password">
    </p>
    <p><input type="submit"></p>
</form>

2、textarea演示

<form action="" method="post">
    <textarea name="mycontext" cols="30" rows="10"></textarea>
    <input type="submit">
</form>

3、fieldset、legend、select、optgroup、option演示

<form action="" method="post">
    <fieldset>
        <legend>请选择你的爱好：</legend>

        <select name="myhobby" id="myhobby">
            <optgroup label="运动">
                <option value="篮球">篮球</option>
                <option value="足球">足球</option>
            </optgroup>
            <optgroup label="电子">
                <option value="玩手机">看电影</option>
                <option value="看电视">看电视</option>
            </optgroup>
        </select>
    </fieldset>
</form>

4、datalist演示

<form action="" method="post">
    <input list="browsers">
    <datalist id="browsers">
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
    </datalist>
</form>

5、单选框演示

<form action="" method="post">
    <input type="radio" name="sex" id="male" value="male" checked>
    <label for="male">Male</label>

    <input type="radio" name="sex" id="female" value="female">
    <label for="female">female</label>
</form>

6、复选框演示

<form action="" method="post">
    <input type="checkbox" name="vehicle" id="bike" value="bike">
    <label for="bike">I have a bike</label>

    <input type="checkbox" name="vehicle" id="car" value="car">
    <label for="car">I have a car</label>
</form>

    二、框架标签

<iframe src="https://www.baidu.com" frameborder="0" width="500px" height="500px"></iframe>

   三、音频标签

<audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    您的浏览器不支持 Audio 标签。
</audio>

  四、视频标签

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 Video 标签。
</video>

  五、其它标签

水平线：<hr>
换行：<br>
<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<abbr>缩写词或者首字母缩略词</abbr>
<address>联系信息</address>
<bdo>文字方向</bdo>
<blockquote>从另一个源引用的部分</blockquote>
<cite>工作的名称</cite>
<del>删除的文本</del>
<ins>插入的文本</ins>
<sub>下标文本</sub>
<sup>上标文本</sup>