微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > 元素:链接、列表、图像、表格、表单
博主信息
博文 26
粉丝 0
评论 0
访问量 28534
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
元素:链接、列表、图像、表格、表单
溪边小树
原创
1469人浏览过

语义化结构元素

html5 中, 标签语义化是最大的亮点

1. 语义化结构元素

序号 标签 描述
1 <h1>-<h6> 标题: 通常用来划分或标注内容中的文本段落
2 <header> 页眉: 一般是由导航, logo 等元素组成
3 <footer> 页脚: 一般是由友情链接, 联系方式, 备案号,版权等信息组成
4 <nav> 导航: 导航通常是由一个或多个链接标签<a>标签组成
5 <main> 主体: 做为页面主要内容的容器使用,建议一个页面, 只出现一次
6 <article> 文档: 本义是文档, 实际上可以充当其它内容的容器
7 <aside> 边栏: 与主体无关的信息,例如: 广告位, 相关推荐, 阅读排行等
8 <section> 片断: 与主体无关的信息,例如: 广告位, 相关推荐, 阅读排行等
9 <div> 区块: 也叫通用容器,本身无任何语义, 功能主要是通过它的属性来描述

下面以传统标签与语义化结构标签二种方式实现以下布局
布局效果图

1.1 传统非语义结构

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>传统非语义结构</title>
  7.   </head>
  9.   <body>
  10.     <!-- 页眉 -->
  11.     <div class="header">
  12.       <div class="nav">
  13.         <a href="">Menu1</a>
  14.         <a href="">Menu2</a>
  15.         <a href="">Menu3</a>
  16.       </div>
  17.     </div>
  19.     <!-- 内容主体区 -->
  20.     <div class="content">
  21.       <!-- 边栏 -->
  22.       <div class="aside">
  23.         <div class="ads">广告位</div>
  24.       </div>
  25.       <!-- 主体区 -->
  26.       <div class="main">
  27.         <div class="article">
  28.           <h3>小树之家</h3>
  29.           <p>溪边小树的梦想小屋</p>
  30.         </div>
  31.       </div>
  32.     </div>
  34.     <!-- 页脚 -->
  35.     <div class="footer">
  36.       <div class="links">
  37.         <a href="">Links1</a>
  38.         <a href="">Links2</a>
  39.         <a href="">Links3</a>
  40.       </div>
  41.     </div>
  42.   </body>
  43. </html>

3. 语义化结构元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>语义化结构元素</title>
  7.   </head>
  9.   <body>
  10.     <!-- 页眉 -->
  11.     <header>
  12.       <nav>
  13.         <a href="">Menu1</a>
  14.         <a href="">Menu2</a>
  15.         <a href="">Menu3</a>
  16.       </nav>
  17.     </header>
  19.     <!-- 内容主体区 -->
  20.     <div class="content">
  21.       <!-- 边栏 -->
  22.       <aside>
  23.         <div class="ads">广告位</div>
  24.       </aside>
  25.       <!-- 主体区 -->
  26.       <main>
  27.         <article>
  28.           <h3>小树之家网</h3>
  29.           <p>溪边小树的梦想小屋<</p>
  30.         </article>
  31.       </main>
  32.     </div>
  34.     <!-- 页脚 -->
  35.     <footer>
  36.       <section class="links">
  37.         <a href="">Links1</a>
  38.         <a href="">Links2</a>
  39.         <a href="">Links3</a>
  40.       </section>
  41.     </footer>
  42.   </body>
  43. </html>

SVG: 使用 XML 语言编写的可缩放的矢量图形,可直接在浏览器中显示,体积小无限放大不失真

语义化文本元素

1. 常用文本元素

