html 基础部分（总结很够详细，来看看喽）

最新推荐文章于 2024-06-24 20:32:25 发布
最新推荐文章于 2024-06-24 20:32:25 发布
阅读量800 收藏 4
点赞数 5
分类专栏： html5 前端 文章标签： 经验分享 程序人生
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_49290616/article/details/114942288
版权

2021年03月17日，我开始学习html了，一门新的语言，趁热打铁把学到的东西记录下来，供准备学习 html 的各位观看，也供自己查漏补缺。

目录

简介

HTML是什么

HTML，全称：Hyper Text Markup Language（超文本标记语言），简单来说，网页就是用HTML语言制作的。

HTML基础文档介绍

快捷键调出以下基本文档：
Shift+1+回车 或者 输入h，之后选择html：5 ，点回车

<!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">
    <!--                    页面当前宽度等于我设备的宽度  按照1.0的倍率缩放 -->
    <!-- viewport 让你的网页适配你的设备，例：相同页面使用手机和电脑切换 -->
    <title>Document</title>
</head>
<body>
    
</body>
</html>

html的元数据

HTML5 头文件

我所用的html版本也就是当下基本大家都在用的HTML的5.0版本，简称H5，H5的头文件也就是开头声明的第一行：
<!DOCTYPE html>
document type html
文件 类型 html
头文件中各个元素含义说明：

 <!-- 
   charset=UTF-8
   表示文档中的字符的编码
   description
   description也被使用在搜索引擎显示的结果页中
   keywords
   提供关键词给搜索引擎，根据不同的搜索词，查找到相关的网站,现在不推荐使用
   viewport
   定义了网页在不同端的显示效果
  <link rel="icon" href="/files/system/2017/02-21/22263393a2c9409464.jpg?version=8.6.13" type="image/x-icon" />
  网页图标的定义
  <link href="/static-dist/app/css/bootstrap.css?version=8.6.13" rel="stylesheet" />
  引入的css文件
  <script src="/static-dist/libs/html5shiv.js?version=8.6.13"></script>
  引入的js文件
  lang="en"
  为文档设置主语言
 -->
  <script>
    alert('弹出框')
  </script>

html

<html></html>

是一个根元素，包含了整个完整的页面

head

<head></head>

是一个容器，通常里面包含的是关键字，页面描述，css文件和js的引入，字符集的声明，图标的引入等等

body

<body></body>

主题，包含了文字，图片，音频，视频等等

meta（了解）

 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

meta 标签是 HTML 语言头部的一个辅助性标签，我们可以定义页面编码语言、搜索引擎优化、自动刷新并指向新的页面、控制页面缓冲、响应式视窗等等

元素分类

块状元素

在页面中以块的形式出现，相对于的内容也会出现在一行中（独行显示），其后面的内容会被挤到下一行去，对宽高进行单独设置。例如，div，h1，p标签都是块状元素。

  <div style="height: 300px;">这是一个div的盒子标签</div>
  <p>这是一个p标签</p>

内联元素

在页面中不会导致文本换行，通常用于在一堆文字中间出现超链接，或强调元素等，无法对宽高进行单独设置，元素内容有多高，标签就有多宽高。例如，span标签。

  <span>这是span标签1</span>
  <span>这是span标签2</span>

内联块状元素

在页面一行中可以显示多个，并且可以对他们宽高进行单独的设置。例如，img，input标签。

  <img src="" alt="">
  <input type="text">

常用元素介绍

h1 （标题标签）

  <h1>1级标题</h1>
  <h2>2级标题</h2>
  <h3>3级标题</h3>
  <h4>4级标题</h4>
  <h5>5级标题</h5>
  <h6>6级标题</h6>
  <!-- h1 ~ h6 标题标签 建议最好只对每个页面使用一次
  <h1>  这是顶级标题，所有其他标题位于层次结构中的下方。
  请确保在层次结构中以正确的顺序使用标题。
  不要使用<h3>来表示副标题，后面跟<h2>来表示副副标题 这是没有意义的，会导致奇怪的结果。
  在可用的六个标题级别中，应该只在每页使用不超过三个，建议将内容分散在多个页面上。

