Geeks_Z の Blog Geeks_Z の Blog
首页
  • 学习笔记

    • 《HTML》
    • 《CSS》
    • 《JavaWeb》
    • 《Vue》
  • 后端文章

    • Linux
    • Maven
    • 汇编语言
    • 软件工程
    • 计算机网络概述
    • Conda
    • Pip
    • Shell
    • SSH
    • Mac快捷键
    • Zotero
  • 学习笔记

    • 《数据结构与算法》
    • 《算法设计与分析》
    • 《Spring》
    • 《SpringMVC》
    • 《SpringBoot》
    • 《SpringCloud》
    • 《Nginx》
  • 深度学习文章
  • 学习笔记

    • 《PyTorch》
    • 《ReinforementLearning》
    • 《MetaLearning》
  • 学习笔记

    • 《高等数学》
    • 《线性代数》
    • 《概率论与数理统计》
  • 增量学习
  • 哈希学习
GitHub (opens new window)

Geeks_Z

AI小学生
首页
  • 学习笔记

    • 《HTML》
    • 《CSS》
    • 《JavaWeb》
    • 《Vue》
  • 后端文章

    • Linux
    • Maven
    • 汇编语言
    • 软件工程
    • 计算机网络概述
    • Conda
    • Pip
    • Shell
    • SSH
    • Mac快捷键
    • Zotero
  • 学习笔记

    • 《数据结构与算法》
    • 《算法设计与分析》
    • 《Spring》
    • 《SpringMVC》
    • 《SpringBoot》
    • 《SpringCloud》
    • 《Nginx》
  • 深度学习文章
  • 学习笔记

    • 《PyTorch》
    • 《ReinforementLearning》
    • 《MetaLearning》
  • 学习笔记

    • 《高等数学》
    • 《线性代数》
    • 《概率论与数理统计》
  • 增量学习
  • 哈希学习
GitHub (opens new window)
  • Linux

  • Java

  • 微服务笔记

  • MySQL

  • Nginx

  • HTML

    • HTML概述
    • HTML标签
      • HTML 标签
        • 排版标签
        • 标题标签
        • 段落标签
        • 水平线标签
        • 容器标签
        • font 字体标签
        • 文本格式化标签
        • 标签的属性
        • 图像标签
        • 超链接标签
        • 超链接标签
        • 锚点
        • <base> 标签
        • 转义字符
        • 注释标签
        • 路径
        • 相对路径
        • 绝对路径
        • 列表标签
        • 无序列表 <ul>
        • 有序列表 <ol></ol>
        • 自定义列表 <dl></dl>
        • 表格标签 table
        • 表头标签
        • 表格结构(了解)
        • 网页元素检查(开发者模式)
        • 表格标题标签 caption
        • 单元格合并
        • 表单标签
        • input 输入标签
        • label 标签(理解)
        • textarea 文本域标签
        • 下拉菜单 <select></select>
        • 表单域 <form></form>
    • HTML5新标签及新特性
  • CSS

  • JavaWeb

  • Vue

  • Git

  • 开发规范

  • SpringCloud微服务权限系统

  • bug

  • Software

  • ProgramNotes
  • HTML
Geeks_Z
2022-10-26
目录

HTML标签

HTML 标签

HTML 大量使用语义化标签,所谓语义化就是见名知意,

排版标签

标题标签

  • h 即 head 的简写
  • 有 <h1>、<h2>、<h3>、<h4>、<h5>、<h6> 6 种,从左到右字号依次变小。
  • 基本格式<h1></h1>
  • 像 <h7> 这种错误的标签在展示时不起作用
<body>
  <!-- align="left"表示左对齐 center表示居中  right表示右对齐 -->
  <h1 align="left">标题一</h1>
  <h2 align="center">标题二</h2>
  <h3 align="right">标题三</h3>
  <h4 align="left">标题四</h4>
  <h5 align="center">标题五</h5>
  <h6 align="right">标题六</h6>
