HTML零基础入门笔记：狂神版

前言

本笔记是学习狂神的java教程，建议配合视频，学习体验更佳。

【狂神说Java】HTML5完整教学通俗易懂_哔哩哔哩_bilibili

第1-2章：Java零基础入门笔记：(1-2)入门（简介、基础知识）-CSDN博客

第3章：Java零基础入门笔记：(3)程序控制-CSDN博客

第4章：Java零基础入门笔记：(4)方法-CSDN博客

第5章：Java零基础入门笔记：(5)数组-CSDN博客

第6章：Java零基础入门笔记：(6)面向对象-CSDN博客

第7章：Java零基础入门笔记：(7)异常-CSDN博客

多线程：Java零基础入门笔记：多线程_callable-CSDN博客

初识HTML

简介

HTML，即超文本标记语言 （HyperText Markup Language），是用于**创建网页的标准标记语言。**它通过一系列的标签和元素来定义网页的结构和内容，这些标签告诉浏览器如何显示页面上的文字、图片、链接、表格等内容。

HTML文档由一系列嵌套的元素组成，每个元素都有其特定的语义和功能。例如，<html>标签是文档的根元素，它包含了整个页面的内容；<head>部分用于定义文档的元数据，比如标题、字符集、链接外部资源等；而<body>部分则包含了用户可以看到的页面内容，如文本、图片、表单等。

HTML的一个重要特点是它的超文本特性，通过使用<a>标签，可以创建超链接，将一个网页连接到另一个网页，从而实现网页之间的跳转，这也是互联网能够实现信息互联的基础。此外，HTML还可以与CSS（层叠样式表）和JavaScript结合使用，CSS用于控制页面的外观和布局，JavaScript则用于实现页面的交互功能，三者共同协作，可以创建出功能丰富、视觉效果出色的动态网页。

随着互联网的发展，HTML也在不断更新和演进。HTML5是目前最新的标准，它引入了许多新的元素和功能，如语义化标签（如<header>、<footer>、<article>等），这些标签不仅有助于更好地组织页面内容，还能提高搜索引擎的优化效果。

html的基本结构

html文本的内容是由一系列标签组成的，标签分为两类：

成对出现的开放标签和闭合标签， 闭合标签是指那些有明确的开始标记和结束标记的标签。闭合标签通常用于包裹内容，定义内容的结构和语义。例如，<p>是段落的开始标记，</p>是段落的结束标记，它们之间可以包含文本或其他HTML元素。闭合标签的结构是<标签名>内容</标签名>。
单独出现的自闭合标签， 自闭合标签是指那些没有内容，且不需要结束标记的标签。自闭合标签通常用于插入一些独立的元素，如图片、换行符、输入框等。自闭合标签的结构是<标签名/>，如<meta xxxx>

html基本内容

html 复制代码

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



</body>
</html>

注释

html 复制代码

<!-- -->

对应的快捷键：ctrl + /

DOCTYPE声明：

它的作用是告诉浏览器（或其他文档解析器）当前文档使用的是哪种HTML或XHTML标准规范，从而让浏览器能够按照正确的模式来解析和渲染页面，如上面的例子是使用html规范：

html 复制代码

<!DOCTYPE html>

head标签表示网页头部

meta标签是描述性标签，用来描述网站的一些信息

html 复制代码

<meta charset="UTF-8">
<meta name="SherlockMa" content="博主">
<meta name="description" content="这是一个AI领域的博主">

title表示网页标题

html 复制代码

<title>Title</title>

<body：这是文档的主体部分，包含了用户可以看到的内容。

网页的基本标签

标题标签

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>

<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

</body>
</html>

段落标签

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>

<!--段落标签-->
<p>两只老虎跑得快</p>
<p>跑得快 跑得快</p>

</body>
</html>

换行标签

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>

<!--换行标签-->
两只老虎跑得快<br>
跑得快 跑得快

</body>
</html>

注意区分换行标签和段落标签内容显示的不同，换行标签要窄一些。

水平线标签

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>

<!--水平线标签-->
两只老虎跑得快
<hr>
跑得快 跑得快

