本文最后更新于55 天前，如有错误请发送邮件到guzhougongzuoshi@aliyun.com

初始HTML5

该项目已经上传到Gitee : 点击跳转下载源代码和笔记

什么是HTML语言？

HTML（超文本标记语言）就像是网页的骨架，所有内容都靠它支撑起来！它让我们能够在网页上写字、插图、甚至加入视频，简直是互联网的魔法师！而且，HTML是由W3C（万维网联盟）所制定的标准，确保所有网站都能在不同的浏览器中正常“生存”。

W3C标准

W3C就像是网页的守护者，确保每个人都能在不同的设备和浏览器上看到一致的内容。它们的使命是让网页“相爱相守”，不论在什么平台上。

HTML基本结构：

网页头部

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

头部就像是网页的身份证，告诉浏览器如何解析你的内容。我们有：

<!DOCTYPE>：告诉浏览器使用HTML5解析文档，保证你的小网页不会被误认为是个老古董。
<meta charset="UTF-8">：指定网页的字符集，让你的内容可以使用各种语言，当然，也包括 Emoji！（别小看它，使用对了能让你的网页更具吸引力！）
<title>：这是网页在标签栏上显示的名称，记得给它起个响亮的名字，让访问者一眼就记住！

主体部分

<body>
    我的第一个网页
</body>

主体部分就像是网页的舞台，所有的表演都在这里展开！你可以在这里展示你的内容、图片，甚至是视频。

网页基本信息

头部

主要用来标记网页信息，记得把这些标签放进头部哦！

!DOCTYPE标签：告诉浏览器你正在使用的HTML版本。
meta标签：用来设置网页的描述、关键词等信息，帮助搜索引擎找到你。
title标签：为你的网页命名，记住，不起个好名字可是会被当成“没文化”哦！

使用ctrl + shift + /可以快速注释，像是在给自己留个小纸条，方便下次回忆！
使用开放标签时，比如<p>，按tab键会自动生成</p>，省时又省力，让你把更多时间花在创作上！

主体部分

这是网页内容的部分，展现你的才华，吸引访客眼球！

网页的基本标签

<h1-6>标题标签：用来划分内容的层次，<h1>是最大的标题，<h6>是最小的，就像一场标题的“选美大赛”！
<p>段落标签：每个段落的起始和结束，让文字不再混乱，像是一位优雅的舞者。
<br>换行标签：在内容中插入换行，给文字一些呼吸的空间。
<hr>水平线标签：用来分隔内容，像是网页上的“暂停线”。
字体样式标签（粗体、斜体等）：<strong>（加粗）和<em>（斜体）让你的文本更有表现力，突出重要信息。
注释标签：，写下你的小秘密，别人看不见！
特殊符号（  > < ©等常用符号）：
1.  ：代表不间断空格（non-breaking space）。
- 用途：它用于在HTML中插入一个空格，且这个空格不会因为文本换行而被删除。通常在需要强制保留空格的地方使用，比如在某些格式要求中，或者在排版时需要额外的空白。
- 示例：
  html 这是一个  带有不间断空格的示例。
2. >：代表大于号（greater than）。
- 用途：在HTML中，>是一个特殊符号，表示标签的结束。因此，使用>来表示实际的大于号，而不是结束标签。
- 示例：
  html 5 > 3 是正确的。
3. <：代表小于号（less than）。
- 用途：类似于>，<在HTML中用于开始一个标签。因此，使用<来表示实际的小于号。
- 示例：
  html 3 < 5 是正确的。
4. ©：代表版权符号（copyright）。
- 用途：用于表示版权信息，通常在网页底部标明内容的版权归属。
- 示例：
  html © 2024 王丽杰。所有权利保留。

图像标签

在网页设计中，图像是吸引访客的“颜值担当”。常见的图像格式有：

JPG：适合照片，色彩丰富，但不支持透明背景。
GIF：适合动画和简单图形，支持透明背景，但色彩有限（最多256种颜色）。
PNG：适合需要透明度的图像，支持更高质量的颜色，但文件大小通常比JPG大。
BMP：原始位图格式，文件大，通常不用于网页。

图片标签的属性

让我们来认识一下<img>标签的各个属性，它们就像是图像的身份证，告诉浏览器该怎么处理图像。