标签 描述
<p> 段落内容
<pre> 按源码格式原样显示
<br> 换行(源码中的换行会被解析来空格)
<span> 与<div>类似,无语义, 主要用作内容的样式钩子
<time> 描述日期或时间
<abbr> 缩写
<sub> 下标
<sup> 上标
<address> 地址,通常用在<footer>中
<s> / <del> 删除线, <s>无语义
<code> 显示代码块,通常与代码格式化插件配合,才能高亮关键字
<progress> 进度条
<b> / <strong> 加粗, <b>无语义
<i> / <em> 斜体, <i>无语义
<mark> 高亮标记, 默认为内容添加黄色背景
<q> / <blockquote> 引用, 内容加双引号

2. 示例

  • 运行效果

  • 示例代码
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>语义化文本元素</title>
  7.   </head>
  9.   <body>
  10.     <time>2020-03-09 18:22:42</time>
  12.     <p>HTML元素是页面是具体显示的内容,如标题,段落,图片等</p>
  13.     <!--缩写文本下有虚线,完整信息在标签的title属性中,鼠标悬停会显示title中的描述信息-->
  14.     <p>
  15.       <abbr title="HyperText Markup Language">HTML</abbr
  16.       >文档,是指采用超文本标记语言编写的结构化文档
  17.     </p>
  19.     <!--上标与下标-->
  20.     <p>
  21.       2<sup>4</sup> = 16
  22.       <br />
  23.        宁波美食<sub style="color: gray">吃了好再来统一配送平台</sub>PHP.CN
  24.     </p>
  26.     <!--地址, 默认会换行,并斜体显示-->
  27.     <footer>
  28.         联系地址: <address>宁波市天一广场8888号</address>
  29.     </footer>
  30.     <!--删除线-->
  31.     <p>
  32.         宁波汤圆原价: <del>88.88元</del>, 现价: <strong>66.66元</strong>
  33.     </p>
  35.     <!--代码, 通常与pre配合-->
  36.     <p>
  37.       <code>
  38.         const username = 'admin';
  39.       </code>
  40.     </p>
  42.     <p>
  43.       <!--    如果浏览器不支持该标,则显示内部文本: 已完成 50%-->
  44.       <progress value="50" max="100">已完成 50% </progress>
  45.     </p>
  47.     <p>
  48.       <!--    强调:-->
  49.       <strong>重复其实是最快的学习方法</strong>
  50.       <br />
  51.       <em>编程能力是培训逻辑思维的有效方式</em>
  52.     </p>
  54.     <!--标注-->
  55.     <p>我是php中文网的讲师: <mark>朱老师(Peter Zhu)</mark></p>
  57.     <!--引用-->
  58.     <p>
  59.       <!-- 短引用: 文本添加引号 -->
  60.       <q>引用文本</q>
  61.     </p>
  62.     <!-- 长引用: 缩进表示 -->
  63.     <blockquote cite="https://www.php.cn">
  64.       <p>
  65.         超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。
  66.         这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。
  67.         这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便
  68.       </p>
  69.     </blockquote>
  70.   </body>
  71. </html>

链接/列表/图像

1. 链接元素

  • <a>: 链接元素,常用属性如下
属性 描述 举例
href 指向链接页面的 URL href="https://php.cn"
target 打开 URL 的页面来源 `target=_self _blank _top _parent”`
download 自定义下载文件名 download="banner1.jpg"
type 设置链接文档的 MIME 类型 type="image/jpeg"
  • href属性值
属性 描述
href="url" 跳转的目标地址
href="mailto: 123456@qq.com" 打开邮箱,发送邮件
href="tel:13388**2345" 点击后,会询问用户是否要拨打电话
href="outline.md" 浏览器不能解析的文档, 会直接下载
  • taget属性值