p （大段文字）

  <p>通常用于表示大段的文字通常用于表示大段的文字通常用于表示大段的文字通常用于表示大段的文字通常用于表示大段的文字</p>
  <!-- 通常用于表示大段的文字 -->

span （小段文本）

<span>这是一个小段文本的span标签</span>

div （一个盒子）

可以理解为一个盒子

	<div class="" id=""> 
        这是一段放在div里的文本
    </div>

    <!-- <div class="" id="">  -开始标签
        属性名="属性值" 空格 属性名="属性值"
        这是一段放在div里的文本  -内容
    </div>                     -结束标签
-->

i，em（倾斜）

文本字体倾斜

  <i>用斜体表达的意义：外国文字，分类名称，技术术语</i> 
  <em>也是倾斜的文字</em>

b，strong （加粗）

文本字体加粗

  <b>用粗体表达的意义：关键字，产品名称，引导句</b>
  <strong>也是加粗</strong>

br （换行标签）

  <br />

u（下划线）

给文本加上下划线

<u>用来传达传统上用下划线表达的意义：专有名词，拼写错误</u>

hr （分割线）

在网页中显示一条分割线

<hr>
  <!-- hr  -分割线 -->

s（删除线）

在文本上加一道横线，告知用户此信息曾经有过但已过时或无法再次使用

<s>删除线</s>

abbr （缩略语）

默认带一个title，鼠标放置上方时会有气泡窗显示文本
自带下划线，下划线以连续点的形式呈现

<abbr title="这是缩略语的全部内容">略</abbr>

address

<address>这里面的内容通常表示的是联系方式</address>

sub，sup （下标记，上标记）

  <sub>下标</sub>
  <sup>上标</sup>

pre 、code（存放代码）

保留代码的换行，缩进，将代码完整的呈现出来，通常，pre会和code连用，一目了然地让你知道这里放的是一段代码

<pre>
    <code>
     public static void bubble(int[] array) {
		for(int i=0;i<array.length-1;i++) {
			for(int j=0;j<array.length-1-i;j++) {
				if(array[j]>array[j+1]) {
					swap(array, j, j+1);
				}
			}
		}
	}
    </code>
  </pre>

var （声明变量）

  <!-- 用于标记具体的变量名 -->
  <var>name</var>

kbd （键盘按键打印）

  <!-- 用于标记输入电脑键盘的输入 -->
  <kbd>Ctrl</kbd>

samp （cmd代码打印）

<!-- samp 用于标记计算机程序的输出 例如cmd-->
  <pre>
    <samp>
      PING mozilla.org (63.245.215.20): 56 data bytes
      64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms
    </samp>
  </pre>

button （按钮标签）

<button>按钮</button>

svg（矢量图形）

可以理解为，用代码画画

<svg t="1615948018132" class="icon" viewBox="0 0 1071 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
    p-id="5221" width="128" height="128">
    <path
      d="M814.518427 465.473078a254.362469 254.362469 0 0 0-165.4636 60.972523 325.807371 325.807371 0 1 0-19.315723 370.954963A255.991506 255.991506 0 1 0 814.518427 465.473078z"
      fill="#FF3B61" p-id="5222"></path>
  </svg>

超链接

a （超链接标签）

点击链接和图片来跳转到别的页面

  <!-- <a href=""></a> -->
  <!-- 超链接阔以链接文件(包括了html文件,文本文件)图像,声音,视频,下载 -->
  <a href="https://www.baidu.com/">超链接的文字</a>
  <!-- a链接阔以看作是一个容器,同样又可以让一张图片具备跳转链接的能力 -->
  <a href="https://www.baidu.com/">
    <img width="100px" height="200px" src="./imgs/01be6c5e8aa690a801216518c2ae5d.jpg@2o.jpg" alt="">
  </a>

可以发邮件

  <a href="./index.html">前往index.html</a>
  <!-- a链接阔以用来发邮件 href="mailto:发给那个人的邮件地址"-->
  <a href="mailto:123456789@qq.com?subject='邮箱的主题'">发起邮件</a>

