首页 > 其他分享> > HTML与CSS(浅学一下)-----2：

HTML与CSS(浅学一下)-----2：

2022-08-07 22:04:12 作者：互联网

HTML与CSS(浅学一下)：

常用的标签：

iframe标签：

iframe标签它可以在一个html页面上打开一个小窗口,去加载一个单独的页面.

<body>
    请点击想要跳转的页面：
    
    <ul>
      <li><a href="javaWeb001-hello.html" target="test页面">   页面一  </a></li>
      <li><a href="javaWeb002-font.html" target="test页面">    页面二   </a></li>
      <li><a href="JavaWeb003-标签显现.html" target="test页面">  页面三 </a></li>
    </ul>

    
    <br/>
    <iframe src="javaWeb001-hello.html" width="500" height="400" name="test页面"/>
    <br/>

    
</body>

标签:

iframe:在一个html页面上打开一个小窗口,去加载一个单独的页面.

ul :无序列表

li :列表项

a :超链接标签

上面代码中超链接与iframe标签结合实现页内小窗口跳转新页面的功能.

功能实现要求:

①:iframe 标签设置一个name 属性值.

②:a标签的target属性填写iframe的name属性值.

表单标签:

表单就是html页面中,用来收集用户信息的所有元素集合.

将收集到的这些信息发送给服务器.

    <form>
      用户名称：<input type="text" value="QQ 账户名称"/><br/>
      用户密码：<input type="password"value="账户密码"><br/>
      确认密码：<input type="password"value="确认密码"><br/>
      性别：<input type="radio" name="sex" checked="checked">男
           <input type="radio" name="sex">女<br/>
      兴趣爱好：
      <input type="checkbox"/>Java<br/>
      <input type="checkbox"/>C++<br/>
      <input type="checkbox"/>Unity<br/>
      <input type="checkbox"/>PS<br/>
      国籍：
      <select>
         <option selected="selected">大中国</option>
         <option>美丽国</option>
         <option>小日本</option>
       </select>
      <br/><br/><br/><br/>
      自我评价： <br/>
      <textarea rows="10" cols="20">默认值</textarea>
      <br/>

      <input type="reset"  value="重置选项"/>
      <input type="submit" value="提交信息"/>
      <input type="button" value="一个按钮"/>
      <input type="file"/>
      <input type="hidden"/>

    </form>

标签:

form 代表表单

input type = text 是文件输入框

input type = password 是密码输入框

input type = radio 是单选框

input type = checkbox 是复选框

input type = reset 是重置按钮

input type = submit 是提交按钮

input type = button 是按钮

input type = file 是文件上传

input type = hidden 是隐藏域用户看不见,仅供开发人员使用.

select:下拉列表框

option:下拉列表框的选项

textarea: 表示多行文本输入框(rows:显示行的高度.cols:每行的宽度).

基本属性:

value:可以设置text,password的默认值,还可以修改按钮上的文本.

checked="checked" :单选框,复选框设置默认值.

selected="selected" :下拉列表框设置默认值.

注意:

只用表单标签制作出来的页面不够美观,页面常用表格标签来进行美化.

<form>
      <table align="center" border="1">
        <tr>
          <td colspan="2" align="center">注册</td>

        </tr>
        <tr>
          <td>用户名称：</td>
          <td><input type="text" value="QQ 账户名称"/></td>
        </tr>

        <tr>
          <td>用户密码：</td>
          <td><input type="password"value="账户密码"></td>
        </tr>

        <tr>
          <td>确认密码：</td>
          <td><input type="password"value="确认密码"></td>
        </tr>

        <tr>
          <td>性别：</td>
          <td>
            <input type="radio" name="sex" checked="checked">男
            <input type="radio" name="sex">女<br/>
          </td>
        </tr>

        <tr>
          <td>兴趣爱好：</td>
          <td>
            <input type="checkbox"/>Java
            <input type="checkbox"/>C++
            <input type="checkbox"/>Unity
            <input type="checkbox"/>PS
          </td>
        </tr>

        <tr>
          <td>国籍：</td>
          <td>
            <select>
              <option selected="selected">大中国</option>
              <option>美丽国</option>
              <option>小日本</option>
            </select>
          </td>
        </tr>

        <tr>
          <td>自我评价：</td>
          <td><textarea rows="10" cols="20">默认值</textarea></td>
        </tr>

        <tr>

          <td>
            <input type="reset"  value="重置选项"/>
            <input type="submit" value="提交信息"/>
          </td>
          <td>
            <input type="button" value="一个按钮"/>
            <input type="file"/>
            <input type="hidden"/>
          </td>

        </tr>

      </table>

</form>

标签：标签,HTML,-----,iframe,input,默认值,type,CSS,页面
来源： https://www.cnblogs.com/LJY-YSWZ/p/16559963.html