<img src="path/to/image.jpg" alt="描述文字" title="提示文字" width="300" height="200">

src（必填）：图像的路径。可以使用相对地址或绝对路径。
- 相对地址（推荐使用）：相对于当前文档的路径。例如，../images/pic.jpg表示从当前目录向上一级目录的“images”文件夹寻找“pic.jpg”。
- 绝对路径：完整的URL地址，比如https://example.com/images/pic.jpg，让浏览器知道图像在哪个星球上。
alt（必填）：图像的替代文本。当图像无法显示时，alt文本将替代显示。同时，搜索引擎也会用它来理解你的图像内容。记得写得生动点，让用户感受到图像的魅力！
- 示例：<img src="cat.jpg" alt="一只可爱的猫咪">
title：当鼠标悬停在图像上时显示的文本，可以用来提供更多信息或解释图像内容。记得，简单明了就好！
- 示例：<img src="logo.png" alt="网站logo" title="点击这里访问我们的网站">
width：设置图像的宽度，可以用像素（px）或百分比（%）。如果只设置宽度，图像的高度会自动按比例调整。
- 示例：<img src="image.jpg" alt="示例图" width="400">
height：设置图像的高度，同样可以用像素（px）或百分比（%）。如果只设置高度，宽度会自动按比例调整。
- 示例：<img src="image.jpg" alt="示例图" height="300">

使用示例

<img src="../images/cat.jpg" alt="一只可爱的猫咪" title="这是我家的小猫" width="300" height="200">

链接标签

在网页中，链接就像是通向不同世界的魔法门，让我们可以从一个页面跳跃到另一个页面。想象一下，如果没有链接，网页就像一座封闭的城堡，无法探索！

`<a>` 标签

使用<a>标签来创建链接。它的基本语法如下：

<a href="https://example.com">点击这里访问我们的网站</a>

属性

href（必填）：链接的目标地址，指向你想要跳转的网页。可以是绝对URL（完整地址）或者相对路径（相对于当前页面的地址）。
示例： <a href="https://example.com">访问示例网站</a>
target：指定在何处打开链接。可以控制链接打开的方式，让用户体验更流畅。
常用值：
- _self：在同一窗口打开（默认值）。用户点击后，就像在原地转圈，页面内容变了。
  html <a href="https://example.com" target="_self">在同一窗口打开</a>
- _blank：在新窗口或新标签页中打开。用户点击后，就像召唤了一个新的窗口，继续浏览。
  html <a href="https://example.com" target="_blank">在新标签页打开</a>

锚链接

锚链接让你可以在同一页面内跳转，犹如在文档中做“快捷导航”！使用锚链接需要两个步骤：

需要一个标记：在目标位置添加一个id属性，创建一个锚点。

示例：
html ¨K130K

跳转到标记：在链接中使用#加上标记的id，让用户瞬间移动到目标位置。

示例：
html <a href="#section1">跳转到第一部分</a>

功能性链接

邮件链接：创建一个链接，用户点击后可以直接发送邮件。它的语法是mailto:加上电子邮件地址。
示例：
html <a href="mailto:example@example.com">发送邮件给我</a>

行内元素和块元素

块元素
无论内容多少，该元素独占一行
比如：<b>,<h2>
行内元素
内容撑开宽度，左右都是行内元素的可以排在一行
比如：<a>,<strong>,<em>

列表

列表就像是网页上的有序队伍，让内容更整齐、更易读。无论是清单、步骤还是项目，都可以使用列表来呈现。让我们一起来看看HTML中常用的几种列表标签！

有序列表

有序列表使用<ol>标签，通常用于需要显示顺序的项目，比如步骤或排名。每个列表项用<li>标签表示，浏览器会自动为每个项添加序号。

示例：

  <ol>
      <li>第一步：打开网页</li>
      <li>第二步：点击链接</li>
      <li>第三步：享受内容</li>
  </ol>

效果：
第一步：打开网页
第二步：点击链接
第三步：享受内容

无序列表

无序列表使用<ul>标签，适合没有特定顺序的项目，如购物清单或特性列表。每个列表项同样用<li>标签表示，浏览器会用圆点（或其他样式）来标记每一项。

