HTML基础--新手入门级教程

(((φ(◎ロ◎;)φ)))牵丝戏安

已于 2024-02-13 16:28:26 修改

阅读量1k

点赞数 25

文章标签： html 前端 javascript

于 2024-02-07 14:57:56 首次发布

本文链接：https://blog.csdn.net/weixin_51341142/article/details/136054147

版权

HTML--- 超文本标记语言

HTML即超文本标记语言，是一种用于创建网页的标准标记语言。HTML不是一种编程语言，而是一种标记语言。标记语言是一套标记标签，HTML使用标签来描述网页。HTML文档包含了HTML标签及文本内容。可以使用HTML来建立自己的web站点，HTNL运行在浏览器上，由浏览器来解析。

HTML实例

注意：对于中文网页需要使用<meta charset="utf-8">声明编码，否则会出现乱码。有些浏览器（如360 浏览器）会设置GBK为默认编码，则需设置为<meta charset="gbk">。

实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
第一个实例</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落</p>
</body>
</html>

运行结果：

HTML后缀名

.html

.htm

以上两种后缀名没有区别，都可以使用！

HTML简介

实例解析：

声明为HTML5文档------><DOCTYPE html>

头部元素:

<head>
<meta  charset="utf-8">
<title>第一个实例<title>
</head>

可见页面的内容：

<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落</p>
</body>

详解

<!DOCTYPE html>	声明为HTML5文档
<html>	元素是HTML页面的根元素
<head>	包含了文档的元（Meta）数据，如<meta charset="utf-8">定义网页编码格式为utf-8
<title>	描述了文档的标题
<body>	包含了可见的页面内容
<h1>	定义一个大标题
<p>	定义一个段落

HTML标签

HTML标记标签通常被称为HTML标签（HTML tag）
HTML标签是由尖括号包围的关键词，例如<html>
HTML标签通常都是成对出现的，比如<b></b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被成为开放标签和闭合标签

<标签>内容</标签>

HTML元素

"HTML"标签和"HTML元素"通常都是描述同样的意思，但一个HTML元素包含了开始与结束标签。如下实例：

<p>这是一个段落</p>

WEB浏览器

Web浏览器（如谷歌浏览器、Safari、Firefox）是用与读取HTML文件，并将其作为网页显示。浏览器并不是直接显示HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：

只有body中的内容才会在浏览器中显示。

<！DOCTYPE>声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。

网络中有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能够正确显示网页内容。

doctype声明是不区分大小写的，以下方式均可：

<!DOCTYPE html>
<!DOCTYPE HTML>
<!DOCType html>
<!doctype HTML>

HTML编辑器推荐

VS Code：Visual Studio Code - Code Editing. Redefined
Sublime Text：http://www.sublimetext.com/
在线编辑器：HTML/CSS/JS 在线工具 | 菜鸟工具

HTML基础

HTML标题

HTML标题：是通过<h1>-<h6>标签来定义的
<h1>这是一个标题</h1>
<h2>这是第二个标题</h2>
<h3>这是第三个标题</h3>

HTML段落

HTML段落是通过标签<p>来定义的。
<p>我的第一个段落</p>
<p>我的第二个段落</p>

HTML链接

HTML链接是通过标签<a>来定义的

<a href="https://www.baidu.com">这是一个链接</a>
<br>
<a href="https://ys.mihoyo.com/">这是另一个链接</a>

HTML图像

HTML图像是通过标签<img>来定义的
<img src="/img/2.webp" width="258" height="100"/>

HTML元素

HTML元素
开始标签	元素内容	结束标签
<p>	这是一个段落	</p>
<a href="default.html">	这是一个链接	</a>
<br>	换行

开始标签常被称为起始标签，结束标签常被成为闭合标签。

HTML元素语法

HTML元素以开始标签起始
HTML元素以结束标签终止
元素内容是开始标签与结束标签之间的内容
某些HTML元素具有空内容
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数HTML元素可拥有属性

嵌套的HTML元素

大多数HTML元素可以嵌套（HTML元素可以包含其他HTML元素）

HTML文档由相互嵌套的HTML元素构成

HTML文档实例

<!DOCTYPE html>
<html>

<body>
<p>这是第一个段落。</p>
</body>

</html>

以上实例包含了三个HTML元素

HTML实例解析

<p>元素

<p>这是第一个段落。</p>

这个<p>元素定义了HTML文档中的一个段落。

这个元素拥有一个开始标签<p>及一个结束标签</p>.

元素内容是：这是一个段落。

<body>元素：

