HTML5入门学习

发布于：2025-08-29 ⋅ 阅读:(20) ⋅ 点赞:(0)

一、初始HTML

定义

        HTML（超文本标记语言）是用于创建和设计网页的标准标记语言。它通过标签（如 <p>, <h1>, <a> 等）定义网页内容的结构和语义，如文本段落、标题、链接等。HTML 是网页的基础，与 CSS（样式）和 JavaScript（交互）共同构建现代网页。超文本包括文字图片、音频、视频、动画等。目前网页常用的是HTML5，HTML5提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。

优势

1、语义化标签

HTML5 引入了更丰富的语义化标签​（如 <header>, <footer>, <article>, <section>, <nav>），使网页结构更清晰，对 SEO（搜索引擎优化）和屏幕阅读器更友好。

如：

<header>网页头部</header>

<nav>导航栏</nav>

<article>主要内容</article>

<aside>侧边栏</aside>

<footer>底部信息</footer>

2、原生多媒体支持

无需依赖 Flash 等插件，直接通过标签嵌入音视频：

<video>：嵌入视频（支持 MP4、WebM 等格式）

<audio>：嵌入音频（支持 MP3、WAV 等格式）

如：

<video controls>

  <source src="video.mp4" type="video/mp4">

</video>

W3C标准

W3C标准 是由 万维网联盟（World Wide Web Consortium, W3C）制定和维护的国际化技术规范，旨在确保 Web 技术的一致性和互操作性，使不同浏览器、设备和应用能无缝协作。

W3C标准包括：

①结构化标准语言(HTML、XML)

②表现标准语言(CSS)