示例：

  <ul>
      <li>苹果</li>
      <li>香蕉</li>
      <li>橙子</li>
  </ul>

效果：
苹果
香蕉
橙子

自定义列表

自定义列表（或称为定义列表）使用<dl>标签，可以让你创建一个术语和描述的列表。每个项目由<dt>（定义术语）和<dd>（定义描述）组成。

示例：

  <dl>
      <dt>HTML</dt>
      <dd>超文本标记语言，用于创建网页。</dd>
      <dt>CSS</dt>
      <dd>层叠样式表，用于样式化网页内容。</dd>
  </dl>

效果：
HTML
超文本标记语言，用于创建网页。
CSS
层叠样式表，用于样式化网页内容。

表格

table标签（Table Tag）：
作用：用于创建表格，简直就是网页中的“餐桌”，让数据有了一个合适的聚会场所。
使用方法：

  <table>
      <!-- 表头 -->
      <thead>
          <tr>
              <th>表头1</th>
              <th>表头2</th>
          </tr>
      </thead>
      <!-- 表体 -->
      <tbody>
          <tr>
              <td>数据1</td>
              <td>数据2</td>
          </tr>
      </tbody>
  </table>

border属性（Border Attribute）：
为什么我的Webstorm显示这个属性已经废弃？因为HTML5大军已经不再支持它了，咱们得用CSS来给表格加边框！比如：

  table {
      border: 1px solid black; /* 给表格加个边框 */
      border-collapse: collapse; /* 合并边框，让它看起来不那么拥挤 */
  }
  td, th {
      border: 1px solid black; /* 给单元格加边框 */
  }

tr标签（Table Row Tag）：
作用：用于定义表格中的一行，犹如一支舞队，带领单元格们一起跳舞。
使用方法：

  <tr>
      <td>单元格1</td>
      <td>单元格2</td>
  </tr>

td标签（Table Data Tag）：
作用：用于定义表格中的数据单元格，是你展示信息的最佳小助手。
td属性colspan（Column Span）：
作用：让一个单元格横跨多个列，简直是表格界的“跨界明星”。
使用方法： <td colspan="2">这单元格跨越了两列</td>
td属性rowspan（Row Span）：
作用：让一个单元格纵跨多个行，成为了表格的“高个子”。
使用方法：
html <td rowspan="2">这单元格跨越了两行</td>

视频和音频

视频 (video)

video标签（video tag）：
功能：用于在网页中嵌入视频，犹如给你的网页装上一个电影院。
使用示例：

  <video src="your-video.mp4" controls autoplay>
      你的浏览器不支持视频播放。
  </video>

src属性（source attribute）：
资源路径，告诉浏览器视频在哪儿，类似于指路牌，让它找到合适的“电影院”。
示例：

  <video src="movie.mp4" controls></video>

controls属性（controls attribute）：
加上这个属性，视频播放控件就会出现，不然视频就会“沉默寡言”，看不见任何控制条。
示例：

  <video src="movie.mp4" controls></video>

autoplay属性（autoplay attribute）：
自动播放，用户打开页面时视频就开始放映，不用点击“播放”按钮，简直像个急性子！
示例：

  <video src="movie.mp4" controls autoplay></video>

音频 (audio)

audio标签（audio tag）：
功能：用于在网页中嵌入音频，给网页加上“音乐背景”，让你的用户不再孤单。
使用示例：

  <audio src="your-audio.mp3" controls autoplay>
      你的浏览器不支持音频播放。
  </audio>

src属性（source attribute）：
资源路径，指定音频文件的位置，就像把音频“请”到你的网站。
示例： <audio src="music.mp3" controls></audio>
controls属性（controls attribute）：
音频控制条，让用户能暂停、播放、调整音量，绝对不能让音频单方面“独白”。
示例： <audio src="music.mp3" controls></audio>
autoplay属性（autoplay attribute）：
自动播放，用户打开网页时音频就开始播放，仿佛是在说“欢迎光临，我已经为你准备好了音乐”。
示例：
“`html “`

页面结构分析