</body>
1
2
3
4
5
6
7
8
9

段落标签

  • p 即 paragraph 的简写
  • 基本格式<p>段落内容</p>
  • 段落中的文本内容超出浏览器宽度之后会执行自动换行

水平线标签

  • hr 即 horizontal 的缩写
  • 其作用是在页面中插入一条水平线
  • 基本格式:<hr />
  • 这是一个自闭合标签。(普通标签成对出现;自闭合标签不需要包裹内容,自己就执行了开始和结束的操作)

容器标签

  • div 即 division 的缩写,分割、区分的意思
  • span 即 span ,跨度、范围的意思
  • 这俩本质上是一个容器,类似于 Android 中的 ViewGroup
  • 基本格式
    • <div>这是div标签中的内容</div>
    • <span>这是span标签中的内容</span>

font 字体标签

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>font标签</title>
  </head>
  <body>
    <font color="red" face="宋体" size="7">我是font标签</font>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
color 字体颜色
face 字体种类
size 字体大小

文本格式化标签

关于 HTML 和 XHTML 的区别,可以参考

  • http://www.w3school.com.cn/xhtml/xhtml_html.asp (opens new window)、
  • https://www.zhihu.com/question/19783105 (opens new window)

标签的属性

  • 基本格式:<标签名 属性1=”属性值1“ 属性2=”属性值2“></标签名>
  • 标签可以拥有多个属性
  • 属性必须写在开始标签中,位于标签名后面
  • 属性之间不区分顺序
  • 标签名与属性、属性与属性之间使用空格隔开
  • 任何属性都有默认值,省略该属性表示使用默认值

图像标签

  • img 即 image 的缩写
  • 基本格式<img src="图片URI/URL" />
  • <img />常用属性如下:
属性 属性值 属性含义
src URI/URL 图像的路径
alt 文本 图像无法正常显示时的提示文本
title 文本 鼠标悬停于图像时显示的文本
width 像素(XHTML 不支持按页面百分比显示) 图像的宽度
height 像素(XHTML 不支持按页面百分比显示) 图像的高度
border 数字 设置图像边框的宽度
  • 设置图像的宽高时,如果想等比缩放,则只设置其中一个即可
<body>
  <!-- img标签可以是显示图片 width="200px" height="200px" 分别表示宽度和高度 alt表示图片异常加载提示-->
  <h3 color="red">相对路径的图片,.表示当前目录 src="./images/005.png"</h3>
  <img src="./images/005.png" width="200px" height="200px" alt="图片找不到" />
  <h3 color="red">绝对路径的图片</h3>
  <h3 color="red">正确的格式:http://ip:port/工程名/资源路径</h3>
  <h3 color="red">错误的格式:盘符:/目录/文件名</h3>
  <img
    src="http://5b0988e595225.cdn.sohucs.com/images/20180317/61f43ca9d0544f44b65203644e78d7ed.jpeg"
    alt="网络资源图片"
  />
</body>
1
2
3
4
5
6
7
8
9
10
11
12

超链接标签

超链接标签

  • anchor 的缩写
  • 基本格式 <a href="跳转目标url" target="目标窗口的弹出方式">超链接文本或图像</a>
    • href 即 HyperText Reference , 指定要跳转的 URL 地址
    • target , 指定目标窗口的打开方式。取值为 self / blank , self 为默认值,blank 表示新窗口打开

注意:

  • 外链需要添加 http:// 或 https:// 前缀
  • 内部链接 直接链接内部页面名称即可,如 <a href="index.html">首页</a>
  • 如果当时没有确定链接目标时,可以为 href 赋值 为 “#” ,即 href="#",表示一个空连接
  • 各种网页元素,如 文本、图像、表格、音频、视频等都可以作为超链接的载体
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>超链接文本示例</title>
  </head>
  <body>
    <a href="https://www.jianshu.com/u/414acf7abc2b" target="_blank">CnPeng简书</a>
    <br />
    <a href="https://blog.csdn.net/north1989">CnPeng CSDN</a>
    <br />
    <a href="aTag.html" target="_blank">内部链接--再打开一个aTag.html</a>
    <br />
    <a href="#">空的超链接</a>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