③行为标准(DOM、ECMAScript）

二、网页基本信息

HTML 文档分为两部分：​**<head>（头部）** 和 ​**<body>（主体）**，二者分工明确：

​ <head>：存放元信息（metadata），用于描述网页属性（如标题、编码、SEO 信息等）。

​ <body>：存放可见内容 ---（如文本、图片、链接等），由浏览器渲染并展示给用户。

<meta> 标签的作用：

<meta> 标签是 <head> 中的核心元素，用于定义不可见的网页元数据，例如：

​字符编码：<meta charset="UTF-8">

​关键词：<meta name="keywords" content="...">

​描述：<meta name="description" content="...">

​移动端适配：<meta name="viewport" content="...">

这些信息的主要使用者是 浏览器 和 搜索引擎爬虫，而非普通用户。

三、网页基本标签

标题标签（Heading Tags）​

​作用：定义标题层级（<h1> 到 <h6>），<h1> 级别最高，一个页面建议仅一个 <h1>，用于主标题。

​示例：

<h1>主标题（通常用于页面核心标题）</h1>

<h2>二级标题（用于章节标题）</h2>

<h3>三级标题（子章节）</h3>

<!-- 依此类推至 h6 -->

段落标签（Paragraph Tag）​

作用：定义文本段落，自动换行并添加段落间距。

示例：

<p>这是一个段落，用于包裹多行文本。浏览器会自动在段落前后添加空白间距。</p>

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

换行标签（Line Break Tag）​

​作用：强制文本换行，无需闭合标签（自闭合标签）。

​示例：

<p>第一行文本<br>第二行文本<br>第三行文本</p>

水平线标签（Horizontal Rule Tag）​

​作用：插入一条水平分隔线，语义化表示内容分隔。

​示例：

<h2>章节标题</h2>

<hr>

<p>分隔线下方的段落内容...</p>

字体样式标签（Text Formatting Tags）

注释与特殊符号

注释

​作用：添加代码说明，不渲染到页面。

​语法：<!-- 注释内容 -->

​示例：

<!-- 这是一个注释，不会显示在浏览器中 -->

<p>可见内容</p>

特殊符号

​需转义字符：使用 实体名称（Entity Name）或 实体编号。

​常见符号：

完整实例:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 移动端适配（建议添加） -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 关键词 -->
    <meta name="keywords" content="狂神说Java, 西部开源">
    <!-- 网页描述 -->
    <meta name="description" content="来这个地方可以学习Java">
    <!-- 标题 -->
    <title>网页基本标签学习</title>
</head>
<body>
    Hello, World!
	
	<!-- 标题标签（Heading Tags） -->
	<hr>
	<br>标题标签（Heading Tags）
	<h1>主标题（通常用于页面核心标题）</h1>
	<h2>二级标题（用于章节标题）</h2>
	<h3>三级标题（子章节）</h3>
	<!-- 依此类推至 h6 -->
	
	
	<!-- 段落标签（Paragraph Tag）​ -->
	<hr>
	<br>段落标签（Paragraph Tag）
	<p>这是一个段落，用于包裹多行文本。浏览器会自动在段落前后添加空白间距。</p>
	<p>这是另一个段落。</p>
	
	<!-- 换行标签（Line Break Tag）​ -->
	<hr>
	<br>换行标签（Line Break Tag）​
	<p>第一行文本<br>第二行文本<br>第三行文本</p>
	
	<!-- 水平线标签（Horizontal Rule Tag）​​ -->
	<hr>
	<br>水平线标签（Horizontal Rule Tag）
	<h2>章节标题</h2>
	<hr>
	<p>分隔线下方的段落内容...</p>
	
	<!-- 字体样式标签（Text Formatting Tags）​​​ -->
	<hr>
	<br>字体样式标签（Text Formatting Tags）<br>
	<strong>警告！</strong><br>
	<em>请注意</em><br>
	<u>需要重点标注</u><br>
	<code>print("Hello")</code><br>
	
	<!-- 特殊符号​​​ -->
	<hr>
	<br>特殊符号
	<p>3 &lt; 5</p>
	<p>5 &gt; 3</p>
	连续&nbsp;&nbsp;空格<br>
	版权所有&copy;2023<br>
	价格：&yen;100<br>
	
</body>
</html>

输出：

四、图像标签 <img>

图像标签 <img> 是 HTML 中用于嵌入图片的核心标签，无需闭合（自闭合标签）。

<img 
  src="图片地址" 
  alt="替代文字" 
  title="悬停提示文字" 
  width="宽度" 
  height="高度"
>

>常见的图像格式

        >JPG

        >GIF

        >PNG

        >BMP(位图)--->画图软件生成的

完整实例:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 移动端适配（建议添加） -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 标题 -->
    <title>图像标签学习</title>
</head>
<body>
	<img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100">
</body>
</html>

现象：

五、超链接标签<a> </a>

基础语法

<a 
  href="链接地址" 
  target="打开方式" _self(本页跳转)/_blank(下一页跳转)
  title="悬停提示" 
  rel="关联说明"  "nofollow"（告知搜索引擎不追踪） /  "noopener"（防钓鱼攻击）
>链接文本或图像</a>

类型

完整示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>超链接标签学习</title>
</head>
<body>
	<h2 id="top">首页</h2><br>
    <!-- 1. 页面间链接 -->
    <a href="https://www.baidu.com" title="关于我们" rel="noopener">跳转到关于页</a><br> <!-- 本页跳转 -->
    <a href="https://github.com" target="_blank" rel="noopener">GitHub（新标签页打开）</a><br><!-- 下一页跳转 -->
	<a href="https://www.csdn.net/" target="_blank" rel="noopener"><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a><br>

    <!-- 2. 锚链接 -->
    <a href="#contact">底部</a>
    <p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 -->
	<p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 -->
	<p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 -->
	<p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 -->
	<p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 -->
	<p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 -->
	<p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 -->
	<p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 -->
	<p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 -->
	<p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 -->
	<p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 -->
	<p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 -->
	<p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 -->
	<p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 -->
	<p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 -->
	<p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 -->
	<p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 -->
	<p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 -->
	<p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 -->
	<p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 -->
	<p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 -->
	<p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 -->
	<p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 -->
	<p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 -->
    <h2 id="contact">联系方式</h2>
    <p>邮箱：contact@example.com</p>
	
	<a href="#top">顶部</a><br>

    <!-- 3. 功能性链接 ①邮件链接：mailto ②QQ链接：QQ推广 ③电话链接：tel ④下载文件链接-->
    <a href="mailto:contact@example.com">发送邮件</a>
    <a href="tel:400-123-4567">拨打电话</a>
    <a href="document.pdf" download>下载文件</a>
</body>
</html>

显示过长，省略

六、列表标签

        列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息，以下是核心列表类型：

无序列表（Unordered List）

表示无顺序关系的项目列表（默认符号为圆点）

标签结构：<ul>（父标签） + <li>（子标签）​

有序列表（Ordered List）

表示有顺序或步骤的列表（默认符号为数字）

标签结构：<ol>（父标签） + <li>（子标签）

定义列表（Definition List）​

表示术语及其描述的成对内容

标签结构：<dl>（父标签） + <dt>（术语） + <dd>（描述）

完整示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>列表标签学习</title>
</head>
<body>

	<!-- 无序列表（Unordered List） -->
	无序列表（Unordered List）<br>
	<ul>
	  <li>C/C++</li>
	  <li>MCU</li>
	  <li>LINUX</li>
	  <li>HTML</li>
	</ul>
	
	<hr>
	<!-- 有序列表（Ordered List） -->
	有序列表（Ordered List）<br>
	<ol>
	  <li>第一步：准备材料</li>
	  <li>第二步：搅拌混合</li>
	  <li>第三步：放入烤箱</li>
	</ol>
	
	<hr>
	<!-- 定义列表（Definition List） -->
	定义列表（Definition List）<br>
	<dl>
	  <dt>HTML</dt>
	  <dd>超文本标记语言，用于构建网页结构。</dd>
	  <dt>CSS</dt>
      <dd>层叠样式表，用于设计页面视觉效果。</dd>
	</dl>
	
</body>
</html>

输出：

七、表格标签

核心标签

跨行跨列属性

border 属性

功能：控制表格及其单元格的边框显示。

使用场景：在 <table> 标签中直接添加 border 属性，快速为表格添加基础边框。

border 属性的局限性：

·仅支持简单数值：

border="1" 表示边框宽度为 1 像素，无法设置颜色、样式（如虚线）。

更高数值（如 border="5"）仅增加边框宽度，视觉效果粗糙。

·默认双线边框：

浏览器会为表格和单元格分别渲染边框，导致相邻边框重叠（双线效果）。

完整示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表格标签学习</title>
</head>
<body>

	<table border="1">
      <!-- 跨列标题 -->
	  <tr>
		<th colspan="2">学生信息</th>
		<th colspan="2">成绩</th>
	  </tr>
	  
	  <!-- 子标题 -->
	  <tr>
		<th>姓名</th>
		<th>班级</th>
		<th>语文</th>
		<th>数学</th>
	  </tr>
	  
	  <!-- 跨行数据 -->
	  <tr>
		<td>大神</td>
		<td rowspan="2">1班</td>
		<td>100</td>
		<td>100</td>
	  </tr>
	  
	  <tr>
		<td>秦疆</td>
		<!-- 因上一行已合并，此行省略班级单元格 -->
		<td>100</td>
		<td>100</td>
	  </tr>
	  
	  	  <!-- 跨行数据 -->
	  <tr>
		<td>萨达</td>
		<td rowspan="2">2班</td>
		<td>100</td>
		<td>100</td>
	  </tr>
	  
	  <tr>
		<td>飒飒</td>
		<!-- 因上一行已合并，此行省略班级单元格 -->
		<td>100</td>
		<td>100</td>
	  </tr>
	</table>
	
</body>
</html>

输出：

八、媒体元素

视频元素 <video>

核心属性

示例：

 <video src="https://www.bilibili.com/video/BV1me411A7Hk?spm_id_from=333.788.player.player_end_recommend_autoplay&vd_source=8590d26084376f4c47d30270c0ebda52o8590d26084376f4c47d30270c0ebda52" controls autoplay loop poster="C:\Users\Administrator\Desktop\eye.jpeg"> </video>

音频元素 <audio>

核心属性

与 <video> 类似，支持 controls、autoplay、loop，但不支持宽高和封面设置。

示例：

<audio  src="E:\RECORD\R20250322-101812.WAV" controls autoplay> </audio>

九、网页结构分析

语义化标签：

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>网页分析学习</title>
</head>
<body>
    <!-- 全局页眉 -->
    <header>
        <h1>技术博客</h1>
        <nav>
            <a href="/">首页</a>
            <a href="/tutorial">教程</a>
        </nav>
    </header>

    <!-- 主体内容 -->
    <main>
        <!-- 独立文章 -->
        <article>
            <header>
                <h2>HTML5语义化指南</h2>
                <p>发布日期：2023-10-01</p>
            </header>
            <section>
                <h3>什么是语义化标签？</h3>
                <p>语义化标签让代码更易读...</p>
            </section>
            <footer>
                <p>作者：技术达人</p>
            </footer>
        </article>

        <!-- 侧边栏 -->
        <aside>
            <h3>推荐阅读</h3>
            <ul>
                <li><a href="#">CSS布局技巧</a></li>
            </ul>
        </aside>
    </main>

    <!-- 全局页脚 -->
    <footer>
        <p>© 2023 技术博客</p>
    </footer>
</body>
</html>

输出：

十、iframe内联框架

   iframe（Inline Frame，内联框架）是 HTML 中的一个核心元素，用于在当前 HTML 文档中嵌入另一个独立的 HTML 文档（可来自同一域名或不同域名），实现 “页面嵌套页面” 的效果。它本质上创建了一个独立的浏览上下文，嵌套的文档拥有自己的 DOM、CSS 样式表、JavaScript 执行环境，与父文档的环境相互隔离（受浏览器安全策略限制）。

<!-- 修正后代码 -->

<iframe

  src=""

  name="hello"

  frameborder="0"

  width="800px"

  height="600px">

</iframe>

<a href="https://blog.kuangstudy.com" target="hello">点击跳转</a>

**<a> 标签的联动**

点击链接时，target="hello" 会指示浏览器在 name="hello" 的 <iframe> 中打开 href 指定的 URL。

结果：点击链接后，https://blog.kuangstudy.com 的内容将显示在 <iframe> 内，而非新窗口。

随着前端技术发展，部分场景下 iframe 可被更轻量的方案替代：

  • 嵌入媒体内容：用 <video>（视频）、<img>（图片）、<audio>（音频）替代 iframe；
  • 局部加载内容：用 AJAX/Fetch + DOM 插入替代 iframe 的局部刷新；
  • 组件化嵌入：用 Web Components（如自定义元素）封装独立功能，替代 iframe 的模块隔离；
  • 弹窗 / 模态框：用 CSS 实现的弹窗（如 position: fixed）替代 iframe 弹窗，体验更优。

十一、表单

        简单说，表单就是网页收集用户信息的 “容器”，靠 method 和 action 实现数据传递，搭配各种输入元素，完成交互闭环，是网页和用户、服务器交互的基础工具 ，现在前后端分离项目里，常和 Ajax 结合，异步提交数据，让页面体验更流畅 。

GET 与 POST 

敏感操作用 POST，公开查询用 GET

input

<input> 是表单中最灵活的元素，通过 type 属性可以实现多种输入形式，用于收集不同类型的用户数据。

基础语法
<input

  type="输入类型"

  name="参数名"

  value="默认值"

  [其他属性]>

常用 type 类型
类型	​       作用	​       示例
text	      文本输入框(单行)	     <input type="text" name="username" placeholder="请输入用户名">
password	  密码输入框(内容隐藏)    <input type="password" name="pwd" required>
submit	      提交按钮(发送表单数据)	  <input type="submit" value="提交">
reset	      重置按钮(清空表单内容)	 <input type="reset" value="重置">
email	      邮箱输入(自动格式验证)  <input type="email" name="email" patt ern=".+@example.com">
number	      数字输入(可设置范围)	 <input type="number" min="1" max="100" step="1">
file	      文件上传	             <input type="file" name="参数名" [属性]>
radio	  单选按钮(同 name 的选项互斥)	<input type="radio" name="gender" value="male"> 男
checkbox  复选框（允许多选）	      <input type="checkbox" name="hobby" value="reading"> 阅读    
button    普通按钮                <input type="button" value="点击" onclick="绑定点击事件（触发 JavaScript 函数）">
range     滑块                 <input type="range" name="参数名" min="最小值" max="最大值" step="步长" value="默认值">
search    搜索框                  <input type="search" name="参数名" placeholder="搜索提示" [其他属性]>

关键属性

属性 ​                             作用

name ​                必填，定义参数名（后端通过此名称获取数据）

value                  设置默认值（如按钮文字、输入框初始值）

placeholder        输入框提示文本（用户输入后消失）

required             标记字段为必填项（浏览器强制验证）

disabled             禁用输入框（数据不会提交）

maxlength          限制最大输入字符数（如 maxlength="20"）

pattern               正则表达式验证输入格式（如手机号、邮箱）

列表框 <select>

基本语法
<select name="参数名" [属性]>
  <option value="值1">选项1</option>
  <option value="值2" selected>选项2（默认选中）</option>
  <option value="值3">选项3</option>
</select>
核心属性

文本域 <textarea>

基本语法
<textarea name="参数名" rows="行数" cols="列数" [其他属性]>默认文本</textarea>

核心属性

表单应用

隐藏域hidden

用途：

·传递用户无需看到但后端需要的数据（如用户ID、令牌、页面来源等）。

·配合 JavaScript 动态存储临时数据。

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

只读域readonly

用途：

·展示固定信息（如订单号、计算结果），用户可查看但不可修改。

·防止用户误改关键数据（如账户名、创建时间）。

<label>订单号：</label>

<input type="text" name="order_id" value="ORDER-20231001" readonly>

禁用disabled

用途：

·根据条件禁用表单控件（如未勾选协议时禁用提交按钮）。

·防止重复提交表单（点击后禁用按钮）。

<!-- 禁用输入框 -->

  <input type="text" name="legacy_field" value="旧数据" disabled>

表单初级验证

为什么需要表单验证？

​·防止无效数据提交：拦截用户输入错误（如格式错误的邮箱、空必填字段），减少服务器无效请求。

​·提升用户体验：即时反馈错误，避免用户反复提交失败。

​·增强安全性：过滤恶意输入（如 SQL 注入、XSS 攻击）。

​·节省资源：减少服务器端验证压力，优化性能。

提示信息placeholder

作用：在输入框为空时显示引导性提示，告知用户输入格式或内容要求。

注意事项：

placeholder ​不是真正的验证，仅起提示作用。

非空判断required

作用：强制用户填写指定字段，否则阻止表单提交。

正则表达式验证pattern

作用：通过正则表达式（Regex）匹配输入格式，确保数据符合规则。

完整示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
    
	<form action="https://www.csdn.net/" method="get">
	  <!-- 文本框 -->
	  <!-- 文本输入框 -->
	  <p>名字：<input type="text" name="username" placeholder="请输入用户名" required></p>

	  <!-- 密码输入框 -->
	  <p>密码：<input type="password" name="pwd" placeholder="请输入密码" required></p>
		
	  <!-- 单选框 name需要相同，否则可多选-->
	  <p>性别：
		 <input type="radio" name="gender" value="boy"> 男
		 <input type="radio" name="gender" value="girl"> 女
	  <p>
	  
	  <!-- 多选框 -->
	  <p>兴趣：
		 <input type="checkbox" name="hobby" value="reading"> 阅读
		 <input type="checkbox" name="hobby" value="sporting"> 运动
		 <input type="checkbox" name="hobby" value="shexiang"> 摄像
		 <input type="checkbox" name="hobby" value="run"> 跑步
	  </p>
	  
	  <!-- 按钮 -->
	  <p>按钮：
		 <input type="button" name="bu" value="单击">
		 <input type="button" name="bu" value="双击"><br>
		 提交按钮：<input type="image" src="C:\Users\Administrator\Desktop\eye.jpeg" alt="提交按钮" width="30"  height="30">
	  </p>
	  
	  <!-- 下拉框 -->
	  <p>国家：
		  <select name="country" [属性]>
			 <option value="China"selected>中国</option>
			 <option value="USA" >美国</option>
			 <option value="Franch">法国</option>
		  </select>
	  </p>
	  
	  <!-- 文本域 -->
	  <p>反馈：
		  <textarea 
			  name="comment" 
			  rows="4" 
			  cols="50" 
			  placeholder="请输入您的评论...">
		  </textarea>
	  </p>
	  
	  
	  <!-- 文件域 -->
	  <p>文件选择：
		 <input type="file" name="files" accept=".pdf,.docx" multiple>
		 <input type="submit" value="上传">
	  </p>
	  
	  <!-- 邮箱 -->
	  <p>邮箱：
	     <input type="email" name="email" placeholder="请输入有效的邮箱地址" pattern=".+@example.com">
	  </p>
	  
	  <!-- 数字 -->
	  <p>数字：
	     <input type="number" name="number" min="0" max="100" step="10">
	  </p>
	  
	  <!-- 滑块 -->
	  <p>音量：
	     <input type="range" name="volume" min="0" max="100" step="10" value="50">
	  </p>
	  
	  <!-- 搜索框 -->
	  <p>搜索：
	     <input type="search" name="search" placeholder="请输入搜索内容" >
		 <button type="submit">搜索</button>
	  </p>
	  
	  <!-- 手机号验证（11位数字，以1开头） -->
	  <p>手机号码：
		<input 
		  type="tel" 
		  name="phone" 
		  pattern="^1[3-9]\d{9}$" 
		  placeholder="请输入11位有效的手机号"
		  title="请输入11位有效的手机号"
		  required
		>
	  </p>
		
	  <!-- 操作按钮 -->
	  <p>
		<input type="submit" value="提交">
		<input type="reset" value="重置">
	  </p>	  
	
	</form>
	
</body>
</html>

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布