可以设置下载按钮，当在网页里点击下载按钮时，将从href里访问所需图片的下载链接以完成下载
小贴士：尽量不要在页面上传.svg格式的文件，也要阻止别人在页面上传.svg格式的文件，容易被漏洞侵蚀。

  <a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=zh-CN"
    download="Firefox Setup 86.0.1.exe">
    <button>下载按钮</button>
  </a>

a链接锚点（快速导航）：在页面中点击前往box后，网页链接将会跳转，链接后会增加#box文字，并在跳转的页面中，将“#”后的带有名称box的链接（这是box的a链接）显示在页面左上的位置

  <a href="#box">前往box</a>

  <!-- 这是a链接锚点的效果
  #锚点名 要与同一页面中的name的名字保持一致
  -->
  <a href="" name="box">这是box的a链接</a>
  <div class="box1">

  </div>

多媒体

引入图片

background-image

<head>
  <style>
    .box1 {
      background-image: url('./imgs/01be6c5e8aa690a801216518c2ae5d.jpg@2o.jpg');
      /* 如果图片是为了作为背景的装饰效果,通常用background-image去控制 */
      height: 200px;
      /*在background-image中，由于图片是依附于文字(放了一堆文本)的背景，
      我们可以通过height(文字的高度)来控制图片显示的多少*/
    }
  </style>
</head>

<body>

  <div class="box1">
    放了一堆文本
  </div>
  
</body>

img

<body>
  <!-- 多媒体 图片 声音 视频 -->
  <img src="./imgs/01be6c5e8aa690a801216518c2ae5d.jpg@.jpg" alt="图片在加载失败情况显示的文字">
  <img src="./imgs/01be6c5e8aa690a801216518c2ae5d.jpg@2o.jpg" height="150px" width="150px">
  <!-- <img src="./imgs/01be6c5e8aa690a801216518c2ae5d.jpg@2o.jpg"> -->
  <!-- 
    src 表示引用图片的地址
    alt 由于某种原因无法加载图像，普通浏览器也会在页面上显示alt 属性中的备用文本
    height 和 width 共同决定了图片的宽高,推荐使用px(像素)作为单位
  -->
</body>

引入视频

<video width="800px" height="600px" src="./static/18-01 视频.mp4" controls autoplay loop muted
    poster="./imgs/01be6c5e8aa690a801216518c2ae5d.jpg@2o.jpg"
    preload="auto"
    >
    您的当前浏览器不支持这个标签,推荐视频其他的浏览器,<a href="">点此观看</a>
    <!-- 优化代码：当用户使用浏览器无法正常观看视频时，提供一个其他链接供用户跳转观看 -->
  </video>
  <!-- controls
    显示视频的控制图标
    autoplay
    控制视频是否自动播放
    loop
    控制视频是否循环播放
    muted
    默认视频播放时关闭声音
    poster
    这个属性指向了一个图像的URL，这个图像会在视频播放前显示。通常用于粗略的预览或者广告。
    preload
      这个属性被用来缓冲较大的文件，有3个值可选：
      "none" ：不缓冲
      "auto" ：页面加载后缓存媒体文件
      "metadata" ：仅缓冲文件的元数据
  -->

引入音频

<!-- 音频文件 -->
  <audio controls>
    <source src="./static/音乐.mp3" type="audio/mp3" />
  </audio>
  <!--显示音频的控制图标
    autoplay
    控制音频是否自动播放
    loop
    控制音频是否循环播放
    muted
    默认音频播放时关闭声音
    preload
      这个属性被用来缓冲较大的文件，有3个值可选：
      "none" ：不缓冲
      "auto" ：页面加载后缓存媒体文件
      "metadata" ：仅缓冲文件的元数据 
    audio标签具备video标签的大部分属性,但不具备宽，高,和poster -->

标签属性及相关

打开新网页的方法

 <a href="http://www.edu-learn4fun.com/" target="_self" title="这是一个title">这是a链接</a>
  <!-- target - _self 默认值 表示在当前网页打开
              - _blank 表示在新窗口打开网页 -->

布尔属性 控制

disabled是否存在，控制用户是否能在文本框中输入文字

  <input type="text" disabled>
  <!-- disabled 存在，无法输入
       disabled 不存在，可以输入 -->

全局常用属性

class