</body>
</html>

粗体与斜体

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>

<!--粗体与斜体-->
<strong>I love you</strong><br>
<em>I love you</em>

</body>
</html>

特殊符号

html 复制代码

<!--特殊符号-->
多个空格：&nbsp;
大于号：&gt;
小于号：&lt;
版权符号：&copy;

图像标签

<img> 标签的属性

src 属性 作用：指定图片的路径。可以是相对路径（如 ./resource/img/报纸.jpg）或绝对路径（如 https://example.com/image.jpg）。
alt 属性 作用：为图片提供替代文本。当图片无法显示时（例如图片路径错误或用户使用屏幕阅读器），浏览器会显示 alt 属性的值。
title 属性 作用：为图片添加提示文本。当用户将鼠标悬停在图片上时，浏览器会显示 title 属性的值。
width 和 height 属性 作用：指定图片的宽度和高度。单位是像素。

下面的代码演示了在 <body> 中，使用了 <img> 标签来插入一张图片。<img> 是一个自闭合标签，用于在HTML文档中嵌入图片。

如果图片无法加载，浏览器会显示"未知图片"。
当用户将鼠标悬停在图片上时，会显示"悬停文字"。
图片的宽度和高度都会被设置为300像素。

html 复制代码

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

<img src="./resource/img/报纸.jpg" alt="未知图片" title="悬停文字" width="300" height="300">

</body>
</html>

链接标签

页面间标签

<a> 标签

<a> 标签是一个行内元素，用于将页面的一部分链接到另一个页面或资源。
href 属性 作用：指定链接的目标URL。
title 属性作用 （可选）：为链接提供提示文本。当用户将鼠标悬停在链接上时，浏览器会显示 title 属性的值。
**target 属性：**主要作用是控制链接或表单提交后内容的显示位置，例如在当前窗口打开、在新窗口打开或在特定的框架中打开。
- _self ：作用：在当前窗口或标签页中打开链接。
- _blank ：作用：在新窗口或新标签页中打开链接。

这段HTML代码展示了如何使用 <a> 标签来创建超链接，以及如何将超链接嵌套到图片中。

页面中会显示两个超链接：第一个链接显示为"基本标签"，点击后会跳转到本地文件 基本标签.html。第二个链接显示为"百度一下"，点击后会跳转到百度的官方网站。
页面中还会显示一个图片链接

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>

<!--链接标签-->
<a href="基本标签.html">基本标签</a>
<a href="https://www.baidu.com">百度一下</a>

<!--嵌套到图片里-->
<a href="图像标签.html"><img src="./resource/img/报纸.jpg" alt="未知图片" title="悬停文字" width="300" height="300"></a>

</body>
</html>

锚标签

通过锚链接我们可以实现页面内的跳转，比如我们想选定目录树中某个章节时，可以通过点击目录树中章节对应的位置直接跳转到对应内容，也可以应用在网页中返回顶部这个功能。

锚链接意思是预先设置好一个锚点，即本页面中要跳转过来的地方，再后面要跳转时直接通过a标签即可。

1.定义锚点：

使用 <a> 标签的 id 属性定义一个锚点。id 的值是锚点的名称，必须是唯一的。

html 复制代码

<a id="top">顶部</a>

2.创建链接到锚点的超链接：

使用 <a> 标签的 href 属性创建一个链接，其值以 # 开头，后面跟着锚点的名称。这里创建了一个链接，当用户点击该链接时，页面会滚动到名为 top 的锚点位置。

html 复制代码

<a href="#top">点击回到顶部</a>

这段HTML代码展示了一个非常实用的功能：使用锚点链接（anchor link）来实现页面内的快速导航。通过这种方式，用户可以点击链接直接跳转到页面的特定部分。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<a id="top">顶部</a>


......

<a href="#top">点击回到顶部</a>

</body>
</html>

当你将这段代码保存为一个HTML文件并用浏览器打开时，你会看到以下内容：

页面顶部有一个文本"顶部"，它是通过 <a id="top">顶部</a> 定义的锚点。
页面底部有一个超链接"点击回到顶部"，点击该链接后，页面会滚动到顶部的锚点位置。