属性 描述
target="__self" 当前窗口打开链接
target="_blank" 新窗口打开链接
target="_parent" 父窗口打开链接
target="_top" 顶层窗口打开链接
target="name" 指定名称的窗口, 与<iframe>元素配合
target="#anchor" 跳转到设置了锚点的元素所在位置
  • 示例:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>链接元素</title>
  7.   </head>
  9.   <body>
  10.     <!-- 默认在当前窗口打开_self, 现自定义为新窗口打开_blank -->
  11.     <a href="https://php.cn" target="_blank">php中文网</a>
  12.     <!-- 浏览器不能直接解析markdown文档,所以会自动下载,下载的文件名可由download属性自定义 -->
  13.     <a href="2-html基础知识.md" download="HTML教案.md">html教程</a>
  14.     <!-- 拔打电话,会调用默认通信工具 -->
  15.     <a href="tel:1579988***33">咨询热线</a>
  16.     <!-- 发送邮件,会调用本机电邮软件 -->
  17.     <a href="mailto: 123456789@qq.com">联系我们</a>
  18.     <a href="#anchor">跳转到当前面中的锚点</a>
  19.     <h1 id="anchor" style="margin-top:1000px;">我是锚点</h1>
  20.   </body>
  21. </html>

2. 列表元素

2.1 列表的基本概念

  • 将一组关联的数据集中展示,使用列表最合适
  • 如果列表中的每个项目顺序无关紧要, 例如:购物车, 可以使用无序列表来描述
  • 如果列表中的每个项目顺序非常重要, 例如:工作计划,可以使用有序列表来描述
  • 如果想给每一个列表项添加一个小标题, 例如联系方式,可以使用自定义列表来描述
  • 可见, HTML 中的列表由列表与内部的列表项二部分组成,而这二部分是包含关系
  • 所以, HTML 使用一组复合标签来描述列表,
列表元素 描述
<ul> + <li> 无序列表
<ol> + <li> 有序列表
<dl> + <dt> + <dd> 自定义列表

2.2 示例

-运行效果图:

  • 示例代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>列表元素</title>
  7.   </head>
  9.   <body>
  10.     <!--无序列表-->
  11.     <h3>购物车</h3>
  12.     <ul>
  13.       <li>苹果5斤</li>
  14.       <li>电水壶1个</li>
  15.       <li>牛奶2箱</li>
  16.     </ul>
  17.     <hr />
  18.     <!--有序列表-->
  19.      <h3>学习进度安排</h3>
  20.     <!-- 可设置起始序号 -->
  21.     <ol start="5">
  22.       <li>HTML基础知识</li>
  23.       <li>CSS深入理解</li>
  24.       <li>PHP实战演练</li>
  25.     </ol>
  26.     <hr />
  27.     <!--自定义列表-->
  28.     <h3>前端三兄弟</h3>
  29.     <dl>
  30.       <dt>html</dt>
  31.       <dd>超文本标记语言</dd>
  32.       <dt>css</dt>
  33.       <dd>层叠样式表</dd>
  34.       <dt>JavaScript</dt>
  35.       <dd>前端通用脚本语言</dd>
  36.     </dl>
  37.   </body>
  38. </html>

3. 图像元素

  • 当前文档的图像元素,仅仅是外部图片资源的占位符,只有解析时才会加载进来
  • 所以, 在确保用户可以看清的情况下, 图片体积越小越好, 以提升加载速度
  • 推荐使用可压缩的jpg格式, 小图片,或需要背景透明的,推荐使用png格式
  • 对于简单的动图,或者颜色要求较少的,可使用gif格式
  • 对于图标, 建议使用 css 字体图标,而不是使用图像图标
元素 描述
<img> 图片元素,空元素(单标签)
<figure> 图片/插图区域
<figcaption> 图片/插图区域的标题
  • <img>常用属性