header（标题头部区域）：
功能：用于定义网页的头部内容，就像网页的“招牌”，告诉用户这里是什么。常用来放置网站标题、标志和导航链接。
使用示例：

  <header>
      <h1>欢迎来到我的网站！</h1>
      <nav>
          <ul>
              <li><a href="#home">首页</a></li>
              <li><a href="#about">关于我们</a></li>
          </ul>
      </nav>
  </header>

footer（标记脚部区域）：
功能：用于定义网页的底部内容，像是网站的“签名”，包含版权信息和联系信息。
使用示例：

  <footer>
      <p>© 2024 我的公司. 保留所有权利。</p>
      <p>联系方式：info@example.com</p>
  </footer>

section（独立区域）：
功能：用于定义文档中的独立区域，常用于分隔内容，使其更有层次感，就像为网页设置的“房间”。
使用示例：

  <section>
      <h2>我的兴趣爱好</h2>
      <p>我喜欢编程、旅行和美食。</p>
  </section>

article（独立的文章内容）：
功能：用于封装独立的文章或内容，便于在网页中重用，像是网页中的“新闻快报”。
使用示例：

  <article>
      <h2>最新科技新闻</h2>
      <p>科学家发现了一种新的可再生能源！</p>
  </article>

aside（相关内容或应用）：
功能：用于定义与主内容相关的内容，通常放置在侧边栏，像是“旁白”，补充说明主内容。
使用示例：

  <aside>
      <h2>相关文章</h2>
      <ul>
          <li><a href="#article1">如何选择编程语言</a></li>
          <li><a href="#article2">科技趋势2024</a></li>
      </ul>
  </aside>

nav（导航类辅助内容）：
功能：用于定义导航链接，帮助用户在网页中轻松“航行”，就像地图一样，指引方向。
使用示例：

  <nav>
      <ul>
          <li><a href="#home">首页</a></li>
          <li><a href="#services">服务</a></li>
          <li><a href="#contact">联系我</a></li>
      </ul>
  </nav>

iframe内联框架

iframe内联框架介绍：
iframe，即“内联框架”，是网页中嵌入另一个网页的“窗口”，就像在一个房间里开了一个小窗户，透过它可以看到外面的世界。

iframe作用：
它的主要作用是将其他网页或资源嵌入到当前页面，用户无需离开当前页面就能浏览其他内容，简直就是网页的“多任务处理高手”。

格式：

<iframe src="" name=""></iframe>

iframe标签（iframe tag）：
功能：用于创建内联框架，帮助在网页中显示另一个网页的内容。
使用示例：

  <iframe src="https://www.example.com" name="myIframe"></iframe>

src属性（source attribute）：
作用：指定要加载的文档的URL，就像告诉框架“请看这里！”。
示例： <iframe src="https://www.example.com"></iframe>
name属性（name attribute）：
作用：为iframe指定一个名称，可以用来在链接中引用这个框架，犹如给它起个昵称，让别人知道怎么叫它。
示例： <iframe src="https://www.example.com" name="myIframe"></iframe>
width属性（宽度属性）：
作用：设置iframe的宽度，可以是像素值或百分比，让它有个合适的“衣服”穿上。
示例： <iframe src="https://www.example.com" width="600"></iframe>
height属性（高度属性）：
作用：设置iframe的高度，让它看起来更“高大上”，不至于显得过于局促。
示例：
“`html https://www.example.com/ “`

表单（重点）

表单是做什么用的？
表单是网页和用户之间的“对话窗口”，用户可以通过它提交信息，犹如在网上填写一张申请表。

表单的作用：

收集用户输入的信息，例如注册、登录、评论等，简直是信息收集的小能手。
通过表单，网站可以与用户互动，使得网页不再是冰冷的展示，而是充满活力的交流平台。

表单语法

格式示例：

<form method="post" action="result.html">
  <!--标签内容-->
  <p>名字：<input type="text" name="name"></p>
  <p>密码：<input type="password" name="pass"></p>
  <p>
      <input type="submit" name="Botton" value="提交">
      <input type="reset" name="Reset" value="重填">
  </p>
</form>

具体用法：

form标签（form tag）：
功能：定义一个表单，犹如给你的一份问卷加上封面。
示例：

  <form method="post" action="result.html">
      <!-- 表单内容 -->
  </form>