<body>
<p>这是第一个段落。</p>
</body>

<body>元素定义了HTML文档的主体。

这个元素拥有一个开始标签<body>以及一个结束标签</body>.

元素内容另一个HTML元素（p元素）。

<html>元素：

<!DOCTYPE html>
<html>

<body>
<p>这是第一个段落。</p>
</body>

</html>

<html>元素定义了整个HTML文档。

这个元素拥有一个开始标签<html>,以及一个结束标签</html>

元素内容是另一个HTML元素（body元素）。

注意：不要忘记结束标签。部分代码缺失结束标签，浏览器也会正确显示，但不可依赖此做法，忘记使用结束标签会产生不可预料的结果或错误。

HTML空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

HTML提示：使用小写标签

HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

菜鸟教程使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

HTML属性

HTML元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"

属性实例

HTML链接由<a>标签定义。链接的地址在href属性中指定：

<a href="http://www.baidu.com">这是一个链接</a>

HTML属性常用引用属性值

属性值应该始终包括在引号内。

双引号是最常用的，不过使用单引号也没问题

提示：在某些个别情况下，比如属性值本身就含有双引号，那么必须使用单引号，例如：
name='John "ShotGun" Nelson'

HTML属性参考手册

下面列表列出了适用于大多数HTML元素的属性：

属性	描述
class	为html元素定义一个或多个类名(classname)（类名从样式文件引入）
id	定义元素唯一的Id
style	规定元素的行内样式（inline style）
title	描了元素额外的信息（作为工具条使用

HTML标题

标题是通过<h1>-<h6>标签进行定义的。

<h1>定义最大的标题。<h6>定义最小的标题。
<h1>这是一个标题。</h1>
<h2>这是一个标题。</h2>
<h3>这是一个标题。</h3>
注：浏览器会自动在标题的前后添加空行。

HTML水平线

<hr>标签在HTML页面中创建水平线。

hr元素可用来分割内容。

实例

<h1>这是一个标题。</h1>
<hr>
<h2>这是一个标题。</h2>
<hr>
<h3>这是一个标题。</h3>

HTML注释

可以将注释插入HTML代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示他们。注释写法如下：

注释：开始括号之后（左边的括号）需要紧跟一个叹号！（英文的标点符号），结束括号之前（右边的括号）不需要，合理使用注释可以对未来的代码编辑工作产生帮助。

对比上图：

注释也可通过键盘ctrl+?，快捷打出。

HTML段落

HTML可以将文档分割为若干段落。

实例：

注意：浏览器会自动地在段落的前后添加空行。(</p>是块级元素)。
<p>这是一个段落</p>
<p>这是另一个段落</p>

HTML折行

实例

<p>这个<br>段落<br>演示了分行效果</p>

HTML实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>春晓</title>
</head>
<body>
    <h1>春晓</h1>
    <p>春眠不觉晓，
        处处闻啼鸟。
          夜来风雨声，
            花落知多少。
        </p>
        <p>注意：浏览器忽略了源代码中的排版
            （省略了多余的空格和换行）。</p>
</body>
</html>

HTML文本格式化

<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>
HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式, 如：粗体 or 斜体

这些HTML标签被称为格式化标签

HTML文本格式化标签

标签	描述	标签	描述
<b>	定义粗体文字	<sub>	定义下标字
<em>	定义着重文字	<suo>	定义上表字
<i>	定义斜体文字	<ins>	定义插入字
<small>	定义小号文字	<del>	定义删除字
<strong>	定义加重语气	<code>	定义计算机代码
<kbd>	定义键盘码	<samp>	定义计算机代码样本
<var>	定义变量	<abbr>	定义缩写
<pre>	定义预格式文本	<address>	定义地址
<q>	定义短的引用语	<cite>	定义引用、引证
<blockquote>	定义长的引用	<bdo>	定义文字方向
<dfn>	定义一个定义项目

HTML链接

HTML链接使用超链接与网络上的另一个文档相连。

HTML中的链接是一种用于在不同网页之间导航的元素。

链接通常用于将一个网页与另一个网页或资源相关联。

链接允许用户在浏览器网页时单机文本或图像来跳转到其他位置，从而实现网页之间的互联。
<a href="https://www.baidu.com">这是一个链接</a>
<br>
<a href="https://ys.mihoyo.com/">这是另一个链接</a>
<br><br><br>

HTML超链接（链接）

HTML使用标签 <a> 来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签 <a> 中使用了 href 属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。
如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。

HTML链接语法