给类起个名，起多个名字也可以，用空格隔开，起的多个名字都能用来调用这个类

  <style>
    .box1 {
      color: red;
    }

    .box2 {
      font-size: 32px;
    }
  </style>
<!-- 
    class
    以空格分隔的元素类列表。类允许CSS和JavaScript通过类选择器
    或类似方法的函数来选择和访问特定元素Document.getElementsByClassName()。
    -->
  <div class="box1 box2">这是一个有class的div标签</div>
  <div class="box1">这是一个有class的div标签</div>

id（唯一标识符）

不能重名，类似于每个人的身份证

<!-- 
    id
    定义一个唯一标识符（ID），该标识符在整个文档中必须是唯一的。
    其目的是在链接（使用片段标识符），脚本或样式（使用CSS）时标识元素。
    -->
  <div id="boxId">这是一个有id的div</div>

style

更改字体风格：颜色，大小

 <!-- 
    style
    包含要应用于元素的CSS样式声明。
    -->
  <div style="color: red;font-size: 32px;">这是一个有style的div标签</div>

title

鼠标悬停在网页的文本上时，会有提示字段出现

  <!-- 
    title
    包含代表与其所属元素相关的咨询信息的文本。此类信息通常可以（但不一定）作为工具提示显示给用户。
  -->
  <div title="只是一段提示信息">这是一个有title的div标签</div>

lang （语言）

表示这篇文档使用的是什么语言。

<html lang="zh">

表示这个div中用的是什么语言

<div lang="en">这是一个有lang="en"的标签</div>

常用：zh、en
zh代表中文，en代表英文

转义字符

在html中，有些符号难以直接打印出来，这就用到了转义字符

<div>
    &lt;div&gt;
    <div>这是一段&nbsp;&nbsp;&nbsp;&nbsp;文本</div>
    <div>&quot; &quot; &quot; &quot; 双引号</div>
    <div>&apos;&apos;&apos;&apos;&apos; 单引号</div>
    <div>&amp;&amp;&amp;&amp;&amp; 和符号</div>
    
    <!-- 
      转义字符 &英文字母串;
      &lt; -- 表示的是<
      &gt; -- 表示的是>
      &nbsp;  --表示空格 
      &quot;  --表示双引号
      &apos;  --表示单引号
      &amp;  --表示&
      &reg;  --表示商标
     -->

    <!-- -->
    <!-- 表示一个注释 快捷键：ctrl+/ -->
  </div>

列表

无序列表

<!-- 无序列表 -->
  <!-- ul 表示无序列表的框框
       li 表示当前列表的每一项
       Unordered list
       list item
  -->

  <ul>
    <li class="box">每一项1</li>
    <li class="box">每一项2</li>
    <li class="box">每一项3</li>
  </ul>

有序列表

<!-- 有序列表 -->
  <!-- ol 表示有序列表的框框
       li 表示当前列表的每一项
       Ordered list
  -->
  <ol type="A" start="6">
    <li>有序列表的每一项,具有顺序意义</li>
    <li>有序列表的每一项,具有顺序意义</li>
    <li>有序列表的每一项,具有顺序意义</li>
  </ol>
  <!-- 
    • type设置编号的类型：
       a 表示小写英文字母编号
       A 表示大写英文字母编号
       i 表示小写罗马数字编号
       I 表示大写罗马数字编号
       1 表示数字编号（默认） 
    reversed此布尔值属性指定列表中的条目是否是倒序排列的，
            即编号是否应从高到低反向标注。
    start一个整数值属性，指定了列表编号的起始值。写的阿拉伯数字
    
    -->

自定义列表

 <!-- 自定义列表 -->
  <!-- 这种列表的目的是标记一组项目及其相关描述 -->
  <dl>
    <dt>自定义列表的标题1</dt>
    <dd>自定义列表的内容1</dd>
    <dt>自定义列表的标题2</dt>
    <dd>自定义列表的内容2</dd>
  </dl>

table（表格）