method（必填）属性（method attribute）：
作用：指定表单数据如何发送。
- 常用值——post: 比较安全，数据不在URL中显示，适合传输敏感信息或大文件，就像给你寄信不留痕迹。
- 常用值——get: 高效但不安全，数据会明文显示在URL中，适合小量信息的快速传输，就像把纸条塞进信箱，别人也能看到。
action（必填）属性（action attribute）：
作用：表示向何处传送表单数据，可以是另一个页面或请求，就像告诉表单“你要去哪里”。
示例： <form method="post" action="result.html">
input标签（input tag）：
功能：用于创建用户输入的字段，收集信息，犹如给用户一个小纸条填写。
type属性（type attribute）：
作用：定义输入字段的类型，决定用户能输入什么。常用值：
- text: 一行文本输入框，适合输入名字、城市等。
- password: 密码输入框，输入的字符会被隐藏。
- email: 输入电子邮件地址，浏览器会进行基本格式验证。
- number: 数字输入框，用户只能输入数字。
- checkbox: 复选框，允许用户选择一个或多个选项。
- radio: 单选框，用户只能在一组选项中选择一个。
- submit: 提交按钮，点击后提交表单。
- reset: 重置按钮，清空表单内容。
示例： <input type="text" name="name">
name属性（name attribute）：
作用：为输入字段指定一个名称，用于标识提交的数据，就像给每个输入框起个名字，以便于后端处理。
常用值：
- name: 用户的名字。
- email: 用户的电子邮件。
- pass: 用户的密码。
- age: 用户的年龄。
示例： <input type="text" name="name">
value属性（value attribute）：
作用：设置输入字段的默认初始值。当页面加载时，如果希望输入框里有预填内容，可以使用此属性。
示例： <input type="text" name="name" value="请输入姓名">
maxlength属性（maxlength attribute）：
作用：限制用户在文本框中输入的最大字符数，确保他们不会输入超出规定范围的内容。
示例： <input type="text" name="name" maxlength="20">
size属性（size attribute）：
作用：定义文本框的可见长度，以字符数为单位，影响文本框的宽度。
示例： <input type="text" name="name" size="30">
id属性（id attribute）：
作用：为输入字段指定一个唯一的标识符，可以在JavaScript中引用，也可用于与标签关联。用户点击标签时，会自动选中对应的输入框。
示例：
html <label for="name">名字：</label> <input type="text" name="name" id="name">

文本框、单选框和多选框

文本框介绍：
文本框是用户输入信息的基本工具，就像是给用户一支笔和一张纸，让他们可以自由书写。

文本框示例：

<p>请输入您的名字：</p>
<input type="text" name="username">

文本框使用格式：

input标签（input tag）：
功能：创建一个输入字段，让用户可以填写信息。
type属性（type attribute）：
作用：指定输入框的类型，选择text（如果不写，默认也是text）。
示例： <input type="text" name="username">
其他必要属性和常用属性：
- name属性（name attribute）：用于标识输入数据的名称，提交后可以通过这个名称获取数据。
  示例：
  html <input type="text" name="username">
- placeholder属性（placeholder attribute）：在输入框中显示提示文字，帮助用户知道应该输入什么内容。
  示例：
  html <input type="text" name="username" placeholder="请输入用户名">
- required属性（required attribute）：指示输入框为必填项，用户必须填写才能提交表单。
  示例：
  html <input type="text" name="username" required>

单选框介绍：
单选框是让用户从一组选项中选择一个的工具，仿佛在参加一场“只选一个”的投票活动。

单选框示例：

<p>性别：
    <input type="radio" name="sex" id="男" value="boy">男
    <input type="radio" name="sex" id="女" value="girl">女
</p>

id属性和value属性的区别：

id属性（id attribute）：为每个单选框设置唯一的标识符，可以用来引用或与标签关联。用户点击标签时，可以选中对应的单选框。
value属性（value attribute）：设置单选框提交时传递的值，标识用户选择的选项。例如，如果用户选择“男”，提交的值就是boy。
input标签（input tag）：
功能：创建单选框，让用户选择一个选项。
name属性（name attribute）：表示分组，只有在同一组的单选框才能生效，不在一组的单选框无法实现单选。
示例： <input type="radio" name="sex" value="boy">男 <input type="radio" name="sex" value="girl">女
其他必要属性和常用属性：
- checked属性（checked attribute）：设置单选框的默认选中状态，让某个选项在页面加载时自动被选中。
  示例：
  html <input type="radio" name="sex" value="boy" checked>男