以下是 HTML 中创建链接的基本语法和属性：<a> 元素：创建链接的主要HTML元素是<a>（锚）元素。<a>元素具有以下属性：

href：指定链接目标的URL，这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。
target（可选）：指定链接如何在浏览器中打开。常见的值包括 _blank（在新标签或窗口中打开链接）和 _self（在当前标签或窗口中打开链接）。
title（可选）：提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示。
rel（可选）：指定与链接目标的关系，如 nofollow、noopener 等。

链接的 HTML 代码很简单，它类似这样：

<a href="url">链接文本</a>

实例

<a href="https://www.baidu.com">访问百度</a>

上面这行代码显示为：访问百度，点击这个超链接会把用户带到百度首页。

提示：“链接文本”不必一定是文本。图片或其他HTML元素都可以成为链接。

文本链接：最常见的链接类型是文本链接，它使用<a>元素将一段文本转化为可点击的链接。例如：

<a herf="https:wwww.baidu,com">访问百度</a>

图像链接：您还可以使用图像作为链接，在这种情况下，<a>元素包围着<img>元素。例如：

<a href="https://www.example.com">
  <img src="example.jpg" alt="示例图片">
</a>

锚点链接：除了链接到其他网页外，您还可以在同一页面内创建内部链接，这称为锚点链接。要创建锚点链接，需要在目标位置使用 <a> 元素定义一个标记，并使用#符号引用该标记。例如：

<a href="#section2">跳转到第二部分</a>
<!-- 在页面中的某个位置 -->
<a name="section2"></a>

下载链接：如果您希望链接用于下载文件而不是导航到另一个网页，可以使用 download 属性。例如：

<a href="document.pdf" download>下载文档</a>

HTML 链接- id 属性

id 属性可用于创建一个 HTML 文档书签。

提示: 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。

实例

在HTML文档中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：

<a href="#tips">访问有用的提示部分</a>

HTML头部

HTML<head>元素

<head>元素包含了所有的头部标签元素。在<head>元素中可以插入脚本(scripts),样式文件（CSS），以及各种meta信息。可以添加在头部区域的元素标签为：<title>,<style>,<meta>,<link>,<script>,<noscript>和<base>。

HTML<title>元素

<title>标签定义了不同文档的标题。

<title>在HTML/XHTML文档中是必需的。

<title>元素：

定义了浏览器工具栏的标题。
当网页添加到收藏夹时，显示在收藏夹中的标题。
显示在搜索引擎结果页面的标题。

实例：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>春晓（文档标题）</title>
</head>
<body>
    <b>文档内容：</b>
    <h5>春晓</h5>
    <b>春眠不觉晓，
        处处闻啼鸟。
          夜来风雨声，
            花落知多少。
        </b>
        <p>注意：浏览器忽略了源代码中的排版
            （省略了多余的空格和换行）。</p>
</body>
</html>

HTML<base>元素

<base>标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接：
<head>
<base href="http://www.baidu.com/images" target="-blank">
</head>

HTML<link>元素

<link>标签定义了文档与外部资源之间的关系。

<link>标签通常用于链接到样表：
<head>
<link rel="stylesheet" type="text/css" herf="mystyle.css">
</head>

HTML<style>元素

<style>标签定义了HTML文档的样式文件引用地址。

在<style>元素中你也可以直接添加样式来渲染HTML文档：

实例
<!DOCTYPE html>
<html>
<head>
     <style type="text/css">
    body {
        background-color:blue;
    }
    </style>
    <title>春晓</title>
    </head>
<body>
    <h1>春晓</h1>
     <b>春眠不觉晓，处处闻啼鸟。</b>
    <p>夜来风雨声，花落知多少</p>
</body>
</html>

HTML<meta>元素

meta标签描述了一些基本的元数据。

<meta>标签提供了元数据，元数据也不显示在页面上，但会被浏览器解析。

<meta>元素通常用于指定网页的描述，关键词，文件的最后修改实践，作者和其他元数据。

元数据可以用于浏览器，搜索引擎（关键词）或其他web服务。

<meta>一般放置以<head>区域。

为搜索引擎定义关键词：

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容：

<meta name="description" content="免费 Web & 编程 教程">

定义网页作者：

<meta name="author" content="Runoob">

每30秒刷新当前页面：

<meta http-equiv="refresh" content="30">

HTML<script>元素

<script>标签用于加载脚本文件，如：JavaScript。

HTML head元素总结