<body>
  <table style="background-color:rosybrown;" border="1" width="600px" align="center" cellpadding="10" cellspacing="0">
    <caption>表格的标题</caption>
    <tbody>
      <thead>
        <tr>
          <th>1</th>
          <th>2</th>
          <th>3</th>
        </tr>
      </thead>
    <!-- 表格通过table元素表示
    tr表示表格中的行,有几个tr 表格就有几行
    td 是tr里面的元素,表示表格的单元格
    th 是tr里面的元素,表示表格单元格的格头 默认在单元格中加粗居中
    tbody 可以有一个或多个,表示表的主体
    caption 是表格的标题,可有可不有 有且只有一个
    thead 表示表格的行头 可写可不写
    -->
    <tr>
      <th rowspan="3">合并行</th>
      <th>2</th>
      <th>3</th>
    </tr>
    <tr>
      <!-- <td>1</td> -->
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <!-- <td>1</td> -->
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <!-- th/td的常用属性
       colspan 合并列
       rowspan 合并行
      -->
      <th colspan="3">合并列</th>
      <!-- <th>2</th>
      <th>3</th> -->
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <th rowspan="2" colspan="2">合并行</th>
      <!-- <th>2</th> -->
      <th>3</th>
    </tr>
    <tr>
      <!-- <td >1</td> -->
      <!-- <td>2</td> -->
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    </tbody>
  </table>
  <!-- table常用属性
  • align
    此属性指示表必须如何在包含文档中对齐。它可能具有以下值：
      left：表格显示在文档的左侧；
      center：表格显示在文档中心；
      right：表格显示在文档的右侧。
  • border
    此整数属性以像素为单位定义表格周围边框的大小
  • cellpadding
    此属性定义是否显示单元格内容与其边框之间的空间。即单元格的内边距
  • cellspacing
    此属性以百分比值或像素定义两个单元格之间的间距大小。即单元格的外边距
  • width
    此属性定义表格的宽度。
    style里面的样式属性
    background-color:rosybrown;
    控制了元素的背景颜色
  -->
</body>

表单

简介

表单用于收集不同类型的用户输入数据，将用户输入数据提交给web服务器，表单使用http协议提交数据

表单类型

单行文本框，多行文本框 选择框，按钮，复选框，单选框等。

表单格式

  <form action="" method="GET" novalidate>
    <input type="url">
    <input type="submit" value="提交">
  </form>
  <!-- 
  action 定义了在提交表单时，应该把手机的数据发送到哪个URL或模块去处理
  method 定义了发送数据的http方法-- get 和 post
  novalidate 输入框默认需要验证，当添加novalidate时则不需要验证
 -->

enctype属性

enctype 属性 是在method的属性为post时，决定了表单的提交给服务器的MIME类型是什么

  <form action="" enctype="application/x-www-form-urlencoded"></form>
  <form action="" enctype="multipart/form-data"></form>
  <form action="" enctype="text/plain"></form>
  <!--  
    application/x-www-form-urlencoded 未指定时的属性默认值
    multipart/form-data 如果表单中包含文件上传的功能（type="file"）必须使用此值
    text/plain 常用于测试
  -->

type属性

单行文本框 text

<input type="text">

密码框 password

<input type="password" name="" id="">

隐藏 hidden

不显示的空间，但值仍然会提交到服务器中去

<input value="6666" type="hidden" name="UserID">

分组操作 radio

通过name属性值对radio进行分组操作，允许在拥有相同name值的选项中选其中的一个

    <input type="radio" name="man" id="">男
    <input type="radio" name="woman" id="">女
    |
    <input checked type="radio" value="1" name="sex" id="">男
    <input type="radio" value="2" name="sex" id="">女

运行结果：
前者两个选项都可以点，是有问题的

后者加入了value，并将两个选项的name都设为sex，将选项变为只能选择其中一项，逻辑合理
在这里插入图片描述

复选框 checkbox

	<input checked type="checkbox" value="1" name="hobby" id="">html
    <input checked type="checkbox" value="2" name="hobby" id="">JAVA
    <input type="checkbox" value="3" name="hobby" id="">python
    <input type="checkbox" value="4" name="hobby" id="">PHP
    <!-- 复选框 可设置选中还是未选中 -->
    <!-- checked 用于设置单选框或多选框是否被选中 -->

在这里插入图片描述

颜色选择器 color

颜色选择器：<input type="color">

在这里插入图片描述