锚点

  • 通过创建锚点,可以快速定位到目标内容区域
  • 创建锚点分为两步
    • 为目标内容(即锚点)创建 id 并赋值
    • 将超链接文本与锚点的 id 关联,<a href="#id名称"> 超链接文本 </a>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <a href="#createAnchor">点击跳转到锚点位置</a>
    <br />
    通过创建锚点, 可以快速定位到目标内容区域

    <!--加这一堆br是为了增加页面高度,不然显示不出锚点效果-->
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />

    <h3 id="createAnchor">创建锚点分为两步</h3>
    <hr />
    为目标内容(即锚点)创建id 并赋值
    <br />
    将超链接文本与锚点的id 关联,&lt;a href="#id名称"&gt; 超链接文本 &lt;/a&gt;
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

image-20220104172248731

image-20220104172311362

<base> 标签

  • 标签可以限定同一页面内所有 超链接 的打开方式。``
  • 设置

    之后依旧可以为某个单独的超链接设置打开方式。

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

    <!--指定页面中所有超链接的默认打开方式为 blank -->
    <base target="_blank" />
  </head>
  <body>
    <a href="https://www.jianshu.com/u/414acf7abc2b">CnPeng简书</a>
    <br />

    <!--虽然 head 中设置了base,但此处依旧可以单独指定打开方式为 self,实现重载-->
    <a href="https://blog.csdn.net/north1989" target="_self">CnPeng CSDN</a>

    <br />
    <a href="aTag.html">内部链接--再打开一个aTag.html</a>
    <br />
    <a href="#">空的超链接</a>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<img /> 、 < br/>、 <hr />、<base/>都是自闭合标签

转义字符

注释标签

  • 格式为 < !-- 注释内容 -- >

路径

相对路径

  • 图像文件和 HTML 文件位于同一文件夹中,只需要输入图像文件的名称即可,<img src="logo.gif"/>
  • 图像文件位于 Html 文件的下一级文件夹,输入文件夹名和文件名,二者之间用“/” 隔开,<img src="image/logo.gif"/>
  • 图像文件位于 HTML 文件的上一级,在文件名之前加 ../, 上两级则使用 ../../,依次类推。<img src="../image/logo.gif"/>

绝对路径

  • 本地绝对路径: D:\web\img\logo.gif
  • 网络绝对路径:https://upload-images.jianshu.io/upload_images/2551993-7b4cba4929e08d7c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700

列表标签

无序列表 <ul>

  • 所谓无序列表就是以小圆点或者小方块作为行首标志的列表
  • 无序列表的各项之间是并列的,没有顺序级别的区分
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>无序列表 ul</title>
  </head>
  <body>
    <ul>
      <li>无序列表1</li>
      <li>无序列表2</li>
      <li>无序列表3</li>
      <li>无序列表4</li>
    </ul>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

注意:

  • <ul></ul> 之间只能嵌套 <li></li>,不允许嵌套其他标签
  • <li></li> 之间相当于一个容器,可以嵌套任意标签

有序列表 <ol></ol>

  • 内部也是嵌套<li></li>
  • 默认以 1、2、3...作为行首排序标志
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>有序列表ol</title>
  </head>
  <body>
    <ol>
      <li>有序列表1</li>
      <li>有序列表2</li>
      <li>有序列表3</li>
      <li>有序列表4</li>
    </ol>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

自定义列表 <dl></dl>

  • <dl></dl>为外层标签、<dt></dt>为内层标签、<dt> 下还可以嵌套 <dd></dd>
  • 自定义列表项前不具有任何项目符号,既没有小圆点也没有 1234
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>自定义列表</title>
  </head>
  <body>
    <dl>
      <dt>自定义列表项1</dt>
      <dd>自定义列表项1 的内容解释1</dd>
      <dd>自定义列表项1 的内容解释2</dd>
      <dt>自定义列表项2</dt>
      <dd>自定义列表项2 的内容解释1</dd>
      <dd>自定义列表项2 的内容解释2</dd>
    </dl>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