功能性链接

所谓功能性链接，就是指一些特定或者常用的超链接，比如邮件链接、QQ链接或者BILI链接等，用于站内分享链接等，这里介绍邮件链接和qq链接。

html 复制代码

<a href="mailto: [email protected]">点击邮箱联系我</a>

块内元素和行内元素

块内元素和行内元素是一元素的一种组织布局方式。

块内元素

块级元素通常会在页面中独占一行，它会从新的一行开始，并且它的宽度默认会占据父元素的全部宽度。 常见的块级元素有<div>、<p>、<h1>到<h6>等。例如<div>元素，它经常被用来创建一个块级的容器，可以用来包含其他元素，通过设置它的宽度、高度、边距等属性，可以实现复杂的页面布局。而<p>元素则用来表示段落，每个段落都会独占一行，段落之间的间距可以通过设置行高或者边距来调整。块级元素的这种特性使得它们非常适合用来构建页面的结构框架，通过嵌套不同的块级元素，可以将页面划分为不同的区域，比如头部、主体内容、侧边栏和底部等。

行内元素

行内元素则不会独占一行，它会在页面中按照文档流的方向依次排列，并且它的宽度通常是由其内容决定的。 常见的行内元素有<span>、<a>、<strong>、<em>等。<span>元素是一个通用的行内容器，它可以用来对文本或者其他元素进行局部的样式设置，比如给一段文本添加颜色、字体大小等样式，而不会影响到它周围的元素的布局。<a>元素是一个超链接元素，它可以将一段文本或者图片等设置为链接，用户点击后可以跳转到指定的页面或者资源，它在页面中也是按照文档流的方向排列，不会独占一行。行内元素的这种特性使得它们非常适合用来对文本或者页面中的局部内容进行修饰和操作，比如强调文本、创建链接、插入图片等。

列表

列表标签对应的内容是一条一条的形式呈现的，分为：

有序列表
无序列表
自定义列表

有序列表(ol)

<ol> 和 <li> 标签

<ol> 标签：定义一个有序列表。列表项会自动编号，编号从1开始，依次递增。
<li> 标签 ：定义列表中的一个项目。每个 <li> 标签都会生成一个列表项，并自动编号。

这段HTML代码展示了一个有序列表（Ordered List）的创建方法。有序列表是一种带有编号的列表，通常用于表示有顺序或优先级的项目。

html 复制代码

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

<!--有序列表-->
<ol>
  <li>元素1</li>
  <li>元素2</li>
  <li>元素3</li>
  ...
</ol>

</body>
</html>

无序列表(ul)

<ul> 和 <li> 标签

<ul> 标签：定义一个无序列表。列表项会显示为带有项目符号的列表项。
<li> 标签 ：定义列表中的一个项目。每个 <li> 标签都会生成一个列表项，并显示为带有项目符号的格式。

这段HTML代码展示了一个无序列表（Unordered List）的创建方法。无序列表是一种没有编号的列表，通常用于表示没有特定顺序的项目，例如购物清单、兴趣爱好等。

html 复制代码

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

<!--无序列表-->
<ul>
  <li>元素1</li>
  <li>元素2</li>
  <li>元素3</li>
  ...
</ul>

</body>
</html>

自定义列表(dl)

<dl>、<dt> 和 <dd> 标签

<dl> 标签：定义一个描述列表。将术语和定义组合在一起，形成一个有层次的列表。
<dt> 标签：定义术语（Description Term）。术语通常以加粗的形式显示。
<dd> 标签：定义术语的描述（Description Definition）。描述通常会缩进显示，以区分术语。

这段HTML代码展示了一个自定义列表（Description List）的创建方法。自定义列表是一种用于描述术语及其定义的列表，非常适合用于术语表、词汇表或任何需要解释说明的场景。

html 复制代码

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

<!--自定义列表-->
<dl>
  <dt>自定义列表1</dt>
  <dd>自定义列表1的元素1</dd>
  <dd>自定义列表1的元素2</dd>
  <dd>自定义列表1的元素3</dd>

  <dt>自定义列表2</dt>
  <dd>自定义列表2的元素1</dd>
  <dd>自定义列表2的元素2</dd>
  <dd>自定义列表2的元素3</dd>