属性 描述
src 图片来源地址, 可以是本地, 也可以是来自网络
alt 图片描述信息, 当图片无法显示时, 显示该信息, 也可以为无障碍阅读器所识别
width/height 图片大小, 宽高只需设置一个,另一个会等比缩放, 推荐使用 css 设置
  • 示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>图像元素</title>
  7.   </head>
  9.   <body>
  10.     <figure>
  11.       <figcaption>前端经典教程</figcaption>
  12.       <img
  13.         src="images/js1.jpg"
  14.         alt="javascript高级程序设计"
  15.         style="width: 200px;"
  16.       />
  17.       <img
  18.         src="images/js2.jpg"
  19.         alt="javascript权威指南"
  20.         style="width: 200px;"
  21.       />
  22.       <img src="images/css.jpg" alt="css权威指南" style="width: 200px;" />
  23.     </figure>
  24.   </body>
  25. </html>

表格与框架元素

1. 表格元素

  • 表格是最重要的数据格式化展示重要工具, 使用频率非常高
  • 表格的数据,存储在由行与列组成的一系列单元格
  • 数据必须存储在单元格元素中
  • 与列表类似, 表格也是由一系列标签来描述

1.1 元素

序号 标签 描述 备注
1 <table> 定义表格, 必选
2 <tbody> 定义表格主体, 允许定义多次 必选
3 <tr> 定义表格中的行, 必选
4 <th> 定义表格头部中的单元格,默认加粗居中 必选
5 <td> 定义 g 表格 e 主体与底部的的单元格 必选
6 <caption> 定义表格标题, 可选
7 <thead> 定义表格头格, 只需定义一次 可选
8 <tfoot> 定义表格底, 只需定义一次 可选
9 <col> 为一个/多个列设置属性,仅限 可选
10 <colgroup> 将多个<col>元素分组管理 可选

1.2 属性

序号 属性 适用元素 描述
1 border <table> 添加表格框
2 cellpadding <table> 设置单元格内边距
3 cellspacing <table> 设置单元格边框间隙
4 align 不限 设置单元格内容水平居中
5 bgcolor 不限 设置背景色
6 width 不限 设置宽度
7 height 不限 设置高度

表格属性仅供参考,属选学内容, 推荐使用 CSS 设置表格样式

1.3 示例

  • 运行效果图

  • 示例代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>表格元素</title>
  7.   </head>
  9.   <body>
  10.     <table
  11.       border="1"
  12.       cellpadding="5"
  13.       cellspacing="0"
  14.       width="500"
  15.       height="300"
  16.       align="center"
  17.     >
  18.       <!-- 对列统一设置,colgroup中设置的属性对所有列均有效 -->
  19.       <colgroup bgcolor="lightpink">
  20.         <!-- 如果不想自定义某一列属性,只写元素不写属性 -->
  21.         <col />
  22.         <!-- 第二列个性化定制: 背景为浅绿色 -->
  23.         <col bgcolor="lightgreen" />
  24.         <!-- 第三列背景为黄色,并跨越2列都有效 -->
  25.         <col bgcolor="yellow" span="2" />
  26.         <!-- 第四列,使用第3列的样式 -->
  27.         <col />
  28.         <!-- 最后一列无特殊样式,采用父级样式 -->
  29.         <col />
  30.       </colgroup>
  32.       <!-- 表格标题 -->
  33.       <caption style="font-size: 1.5rem;margin-bottom: 10px;">学生成绩表</caption>
  35.         <!-- 表格页眉 -->
  36.         <thead bgcolor="lightblue">
  37.             <th>专业</th>
  38.             <th>学号</th>
  39.             <th>姓名</th>
  40.             <th>课程</th>
  41.             <th>分数</th>
  42.         </thead>
  44.         <!-- 表格主体1 -->
  45.         <tbody>
  46.             <tr>
  47.                 <td rowspan="3" align="center">计算机</td>
  48.                 <td>0000</td>
  49.                 <td>小王</td>
  50.                 <td>操作系统</td>
  51.                 <td>88</td>
  52.             </tr>
  53.             <tr>
  54.                 <!-- <td>计算机</td> -->
  55.                 <td>1111</td>
  56.                 <td>小张</td>
  57.                 <td>操作系统</td>
  58.                 <td>66</td>
  59.             </tr>
  60.             <tr>
  61.                 <!-- <td>计算机</td> -->
  62.                 <td>222</td>
  63.                 <td>小李</td>
  64.                 <td>网络编程</td>
  65.                 <td>98</td>
  66.             </tr>
  67.         </tbody>
  69.         <!-- 表格主体2 -->
  70.         <tbody>
  71.             <tr>
  72.                 <td rowspan="3" align="center">通信工程</td>
  73.                 <td>333</td>
  74.                 <td>小马</td>
  75.                 <td>网络编程</td>
  76.                 <td>90</td>
  77.             </tr>
  78.             <tr>
  79.                 <!-- <td>通信工程</td> -->
  80.                 <td>444</td>
  81.                 <td>小刘</td>
  82.                 <td>网络编程</td>
  83.                 <td>78</td>
  84.             </tr>
  85.             <tr>
  86.                 <!-- <td>通信工程</td> -->
  87.                 <td>555</td>
  88.                 <td>小朱</td>
  89.                 <td>操作系统</td>
  90.                 <td>60</td>
  91.             </tr>
  92.         </tbody>
  94.         <!-- 表格页脚 -->
  95.         <tfoot>
  96.             <tr bgcolor="wheat">
  97.                 <td align="center">备注:</td>
  98.                 <td colspan="4">如果对成绩有异议，请在公布后15天内提交书面申请</td>
  99.         </tr>
  100.       </tfoot>
  101.     </table>
  102.   </body>
  103. </html>