标签	描述
<head>	定义文档的信息
<title>	定义了文档的标题
<base>	定义了页面标签的默认链接地址
<link>	定义了文档和外部资源之间的关系
<meat>	定义了HTML文档中的元数据
<script>	定义了客户端的脚本文件
<style>	定义了HTML文档的样式文件

HTML样式-CSS

CSS用于渲染HTML元素标签的样式。

如何使用CSS

CSS是在HTML4开始使用的，是为了更好的渲染HTML元素而引入。

CSS可以通过以下方式添加到HTML中：

内联样式：在HTML中使用“style”属性。
内部样式：在HTML文档头部<head>区域使用<style>元素来包含CSS。
外部使用：使用外部CSS文件。

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性，样式属性可以包含任何CSS属性。以下实例显示出如何改变段落的颜色和左外边距，

HTML样式实例-背景颜色

背景色属性（background-color）定义一个元素的背景颜色。

<body style="background-color: aqua;">
    <h1 style="background-color: blue;">春晓</h1>
     <b style="background-color: red;">春眠不觉晓，处处闻啼鸟。</b>
    <p style="background-color: greenyellow;">夜来风雨声，花落知多少</p>
</body>

HTML样式实例-字体

<body style="background-color: aqua;">
    <h1 style="background-color: blue;font-family: Verdana;color:azure">
        春晓</h1>
     <b style="background-color: red; font-size: 40px;">
        春眠不觉晓，处处闻啼鸟。</b>
    <p style="background-color: greenyellow;text-align: center;">
        夜来风雨声，花落知多少</p>
</body>

font-family :设置文本字体。 color：设置文本颜色。 font-size：设置文本样式（字体大小

）。 text-align：设置文字对齐方式。

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。可以在<head>部分通过<style>标签定义内部样式表。

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部样式表

当样式需要被应用到很多页面时，外部样式表是最好的选择。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML样式标签

标签	描述
<style>	定义文本样式
<link>	定义资源引用地址

HTML表格

HTML表格由<table>标签来定义。

HTML表格是一种用于展示结构化数据的标记语言元素。

每个表格均有若干行，每行被分割为若干个单元，表格可以包含标题行，用于定义列的标题。

tr:tr是table row的缩写，表示表格的一行。
td:td是table data的缩写，表示表格的数据单元。
th:th是table header的缩写，表示表格的表头单元格。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表格</title>
</head>
<body>
    <h4>一列:</h4>
    <table border="1">
      <tr>
        <td>春晓</td>
      </tr>
    </table>
     <h4>两行两列:</h4>
    <table border="1">
      <tr>
        <td>春眠不觉晓</td>
        <td>处处闻啼鸟</td>
      </tr>
      <tr>
        <td>夜来风雨声</td>
        <td> 花落知多少</td>
      </tr>
     </table>
     <h4>三行两列:</h4>
    <table border="3">
      <tr>
       <td>春晓</td>
        <td>孟浩然</td>
      </tr>
      <tr>
        <td>春眠不觉晓</td>
        <td>处处闻啼鸟</td>
         </tr>
      <tr>
        <td>夜来风雨声</td>
        <td>花落知多少</td>
      </tr>
    </table>
</body>
</html>

<tbody>用于定义表格的主体部分：在<tbody>中，使用<tr>元素定义行，并在每行中使用<td>元素定义单元格数据。

<thead>用于定义表格的标题部分：在<thead>中，使用<th>元素定义列标题。

HTML表格和边框属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表格</title>
</head>
<body>
    <h4>一列:</h4>
    <table border="1">
      <tr>
        <td>春晓</td>
      </tr>
    </table>
     <h4>两行两列:</h4>
    <table border="1">
      <tr>
        <td>春眠不觉晓</td>
        <td>处处闻啼鸟</td>
      </tr>
      <tr>
        <td>夜来风雨声</td>
        <td> 花落知多少</td>
      </tr>
     </table>
     <h4>三行两列:</h4>
    <table border="3">
      <tr>
       <th>春晓</th>
        <th>孟浩然</th>
      </tr>
      <tr>
        <td>春眠不觉晓</td>
        <td>处处闻啼鸟</td>
         </tr>
      <tr>
        <td>夜来风雨声</td>
        <td>花落知多少</td>
      </tr>
    </table>
</body>
</html>

上述实例中表格的表头由<th>来定义。边框的属性由border来定义。

HTML列表

HTML支持有序列表和无序列表。

无序列表

无序列表是一个项目的列表，此项目使用粗体圆点进行标记。

无序列表使用<ul>标签

<!DOCTYPE html>
<html>
<head>
    <META charset="utf-8">
    <title>春晓</title>
    </head>