时间选择器 date和month

	日期选择器（年月日）：<input type="date">
    月选择器：<input type="month" name="" id="">

在这里插入图片描述
在这里插入图片描述

邮箱 email

邮箱输入：<input type="email" name="" id="">

文件上传 file

文件上传：<input type="file">

在这里插入图片描述

数字控件 number

数字控件：<input type="number" name="" id="">

搜索框 search

提交按钮 submit

提交已经填写的信息

重置按钮 reset

重置所有选项为空

普通按钮 button

只是个按钮

搜索框：<input type="search">
    <input type="url" name="" id="">
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    <input type="button" value="普通按钮">

运行结果：
在这里插入图片描述

fieldset 分割表单

fieldset 用于分割表单，legend定了表单的小标题

  <form action="">
    <fieldset>
    <legend>这是一个表单的标题</legend>
    姓名：<input type="text">
    密码框：<input type="password" name="" id="">
    </fieldset>
  </form>

运行结果：

在这里插入图片描述

关联效果 label

label标签的for属性与input标签的id属性可以产生相关联的效果
（在点击name字母时，光标会自动聚焦到name的输入框）

<form action="">
    <label for="username">姓名：</label>
    <input id="username" type="text">
    <br>
    <label>密码：</label>
    <input type="password">
  </form>

在这里插入图片描述

多行文本框

<form action="">
    多行文本框
    <!-- cols:文本域的宽度，多少列 默认为20列
         rows：文本域的高度，多少行
         style="resize: none;" 阻止多行文本域自由缩放
         textarea中，只接受纯文本的内容，任何html的内容都会被显示成纯文本内容
     -->
    <textarea style="resize: none;" name="textareaValue" id="" cols="30" rows="10"></textarea>
  </form>

运行结果：
在这里插入图片描述

下拉框

下拉单选框

选项框的宽度由最长的那个选项决定

下拉单选框
    <select name="selectValue1" id="">
      <option value="1">这个选项1很长很长</option>
      <option value="2">选项2</option>
      <option value="3">选项3</option>
      <option value="4">选项4</option>
    </select>

在这里插入图片描述

下拉多选框

下拉多选择框
    <!-- multiple 是否多选 -->
    <select multiple name="selectValue2" id="">
      <option value="1">选项1</option>
      <option value="2">选项2</option>
      <option value="3">选项3</option>
      <option value="4">选项4</option>
    </select>

运行结果：
按住Ctrl，鼠标依次点击
在这里插入图片描述

自动补全输入框

    <!-- multiple 是否多选 -->
    自动补全输入框
    <select multiple name="selectValue2" id="">
      <option value="1">啊啊啊啊啊啊选项1</option>
      <option value="2">选项2</option>
      <option value="3">选项3</option>
      <option value="4">选项4</option>
    </select>
    <!-- input中list的值要和datalist的id保持一致，
    一旦数据列表与表单小部件相关联，就阔以实现模糊搜索的功能
    -->

运行结果：
在这里插入图片描述

知识点整合实例代码

将刚才的知识运用整合一下，做个实例页面：

<!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>
        <form action="http://www.baidu.com" method="GET">
            <p>
                <label for="name">用户名：</label>
                <input type="text" id="name" name="username">
            </p>
            <p>
                <label for="">密 码：</label>
                <input type="password" name="password">
            </p>
            <p>
                <label for="">再次输入密码：</label>
                <input type="password" name="password">
            </p>
            <p>
                <label for="">密码保护问题：</label>
                <select name="problem">
                    <option value="0">你母亲的名字是?</option>
                    <option value="1">你父亲的名字是?</option>
                    <option value="2">你最喜欢的人是?</option>
                    <option value="3">你毕业的学校是?</option>
                </select>
            </p>
            <p>
                <label for="">密码保护问题答案：</label>
                <input type="text" name="password protection">
            </p>
            <p>
                <label for="">性别：</label>
                <input type="radio" name="sex" value="0">男
                <input type="radio" name="sex" value="1">女
            </p>
            <p>
                你的生日是(年月日)：<input type="date">
            </p>
            <p>
                输入邮箱：<input type="email" name="" id="">
            </p>
            <p>
                喜欢的颜色：<input type="color">
            </p>
            <p>
                你的幸运数字是：<input type="number" name="" id="">
            </p>
            <p>
                <label for="">爱好：</label>
                <input type="checkbox" name="hobby" value="sing">唱歌
                <input type="checkbox" name="hobby" value="dance">跳舞
                <input type="checkbox" name="hobby" value="game">玩游戏
                <input type="checkbox" name="hobby" value="study">学习
                <table>其他爱好：</table>
                <textarea cols="30" rows="10" name="love"></textarea>
            </p>
            <p>
                <table>真实姓名：</table>
                <input type="text" name="name">
            </p>
            <p>
                <table>本人照片：</table>
                <input type="file" name="pic">
            </p>
            <p>
                <input type="submit" value="提交">
                <input type="reset" value="重置">
            </p>
        </form>