</dl>

</body>
</html>

表格

<table> 标签：定义一个表格。表格会按照HTML代码中的结构显示为一个表格。
<tr> 标签：定义表格的一行（Table Row）。每行包含多个单元格。
<td> 标签：定义表格的一个单元格（Table Data）。单元格可以包含文本、图片或其他HTML元素。
border 属性：定义表格的边框。

这段HTML代码展示了一个基本的表格（<table>）的创建方法。表格是一种用于显示数据的结构化方式，通常由行（<tr>）和单元格（<td>）组成。

html 复制代码

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

<table>
  <tr>
    <td>1-1</td>
    <td>1-2</td>
    <td>1-3</td>
  </tr>

  <tr>
    <td>2-1</td>
    <td>2-2</td>
    <td>2-3</td>
  </tr>

  <tr>
    <td>3-1</td>
    <td>3-2</td>
    <td>3-3</td>
  </tr>
</table>

</body>
</html>

跨行跨列

colspan 属性：定义单元格跨越的列数。
rowspan 属性：定义单元格跨越的行数。

这段HTML代码展示了一个表格，其中使用了 colspan 和 rowspan 属性来合并单元格。这些属性在创建复杂的表格布局时非常有用。

html 复制代码

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

<table border="1px">
  <tr>
    <!--colspan 跨列    -->
    <td colspan="3">1</td>
  </tr>

  <tr>
    <td rowspan="2">2-1</td>
    <td>2-2</td>
    <td>2-3</td>
  </tr>

  <tr>
    <td>3-2</td>
    <td>3-3</td>
  </tr>
</table>

</body>
</html>

视频与音频

<video> 标签

<video> 标签是HTML5中引入的一个标签，用于在网页中嵌入视频文件。它支持多种视频格式，如MP4、WebM和OGG等。
src 属性：指定视频文件的路径。可以是相对路径或绝对路径。
controls 属性：添加视频播放控件，如播放/暂停按钮、音量控制、进度条等。
autoplay 属性：设置视频在页面加载完成后自动播放。
height 和 width 属性：指定视频的显示高度和宽度。

html 复制代码

<video src="资源的相对路径" controls autoplay height="300" width="300"></video>

<audio> 标签

<video> 标签是HTML5中引入的一个标签，用于在网页中嵌入视频文件。它支持多种视频格式，如MP4、WebM和OGG等。
src 属性：指定视频文件的路径。可以是相对路径或绝对路径。
controls 属性：添加视频播放控件，如播放/暂停按钮、音量控制、进度条等。
autoplay 属性：设置视频在页面加载完成后自动播放。
height 和 width 属性：指定视频的显示高度和宽度。

html 复制代码

<audio src="资源的相对路径" controls autoplay height="300" width="300"></audio>

页面结构分析

**<header> 标签：**定义网页的头部区域，通常包含网站的标志、导航菜单等。
<section> 标签：定义网页的一个独立部分，通常用于包含一组相关内容。
<footer> 标签：定义网页的脚部区域，通常包含版权信息、联系方式、导航链接等。

html 复制代码

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

<header>网页头部</header>

<section>网页主体</section>

<footer>网页脚部</footer>

</body>
</html>

iframe内联框架

<iframe> 是"Inline Frame"的缩写，表示内联框架，可以在当前网页中嵌入另一个网页。

src 属性：指定嵌入网页的URL。
frameborder 属性 ：控制内联框架的边框是否显示。
- 可选值 ：0表示不显示边框（默认值）。1表示显示边框。
width 和 height 属性：指定内联框架的宽度和高度。

这段HTML代码展示了一个内联框架（<iframe>）的使用方法。内联框架是一种可以在当前网页中嵌入另一个网页的技术。

html 复制代码

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

<!--内联框架-->
<iframe src="https://www.baidu.com" frameborder="0" width="1000px" height="800px"></iframe>

</body>
</html>