多选框介绍：
多选框允许用户从多个选项中选择一个或多个，就像在自助餐中，随便挑选你喜欢的食物。

多选框示例：

<p>您喜欢的水果：
    <input type="checkbox" name="fruit" value="apple">苹果
    <input type="checkbox" name="fruit" value="banana">香蕉
    <input type="checkbox" name="fruit" value="orange">橙子
</p>

input标签（input tag）：
功能：创建多选框，让用户可以选择多个选项。
name属性（name attribute）：用于标识每个多选框的名称，提交时可以通过这个名称获取所有选择的值。
value属性（value attribute）：设置多选框提交时传递的值，标识用户选择的选项。
checked属性（checked attribute）：设置多选框的默认选中状态，让某个选项在页面加载时自动被选中。
示例：
html <input type="checkbox" name="fruit" value="apple" checked>苹果

按钮

按钮是一种用户界面元素，允许用户与网页交互，就像按下门铃一样。常见的按钮有多种类型，每种按钮都有其独特的用途和效果。

按钮示例：

<p>
    <input type="button" value="more" name="button1">
    <input type="image" src="../resources/images/最爱宵宫/Yoimiya_Blacqkl%20(1).jpg" alt="老婆" height="400" width="600">
    <input type="submit" value="提交" name="Button">
    <input type="reset" value="重填" name="Button">
</p>

普通按钮（Button）

input标签（input tag）：
type属性（type attribute）：
- button: 定义一个普通按钮，点击后可通过JavaScript执行某些操作，但不会提交表单。
value属性（value attribute）：按钮上显示的文本。示例：

  <input type="button" value="点击我" name="button1">

图像按钮（Image Button）

input标签（input tag）：
type属性（type attribute）：
- image: 定义一个图像按钮，用户点击图像时可触发表单的提交。
src属性（src attribute）：按钮上显示的图像的URL。
alt属性（alt attribute）：提供图像无法显示时的替代文本。
height属性（height attribute）和width属性（width attribute）：定义图像的显示尺寸。示例：

  <input type="image" src="path/to/image.jpg" alt="点击我" height="100" width="200">

提交按钮（Submit Button）

input标签（input tag）：
type属性（type attribute）：
- submit: 定义一个提交按钮，点击后会提交表单数据到指定的action地址。
value属性（value attribute）：按钮上显示的文本。示例：

  <input type="submit" value="提交" name="submitButton">

重置按钮（Reset Button）

input标签（input tag）：
type属性（type attribute）：
- reset: 定义一个重置按钮，点击后会清空表单中的所有输入内容，恢复到默认状态。
value属性（value attribute）：按钮上显示的文本。示例：

  <input type="reset" value="重填" name="resetButton">

下拉框、文本域和文件域

下拉框（Select）

下拉框就像一个神秘的箱子，用户可以从中选择一个选项，但箱子外表看上去并不显眼。它常用于让用户选择一个值，而不是让他们自己输入（防止意外拼写错误，呵呵）。

下拉框示例：

<select name="列表名称·国家" id="country">
    <option value="China">中国</option>
    <option value="USA">美国</option>
    <option value="Korean">韩国</option>
    <option value="Japan">日本</option>
    <option value="English">英国</option>
    <option value="Germany">德国</option>
</select>

select标签（select tag）：
name属性（name attribute）：定义提交数据的名称。
id属性（id attribute）：用于标识该下拉框，便于JavaScript或CSS引用。
multiple属性（multiple attribute）：允许用户选择多个选项（默认为单选）。
option标签（option tag）：
value属性（value attribute）：定义选项的值，当表单提交时会发送这个值。
selected属性（selected attribute）：使该选项在下拉框中默认被选中。

示例：

<select name="国家" id="country" multiple>
    <option value="China">中国</option>
    <option value="USA" selected>美国</option>
    <option value="Korean">韩国</option>
</select>

文本域（Textarea）

文本域就像一块空白的画布，用户可以在上面尽情书写，适合用于输入较长的文本信息，比如反馈、评论或是你的小秘密（不过请别告诉别人哦）。

