html总结

最新推荐文章于 2024-03-18 12:09:27 发布

北斗七星亮晶晶

最新推荐文章于 2024-03-18 12:09:27 发布

阅读量152

点赞数

本文链接：https://blog.csdn.net/weixin_43524186/article/details/119063561

版权

HTML总结

在这里插入图片描述

音频标签

在这里插入图片描述

a标签

在这里插入图片描述

列表标签

在这里插入图片描述

表格标签

在这里插入图片描述

表单标签

input标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form>
    <!-- 1、文本框：text（type属性的默认值） -->
    昵称：<input type="text" placeholder="请输入您的昵称"><br><br>

    <!-- 2、密码框：password -->
    密码：<input type="password" placeholder="请输入您的密码"><br><br>

    <!-- 3、单选框：radio -->
    性别：<input type="radio" name="sex" checked>男
          <input type="radio" name="sex">女<br><br>
    
    <!-- 4、多选框：checkbox -->
    爱好：<input type="checkbox" checked>敲代码
          <input type="checkbox" checked>熬夜
          <input type="checkbox">掉头发<br><br>

    <!-- 5、文件选择：file -->
    <input type="file" multiple><br><br>

    <!-- 按钮 -->
    <!-- 1、submit：提交按钮 -->
    <input type="submit">

    <!-- 2、reset：重置按钮 -->
    <input type="reset">

    <!-- 3、button：普通按钮 -->
    <input type="button" value="普通按钮">

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

button标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form>
    昵称：<input type="text" placeholder="请输入您的昵称"><br><br>
    <!-- 提交按钮 -->
    <button type="submit">button提交按钮</button>
    <!-- 重置按钮 -->
    <button type="reset">button重置按钮</button>
    <!-- 普通按钮 -->
    <button type="button">button普通按钮</button>
  </form>
</body>
</html>

select标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 下拉菜单 -->
  <!-- select：表示下拉菜单的整体 -->
  <!-- option：表示下拉菜单的每一项 -->
  所在城市：<select>
            <option>上海</option>
            <option selected>北京</option>
            <option>广州</option>
            <option>深圳</option>
          </select>
</body>
</html>

textarea文本域标签

在这里插入图片描述

<body>
  <!-- 文本域标签 -->
  <textarea cols="60" rows="30"></textarea>
</body>

label标签

在这里插入图片描述

<body>
  爱好：

  <!-- 第一种 -->
  <input type="checkbox" id="one"><label for="one">敲代码</label>

  <!-- 第二种 -->
  <label>
    <input type="checkbox">熬夜
  </label>
</body>