HTML基础学习2

关于form表单的介绍

form表单中，所有信息如果上传到服务器的话，form将这些信息打包上传给服务器。
1、input标签：type中有很多的类型例如:text、password、tel等等
  1.1 、文本格式

<span style="display:inline-block; width:90px;"><label for="userName">登录名：</label></span>
<input id="userName" type="text" name="userName">
<label>(可包含a-z、0-9和下划线)</label>

  1.2、密码格式

<span style="display:inline-block; width:90px;"><label for="password">密码：</label></span>
<input id="password" type="text" name="password">
<label>(至少包含6个字符)</label>

  1.3、电话号码格式、

// required 表示必须填写；placeholder表示提示信息；value表示值
<input  type="tel" placeholder="请输入手机号码" required name="tel" id="tel" value="13888888888">

  1.4、数字格式

//readonly 表示只读格式
<input readonly size="5" type="number" name="checkCode" required id="checkCode" value="9527"><input type="button" value="请输入验证码">

  1.5、单选格式

//设置name相等，然后只能选择一个值
 <input name="gender" value="1" type="radio">男
 <input name="gender" value="0" type="radio">女
 <input checked name="gender" value="2" type="radio">保密

 &nbsp/1.6、复选框

//设置相同的名称，可以选择多个值，每一个选项的值不同，当提交到后台时以数组的形式。
<input checked type="checkbox" name="favorite" value="1">阅读
<input checked type="checkbox" name="favorite" value="2">听音乐
<input type="checkbox" name="favorite" value="3">打游戏
<input type="checkbox" name="favorite" value="4" id="">打球
<input type="checkbox" name="favorite" value="5" id="">跑步

  1.7、文件以及图片

<span style="display:inline-block; width:90px;"><label>头像：</label></span>
<input type="file" name="filename">

   1.8、按钮

<input type="button" name="mybtn" value="按钮">

  1.9、提交

<div>
<input type="submit" value="注册">
</div>

  1.10、重置

<input type="reset" value="重填">

2、select:下拉框，可以通过option来实现下拉框中显示信息

 <select size="1" name="favcity">
      <option value="">请选择</option>
      <option value="nan">南昌</option>
      <option value="shang">上海</option>
      <option value="bei">北京</option>
 </select>

3、textarea、多行文本框，可以在文本框内填写信息，

//<textarea></textarea>不能够分开，不然会出现空格
<textarea rows="16" cols="30" name="agreement">欢迎进入条款协议....</textarea>

关于视频播放

1、video、视频播放标签

// autoplay表示自动播放；muted表示静音；controls表示显示播放器，声音等
<video autoplay muted controls src="lol.mp4"></video>

2、audio、音频播放

<audio autoplay controls src="lol.mp4"></audio>

关于小框架的介绍

1、iframe、小框架

//src表示显示在框架中的路径，现在的框架中显示的是main.html中的信息
<iframe src="main.html"width="100%" height="230"></iframe>

2、a链接到某个小框架中

<a target="d" href="https://weibo.com">微博</a>   <!-- target可以设置再哪个iframe/小框架中打开,其中的d表示iframe的名称-->
<!--frameborder=0取消边框-->
<iframe name="a" frameborder=0 width="100%" height="350" src="https://www.baidu.com"></iframe>
<iframe name="b" frameborder=0 width="100%" height="350" src="https://www.jd.com"></iframe>
<iframe name="c" width="100%" height="350" src="https://www.taobao.com"></iframe>
<iframe name="d" width="100%" height="350" src="study.html"></iframe>

链接到父框架，最高框架使用target="_parent"/target="_top"

// 覆盖parent框架
<a target="_parent" href="index.html">加载index页面,覆盖main页面</a> 
//覆盖顶框架
<a target="_top" href="index.html">跳转到index页面,覆盖top页面</a>

锚点以及连接

1、设置锚点，先设置一个id，通过a来链接到锚点处；

<div id="md">
  <a href="#down">直达底部</a>
</div>
<div>
  <a href="#md" name="down">返回顶部</a>
</div>

2、链接到锚点的特定位置

锚链接的特定位置的代码、
<a href="#md" name="down">返回顶部</a>

此处为链接的锚点、
<a href="锚链接.html#down">链接到锚点</a>

表单table

// colspan表示行合并
<table border="1" width=400;>
        <caption>某一年的某个部门的工资</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>部门名称</th>
                <th>姓名</th>
                <th>薪资</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>开发部</td>
                <td>张三</td>
                <td>100000</td>
            </tr>
            <tr>
                <td>2</td>
                <td>研发部</td>
                <td>李四</td>
                <td>150000</td>
            </tr>
            <tr>
                <td>3</td>
                <td>销售部</td>
                <td>王五</td>
                <td>80000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td align="right" colspan="4">总的金额为：330000元</td>
            </tr>
        </tfoot>
    </table>