HTML基本元素案例笔记回顾

最新推荐文章于 2022-04-29 17:44:39 发布
最新推荐文章于 2022-04-29 17:44:39 发布
阅读量472 收藏
点赞数
分类专栏： HTML 文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47000934/article/details/109123499
版权

HTM基本元素

1.lang和charset属性以及h、p、strong元素

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
      <h1>haha</h1>
      <h2>haha</h2>
      <h4>haha</h4>
      <h5>hahaa</h5>
      <h6>haha</h6>
	  <p>
	    lalllalala
	  </p>
	  <p>
	    lalalalalalalalla<strong>hello</strong>lalallalala
	  </p>
  </body>
  </html>

在这里插入图片描述

2.code、br、hr元素

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    span {
      font-family: monospace;
    }
    div{
      height: 5px;
      background-color: red;
    }
  </style>
</head>
<body>
  <!-- 1.code 显示等宽距离-->
  <p><code>hello</code></p>
  <p><span>hello</span></p>
  <!-- 2.br 换行-->
  <!-- 真实开发中用<div>代替<br> -->
  <p>
    lalalla<br>
    hahahah<br>
    hihihih<br>
  </p>
  <!-- 3.hr 分割线 -->
  <hr color="red">
  <div class="box"></div>
</body>
</html>

在这里插入图片描述

3.span元素、img元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <style>
    .text{
      color: red;
    }
    .new-price{
      color: red;
      font-size: 30px;
    }
    .old-price{
      color: grey;
      text-decoration: line-through;
    }
  </style>
</head>
<body>
    我是一段文本
    <span class="text">我也是一段文本</span>

    <!-- 价格显示 -->
    <!-- class起名一般用“-”链接 -->
    <p>
      <span class="new-price">￥69</span>
      <span class="old-price">￥99</span>
    </p>
      <!-- src:source
        *远程图片地址
        *本地图片路径
            *绝对路径：C：/User/***/***/***（本机具体地址）
            *相对地址：
              规则：
                  。当前路径（目录）
                  。。上一层路径（目录）
		  -->
		  <!-- 1.图片格式
		      png：静态图片，支持透明
		      jpg：静态图片，不支持透明
		      git：动态图片、静态图片，支持透明
		      webp：传输快
		  -->
		
		  <!--2. alt属性 ：当图片失效（加载失败）时显示的文本-->
		  <img src="" alt="加载失败">
		
		  <!-- 3.width属性（不常用） -->
</body>
</html>

span主要作用是对普通文本进行归类

在这里插入图片描述

4.a元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <!-- 1.基本使用:herf:超链接 -->
  <a href="http://www.baidu.com">百度一下</a>
  <a href="http;//www.taobao.com">淘宝一下</a>
  <a href="http://www.jd.com">京东一下</a>
  
  <br>
  <!-- 2.target
        _self(默认值)：自己
        _blank:空白

        和iframe一起使用时才有效果
        _patent:
        _top:
        具体的name
  -->
  <p>target属性的演练(target="_blank")</p>
  <a href="http://www.baidu.com" target="_blank">百度一下</a>

  <p>target属性的演练(target="_parent")</p>
  <a href="http://www.baidu.com" target="_parent">百度一下</a>

  <p>target属性的演练(target="_top")</p>
  <a href="http://www.baidu.com" target="_top">百度一下</a>


</body>
</html>

在这里插入图片描述

5.base元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <base href="http://www.baidu.com" target="_blank">
</head>
<body>
  
  <a href="">百度一下</a>
  <a href="/img/bd_logo1.png">百度logo</a>
  <a href="/s﹖wd=vue ">搜索abc</a>

  <a href="htttp://www.taobao.com">淘宝一下</a>
</body>
</html>

在这里插入图片描述

6.a元素的锚点链接+目标伪类

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 目标伪类->：target */
    :target{
      color: red;
    }
  </style>
</head>
<body>
  
  <a href="#title1">标题1</a>
  <a href="#title2">标题2</a>
  <a href="#title3">标题3</a>

  <h2 id="title1">标题1</h2>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>

  <h2 id="title2">标题2</h2>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>

  <h2 id="title3">标题3</h2>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>  
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  
</body>
</html>

在这里插入图片描述