这段HTML代码展示了一个内联框架（<iframe>）和一个超链接（<a>）的结合使用方法。通过这种方式，可以实现点击链接后在指定的内联框架中加载内容。

html 复制代码

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

<!--内联框架-->
<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
<a href="https://www.baidu.com" target="hello">点击跳转</a>

</body>
</html>

当你将这段代码保存为一个HTML文件并用浏览器打开时，你会看到以下内容：

页面中会显示一个内联框架，大小为1000x800像素，初始时不加载任何内容。
页面中会显示一个超链接"点击跳转"。
点击"点击跳转"链接后，百度的主页（https://www.baidu.com）将在内联框架中加载。

表单

post提交和get提交(form)

<form> 标签的属性

action 属性：指定表单提交的目标URL。
method 属性：指定表单提交时使用的HTTP方法。
- 可选值 ：get：通过URL参数提交数据（默认值）；post：通过HTTP请求体提交数据。

文本输入框

type="text"：定义一个单行文本输入框，用户可以在其中输入文本。
name="username"：定义输入框的名称，用于在表单提交时标识该输入框的数据。

html 复制代码

<p>名字：<input type="text" name="username"></p>

密码输入框

type="password"：定义一个密码输入框，用户输入的内容将以隐藏字符显示（通常是圆点或星号）。
name="password"：定义输入框的名称，用于在表单提交时标识该输入框的数据。

html 复制代码

<p>密码：<input type="password" name="password"></p>

提交按钮

type="submit"：定义一个提交按钮，用户点击后将触发表单提交。

html 复制代码

<input type="submit">

重置按钮

type="reset"：定义一个重置按钮，用户点击后将清除表单中的所有输入内容。

html 复制代码

<input type="reset">

这段HTML代码展示了一个简单的表单（<form>）的创建方法，用于用户注册。表单包含文本输入框、密码输入框、提交按钮和重置按钮。

html 复制代码

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

<h1>注册</h1>
<!--表单-->
<form action="基本标签.html" method="get"></form>
    <!--文本输入框：input type="text"-->
    <p>名字：<input type="text" name="username"></p>
    <!--密码输入框：input type="password"-->
    <p>名字：<input type="password" name="password"></p>
    <p>
        <!--提交框-->
        <input type="submit">
        <!--重置框-->
        <input type="reset">
    </p>
</body>
</html>

post和get的区别：

get：我们可以在url中看到我们提交的信息，比如用户名和密码，不安全；
post：适合传输大文件，在url中看不到我们提交的信息，但是在审查元素里的header信息里还是可以看到；

表单属性

单选框

<input type="radio">

使用 <input type="radio"> 标签来创建单选按钮。单选按钮允许用户从一组选项中选择一个选项。
type="radio"：定义一个单选按钮。
value 属性：定义单选按钮的值，当表单提交时，该值将被发送到服务器。
name 属性 ：定义单选按钮的名称，同一组单选按钮必须使用相同的 name 值，以便它们被视为一组。

这段HTML代码展示了一个单选按钮（<input type="radio">）的使用方法。单选按钮通常用于表单中，允许用户从一组选项中选择一个选项。

html 复制代码

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

    <p>
        <input type="radio" value="men" name="sex"/>男
        <input type="radio" value="women" name="sex"/>女
    </p>

</body>
</html>

当你将这段代码保存为一个HTML文件并用浏览器打开时，你会看到以下内容：

页面中会显示两个单选按钮，分别标记为"男"和"女"。
用户只能选择其中一个选项。

多选框

<input type="checkbox">

使用了 <input type="checkbox"> 标签来创建复选框。复选框允许用户从一组选项中选择多个选项。
type="checkbox"：定义一个复选框。
value 属性：定义复选框的值，当表单提交时，该值将被发送到服务器。
name 属性 ：定义复选框的名称，同一组复选框可以使用相同的 name 值，以便它们被视为一组。

这段HTML代码展示了一个表单中使用复选框（<input type="checkbox">）的方法。复选框允许用户从一组选项中选择多个选项。

html 复制代码

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

