HTML & CSS
什么是 HTML、CSS
HTML (HyperText Markup Language): 超文本标记语言.
超文本: 超越了普通文本的限制, 比普通文本更加强大. 除了文字信息, 还可以定义图片、音频、视频等内容.
标记语言: 由标签构成的语言.
HTML 标签都是预定义好的. 例如: 使用 <a>
展示超链接,使用 <img>
展示图片, <video>
展示视频.
HTML 代码直接在浏览器中运行, HTML 标签由浏览器解析.
CSS (Cascading Style Sheet): 层叠样式表, 用于控制页面的样式 (表现).
找到 HTML 官方文档的步骤:
找到 CSS 官方文档的步骤:
HTML 快速入门
编写 HTML 文件的步骤:
-
新建文本文件, 后缀名改为 .html
-
编写 HTML 结构标签
-
在
<body>
中填写内容
HTML 文件的后缀名为 .html
结构标签最外层是 <html>
和 </html>
, 当浏览器解析时, 一旦见到了 <html>
标签, 就知道要以 HTML 的格式来解析.
在 <html>
标签内, 需要再定义两对标签, 一对是 <head>
代表头, 另一对是 <body>
代表体.
在 <head>
标签内, 需要通过 <title>
这个标签来定义 HTML 文件的标题, 在 <body>
标签内, 就可以编写 HTML 文件的内容了.
HTML 中的标签是不区分大小写的, 也不区分单双引号.
程序示例:
<html> <head> <title>HTML 快速入门</title> </head> <body> <h1>Hello html</h1> <img src="1.jpg"></img> </body> </html>
效果:
使用 VS Code
Visual Studio Code (简称 VS Code), 是 Microsoft 于 2015 年 4 月发布的一款代码编辑器.
安装这些插件:
HTML CSS Support
在编写样式表的时候, 自动补全功能大大缩减了编写时间.
JavaScript (ES6) code snippets
支持 ES6 语法提示.
Mithril Emmet
一个能大幅度提高前端开发效率的一个工具, 用于补全代码.
Path Intellisense
路径提示插件.
Vue 3 Snippets
在 Vue 2 或者 Vue 3 开发中提供代码片段, 语法高亮和格式化的 VS Code 插件, 能极大提高你的开发效率.
VueHelper
vscode 最好的 vue 代码提示插件, 不仅包括了 vue2 所有 api, 还含有 vue-router2 和 vuex2 的代码.
Auto Close Tag
自动闭合 HTML/XML 标签.
Auto Rename Tag
自动完成另一侧标签的同步修改.
JS-Beautify for VS Code
格式化 html, js, css.
open in browser
vscode 不像 IDE 一样能够直接在浏览器中打开 html, 而该插件支持快捷键与鼠标右键快速在浏览器中打开 html 文件, 支持自定义打开指定的浏览器, 包括: Firefox, Chrome, Opera, IE 以及 Safari.
Vetur
Vue 多功能集成插件, 包括: 语法高亮, 智能提示, emmet, 错误提示, 格式化, 自动补全, debugger. vscode 官方钦定 Vue 插件, Vue 开发者必备.
File Utils
File Utils 插件,可以方便快捷的来创建、复制、移动、重命名文件和目录.
IntelliJ IDEA Keybindings
安装 VSCode 的插件 IntelliJ IDEA Keybindings 即可在 VSCode 中使用 IDEA 的快捷键.
VS Code 快捷键
VS Code 复制文件
常用的标签
图片标签
<img>
src: 指定图像的 url (绝对路径/相对路径)
width: 图像的宽度 (像素 px/相对于父元素的百分比)
height: 图像的高度 (像素 px/相对于父元素的百分比)
width 和 height 一般只会指定一个, 否则容易改变图片原来的比例. 只设置一个值时, 另一个值会等比例缩放.
程序示例:
<html> <head> <title>焦点访谈: 中国底气 新思想夯实大国粮仓</title> </head> <body> <!-- 占父元素的 80%, 此处 image 的父元素是 body, 也就是这张图片占 body 的 80%, 由于定义的是 width 的值, 所以也就是图片的宽度占了 body 的宽度的 80% --> <img src="img/news_logo.png" width="80%"></img>新浪政务 > 正文 <h1>焦点访谈: 中国底气 新思想夯实大国粮仓</h1> </body> </html>
标题标签
<h1>
~ <h6>
水平线标签
<hr>
按下 ! 快速生成 HTML 结构
这里的 ! 必须是英文状态下的 !
自动生成的代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
生成之后只需要改动两个地方, 一个是 title 标签, 另一个是 body 标签.
<!DOCTYPE html>
是声明这个文档的类型为 HTML.
<meta charset="UTF-8">
用来声明文档的字符集为 UTF-8.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
用来设置浏览器的兼容性.
相对路径与绝对路径
找磁盘中一个文件的绝对磁盘路径的方法:
找网络上的一个文件的绝对网络路径的方法:
如果用了网络路径, 那么代码执行时就需要联网从互联网上的这个路径中加载并展示这张图片.
相对路径:
-
./
: 当前目录,./
可以省略的. -
../
: 上一级目录, 不能省略.
浏览器中查看页面布局
在浏览器中查看页面布局的方法:
程序示例:
<!-- 声明这个文档的类型为 HTML --> <!DOCTYPE html> <html lang="en"> <head> <!-- 声明文档的字符集为 UTF-8 --> <meta charset="UTF-8"> <!-- 设置浏览器的兼容性 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>焦点访谈: 中国底气 新思想夯实大国粮仓</title> </head> <body> <!-- img标签: src:图片资源路径 width:宽度 height:高度 --> <!-- 路径书写方式: 绝对路径: 1.绝对磁盘路径:E:\Computer\Java\JavaWeb\DAY01 HTML, CSS 快速入门\img\news_logo.png <img src="E:\Computer\Java\JavaWeb\DAY01 HTML, CSS 快速入门\img\news_logo.png"></img> 2.绝对网络路径:https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png 相对路径: ./: 当前目录, ./ 可以省略的 ../: 上一级目录, 不能省略 --> <!-- 占父元素的 80%, 此处 image 的父元素是 body, 也就是这张图片占 body 的 80%, 由于定义的是 width 的值, 所以也就是图片的宽度占了 body 的宽度的 80% --> <img src="img/news_logo.png"></img>新浪政务 > 正文 <h1>焦点访谈: 中国底气 新思想夯实大国粮仓</h1> <hr> 2023年03月02日 21:50 央视网 <hr> </body> </html>
效果:
CSS 引入方式
CSS 引入方式
一. 行内样式
在 HTML 标签内, 通过 style 这个属性来指定 CSS 的样式, style 属性的值就是 CSS 的样式, 格式为属性名:属性值, 多个属性之间用分号间隔开. 这种行内样式仅仅只针对这一个标签有效. (不推荐)
二. 内嵌样式
在 HTML 页面内, 编写一对 style 标签, style 标签内就是在声明 CSS 样式.
style 标签可以写在页面任何位置, 但通常约定写在 head 标签中.
这种方式定义的 CSS 样式针对当前 HTML 文件的同一个选择器都有效.
上图中, h1 是选择器, 当前 HTML 文件中, 所有的 h1 标题都遵从这里定义的 CSS 样式.
三. 外联样式
将方式二中的 css 代码写在一个单独的 .css
文件中, 在想要使用这一个 css 样式的 HTML 文件中, 通过 link 标签来引入.
css 文件的后缀是 .css
.
方式一程序示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>焦点访谈: 中国底气 新思想夯实大国粮仓</title> </head> <body> <img src="img/news_logo.png"></img>新浪政务 > 正文 <!-- 方式一: 行内样式 --> <!-- 只对这一个标签有效, 其他标签无效 --> <h1 style="color: red;">焦点访谈: 中国底气 新思想夯实大国粮仓</h1> <hr> 2023年03月02日 21:50 央视网 <hr> </body> </html>
效果:
方式二程序示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>焦点访谈: 中国底气 新思想夯实大国粮仓</title> <style> h1 { color: red; } </style> </head> <body> <img src="img/news_logo.png"></img>新浪政务 > 正文 <!-- 方式一: 行内样式 --> <!-- 只对这一个标签有效, 其他标签无效 --> <h1>焦点访谈: 中国底气 新思想夯实大国粮仓</h1> <hr> 2023年03月02日 21:50 央视网 <hr> </body> </html>
效果和方式一相同.
stylesheet: 层叠样式表.
方式三程序示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>焦点访谈: 中国底气 新思想夯实大国粮仓</title> <link rel="stylesheet" href="./css/news.css"> </head> <body> <img src="img/news_logo.png"></img>新浪政务 > 正文 <h1>焦点访谈: 中国底气 新思想夯实大国粮仓</h1> <hr> 2023年03月02日 21:50 央视网 <hr> </body> </html>
href 指定要导入的 css 文件的路径.
rgb(0, 0, 0) 表示黑色.
十六进制表示法中, 如果表示红色的两位值一样, 则可以只写一位, 表示绿色和蓝色的两位同理. 即 #000
等价于 #000000
, #ff0000
可以简写为 #f00
.
代码提示了这种简写方式:
没有语义的标签 span
span 标签是用来组合行内元素的.
<span>
是一个在开发网页时大量会用到的没有语义的布局标签. 特点: 一行可以显示多个 (组合行内元素), 宽度和高度默认由内容撑开.
CSS 选择器
CSS 选择器: 用来选取需要设置样式的元素 (标签)
-
元素选择器: 根据标签的名字来选择要设置样式的元素.
-
id 选择器: 可以给一个标签指定一个 id 属性, 然后通过这个 id 来选择要设置的 css 样式的元素. id 在页面当中是不能重复的.
-
类选择器: 根据标签当中所指定的 class 这个属性来选择对应的元素, 在一个页面中, class 属性是可以重复的.
元素选择器:
程序示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>焦点访谈: 中国底气 新思想夯实大国粮仓</title> <style> h1 { color: #4D4F53; } /* 元素选择器 */ span { color: red; } </style> </head> <body> <img src="img/news_logo.png"></img>新浪政务 > 正文 <h1>焦点访谈: 中国底气 新思想夯实大国粮仓</h1> <hr> <span>2023年03月02日 21:50</span> <span>央视网</span> <hr> </body> </html>
效果:
类选择器:
程序示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>焦点访谈: 中国底气 新思想夯实大国粮仓</title> <style> h1 { color: #4D4F53; } /* 类选择器 */ .cls { color: red; } </style> </head> <body> <img src="img/news_logo.png"></img>新浪政务 > 正文 <h1>焦点访谈: 中国底气 新思想夯实大国粮仓</h1> <hr> <span class="cls">2023年03月02日 21:50</span> <span>央视网</span> <hr> </body> </html>
效果:
id 选择器:
程序示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>焦点访谈: 中国底气 新思想夯实大国粮仓</title> <style> h1 { color: #4D4F53; } /* id 选择器 */ #time { color: red; } </style> </head> <body> <img src="img/news_logo.png"></img>新浪政务 > 正文 <h1>焦点访谈: 中国底气 新思想夯实大国粮仓</h1> <hr> <span id="time">2023年03月02日 21:50</span> <span>央视网</span> <hr> </body> </html>
效果和上图一致.
三种选择器的优先级: id 选择器 → 类选择器 → 元素选择器
程序示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>焦点访谈: 中国底气 新思想夯实大国粮仓</title> <style> h1 { color: #4D4F53; } /* 类选择器 */ .cls { color: red; } /* id 选择器 */ #time { color: blue; } /* 元素选择器 */ span { color: green; } </style> </head> <body> <img src="img/news_logo.png"></img>新浪政务 > 正文 <h1>焦点访谈: 中国底气 新思想夯实大国粮仓</h1> <hr> <span id="time" class="cls">2023年03月02日 21:50</span> 央视网 <hr> </body> </html>
效果:
超链接
标签: <a href="..."target="...">央视网</a>
属性:
href: 指定资源访问的 url
target: 指定在何处打开资源链接
_self
: 默认值, 在当前页面打开
_blank
: 在空白页面打开
超链接默认是蓝色字体, 且加上了一个下划线.
想要去掉超链接的下划线时, 需要使用 css 样式中的文本装饰 text-decoration.
程序示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>焦点访谈: 中国底气 新思想夯实大国粮仓</title> <style> h1 { color: #4D4F53; } /* 类选择器 */ .cls { color: red; } /* id 选择器 */ #time { color: blue; } /* 元素选择器 */ span { color: green; } /* 通过元素选择器将超链接的文字设置为黑色 */ a { color: black; text-decoration: none; /* 去掉超链接的下划线 */ } </style> </head> <body> <img src="img/news_logo.png"></img> <a href="https://gov.sina.com.cn/" target="_blank">新浪政务</a> > 正文 <h1>焦点访谈: 中国底气 新思想夯实大国粮仓</h1> <hr> <span id="time" class="cls">2023年03月02日 21:50</span> <span><a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml">央视网</a></span> <hr> </body> </html>
效果:
视频标签 <video>
和音频标签 <audio>
视频标签 <video>
-
src: 规定视频的 url
-
controls: 显示播放控件
-
width: 播放器的宽度
-
height: 播放器的高度
width 和 height 一般都只会调整一项, 另一项会等比例变化.
音频标签 <audio>
-
src: 规定音频的 url
-
controls: 显示播放控件
段落标签 <p>
要让段落有首行缩进的效果时, 需要借助 css 样式 text-indent.
要设置段落的行高时, 需要借助 css 样式 line-height.
文本加粗标签 <b>/<strong>
HTML 中, 如果标签名和标签值相同, 则可以省略标签值, 即完整格式为标签名:标签值, 省略写为标签名.
在 HTML 中无论输入多少个空格, 只会显示一个. 可以使用空格占位符:
, 如果需要多个空格, 就写多个
.
程序示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>焦点访谈: 中国底气 新思想夯实大国粮仓</title> <style> h1 { color: #4D4F53; } /* 类选择器 */ .cls { color: red; } /* id 选择器 */ #time { color: blue; } /* 元素选择器 */ span { color: green; } /* 通过元素选择器将超链接的文字设置为黑色 */ a { color: black; text-decoration: none; /* 去掉超链接的下划线 */ } p { text-indent: 35px; line-height: 30px; } #plast { text-align: right; } </style> </head> <body> <img src="img/news_logo.png"></img> <a href="https://gov.sina.com.cn/" target="_blank">新浪政务</a> > 正文 <h1>焦点访谈: 中国底气 新思想夯实大国粮仓</h1> <hr> <span id="time" class="cls">2023年03月02日 21:50</span> <span><a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml">央视网</a></span> <hr> <!-- 正文 --> <!-- 添加视频 --> <video src="./video/1.mp4" controls width="60%"></video> <p> <b>央视网消息</b> (焦点访谈) : 党的十八大以来, 以同志为核心的党中央始终把解决粮食安全问题作为治国理政的头等大事, 重农抓粮一系列政策举措有力有效, 我国粮食产量站稳1.3万亿斤台阶, 实现谷物基本自给、口粮绝对安全. 我们把饭碗牢牢端在自己手中, 为保障经济社会发展提供了坚实支撑, 为应对各种风险挑战赢得了主动. 连续八年1.3万亿斤, 这个沉甸甸的数据是如何取得的呢? </p> <p> 人勤春来早, 春耕农事忙. 立春之后, 由南到北, 我国春耕春管工作陆续展开, 春天的田野处处生机盎然. </p> <!-- 添加音频 --> <audio src="./audio/1.mp3" controls></audio> <p id="plast">责任编辑: 王树淼 SN242</p> </body> </html>
盒子模型
盒子: 页面中所有的元素 (标签), 都可以看做是一个盒子, 由盒子将页面中的元素包含在一个矩形区域内, 通过盒子的视角更方便的进行页面布局.
盒子模型组成: 内容区域 (content)、内边距区域 (padding)、边框区域 (border)、外边距区域 (margin)
盒子大小范围不包括外边距.
布局标签: 实际开发网页中, 会大量频繁的使用 div 和 span 这两个没有语义的布局标签.
div 标签:
一行只显示一个 (独占一行)
宽度默认是父元素的宽度, 高度默认由内容撑开
可以设置宽高 (width、height)
span 标签:
一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高 (width、height)
div 的 width 和 height 默认指的是 content 的宽和高, 但是可以用 css 属性 box-sizing 来修改.
css 的 padding 属性按照上, 右, 下, 左的顺序来指定, 如果四个方向的值都一样, 则只需要写一个.
程序示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子模型</title> <style> div { width: 200px; height: 200px; box-sizing: border-box; /* 指定 width height 为盒子的宽高 */ background-color: aqua; padding: 20px; border: 10px solid red; /* 边框 宽度 线条类型 线条颜色 */ margin: 30px; } </style> </head> <body> <div> A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div> </body> </html>
结果:
可以看出盒子的尺寸为 10+20+140+20+10=200, 也就是代码里面设定的数值.
注意: 如果只需要设置某一个方位的边框、内边距、外边距, 可以在属性名后加上 -位置
, 如: padding-top、padding-left、padding-right ...
程序示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>焦点访谈: 中国底气 新思想夯实大国粮仓</title> <style> h1 { color: #4D4F53; } /* 类选择器 */ .cls { color: red; } /* id 选择器 */ #time { color: blue; } /* 元素选择器 */ span { color: green; } /* 通过元素选择器将超链接的文字设置为黑色 */ a { color: black; text-decoration: none; /* 去掉超链接的下划线 */ } p { text-indent: 35px; line-height: 30px; } #plast { text-align: right; } #center { width: 65%; margin: 0% 17.5% 0% 17.5%; /* 通过外边距来让页面居中 */ /* 简化写法 */ margin: 0% auto; } </style> </head> <body> <div id="center"> <img src="img/news_logo.png"></img> <a href="https://gov.sina.com.cn/" target="_blank">新浪政务</a> > 正文 <h1>焦点访谈: 中国底气 新思想夯实大国粮仓</h1> <hr> <span id="time" class="cls">2023年03月02日 21:50</span> <span><a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml">央视网</a></span> <hr> <!-- 正文 --> <!-- 添加视频 --> <video src="./video/1.mp4" controls width="60%"></video> <p> <b>央视网消息</b> (焦点访谈) : 党的十八大以来, 以同志为核心的党中央始终把解决粮食安全问题作为治国理政的头等大事, 重农抓粮一系列政策举措有力有效, 我国粮食产量站稳1.3万亿斤台阶, 实现谷物基本自给、口粮绝对安全. 我们把饭碗牢牢端在自己手中, 为保障经济社会发展提供了坚实支撑, 为应对各种风险挑战赢得了主动. 连续八年1.3万亿斤, 这个沉甸甸的数据是如何取得的呢? </p> <p> 人勤春来早, 春耕农事忙. 立春之后, 由南到北, 我国春耕春管工作陆续展开, 春天的田野处处生机盎然. </p> <!-- 添加音频 --> <audio src="./audio/1.mp3" controls></audio> <p id="plast">责任编辑: 王树淼 SN242</p> </div> </body> </html>
表格标签
th 定义的表头单元格, 具有表头字体加粗及居中展示的效果. 普通单元格使用 td 就可以了.
表格默认没有边框, 设置 border 属性可以生成边框.
默认情况, 单元格之间有空白:
指定了 cellspacing 为 0 后, 单元格之间的空白消失:
程序示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML-表格</title> <style> td { text-align: center; /* 单元格内容居中展示 */ } </style> </head> <body> <table border="1px" cellspacing="0" width="600px"> <tr> <th>序号</th> <th>品牌Logo</th> <th>品牌名称</th> <th>企业名称</th> </tr> <tr> <td>1</td> <td> <img src="img/huawei.jpg" width="100px"> </td> <td>华为</td> <td>华为技术有限公司</td> </tr> <tr> <td>2</td> <td> <img src="img/alibaba.jpg" width="100px"> </td> <td>阿里</td> <td>阿里巴巴集团控股有限公司</td> </tr> </table> </body> </html>
效果:
表单标签
表单标签 form
场景: 在网页中主要负责数据采集功能, 如注册、登录等数据采集, 采集到数据之后, 将这些数据发送到服务端, 服务端就可以将这些数据保存起来, 这些数据一般都是保存在数据库中.
标签: <form>
表单指的是一个整体. 表单当中有一项一项的内容, 称为表单项或者表单元素.
表单项必须有 name 属性才可以提交.
表单项: 不同类型的 input 元素、下拉列表、文本域等.
<input>
: 定义表单项, 通过 type 属性控制输入形式
<select>
: 定义下拉列表
<textarea>
: 定义文本域
表单的两个属性:
action: 规定当提交表单时向何处发送表单数据, URL
method: 规定用于发送表单数据的方式. GET、POST. get 是 method 的默认值.
get 方式导致 url 变长, 那么就对 url 长度有限制, 所以较大的表单是无法提交的.
程序示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML-表单</title> </head> <body> <!-- form表单属性: action: 表单提交的 url, 往何处提交数据. 如果不指定, 默认提交到当前页面 method: 表单的提交方式 . get: 在 url 后面拼接表单数据, 比如: ?username=Tom&age=12, url 长度有限制. get 是默认值. post: 在消息体 (请求体) 中传递的, 参数大小无限制的. --> <form action="" method="post"> 用户名: <input type="text" name="username"> 年龄: <input type="text" name="age"> <input type="submit" value="提交"> </form> </body> </html>
get 模式表单数据的提交方式:
post 模式表单数据提交方式:
在 post 提交方式当中, 表单数据是在消息体/请求体当中传递的, 表单数据的大小没有限制.
表单项
下拉列表:
文本域:
程序示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML-表单项标签</title> </head> <body> <!-- value: 表单项提交的值 --> <form action="" method="post"> 姓名: <input type="text" name="name"> <br><br> 密码: <input type="password" name="password"> <br><br> 性别: <input type="radio" name="gender" value="1"> 男 <label><input type="radio" name="gender" value="2"> 女 </label> <br><br> 爱好: <label><input type="checkbox" name="hobby" value="java"> java </label> <label><input type="checkbox" name="hobby" value="game"> game </label> <label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br> 图像: <input type="file" name="image"> <br><br> 生日: <input type="date" name="birthday"> <br><br> 时间: <input type="time" name="time"> <br><br> 日期时间: <input type="datetime-local" name="datetime"> <br><br> 邮箱: <input type="email" name="email"> <br><br> 年龄: <input type="number" name="age"> <br><br> 学历: <select name="degree"> <option value="">----------- 请选择 -----------</option> <option value="1">大专</option> <option value="2">本科</option> <option value="3">硕士</option> <option value="4">博士</option> </select> <br><br> 描述: <textarea name="description" cols="30" rows="10"></textarea> <br><br> <input type="hidden" name="id" value="1"> <!-- 表单常见按钮 --> <input type="button" value="按钮"> <input type="reset" value="重置"> <input type="submit" value="提交"> <br> </form> </body> </html>
效果:
提交数据:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升