7.a元素的伪链接

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
  <!-- 1.p普通链接 -->
  <a href="http://www.baidu.com">百度一下</a>

  <!-- 2.链接：herf值是# -->
  <a>aaaa</a>
  <a href="">aaaa</a>
  <a href="#">aaaa</a>

  <!-- 3.伪链接（了解） -->
  <a href="javascript:alert('内容')">弹出弹窗</a>
  <a href="" onclick="alert('hello html')">弹出弹窗</a>
</body>
</html>

在这里插入图片描述

8.a元素和img元素结合

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <!-- a链接：不一定是打开页面 -->
  <a href="http://www.baidu.com">百度一下
    <img src="../**" alt="加载失败">
  </a>

  <a href="http：//www.**/**.zip">下载项目</a>
  <a href="mailto:12345@qq.com">发送邮件</a>
</body>
</html>

9.列表

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h2>热门电影</h2>
  <ol>
    <li>海王</li>
    <li>海贼王</li>
    <li>药王</li>
    <li>上海堡垒</li>
    <li>诛仙</li>
  </ol>

  <h2>热门电影</h2>
  <ul>
    <li>海王</li>
    <li>海贼王</li>
    <li>药王</li>
    <li>上海堡垒</li>
    <li>诛仙</li>
  </ul>
  <dl>
    <dt>西瓜汁</dt>
    <dd>红褐色</dd>

    <dt>咖啡</dt>
    <dd>黑色</dd>
    
    <dt>牛奶</dt>
    <dd>白色</dd>
  </dl>
</body>
</html>

在这里插入图片描述

10.列表属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    ul {
      /* list-style-type: none;
      padding: 0;
      margin: 0; */

      /* 不常用 */
      /* list-style-image: url(""); */
      /* margin-top: 8px; */

      /* list-style-position */
      /* list算不算进去，不常用 */
      /* list-style-position: outside; */
      /* list-style-position: inside; */

      /* list-style:是 list-style-type、list-style-image、list-style-position的缩写属性*/
      /* 前俩个存在一个就行 */
      /* list-style: outside url(""); */

      /* 常规操作 */
      list-style: none;
      padding: 0;
      margin: 0;
    }

    ul li span {
      background-color: #ff0000;
      color: white;
      padding: 0 5px;
    }
  </style>
</head>
<body>
  <h2>热门电影</h2>
  <ul>
    <li><span>1</span>海王</li>
    <li><span>2</span>海贼王</li>
    <li><span>3</span>药王</li>
    <li><span>4</span>上海堡垒</li>
    <li><span>5</span>诛仙</li>
  </ul>
</body>
</html>

在这里插入图片描述

11.表格

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <!-- 给table和td加边框 -->
  <table border="1" 
        cellpadding="10" 
        cellspacing="5" 
        width="800" 
        heigh="400"
        align="center">
    <tr valign="top" align="center">
      <td valign="center" width="200">内容1</td>
      <td>内容2</td>
      <td>内容3</td>
      <td>内容4</td>
      <td>内容5</td>
    </tr>
    <tr valign="bottom">
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
      <td>内容4</td>
      <td>内容5</td>
    </tr>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
      <td>内容4</td>
      <td>内容5</td>
    </tr>
  </table>
</body>
</html>

在这里插入图片描述

12.细线表格

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    h2 {
      text-align: center;
    }
    table {
      /* 1.边框的宽度2.实线/虚线3.边框颜色 */
      border: 1px solid #666;
      /* 重点：将边框合并 */
      border-collapse: collapse;
      /* table居中显示 */
      margin: 20px auto;
    }
    td {
      border: 1px solid #666;
      padding: 20px;
    } 

    /* 第一行加粗 */
    table tr:first-child{
      font-weight: 700;
    }
    table tr:nth-child(1){
      font-weight: 700;
    }

  </style>
</head>
<body>
  <!-- table>(tr>td{单元格$}*5)*3 -->
  <h2>标题</h2>
  <table>
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
      <td>单元格3</td>
      <td>单元格4</td>
      <td>单元格5</td>
    </tr>
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
      <td>单元格3</td>
      <td>单元格4</td>
      <td>单元格5</td>
    </tr>
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
      <td>单元格3</td>
      <td>单元格4</td>
      <td>单元格5</td>
    </tr>
  </table>
</body>
</html>

在这里插入图片描述