<!--表单-->
    <p>
        兴趣
        <input type="checkbox" value="coding" name="hobby">编程
        <input type="checkbox" value="LOL" name="hobby">LOL
        <input type="checkbox" value="eating" name="hobby">吃饭
        <input type="checkbox" value="sleeping" name="hobby">睡觉
    </p>

</body>
</html>

当你将这段代码保存为一个HTML文件并用浏览器打开时，你会看到以下内容：

表单中包含一组复选框，分别标记为"编程"、"LOL"、"吃饭"和"睡觉"。
用户可以选择多个选项。

按钮

<input type="button">

普通按钮 (input type="button")：普通按钮是一个没有默认行为的按钮，通常用于触发JavaScript事件
**图片按钮 (input type="image")：**图片按钮是一个以图片形式显示的按钮，点击后可以提交表单。
提交按钮 (input type="submit")：提交按钮用于触发表单的提交行为，将表单数据发送到服务器。
重置按钮 (input type="reset")：重置按钮用于清除表单中的所有输入内容，恢复表单到初始状态。

这段HTML代码展示了一个表单中使用按钮（<input type="button">）的方法。按钮是一种常见的表单控件，用于触发JavaScript事件或执行某些操作。

html 复制代码

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

<!--表单-->

    <p>
        按钮
        <input type="button" value="这是个按钮">
    </p>


</body>
</html>

当你将这段代码保存为一个HTML文件并用浏览器打开时，你会看到以下内容：

页面中会显示一个标题"注册"。
表单中包含一个按钮，按钮上显示文本"这是个按钮"。

下拉框

<select> 标签：

作用：定义一个下拉选择框。
name 属性：定义选择框的名称，用于在表单提交时标识该选择框的数据。

<option> 标签：

作用：定义下拉选择框中的一个选项。
value 属性：定义选项的值，当表单提交时，该值将被发送到服务器。
selected 属性：指定某个选项默认被选中。

这段HTML代码展示了一个表单中使用下拉选择框（<select>）的方法。下拉选择框允许用户从一组选项中选择一个选项。

html 复制代码

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

<!--表单-->

<p>
    国籍
    <select name="列表名称">
        <option value="china">中国</option>
        <option value="usa" selected>美国</option>
        <option value="uk">英国</option>
        <option value="france">法国</option>
    </select>
</p>


</body>
</html>

当你将这段代码保存为一个HTML文件并用浏览器打开时，你会看到以下内容：

页面中会显示一个标题"注册"。
表单中包含一个下拉选择框，标记为"国籍"。
下拉选择框中有四个选项："中国"、"美国"、"英国"和"法国"。
默认选中"美国"这个选项。

文本域

<textarea> 元素用于创建多行文本输入框，用户可以在其中输入较长的文本内容，例如评论、反馈或描述等。

name 属性：定义文本输入框的名称，用于在表单提交时标识该输入框的数据。
cols 属性：定义文本输入框的可见宽度（以字符数为单位）。
rows 属性：定义文本输入框的可见高度（以行数为单位）。

这段HTML代码展示了一个表单中使用多行文本输入框（<textarea>）的方法。

html 复制代码

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

<!--表单-->

<p>
    用户反馈
    <textarea name="feedback" cols="50" rows="10"></textarea>
</p>


</body>
</html>

当你将这段代码保存为一个HTML文件并用浏览器打开时，你会看到以下内容：

表单中包含一个标签"用户反馈"，旁边是一个多行文本输入框。
文本输入框的宽度可以显示50个字符，高度可以显示10行。

文件域(file)

选择本地文件上传。

<input type="file"> 的属性

type="file"：定义一个文件上传控件。
name 属性：定义文件上传控件的名称，用于在表单提交时标识该控件的数据。

这段HTML代码展示了一个表单中使用文件上传控件（<input type="file">）和按钮（<input type="button">）的方法。文件上传控件允许用户选择文件并上传到服务器，而按钮可以用于触发JavaScript事件或执行某些操作。

html 复制代码

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

<!--表单-->

<p>
    <input type="file" name="files">
    <input type="button" value="上传" name="upload">
</p>