效果图如下:

表格标签 table

  • <table></table> 用来定义表格,
  • <tr></tr> 用来定义行,嵌套在 <table></table> 中
  • <td></td> 用来定义行中的单元格,嵌套在 <tr></tr> 中
  • <tr></tr> 中只能嵌套 , 但 <td></td> 相当于一个容器,可以嵌套任意元素

表格相关的属性如下:

属性名称 含义 属性取值
border 表格的边框。默认 border="0",即无边框 像素值
cellspacing 单元格与单元格边框之间的间距。
默认 cellspacing="2"
像素值
cellpadding 单元格内容与单元格边框的间距。
默认 cellpadding="1"
像素值
width 表格的宽度 像素值
height 表格的高度 像素值
align 表格在页面中的水平对齐方式 left 、center 、right
caption 标题 文本
colspan 从当前列向后 横跨几列, 应用于 td、th 数字
rowspan 从当前行向下 竖跨几行, 应用于 td、th 数字
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>表格</title>
  </head>
  <body>
    <table cellspacing="3" cellpadding="2" border="1" align="left">
      <tr>
        <td>第一行第1列</td>
        <td>第一行第2列</td>
        <td>第一行第3列</td>
      </tr>
      <tr>
        <td>第二行第1列</td>
        <td>第二行第2列</td>
        <td>第二行第3列</td>
      </tr>
    </table>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
  <!-- 表格标签 border表示边框 align设置在table里面表示表格整个位置
  设置在tr里面表示单元格对齐方式
  单元格间距 cellspacing="10"-->
  <table border="1" width="300" height="300" align="center" cellspacing="0">
    <thead>
      <!--  thhead表示表头 -->
      <th>第1列</th>
      <th>第2列</th>
      <!--  th是字体加粗的td标签一般用在表头 -->
      <th>第3列</th>
    </thead>
    <tr>
      <!-- 行 -->
      <td align="left">1-1</td>
      <!-- 列,单元格 -->
      <td align="center">1-2</td>
      <td align="right">1-3</td>
    </tr>
    <tr>
      <!-- 行 -->
      <td><b>2-1</b></td>
      <!-- 列,单元格 b标签加粗 -->
      <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<body>
  <!-- colspan表示跨列 rowspan表示跨行-->
  <table border="1" width="300" height="300" align="center" cellspacing="0">
    <thead>
      <!--  thhead表示表头 -->
      <th>第1列</th>
      <th>第2列</th>
      <!--  th是字体加粗的td标签一般用在表头 -->
      <th>第3列</th>
    </thead>
    <tr>
      <!-- 行 -->
      <td colspan="2">1-1</td>
      <!-- 第一行的第一列跨2列 -->
      <td>1-3</td>
    </tr>
    <tr>
      <!-- 行 -->
      <td rowspan="2">2-1</td>
      <!-- 第二行的第一列跨2行 -->
      <td colspan="2" rowspan="2">2-2</td>
      <!-- 第二行的第二列跨2行2列 -->
    </tr>
    <tr><!-- 行 --></tr>
  </table>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

表头标签

  • 表头一般位于表格的第一行或者第一列。
  • 表头标签为 <th></th>,在显示的时候默认会显示为加粗的效果
  • 增加表头时,使用 <th></th> 替代对应位置的 <td></td>即可