13.表格其他元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    h2 {
      text-align: center;
    }
    table {
      /* 1.边框的宽度2.实线/虚线3.边框颜色 */
      border: 1px solid #666;
      /* 重点：将边框合并 */
      border-collapse: collapse;
      /* table居中显示 */
      margin: 20px auto;
      /* table靠右显示 */
      /* margin: 20px 0 0 auto; */
      
    }

    /* th默认加粗 */
    td,th {
      border: 1px solid #666;
      padding: 20px;
      text-align: center;
    }
    
    caption {
      font-weight: 700;
      font-size: 25;

      /* 增加底部外边距 */
      margin-bottom: 20px;
    }

  </style>
</head>
<body>
  <!-- table>(tr>td{单元格$}*5)*3 -->
  <!-- <h2>标题</h2> -->
  <table>
    <caption>标题</caption>
    <thead>
      <tr>
        <th>单元格1</th>
        <th>单元格2</th>
        <th>单元格3</th>
        <th>单元格4</th>
        <th>单元格5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
        <td>单元格4</td>
        <td>单元格5</td>
      </tr>
      <footer>
        <tr>
          <td>页脚1</td>
          <td>页脚2</td>
          <td>页脚3</td>
          <td>页脚4</td>
          <td>页脚5</td>
        </tr>
      </footer>
      
    </tbody>
    
  </table>
</body>
</html>

在这里插入图片描述