</body>
</html>

当你将这段代码保存为一个HTML文件并用浏览器打开时，你会看到以下内容：

表单中包含一个文件上传控件和一个按钮。
文件上传控件允许用户选择文件。
按钮上显示文本"上传"。

简单验证

就是对input输入框里输入的信息做简单验证，比如检查是否是email格式、url格式，是否是数字格式等，注意这里的验证并不严格，需要在CSS里做更严格的验证。

type="email"：

作用：定义一个用于输入电子邮件地址的输入框。
验证：浏览器会自动验证输入的内容是否符合电子邮件地址的格式（例如 [email protected]）。

type="url"：

作用：定义一个用于输入URL的输入框。
验证：浏览器会自动验证输入的内容是否符合URL的格式（例如 http://example.com）。

type="number"：

作用：定义一个用于输入数字的输入框。
验证：浏览器会自动验证输入的内容是否为数字。

这段HTML代码展示了一个表单中使用HTML5的输入类型（<input>）进行简单验证的方法。HTML5引入了许多新的输入类型，这些类型可以自动验证用户输入的内容，确保输入的数据符合预期格式。

html 复制代码

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

<!--表单-->

<!--简单验证-->
<p>邮箱：
    <input type="email" name="email">
</p>
<p>URL：
    <input type="url" name="url">
</p>
<p>数字：
    <input type="number" name="number">
</p>


</body>
</html>

当你将这段代码保存为一个HTML文件并用浏览器打开时，你会看到以下内容：

表单中包含三个输入框：
- 一个用于输入电子邮件地址的输入框。
- 一个用于输入URL的输入框。
- 一个用于输入数字的输入框。

number的其他属性

<input type="number"> 的属性

type="number"：定义一个数字输入框，用户只能输入数字。
name 属性：定义输入框的名称，用于在表单提交时标识该输入框的数据。
max 属性：指定输入框中允许的最大值。
min 属性：指定输入框中允许的最小值。
step 属性：指定输入框中允许的步长（增量或减量）。

这段HTML代码展示了一个带有输入限制的数字输入框（<input type="number">）。通过使用 max、min 和 step 属性，可以对用户输入的数字进行限制，确保输入的数字在指定范围内，并且符合指定的步长。

html 复制代码

<!--最大100，最小0，间隔10-->
<p>数字：
    <input type="number" name="number" max="100" min="0" step="10">
</p>

当你将这段代码嵌入到HTML文件中并用浏览器打开时，你会看到以下内容：

页面中会显示一个标签"数字"，旁边是一个数字输入框。
用户只能输入0到100之间的数字，并且输入的数字必须是10的倍数。

滑块

<input type="range"> 的属性

type="range"：定义一个滑块控件。
min 属性：指定滑块的最小值。
max 属性：指定滑块的最大值。
step 属性：指定滑块的步长（增量或减量）。
name 属性：定义滑块控件的名称，用于在表单提交时标识该控件的数据。

这段HTML代码展示了一个滑块控件（<input type="range">）的使用方法。滑块控件是一种用于选择数值范围的输入控件，用户可以通过拖动滑块来选择一个值。

html 复制代码

<!--滑块-->
<p>
    音量滑块
    <input type="range" min="0" max="100" name="voice" step="2">
</p>

当你将这段代码嵌入到HTML文件中并用浏览器打开时，你会看到以下内容：

页面中会显示一个标签"音量滑块"，旁边是一个滑块控件。
用户可以通过拖动滑块来选择一个值，值的范围是0到100，并且值必须是2的倍数。

搜索框(search)

就是类似网站里的站内搜索功能。

html 复制代码

<!--搜索框-->
<p>
    站内搜索
    <input type="search" name="search">
</p>

其他属性

disable：禁用表单控件，使其不可用且不可提交。

html 复制代码

<input type="text" name="username" disabled>
<button type="submit" disabled>提交</button>

hidden：隐藏表单控件，使其在页面上不可见，但仍然可以提交。

html 复制代码

<input type="text" name="username" hidden>
<div hidden>这是一个隐藏的元素</div>