<body>
    <ul>
   <h1> <li>春晓</li></h1>
    
   <li>春眠不觉晓，处处闻啼鸟。</li>
    <li>夜来风雨声，花落知多少</li>
    </ul>
</body>
</html>

HTML有序列表

有序列表始于<ol>标签，每个列表始于<li>标签，列表项使用数字来标记。

<!DOCTYPE html>
<html>
<head>
    <META charset="utf-8">
    <title>春晓</title>
    </head>
<body>
    <ol>
   <h1> <li>春晓</li></h1>
    
   <li>春眠不觉晓，处处闻啼鸟。</li>
    <li>夜来风雨声，花落知多少</li>
    </ol>
</body>
</html>

HTML自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

HTML区块

HTML可以通过<div>和<span>将元素组合起来。

HTML区块元素

大多数HTML元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行开始。例如：<h1>,<p>，<a>,<img>

HTML内联元素

内联元素在显示时通常不会以新行开始。。例如<b>,<td>,<a>,<img>

HTML<div>元素

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML <span>

HTML <span> 元素是内联元素，可用作文本的容器

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>布局</title>
    </head>
    <body>
<div id="container" style="width: 600px;">

<div id="header" style="background-color: aquamarine;">
    <h1 style="margin-bottom:0%;text-align: center;"> 春晓</h1></div><br>
<div id="menu" style="background-color: antiquewhite; height: 200px;width: 200;float: left;">
<b>一、请选择下列正确的几项（）</b><br>
A.春眠不觉晓的下一句是：处处闻啼鸟。<br>
B.春晓的作者是孟浩然。<br>
</div>
<div id="centent" style="background-color: blue;width: 200px;height:200px;float: left">
C.夜来风雨声，花落知多少。讲的是晚上的风雨有多大，可以从花朵的掉落看出来。
D.以上都对</div>
<div id="footer" style="background-color: chartreuse;clear: both;text-align:center;">
牵丝戏安著
</div>
    </body>
    </html>

HTML表单和输入

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。

以下是一个简单的HTML表单的例子：

<form> 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法（这里使用的是 "post"）。
<label> 元素用于为表单元素添加标签，提高可访问性。
<input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段。
<select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单</title>
</head>
<body>
    <form action="/" method="post">
        <!---文本输入框--->
      <center>  <label for="name">用户名：</label>
        <input type="text" id="name" name="name" required>
        <!---密码输入框---><br>
      <label for="password">密 - 码： </label>
            <input type="password" id="password" name="password" required>
            <br> <br>
            <!--单选按钮-->
           <label>性别:</label>
            <input type="radio" id="male" name="gender" value="male" checked>
            <label for="male">男</label>
            <input type="radio" id="female" name="gender" value="female">
            <label for="female">女</label>
        </center>
        <br>
         <!-- 复选框 -->
         <input type="checkbox" id="subscribe" name="subscribe" checked>
         <label for="subscribe">订阅推送信息</label>
 
         <br>
         <br>
         <!-- 下拉列表 -->
         <label for="country">国家:</label>
         <select id="country" name="country">
             <option value="cn">CN</option>
             <option value="usa">USA</option>
             <option value="uk">UK</option>
         </select>
 
         <br>
 <center>
         <!-- 提交按钮 -->
         <input type="submit" value="提交">
 </center>
    </form>
</body>

</html>

HTML表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容，比如：文本域（teatarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）等等。

我们可以使用 <form> 标签来创建表单:

<form>

input元素

</form>

HTML表单-输入元素

多数情况下被用到的表单标签是输入标签<input>，输入类型是由<type>属性定义。

文本域

文本域是通过<input type="text">标签来设定，当用户要在表单中输入字母、数字等内容时，就会用到文本域。
<form>
    姓名：<input type="text" name="name"><br>
    班级：<input type="text" name="class">
</form>

密码字段

密码字段通过标签：<input type="password">来定义：

   密码：<input type="password" name="pwd">

注意：密码字段不会明文显示，而是以*号或.代替。

单选按钮

<input type="radio"> 标签定义了表单的单选框选项:

<form action="">
    <input type="radio" name="sex" value="male">男<br>
    <input type="radio" name="sex" value="female">女
    </form>

复选框

<input type="checkbox"> 定义了复选框。

复选框可以选取一个或多个选项：

   <form>
        <input type="checkbox" name="vehicle" value="Bike">我喜欢数学<br>
        <input type="checkbox" name="vehicle" value="Car">我喜欢英语
        </form>