</body>
</html>

运行结果：
在这里插入图片描述

帆哥的小弟
关注
  • 5
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
【ORB_SLAM3源码解读】IMU基础介绍、IMU姿态、速度、位置解算以及误差方程、坐标系
小秋 AI SLAM 入门实战教程
04-29 8674
ORB_SLAM3优势 IMU(Inertial Measurement Unit),惯性测量单元 • 典型 6 轴 IMU 以较高频率(≥ 100Hz)返回被测量物体的角速度与加速度 • 受自身温度、零偏、振动等因素干扰,积分得到的平移和旋转容易漂移 六自由度 IMU 本身由一个陀螺仪和一个加速度计组成,分别测量自身的角速度和加速度。 IMU 适合计算短时间、快速的运动; 快速响应,不受成像质量影响,角速度普遍比较准确,可估计绝对尺度 存在零偏,低精度 IMU 积分位姿发散,高精度价格昂贵 可利用视觉定位
python基础
haonanxu的博客
04-08 596
点击这里，边看视频讲解，边学习以下内容有的函数执行一个流程就完了，并不需要返回什么信息，比如print函数，就是打印一下参数字符串，就完成了它的任务。但是有的函数，需要返回一个结果给调用者。比如 计算两个数字平方和的函数，必须要返回一个结果，告诉调用代码，平方和的计算结果。函数要返回结果，就必须要使用return关键字，后面加上返回的结果对象print(ret)语句等号右边的 就是函数调用的表达式。
JavaScript基础总结
zzzhhhy的博客
05-20 2445
一. 计算机基础 bit < byte < kb < GB < TB<..... 位(bit)： 1bit 可以保存一个 0 或者 1 （最小的存储单位） 字节(Byte)：1B = 8b 千字节(KB)：1KB = 1024B 兆字节(MB)：1MB = 1024KB 吉字节(GB): 1GB = 1024MB 太字节(TB): 1TB = 1024GB 二. 初识 JavaScript 1.初识 JavaScript 1.1 JavaScri......
全网最全的 Go 书单来喽
EDDYCJY的博客
08-03 1721
我是一只可爱的土拨鼠，专注于分享 Go 职场、招聘和求职，解 Gopher 之忧！欢迎关注我。欢迎大家加入Go招聘交流群，来这里找志同道合的小伙伴！跟土拨鼠们一起交流学习。答应Go群友们的...
【详细总结】你所需要掌握的Java后端知识点
Slayer_Zhao的博客
05-08 5498
目录 Spring Spring框架的七大模块 Bean定义5种作用域 spring ioc初始化流程? BeanDefinition加载流程? DI依赖注入流程? （实例化，处理Bean之间的依赖关系） 依赖注入怎么处理bean之间的依赖关系? Bean的生命周期? Spring的IOC注入方式 怎么检测是否存在循环依赖? Spring如解决Bean循环依赖问题? Spr...........................
如何总结和整理学术文献？
热门推荐
GarfieldEr007的专栏
06-03 1万+
nerfing ，爱科学爱文学 收录于 知乎圆桌 、 编辑推荐 •袁霖 等 1995 人赞同 第一次在知乎答题。。。 我认为整理文献的主要目的就是：能够在任何条件下，快速找到所需信息。任何好用的软件，都不如大批量多批次的文献阅读。 我的思路是：轻整理，重搜索。轻整理，是指不对文献分类，或者只是对文献简单分类。重搜索，是指利用不同的搜索工具，快速定位到我需要的文献。我
面试总结
Altynai0514的专栏
10-12 6638
面试总结 2013年8月6日： 问题1：JPBM的常用接口有哪些？ ProcessEngine工作流的流程引擎对象 1、RepositoryService 流程资源服务的接口。 作用： 提供对流程定义的部署、查询、删除等操作。 2、ExecutionService 流程执行服务的接口。 作用： 提供启动流程实例、“执行”推进，设置流程实例变量等操作。
排序和查找算法总结
weixin_42198873的博客
03-09 532
原文链接https://www.cnblogs.com/wujingqiao/articles/8961890.html#0 阅读目录 0. 干货总结 1. 冒泡排序 2. 快速排序 3. 直接选择排序 4. 堆排序 5. 直接插入排序 6. 希尔排序 7. 归并排序 8. 计数排序 9. 桶排序 10. 基数...
Qt基础知识大全
qq_33682763的博客
06-19 1万+
本文章记录着我学Qt几个月来的笔记，其中包括着控件的使用，样式表，绘图事件， 其他事件，Gstreamer等！还有很多东西，如果有问题的地方，希望大家可以评论告诉我，或者私信也可以，大家一起进步，谢谢啦！转载请标明连接！_ 笔记多来源与书籍以及广大互联网大神，以及自己理解的知识点。 qt文件最好没有中文路径 Qt库（qt-4.8.6）: qt-opensource-windows-x86-mi...
前端基础学习总结（看大佬文章）
12-02
自己看文章资料的总结
编译原理总结，看这一篇就够了！.txt
05-16
编译原理总结，看这一篇就够了！编译原理总结，看这一篇就够了！编译原理总结，看这一篇就够了！编译原理总结，看这一篇就够了！编译原理总结，看这一篇就够了！编译原理总结，看这一篇就够了！编译原理总结，看这一...
mysql基础知识总结,零基础必看
02-05
基础知识总结
python基础语法总结（超详细）.pdf
06-12
python基础语法总结（超详细） ⽬录 1、环境搭建 2、标识符 3、python保留字 4、注释和空⾏ 5、⾏与缩进 6、多⾏语句 7、声明变量 8、标准数据类型 8.1 Number（数字） 8.2 字符串(String) 8.3 List（列表） 8.4 ...
2013 【超高仿】迅雷看看播放器 完整代码
11-04
2013 【超高仿】迅雷看看播放器 完整代码 http://www.cnblogs.com/Alberl/p/3407726.html
面试经验分享 | 渗透测试工程师(实习岗)
2301_80127209的博客
06-24 557
Webshell是黑客经常使用的一种**恶意脚本，常见的webshell编写语言为asp、jsp和php。
[职场] 线上面试的准备工作 #知识分享#经验分享#媒体
最新发布
2401_82854246的博客
06-24 127
参加线上面试一定要找一个安静的环境。有一次线上面试，一位同学找了食堂的一个角落进行。面试交流过程中，打扫卫生的保洁员来了，他们拖动桌椅发出的一阵阵刺耳声，让面试官根本无法听清求职者的表述。虽然该同学之后更换了场地，但面试的整体流畅性被打破，最后只得草草收场。在这里，向各位分享面试前做好预案不慌张几点准备。现在许多面试是通过线上形式进行的。对于求职者来说，要做好两手准备。在这里，重点与大家分享线上面试的预案。这是线上面试顺利进行的基本保障。在面试时推荐开启摄像头，并使用耳机，保证手机或电脑的电量和流畅度。
程序人生——Java使用关于性能和效率的建议
Arya的博客，专注后端领域
03-18 2177
程序人生——Java使用关于性能和效率的建议
excel_check.py
06-24
excel_check.py
零基础推荐看什么视频来学习Linux
06-05
1. Linux 基础知识：了解 Linux 的基本概念、架构、文件系统等，可以通过观看 Linux 基础知识视频课程来学习。 2. Linux 命令行操作：掌握 Linux 中常用的命令行操作，如文件操作、进程管理、网络配置等，可以通过...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值