14.表格合并使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    table {
      border-collapse: collpase;
      margin: 0 auto;
    }

    td {
      border: 10px solid skyblue;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>

  <!-- column:列 -->
  <!-- row:行 -->

  <table>
    <caption>标题</caption>
    <thead>
      <tr>
        <th colspan="2">单元格1</th>
        <!-- <th>单元格2</th> -->
        <th>单元格3</th>
        <th>单元格4</th>
        <th>单元格5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td rowspan="2">单元格3</td>
        <td rowspan="2" colspan="2">单元格4</td>
        <!-- <td>单元格5</td> -->
      </tr>
      <footer>
        <tr>
          <td>页脚1</td>
          <td>页脚2</td>
          <!-- <td>页脚3</td> -->
          <!-- <td>页脚4</td> -->
          <!-- <td>页脚5</td> -->
        </tr>
      </footer>
      
    </tbody>
    

</body>
</html>

在这里插入图片描述

15.课程表

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    table {
      border-collapse: collapse;
      margin: 0 auto;
    }

    td {
      border: 1px solid skyblue;
      /* 1.上下值  2.左右值 */
      padding: 6px 25px;

      text-align: center;
    }

    [colspan],[rowspan],.week {
      font-weight: 700;
    }
    /* .week -> tr:nth-child(2) */
    /* .week -> tr:nth-of-stype(2) */

  </style>
</head>
<body>
  <table>
    <tr>
      <td colspan="6">课程表</td>
      <!-- <td>音乐</td>
      <td>音乐</td>
      <td>音乐</td>
      <td>音乐</td>
      <td>音乐</td> -->
    </tr>
    <tr class="week">
      <td></td>
      <td>星期一</td>
      <td>星期二</td>
      <td>星期三</td>
      <td>星期四</td>
      <td>星期五</td>
    </tr>
    <tr>
      <td rowspan="4">上午</td>
      <td>音乐</td>
      <td>音乐</td>
      <td>音乐</td>
      <td>音乐</td>
      <td>音乐</td>
    </tr>
    <tr>
      <!-- <td>音乐</td> -->
      <td>音乐</td>
      <td>音乐</td>
      <td>音乐</td>
      <td>音乐</td>
      <td>音乐</td>
    </tr>
    <tr>
      <!-- <td>音乐</td> -->
      <td>音乐</td>
      <td>音乐</td>
      <td>音乐</td>
      <td>音乐</td>
      <td>音乐</td>
    </tr>
    <tr>
      <!-- <td>音乐</td> -->
      <td>音乐</td>
      <td>音乐</td>
      <td>音乐</td>
      <td>音乐</td>
      <td>音乐</td>
    </tr>
    <tr>
      <td rowspan="4">下午</td>
      <td>音乐</td>
      <td>音乐</td>
      <td>音乐</td>
      <td>音乐</td>
      <td>音乐</td>
    </tr>
    <tr>
      <!-- <td>音乐</td> -->
      <td>音乐</td>
      <td>音乐</td>
      <td>音乐</td>
      <td>音乐</td>
      <td>音乐</td>
    </tr>
    <tr>
      <!-- <td>音乐</td> -->
      <td>音乐</td>
      <td>音乐</td>
      <td>音乐</td>
      <td>音乐</td>
      <td>音乐</td>
    </tr>
    <tr>
      <!-- <td>音乐</td> -->
      <td>音乐</td>
      <td>音乐</td>
      <td>音乐</td>
      <td>音乐</td>
      <td>音乐</td>
    </tr>
    <tr>
      <td rowspan="2">晚自习</td>
      <td>音乐</td>
      <td>音乐</td>
      <td>音乐</td>
      <td>音乐</td>
      <td>音乐</td>
    </tr>
    <tr>
      <!-- <td>音乐</td> -->
      <td>音乐</td>
      <td>音乐</td>
      <td>音乐</td>
      <td>音乐</td>
      <td>音乐</td>
    </tr>
  </table>
</body>
</html>

在这里插入图片描述

16.表格单元格间隔距离

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    table {
      /* border-collapse: collapse; */
      /* 1.单元格间水平间隔 2.单元格间垂直间距 */
      border-spacing: 10px 50px;
    }
    table,td {
      border: 1px solid skyblue;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
      <td>单元格3</td>
      <td>单元格4</td>
      <td>单元格5</td>
    </tr>
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
      <td>单元格3</td>
      <td>单元格4</td>
      <td>单元格5</td>
    </tr>
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
      <td>单元格3</td>
      <td>单元格4</td>
      <td>单元格5</td>
    </tr>
  </table>
</body>
</html>

在这里插入图片描述

17.表单

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    fieldset {
      width: 400px;
    }
  </style>
</head>
<body>
  <form action="">
  <fieldset>
    <legend>必填信息</legend>
    <!-- 1.手机输入框 -->
    <div>
      <span>手机:</span>
      <!-- maxlength：允许输入的最大字数
           placeholder：占位文字
           readonly:只读值
           disabled：禁用
           checked：默认选中（radio和checkbox）
           autofocus：当页面加载时，自动聚焦
      -->
      <input type="text" 
             maxlength="11" 
             placeholder="请输入你的收集号码"
             readonly
             autofocus
             name="手机">
    </div>
    <!-- 2.密码输入 -->
    <div>
      <span>密码:</span>
      <input type="password" 
             name="pwd">
    </div>
    <!-- 3.验证码输入框 -->
    <div>
      <span>验证码:</span>
      <input type="text">
      <!-- 1 按钮实现1 -->
      <button>获取验证码</button>
      <!-- 2 按钮实现2(推荐)-->
      <input type="button" value="获取验证码">
    </div>
  </fieldset>

  <fieldset>
    <legend>选填信息</legend>

    <!-- 4.照片选择 -->
    <div>
      <span>照片:</span>
      <input type="file">
    </div>
    <!-- 5.性别选择 -->
    <div>
      <span>性别:</span>
      <!-- name作用 -->
      <!-- 1.name一样实现该互斥 -->
      <!-- 2.表单提交(有name才提交) -->
      男<input type="radio" name="sex">
      女<input type="radio" name="sex">
    </div>
    <!-- 6.爱好选择 -->
    <div>
      <span>爱好:</span>
      唱歌<input type="checkbox" name="sex">
      跳舞<input type="checkbox" name="sex">
      rap<input type="checkbox" name="sex">
      篮球<input type="checkbox" name="sex">
    </div>
    <!-- 7.学历选择 -->
    <div>
      <span>学历:</span>
      <select name="" id="" multiple size="2">
        <option value="0">小学</option>
        <option value="1" selected>初中</option>
        <option value="2">高中</option>
      </select>
    </div>
    <!-- 8.简介 -->
    <div>
      <span>简介:</span>
      <textarea name="" id="" cols="30" rows="10"></textarea>
    </div>
  </fieldset>

  <!-- 9.重置按钮 -->
  <!-- 前提1.type必须是reset类型（value值可以不写，默认文字是"重置"） -->
  <!-- 前提2.所有的内容都必须在同一个表单中（form） -->
  <!-- <input type="button" value="重置"> -->
  <input type="reset">

  <!-- 10.注册 -->

</form>
</body>
</html>

在这里插入图片描述

18.表单按钮的实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <!-- action="协议头：//主机地址/路径" -->
  <form action="http://www.baidu.com">
    <input type="text" name="username">
    <!-- baidu.com/？username=输入值 -->
    <!-- 1.方式一：input实现 -->
    <div>
    <!-- 普通按钮 -->
    <input type="button" value="重置">
    <!-- 重置按钮 -->
    <input type="reset">
    <!-- 表单提交 -->
    <input type="submit">
    </div>

    <!-- 2.方式二：button实现 -->
    <div>
      <!-- 普通按钮 -->
      <!-- 注意：type默认值是submit -->
      <button type="button">按钮</button>
      <!-- 重置按钮 -->
      <button type="reset">重置</button>
      <!-- 表单提交 -->
      <button>提交</button>
    </div>
  </form>
  <form action="http://www.baidu.com/s">
    <!-- 模拟百度 -->
    <!-- name必须叫wd -->
    <input type="text"
           placeholder="请输入搜索"
           name="wd">
    <input type="submit" value="百度一下">
  </form>
</body>
</html>

在这里插入图片描述

19.input和lable

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* CSS reset */
    body, ul {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }
    /* none / 水平：horizontal / 垂直：vertical / both(默认)*/
    textarea {
      resize: none;
    }
    /* 取消聚焦时默认的outline */
    input,textarea {
      outline: none;
    }


    input:focus,textarea:focus {
      border-color: #4791ff;
      border-style: solid;
    }
  </style>
</head>
<body>
  <div>
    <span>手机:</span>
    <input type="text">
  </div>

  <div>
    <!-- label:点击label文字可聚焦到input（绑定for和id） -->
    <label for="phone">手机:</label>
    <input type="text" id="phone">
  </div>

  <div>
    <label for="password">密码:</label>
    <input type="password" id="passwprd">
  </div>

  <div>
    <span>性别:</span>
    <label for="male">男</label>
    <input type="radio" name="sex" id="male">
    <label for="female">女</label>
    <input type="radio" name="sex" id="female">
  </div>

  <div>
    <span>爱好:</span>
    <label for="basketball">篮球</label>
    <input type="checkbox" name="boby" id="basketball">
    <label for="rap">rap</label>
    <input type="checkbox" name="boby" id="rap">
  </div>
</body>
</html>

在这里插入图片描述

20.表单提交演练

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* CSS reset */
    body, ul {
      margin: 0;
      padding: 0;
    }
	fieldset {
      width: 400px;
    }
    ul {
      list-style: none;
    }
    /* none / 水平：horizontal / 垂直：vertical / both(默认)*/
    textarea {
      resize: none;
    }
    /* 取消聚焦时默认的outline */
    input,textarea {
      outline: none;
    }


    input:focus,textarea:focus {
      border-color: #4791ff;
      border-style: solid;
    }
  </style>
</head>
<body>
  <form action="http//www.baidu.com" method="POST" enctype="multipart/form-data">
  <fieldset>
    <legend>必填信息</legend>
    <!-- 1.手机输入框 -->
    <div>
      <label for="phone">手机:</label>
      <!-- maxlength：允许输入的最大字数
           placeholder：占位文字
           readonly:只读值
           disabled：禁用
           checked：默认选中（radio和checkbox）
           autofocus：当页面加载时，自动聚焦
      -->
      <input type="text" 
             maxlength="11" 
             placeholder="请输入你的收集号码"
             readonly
             autofocus
             name="phone"
             id="phone">
    </div>
    <!-- 2.密码输入 -->
    <div>
      <label for="pwd">密码:</label>
      <input type="password" 
             name="password"
             id="pwd">
    </div>
    <!-- 3.验证码输入框 -->
    <div>
      <label for="validate">验证码:</label>
      <input type="text" id="validate" name="code">
      <!-- 1 按钮实现1 -->
      <!-- <button>获取验证码</button> -->
      <!-- 2 按钮实现2(推荐)-->
      <input type="button" value="获取验证码">
    </div>
  </fieldset>

  <fieldset>
    <legend>选填信息</legend>

    <!-- 4.照片选择 -->
    <div>
      <label for="photo">照片:</label>
      <input type="file" id="photo" name="photo">
    </div>
    <!-- 5.性别选择 -->
    <div>
      <span>性别:</span>
      <!-- name作用 -->
      <!-- 1.name一样实现该互斥 -->
      <!-- 2.表单提交(有name才提交) -->
      <label for="male">男</label>
      <input type="radio" name="sex" id="male" value="male">
      <label for="female">女</label>
      <input type="radio" name="sex" id="female" value="female">
    </div>
    <!-- 6.爱好选择 -->
    <div>
      <span>爱好:</span;>
      <label for="sing">唱歌</label>
      <input type="checkbox" name="hobies" id="sing" value="sing">
      <label for="dance">跳舞</label>
      <input type="checkbox" name="hobies" id="dance" value="dance">
      <label for="rap">rap</label>
      <input type="checkbox" name="hobies" id="rap" value="rap">
      <label for="basketball">篮球</label>
      <input type="checkbox" name="hobies" id="basketball" value="basketball">
    </div>
    <!-- 7.学历选择 -->
    <div>
      <span>学历:</span>
      <select name="education" id="" multiple size="2">
        <option value="0">小学</option>
        <option value="1" selected>初中</option>
        <option value="2">高中</option>
      </select>
    </div>
    <!-- 8.简介 -->
    <div>
      <label for="interduce">简介:</label>
      <textarea name="interduce" id="" cols="30" rows="10" id="interduce"></textarea>
    </div>
  </fieldset>

  <!-- 9.重置按钮 -->
  <!-- 前提1.type必须是reset类型（value值可以不写，默认文字是"重置"） -->
  <!-- 前提2.所有的内容都必须在同一个表单中（form） -->
  <!-- <input type="button" value="重置"> -->
  <input type="reset">

  <!-- 10.提交 -->
  <input type="submit">


</form>
</body>
</html>

在这里插入图片描述

Li敢敢
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【gcc】RtpTransportControllerSend学习笔记 3：gcc 算法
突围
10-07 1287
gcc
【学习笔记】| HTML、CSS
单词沙漠的博客
02-19 579
一、互联网技术概念入门 1.1CS/BS模式 互联网软件的两种模式 Client/Server 客户端/服务器模式 王者荣耀 手机QQ 手机微信 极品飞车系列 使命召唤系列 CF 1需要下载安装客户端 2软件有客户端和服务端两部分组成 3软件更新比较麻烦 所有的客户端都需要更新 4运算压力可以分摊给各个终端 服务器承担的运算压力可以大大减轻 Browser/Server 浏览器/服务器模式 ​ 各种网站 b站 尚学堂官网 京东 淘宝 1不需要下载安装客户端 只需要有一个浏览器即可 2软
html基础元素案例笔记（1）
X
03-08 162
这是代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS FlexBox test</title> <link rel="stylesheet" type="text/css" href="./css/index.css"> </head> <body> <h4>青春不常.
HTML学习笔记_基础介绍与元素
weixin_43876758的博客
05-16 263
HTML元素 HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。 HTML 元素语法 HTML 元素以开始标签起始 HTML 元素以结束标签终止 元素的内容是开始标签与结束标签之间的内容 某些 HTML 元素具有空内容（empty content） 空元素在开始标签中进行关闭（以开始标签的结束而结束） 大多数 HTML 元素可拥有属性 body元素 body 元素定义了 HTML 文档的主体。 这个元素拥有一个开始标签 <body> 以及一个结束标签
HTML笔记2基本元素
baijian10的博客
12-25 107
<a>标签：超链接 这是跳转本地的链接，并且是在当前窗口打开 <a href="./index.html">index</a> 跳转外地的链接，并且在新的浏览器窗口打开，target="_blank"时是新的窗口，target="_self"时是当前窗口，不写target就默认self <a href="https://www.bilibili.com/"...
HTML简单教程－实例006 HTML 元素
chtdsl
06-21 966
HTML简单教程－实例006 HTML 元素 HTML 文档是由HTML 元素定义的。 HTML 元素指的是从开始标签（starttag）到结束标签（endtag）的所有代码。 开始标签 元素内容    结束标签 提示：开始标签常被称为开放标签（openingtag），结束标签常称为闭合标签（closingtag）。 HTML 元素语法
01_html基础元素
qq_45131163的博客
07-10 355
HTML学习笔记1——HTML基础元素 一、网页的基本元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> 1. 文档声明 <!DOCTYPE html> 告诉浏览器当前页面是HT
传智播客-PHP基础视频_html+css+js笔记
07-24
JavaScript可以操作DOM（Document Object Model），改变HTML元素，响应用户事件，进行异步数据通信（Ajax）等。 【传智播客教学资源】 传智播客是一家知名的教育机构，提供了丰富的IT培训课程，包括PHP、HTML、CSS...
阅读笔记：201的阅读笔记回购
02-15
读者可以期待在笔记中找到关于HTML元素、属性、结构、布局等方面的知识。 【压缩包子文件的文件名称列表】：“Reading-Notes-main”可能是一个包含所有阅读笔记的主文件或目录，其中可能有更详细的子文件，分别对应...
笔记.rar-自己的笔记，留一个备份
01-04
1. **HTML**: 基本元素、结构，以及语义化标签的使用，可能还涉及到HTML5的新特性。 2. **CSS**: 选择器、布局（如盒模型、Flexbox和Grid）、响应式设计，以及CSS预处理器如Sass或Less的介绍。 3. **JavaScript**:...
html a标签 嵌套img,A标签中包含嵌套img后，高度为什么多了几个像素?
weixin_30703633的博客
06-28 1692
最近博主在给自己的一个网站做模板，做logo的时候，A标签嵌套使用IMG，发现logo图片img标签47px，A标签高度54，多出7像素。检查CSS，没有任何多余代码可能会引起这个结果。注：图中a的display设置是为了方便演示添加的在网上搜索了半天，终于找到了原因和解决方法，为什么a标签嵌套img标签多出了几个像素：a元素下有一个匿名文本，这个文本外有一个匿名行级盒子，它有的默认vertica...
HTML基础————a标签与img标签
憨憨的博客
04-29 2131
a标签与img标签练习
【C++代码】快速排序
WYuan的博客
04-01 543
// 快速排序 void quick_sort(vector<int>& a, int low, int high) { if (low >= high) { return; } auto pos = partition(a, low, high); // 取一个基准元素，将元素分为小于基准元...
html怎么在a标签中加图片,【HTML 元素】嵌入图像的实现方法
weixin_36151775的博客
05-30 8484
img元素允许我们在HTML文档里嵌入图像。要嵌入一张图像需要使用src和alt属性，代码如下：显示效果：1 在超链接里嵌入图像img元素的一个常见用法是结合a元素创建一个基于图像的超链接，代码如下：XML/HTML Code复制内容到剪贴板浏览器显示这张图片的方式没有什么不同。因此，重要的一点事要向用户提供视觉提示，表明特定图像所代表的是超链接。具体的做法可以是利用CSS，能在图像内容里表达则更...
图片链接（a标签和img标签的使用）
weixin_44011306的博客
05-20 6194
图片链接（标签和的使用）效果展示代码HTMLcss 效果展示 代码 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手机选购</title> <link href="main.css" rel="stylesheet"> </head> <body> <div id="
html知识点复习整理
qq_47000934的博客
12-19 2050
html复习1.完整的HTML结构2.h、p、strong元素3.code、br、hr元素4.字符实体（Character Entity）5.span元素6.div元素7.img元素8.常用图片格式9.a元素10.target11.iframe元素12.base元素13.锚点链接14.伪链接15.图片链接16.URL的格式17.URL常见的协议18.列表19.有序列表 – ol、li20.无序列表：ul、li21.定义列表：dl、dt、dd22.列表相关的CSS属性23.表格常用元素24.table常用元素
CSS知识点复习整理
qq_47000934的博客
12-19 1139
CSS知识点复习整理1.常用CSS属性2.CSS样式应用到元素上3.内联样式（inline style）4.文档样式表（document style sheet）5.外部样式表6.@import7.CSS选择器（selector）8.通用选择器（universal selector）9.元素选择器（type selectors）10.类选择器（class selectors）11.class注意点12.id选择器（id selectors）13.id注意点14.设置网页图标15.最常用的CSS属性16.CS
生成html5代码--笔记回顾
qq_47000934的博客
10-25 380
生成html5代码--笔记回顾1、生成html5代码2、生成子代的元素3、生成兄弟元素4、子代+兄弟结构练习5、生成多个元素6、生成上一个层级7、对元素进行分组8、生成元素的属性9、生成元素的内容10、生成结构有数字11、隐式标签12、CSS的emmet用法 1、生成html5代码 !+回车 html:5+回车 （vscode） 2、生成子代的元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT
HTML入门教程：基本元素与属性解析
HTML元素是通过标签来定义的，如 `<body>`、`<p>` 和 `<title>`。元素通常由起始标签（Opening tag）和结束标签（Closing tag）组成，如 `<p>` 和 `</p>`。虽然HTML标签不区分大小写，但推荐保持一致的小写风格以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值