表单与控件元素

[toc]

  • 表单分为表单元素与控件元素二部分
  • 表单元素仅一个: <form>
  • 表单控件元素,根据类型不同,有多个

1. 表单元素<form>

1.1 常用属性

序号 属性 描述
1 action 表单提交的 URL 地址(处理表单请求的脚本)
2 method 表单提交类型:GET/POST
3 enctype 设置表单提交数据的编码方式
4 name 表单唯一名称,与 ID 同义
5 target 打开请求 URL 的方式,如果_blank

1.2 请求类型method

  • web 请求方式有二种: 超链接与表单提交
  • 超链接就是使用<a>标签发起请求,其实就是GET请求
  • 表单提交默认就是GET请求,但例用最多的是POST
  • 请求类型属性action的取值
序号 允许值 描述
1 GET 默认值,表单数据以请求参数形式通过 URL 提交, 数据量最大 2K
2 POST 表单数据放在请求体中发送,数据量更大也更安全

1.3 编码方式enctype

序号 允许值 适用场景 描述
1 application/x-www-form-urlencoded 接收value值 默认值,使用 URL 编码,GET/POST 均适合
2 multipart/form-data 文件上传 采用二进制流处理,会把文件域中的内容封装到请求参数中,适合
3 text/plain 电子邮件 如action="mailto:URL

1.4 表单名称name

序号 功能 描述
1 标识表单元素 与id一样,用来唯一标识该表单元素
2 绑定表单元素 用于表单控件元素的 form 属性,用来绑定所属表单
3 访问表单元素 快捷访问内部控件元素,如form.input.value

1.5 打开方式target

序号 允许值 描述
1 _self 默认值,当前窗口打开提交的 URL
2 _blank 新窗口打开提交的 URL
3 _parent 父窗口打开提交的 URL
4 _top 顶层窗口打开提交的 URL

2. 表单控件元素<input>

2.1 常用属性

序号 属性 描述
1 type 控件类型,如文本框, 复选框…
2 name 请求参数的名称,对应于脚本处理的变量名
3 value 请求参数的值,对应于脚本处理的变量值,使用预定义值控件无效
4 form 控件所属表单
5 placeholder 仅限输入框text和password,输入框的提示信息
6 list 仅限输入框text和password,下拉框智能提示
7 autocomplate 仅限输入框text和password,自动完成(历史记录)
8 maxlength 仅限输入框text/password, 允许输入最大字符数量
9 checked 仅限单选框radio, 复选框checkbox(布尔属性)
10 readonly 元素只读,但通过 JavaScript 可修改(布尔属性)
11 disabled 元素禁用,(布尔属性)
12 autofocus 自动获取焦点,一个表单仅限一个控件
13 src 仅限图像域images, 图像 URL 地址
14 width 仅限图像域images, 图像宽度
15 height 仅限图像域images, 图像高度