下图即是设置了表头的表格。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>表头</title>
  </head>
  <body>
    <table border="1" cellspacing="1" cellpadding="10" align="center">
      <caption>caption标签是啥?标题?</caption>
      <tr>
        <th>属性</th>
        <th>含义</th>
        <th colspan="2">取值</th>
      </tr>
      <tr>
        <th>border</th>
        <td>单元格边框</td>
        <td>像素值,默认0</td>
        <td rowspan="3">rowspan从当前单元格向下跨三行</td>
      </tr>
      <tr>
        <th>cellspacing</th>
        <td>单元格与单元格边框的间距</td>
        <td>像素值,默认2</td>
      </tr>
      <tr>
        <th>cellpadding</th>
        <td>单元格内容与单元格边框的间距</td>
        <td>像素值,默认1</td>
      </tr>
    </table>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

表格结构(了解)

使用表格时,可以将表格分为头部、主体、页脚(页脚有兼容问题)

  • <thead></thead> 用来定义头部。必须位于 <table></table> 中,一般包含网页的 logo 和导航等头部信息。
  • <tbody></tbody> 用来定义表格的主体,一般包含网页中除头部和底部之外的其他内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>thead+tbody</title>
  </head>
  <body>
    <table cellspacing="2" cellpadding="10" align="center" border="1">
      <thead>
        <tr>
          <th>属性名称</th>
          <th>含义</th>
          <th>取值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>colspan</td>
          <td>向右横跨几列</td>
          <td>数值</td>
        </tr>
        <tr>
          <td>rowspan</td>
          <td>向下竖跨几行</td>
          <td>数值</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

网页元素检查(开发者模式)

  • 基于 chrome 浏览器,在页面中右击,然后选择 “检查”

表格标题标签 caption

  • <caption></caption> 标签用来定义标题的标签
  • 必须写在 <table></table> 中,和 <thead></thead>平级

相关代码可以参考 表头标签 的代码。

单元格合并

  • 适用于 <td></td>、<th></th>
  • colspan 跨列合并(水平合并)
  • rowspan 跨行合并(垂直合并)

相关代码可以参考 表头标签 的代码。

表单标签

html 中一个完整的表单通常由 表单元素、提示信息、表单域(即多个表单的父容器)三部分组成。

input 输入标签

  • <input/> 为单标签(自闭合标签)
  • type 是其基本属性,用来控制输入的类型

input 、br、hr 、img、 base 都是单标签

属性 取值 含义
type text 单行文本输入框(不换行的)
type password 密码输入框
type radio 单选框(配合 name 可以实现单选效果)
type checkbox 复选框
type button 普通按钮
type submit 提交按钮
type reset 重置按钮
type image 图像形式的提交按钮
type file 文件域, 点击之后打开文件选择器
name 任意文本 控件名称 , name 相同则表示是同一组数据
value 任意文本 默认文本值
size 正整数 显示大小
checked checked 默认是否被选中
maxlength 正整数 控制输入的最大字符数量
  1. 多个 radio 使用相同的 name ,则表示这是一组数据,这样可以实现单选效果。如果不加 name 多个 radio 可同时被选中;
  2. name 和 value 是每个表单元素都有的属性值,主要给后台人员使用;
  3. name 表单元素的名字, 要求单选按钮和复选框要有相同的 name 值;
  4. checked 属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素;
  5. maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>input标签</title>
  </head>
  <body>
    用户名:
    <input type="text" maxlength="15" />
    <br />

    <!--次数密码中间的空格使用了是全角输入法,全角输入法中,空格占一个汉字的大小-->
    密 码:
    <input type="password" />
    <br />

    <!--使用name 限定了一组内容,从而实现单选-->
    性 别:
    <input type="radio" name="sex" checked="checked" />
    男
    <input type="radio" name="sex" />
    女
    <br />

    爱 好:
    <input type="checkbox" name="hobby" />
    看电影
    <input type="checkbox" name="hobby" />
    读书
    <br />

    <input type="button" value="普通按钮" />
    <br />
    <input type="submit" value="提交按钮" />
    <br />
    <input type="reset" value="重置按钮" />
    <br />
    <input type="image" src="../image/imgButton.png" />
    <br />

    请选择文件:
    <input type="file" />
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

效果图如下:

label 标签(理解)

  • label 标签为 input 标签定义标注/标签
  • 用来绑定一个表单元素,当点击 label 标签的时候,被绑定的表单元素就会获取焦点
  • 通过 for 属性,可以绑定 label 和 input ; 或者直接用 lable 标签将 input 包裹起来
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>label的使用</title>
  </head>
  <body>
    <!--label 中直接包裹 input,可以实现绑定-->
    <label>
      点击此处文本,用户名输入框会获取焦点
      <br />
      用户名:
      <input type="text" />
    </label>
    <br />

    <hr />
    <!--使用 label 的 for 属性绑定input-->
    <label for="#two">点击此处文本,密码输入框会获取焦点</label>
    <br />
    用户名:
    <input type="text" />
    <br />
    密 码:
    <input type="text" id="#two" />
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

textarea 文本域标签

  • <textarea></textarea>用来做大量文本的输入,支持多行
  • 有 cols 、rows 属性。cols 限制每行中所输入的文本字数,rows 限制最大行数。(这两个属性通常不被使用,更多使用会使用 CSS 样式做相关控制)
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>textarea标签</title>
  </head>
  <body>
    请输入评论内容:
    <br />
    <textarea></textarea>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12

效果图如下:

下拉菜单 <select></select>

  • <select></select> 用来定义下拉菜单
  • <option></option> 用来定义下拉菜单选项
  • <select></select> 中至少包含一对 <option></option>
  • 在 option 中定义了属性 selected="selected" 之后,表示该项被默认选中
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>select标签</title>
  </head>
  <body>
    设置家乡
    <select>
      <option>选择省份</option>
      <option>山东</option>
      <option>内蒙古</option>
      <option>黑龙江</option>
      <option>山西</option>
    </select>
    <select>
      <option>济南</option>
      <option selected="selected">临沂</option>
      <option>聊城</option>
      <option>莱芜</option>
      <option>青岛</option>
    </select>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

效果图如下:

表单域 <form></form>

该标签用来定义表单域,以实现用户信息的收集和传递,form 中的内容通常都会被提交到服务器。

基本语法格式:

<form action="url地址" method="提交方式" name="表单名称">...各种表单控件...</form>
1

常用属性有 action、method、name

  • action : 指定接收并处理表单信息的服务器 url 地址
  • method : 表单数据的提交方式。分为 post / get
  • name : 指定表单名称,用来区分页面中的多个表单

每个表单都应该有自己的表单域

使用 form 包裹之后点击提交按钮才有提交的动作

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>form表单域</title>
  </head>
  <body>
    <!--使用 form 包裹之后,提交按钮和图片按钮点击时就有效果了-->
    <form action="https://www.baidu.com" method="post" name="userInfo">
      用户名:
      <input type="text" maxlength="15" />
      <br />

      <!--次数密码中间的空格使用了是全角输入法,全角输入法中,空格占一个汉字的大小-->
      密 码:
      <input type="password" />
      <br />

      <!--使用name 限定了一组内容,从而实现单选-->
      性 别:
      <input type="radio" name="sex" checked="checked" />
      男
      <input type="radio" name="sex" />
      女
      <br />

      爱 好:
      <input type="checkbox" name="hobby" />
      看电影
      <input type="checkbox" name="hobby" />
      读书
      <br />

      <input type="button" value="普通按钮" />
      <br />
      <input type="submit" value="提交按钮" />
      <br />
      <input type="reset" value="重置按钮" />
      <br />
      <input type="image" src="../image/imgButton.png" />
      <br />

      请选择文件:
      <input type="file" />
    </form>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
#HTML
上次更新: 2025/02/26, 08:57:57
HTML概述
HTML5新标签及新特性

← HTML概述 HTML5新标签及新特性→

最近更新
01
RAIL
02-26
02
IOCTF
02-25
03
DGM
02-25
更多文章>
Theme by Vdoing | Copyright © 2022-2025 Geeks_Z | MIT License
京公网安备 11010802040735号 | 京ICP备2022029989号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式