欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Html一些常用的标签知识

程序员文章站 2022-04-19 22:34:12
...
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!--提交给后端的表单 action url 地址; method: 数据提交/获取方式, post, get; name: 表单名称-->
    <form action="donet.aspx" method="post" name="userInfo">
      <label>
        用户名:<input type="text" value="请输入用户名..." name="username" />
      </label>
      <br />
      <label for="pwd2"> 密码: </label>
      <!--name 无效 id 有效-->
      <input type="password" name="pwd1" id="pwd2" />
      <input type="submit" name="btn2" />
      <input type="reset" name="btn3" />
    </form>
    <br />
    <input type="radio" name="gender" checked="checked" /><input type="radio" name="gender" /><br />
    <!--checked box-->
    爱好:
    <input type="checkbox" name="hobby" checked="checked" />看书
    <input type="checkbox" name="hobby" />听音乐
    <input type="checkbox" name="hobby" />看电影
    <input type="checkbox" name="hobby" />打球
    <!--btn-->
    <input type="button" name="btn1" value="获取验证码" />

    <!--插入图片的按钮-->
    <input type="image" src="btn.png" />
    <!--文件域-->
    <input type="file" />
    <br />
    留言板:
    <textarea>
        文本内容
    </textarea>
    <br />
    <br />
    下拉列表:
    <select>
      <option>--请选择省份--</option>
      <option>北京</option>
      <option>天津</option>
      <option>辽宁</option>
      <option>河北</option>
      <option>山东</option>
    </select>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h3>无序列表ul-li</h3>
    <ul>
      <li>列表1</li>
      <li>列表2</li>
      <li>列表3</li>
    </ul>
    <h3>有序列表ol-li</h3>
    <ol>
      <li>列表1</li>
      <li>列表2</li>
      <li>列表3</li>
    </ol>
    <h3>自定义列表dl-dt-dd</h3>
    <dl>
      <dt>名词1</dt>
      <dd>名词解释1</dd>
      <dd>名词解释2</dd>
      <dt>名词2</dt>
      <dd>名词解释1</dd>
      <dd>名词解释2</dd>
      <dt>名词3</dt>
      <dd>名词解释1</dd>
      <dd>名词解释2</dd>
    </dl>
  </body>
</html>

相关标签: html 前端