2.2 type类型

  • 常用类型
序号 类型 描述
1 <input type="text"> 单行文本框 (默认值)
2 <input type="password"> 密码输入框
3 <input type="radio"> 单选框
4 <input type="checkbox"> 复选框
5 <input type="image"> 图像域/提交表单
6 <input type="file"> 文件上传域
7 <input type="hidden"> 隐藏域
  • html5 新增类型
序号 类型 描述
1 <input type="email"> 电子邮件
2 <input type="data"> 日期
2 <input type="data"> 日期
4 <input type="datetime-local"> 本地日期时间
5 <input type="tel"> 电话号码
6 <input type="url"> URL 地址
7 <input type="number"> 数值
8 <input type="range"> 范围拖动条
9 <input type="search"> 搜索框/移动
10 <input type="color"> 拾色器

2.3 常用事件属性

序号 事件属性 描述
1 onfocus 获取焦点时触发
2 onblur 失去焦点时触发
3 onchange 失去焦点,且值发生变化时触发
4 oninput 值发生变化(不等失去焦点)时触发
5 onkeydown 按下键盘时触发
6 onkeyup 抬起键盘时触发
7 onclick 鼠标单击时触发
8 onselect 选择内容文本时触发

2.4 示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>表单之input</title>
  7.     <style>
  8.       form {
  9.         padding: 20px;
  10.         width: 350px;
  11.         box-shadow: 0 0 8px #888;
  12.         border-radius: 10px;
  13.         box-sizing: border-box;
  14.         margin: auto;
  15.         background-color: lightskyblue;
  16.         display: grid;
  17.         gap: 15px;
  18.       }
  20.       form > section {
  21.         display: grid;
  22.         grid-template-columns: 60px 1fr;
  23.       }
  25.       h3 {
  26.         text-align: center;
  27.       }
  29.       input[type="image"] {
  30.         justify-self: center;
  31.       }
  32.     </style>
  33.   </head>
  35.   <body>
  36.     <h3>用户注册</h3>
  37.     <form
  38.       action="handle.php"
  39.       method="post"
  40.       enctype="application/x-www-form-urlencoded"
  41.       id="register"
  42.     >
  43.       <!-- 单行文本输入框 -->
  44.       <section>
  45.         <label for="username">用户名:</label>
  46.         <!-- 必选且自动获取焦点 -->
  47.         <input
  48.           type="text"
  49.           name="username"
  50.           id="username"
  51.           maxlength="20"
  52.           placeholder="不少于8位"
  53.           required
  54.           autofocus
  55.         />
  56.       </section>
  58.       <!-- 密码输入框 -->
  59.       <section>
  60.         <label for="password">密码:</label>
  61.         <input
  62.           type="password"
  63.           name="password"
  64.           id="password"
  65.           size="10"
  66.           placeholder="不少于10位"
  67.           required
  68.         />
  69.       </section>
  71.       <!-- 单选框 -->
  72.       <section>
  73.         <label for="secret">性别:</label>
  74.         <div>
  75.           <!-- 只允许返回一个值,多个input的name属性值必须相同 -->
  76.           <input type="radio" name="gender" id="male" value="male" /><label
  77.             for="male"
  78.             >男</label
  79.           >
  80.           <input type="radio" name="gender" id="female" value="female" /><label
  81.             for="male"
  82.             >女</label
  83.           >
  84.           <!-- checked: 默认选项 -->
  85.           <input
  86.             type="radio"
  87.             name="gender"
  88.             id="secret"
  89.             value="female"
  90.             checked
  91.           /><label for="secret">保密</label>
  92.         </div>
  93.       </section>
  95.       <!-- 复选框 -->
  96.       <section>
  97.         <label for="programme">兴趣:</label>
  98.         <div>
  99.           <!-- 允许返回多个值,属性名采用数组格式,便于后端处理 -->
  100.            <input type="checkbox" name="hobby[]" id="game" checked /><label for="game">游戏</label>
  101.           <input type="checkbox" name="hobby[]" value="shoot" id="shoot" /><label for="shoot">摄影</label>
  102.           <input type="checkbox" name="hobby[]" value="programme" id="programme" checked /><label for="programme"
  103.             >编程</label>
  104.           <input type="checkbox" name="hobby[]" id="game" /><label for="game">阅读</label>
  105.         </div>
  106.       </section>
  108.       <!-- 文件域 -->
  109.       <section>
  110.         <label for="userpic">头像:</label>
  111.         <!-- 设置<form enctype="multipart/form-data">,且为POST提交 才有效-->
  112.         <input type="file" name="user_pic" id="userpic" />
  114.         <!-- 隐藏域: 限制上传文件大小不超过8M -->
  115.         <input type="hidden" name="MAX_FILE_SIZE" value="8388608" />
  116.       </section>
  118.       <!-- 预定义复合框 -->
  119.       <section>
  120.         <label for="course">课程:</label>
  121.         <input type="text" name="course" list="course" />
  122.         <datalist id="course">
  123.           <!-- 此<option>使用单标签,与<select>中不同 -->
  124.           <option value="HTML/CSS开发与实战"> </option>
  125.           <option value="JavaScript基础与实战"> </option>
  126.           <option value="PHP开发基础"> </option>
  127.           <option value="Laravel基础与实战"> </option>
  128.         </datalist>
  129.       </section>
  131.       <!-- 图像域: 提交按钮为图像 -->
  132.       <!-- 返回点击图片的x/坐标,推荐加上name属性,返回有语义坐标 -->
  133.       <!-- 测试提交,启动一个本地Web服务器: php -S localhost:8888 -->
  134.       <input
  135.         type="image"
  136.         src="btn.png"
  137.         alt="submit"
  138.         name="submit"
  139.         width="100"
  140.       />
  141.     </form>
  143.     <hr />
  145.     <!-- 表单控件元素不一定必须写到<form>标签内 -->
  146.     <!-- 表单控件使用form属性,将它与所属表单绑定 -->
  147.     <section>
  148.       <label for="email">邮箱:</label>
  149.       <input type="email" name="email" id="email" form="register" />
  150.     </section>
  152.     <section>
  153.       <label for="age">年龄:</label>
  154.       <input
  155.         type="number"
  156.         name="age"
  157.         id="age"
  158.         form="register"
  159.         min="18"
  160.         max="60"
  161.         step="2"
  162.         value="22"
  163.       />
  164.     </section>
  165.   </body>
  166. </html>

3. 控件标签元素<label>

  • <label>元素没有name和value属性,不会创建请求参数
  • 它存在的意义就是关联控件,当点击它时将焦点自动落在关联控件内部
  • 语法: <label for="关联控件的id属性值">(也支持三大通用属性)
  • <label>有二种方式与控件元素进行关联/绑定
序号 关联方式 示例代码
1 显式关联 <label for="email">Email:</label><input type="email" id="email">
1 隐式关联 <label>Email:</label><input type="email"></label>

推荐使用显式关联, 案例参考<input>示例

学习小结

本次课程老师详细介绍了HTML中的主要元素:链接、列表、图像、表格、表单，尤其对表格、表单做了细致分析与举例，让人感觉对网页编程有了更为直观的认识，促进了学习兴趣，课堂学习内容很实用。

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：基础部分, 我们进度比较慢, 这也你们经常忽视的地方, 总觉得基础没用总想实战, 结果总是不能进步...
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录