文本域示例：

<p>反馈：<br>
    <textarea name="反馈数据" id="feedback" cols="30" rows="10">文本内容</textarea>
</p>

textarea标签（textarea tag）：
name属性（name attribute）：定义提交数据的名称。
id属性（id attribute）：用于标识该文本域。
cols属性（cols attribute）：定义文本域的列数，控制宽度。
rows属性（rows attribute）：定义文本域的行数，控制高度。
placeholder属性（placeholder attribute）：在文本域为空时显示提示信息。

示例：

<textarea name="反馈数据" id="feedback" cols="30" rows="10" placeholder="请输入您的反馈..."></textarea>

文件域（File Input）

文件域就像一扇窗户，用户可以通过它把文件上传到服务器。很方便，但也要小心，上传的文件不要是外星人发来的哦！

文件域示例：

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

input标签（input tag）：
type属性（type attribute）：
- file: 定义为文件选择域，允许用户选择本地文件。
name属性（name attribute）：定义提交文件数据的名称。
id属性（id attribute）：用于标识该文件域。
accept属性（accept attribute）：指定可以上传的文件类型（如.jpg, .png）。

示例：

<input type="file" name="files" id="fileInput" accept=".jpg, .png">

input标签的其他应用：邮件验证，URL验证，数字验证，滑块，搜索框

邮件验证（Email Validation）

邮件验证是为了确保用户输入的电子邮件地址格式正确，避免输入错误（比如把自己给“寄”了）。

示例：

<p>请输入email:
    <input type="email" name="email" id="1" required>
</p>

input标签（input tag）：
type属性（type attribute）：email，用于输入电子邮件地址，浏览器会自动进行基本格式验证。
name属性（name attribute）：定义提交数据的名称。
id属性（id attribute）：用于标识该输入框。
required属性（required attribute）：确保该字段在提交表单时必须填写。

URL验证（URL Validation）

URL验证确保用户输入的地址格式是有效的，帮助用户避免链接“走失”。

示例：

<p>请输入网址：
    <input type="url" name="url" id="2" required>
</p>

input标签（input tag）：
type属性（type attribute）：url，用于输入网页地址，浏览器会自动进行基本格式验证。
name属性（name attribute）：定义提交数据的名称。
id属性（id attribute）：用于标识该输入框。
required属性（required attribute）：确保该字段在提交表单时必须填写。

数字验证（Number Validation）

数字验证允许用户输入数值，并可以设置范围，确保输入合理。

示例：

<p>请输入数字
    <input type="number" name="number" id="3" max="100" min="1" step="1" required>
</p>

input标签（input tag）：
type属性（type attribute）：number，用于输入数字。
max属性（max attribute）：设置可以输入的最大值。
min属性（min attribute）：设置可以输入的最小值。
step属性（step attribute）：定义数字的增量（例如，1表示只能输入整数）。
name属性（name attribute）：定义提交数据的名称。
id属性（id attribute）：用于标识该输入框。
required属性（required attribute）：确保该字段在提交表单时必须填写。

滑块（Range Slider）

滑块是一种可视化的输入方式，允许用户通过滑动条选择数值，方便又直观。

示例：

<p>
    <input type="range" name="滑块" id="4" min="0" max="100" step="1">
</p>

input标签（input tag）：
type属性（type attribute）：range，用于创建滑块输入。
min属性（min attribute）：设置滑块的最小值。
max属性（max attribute）：设置滑块的最大值。
step属性（step attribute）：定义滑块的增量。
name属性（name attribute）：定义提交数据的名称。
id属性（id attribute）：用于标识该滑块。

搜索框（Search Box）

搜索框提供了一种简单的方式，让用户可以输入搜索关键词，帮助找到所需信息。

示例：

<p>
    <input type="search" name="搜索框" id="5" placeholder="搜索...">
</p>

input标签（input tag）：
type属性（type attribute）：search，用于输入搜索关键词，浏览器通常会为其提供一些特定的样式和功能。
name属性（name attribute）：定义提交数据的名称。
id属性（id attribute）：用于标识该搜索框。
placeholder属性（placeholder attribute）：在输入框为空时显示提示信息，引导用户输入。

表单的应用