readonly：使表单控件只读，用户可以查看但不能修改内容。

html 复制代码

<input type="text" name="username" value="只读内容" readonly>
<textarea name="description" readonly>这是一个只读的文本区域</textarea>

这段HTML代码展示了一个文本输入框（<input type="text">）和一个与之关联的标签（<label>）。通过使用 <label> 标签的 for 属性，可以增强表单的用户体验和可访问性。

html 复制代码

<p>
    <label for="mark">点击我</label>
    <input type="text" id="mark"></input>
</p>

当你将这段代码嵌入到HTML文件中并用浏览器打开时，你会看到以下内容：

页面中会显示一个标签"点击我"，旁边是一个文本输入框。
当用户点击"点击我"标签时，文本输入框会自动获得焦点，用户可以直接在其中输入文本。

表单初级验证

placeholder：在表单控件中显示提示信息，当用户开始输入时，提示信息会消失。

html 复制代码

<input type="text" name="username" placeholder="请输入用户名">
<textarea name="description" placeholder="请输入描述"></textarea>

required：指定表单控件为必填项，用户必须填写内容才能提交表单。

html 复制代码

<input type="text" name="username" required>
<textarea name="description" required></textarea>
<select name="country" required>
    <option value="">请选择国家</option>
    <option value="china">中国</option>
    <option value="usa">美国</option>
</select>

pattern：使用正则表达式对输入内容进行验证，确保用户输入的内容符合特定格式。

html 复制代码

<input type="text" name="username" pattern="[A-Za-z0-9_]{5,15}" title="用户名必须是5到15个字符，只能包含字母、数字和下划线">
<input type="email" name="email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}" title="请输入有效的电子邮件地址">

HTML（超文本标记语言）是构建和组织网页内容的基础语言，其重要性体现在多个方面。首先，HTML是网页的骨架，它通过一系列的标签和元素定义了网页的结构和内容，从简单的文本到复杂的布局，HTML都能以清晰的结构呈现出来。这种结构化的标记方式不仅便于开发者构建网页，也使得搜索引擎能够更好地理解和索引网页内容，从而提升网页在搜索结果中的排名，这对于网站的可见性和推广至关重要。

其次，HTML的语义化标签（如<header>、<footer>、<article>等）进一步增强了网页的可读性和可访问性。语义化标签不仅让代码更易于理解，还为屏幕阅读器等辅助设备提供了更准确的内容描述，使得残障人士也能无障碍地访问网页内容。此外，HTML的表单功能允许用户与网页进行交互，例如填写信息、上传文件等，这对于实现用户注册、评论、搜索等功能不可或缺。

HTML还支持多媒体内容的嵌入，如图片、视频和音频，丰富了网页的表现形式，提升了用户体验。同时，HTML与CSS（层叠样式表）和JavaScript的结合使用，能够实现更加动态和交互式的网页效果。CSS负责网页的视觉样式，而JavaScript则可以处理用户事件和动态内容更新，三者的协同工作使得现代网页能够提供丰富多样的功能和流畅的用户体验。

随着HTML5的推出，HTML的功能得到了进一步扩展，新增了许多特性，如语义化标签、多媒体支持、表单验证等，这些特性使得HTML能够更好地适应现代网页开发的需求。HTML5的引入不仅简化了网页开发的复杂性，还提高了网页的性能和兼容性，使得网页能够在各种设备和浏览器上保持一致的显示效果。

总之，HTML作为网页开发的核心语言，其重要性不言而喻。它不仅是构建网页的基础，也是实现网页功能、提升用户体验和促进网络信息传播的关键工具。无论是个人博客、企业网站还是复杂的在线应用，HTML都是不可或缺的一部分。

🌟 如果你喜欢这篇文章/视频/内容，别忘了点赞哦！

💖 点赞是对作者最大的支持，也是我们继续创作的动力！

🔖 觉得有用？一键收藏，方便下次查看！

🔍 收藏起来，随时回顾精彩内容，不迷路！

🔔 关注我，获取更多精彩内容和最新动态！

🚀 关注不迷路，持续为你带来有价值的信息和有趣的故事！