隐藏域（Hidden Field）

隐藏域是一种不直接展示给用户的输入框，但仍能在表单提交时发送数据。就像表单里的秘密，不想让人看到却又必须存在。

示例：

<input type="hidden" name="user_id" value="12345">

input标签（input tag）：
type属性（type attribute）：hidden，用于创建隐藏域。
name属性（name attribute）：定义提交数据的名称，后端可以根据这个名称获取相应的值。
value属性（value attribute）：设置该隐藏域的值，用户无法看到但会被提交。

常用属性

禁用属性（disabled）：
作用：使输入字段无法被用户操作，用户不能输入或选择任何内容。相当于给输入框加了一个“请勿打扰”的标志。示例：

  <input type="text" name="username" disabled value="用户不可编辑">

只读属性（readonly）：
作用：使输入字段只能查看，用户无法修改，但可以选择并复制内容。这就像你在看一本书，想抄却不想改动里面的内容。示例：

  <input type="text" name="email" readonly value="example@example.com">

增强鼠标可用性（Enhancing Mouse Usability）

label标签（label tag）：
作用：为输入字段创建一个可点击的标签，提升用户体验。当用户点击标签时，焦点会自动转移到相应的输入框，这样就能节省用户移动鼠标的时间。示例：

  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">

在这个示例中，用户点击“用户名”这个标签，光标会跳到“用户名”输入框，简直是个小贴心的设计！

表单的初级验证

验证的目的：

降低错误信息占用服务器资源：通过在用户提交数据前进行验证，可以有效减少无效请求，节省服务器资源。
保证数据的安全性：确保用户输入的数据符合预期，从而提高数据的安全性，避免潜在的安全风险。

常用方式：

placeholder（占位符）：

作用：在输入框中显示提示信息，告诉用户应该输入什么内容。就像在纸上写“请在此填写”，让用户不再迷茫。
用法：
html <input type="text" name="username" placeholder="请输入用户名">
这里，当输入框为空时，用户会看到“请输入用户名”这条信息，输入后会消失。

required（必填）：

作用：标记输入字段为必填项，用户必须填写该字段才能提交表单，避免空白提交。好比说，“不交作业，你就别想出门”。
用法：
html <input type="text" name="email" required placeholder="请输入邮箱">
如果用户尝试提交表单而未填写邮箱，浏览器会自动提示用户。

pattern（正则表达式）：

作用：通过正则表达式来限制输入内容的格式，确保用户输入符合特定规则。就像是在门口设置了“只允许某种鞋子进来”的标志。
用法：
html <input type="text" name="phone" pattern="\d{10}" placeholder="请输入10位电话号码">
在这个示例中，用户必须输入一个10位的数字电话号码，若输入不符合规则，表单将不会提交。

min/max（最小值/最大值）：

作用：用于数字输入字段，限制用户输入的数值范围，确保数据的有效性。
用法：
html <input type="number" name="age" min="1" max="100" required>
用户必须输入一个在1到100之间的数字，超出范围则无法提交。

初始HTML5

什么是HTML语言？

W3C标准

HTML基本结构：

网页头部

主体部分

网页基本信息

头部

主体部分

网页的基本标签

图像标签

图片标签的属性

使用示例

链接标签

<a> 标签

属性

锚链接

功能性链接

行内元素和块元素

列表

有序列表

无序列表

自定义列表

表格

视频和音频

视频 (video)

音频 (audio)

页面结构分析

iframe内联框架

表单（重点）

表单语法

文本框、单选框和多选框

按钮

普通按钮（Button）

图像按钮（Image Button）

提交按钮（Submit Button）

重置按钮（Reset Button）

下拉框、文本域和文件域

下拉框（Select）

文本域（Textarea）

文件域（File Input）

input标签的其他应用：邮件验证，URL验证，数字验证，滑块，搜索框

邮件验证（Email Validation）

URL验证（URL Validation）

数字验证（Number Validation）

滑块（Range Slider）

搜索框（Search Box）

表单的应用

隐藏域（Hidden Field）

常用属性

增强鼠标可用性（Enhancing Mouse Usability）

表单的初级验证

验证的目的：

常用方式：

发送评论 编辑评论

推荐文章

`<a>` 标签

发送评论编辑评论