当前位置： 首页 > news >正文

html常用标签2和语法练习

news 2026/3/27 23:48:50

目录

1.表单标签

form标签

input标签

选择框

复选框:checkbox

 按钮框:button

文件选择框

多行编辑框:textarea 

2.html语法练习 

展示简历信息

填写简历信息 ​编辑

3.HTML特殊字符

1.表单标签

表单是让用户输入信息的重要途径

表单域:包含表单元素的区域,重点是form

表单控件:输入框,提交按钮,重点是input

form标签

使用form进行前后端交互,把页面上用户进行的操作/输入提交到服务器上.等学习了http协议再详述

input标签

input标签有很多种形态,能够表现成各种用户用来输入的组件

<input type="text">是单行文本框,框里可以进行输入

<input type="password">也是单行文本框,但是使用来输入密码的

 一些网站的登陆密码可以切换为文本或者不可见的,就是利用这个特点实现的

选择框

实现了选择功能

<body><!-- <input type="text"> --><!-- <input type="password"> -->请选择性别:<input type="radio">男<input type="radio">女
</body>

 我们发现即可以选男,也同时能选女,并不是单选效果.我们添加一个name属性实现单选

name属性相同的单选框,值之间是互斥的

<input type="radio" name = "gender">男<input type="radio" name = "gender">女

实现了单选效果

再加上checked属性,默认是女

<input type="radio" name = "gender" checked = "checked">女

复选框:checkbox

<body>明天有什么课?<input type="checkbox"> python<input type="checkbox"> java ee<input type="checkbox"> 编译原理<input type="checkbox"> 数据库原理
</body>

 也可以使用checked默认选中

 按钮框:button

<input type="button" value="这是一个按钮">

 点击按钮之后是啥情况具体操作要靠js来实现,alert就是js中提供的函数

<input type="button" value="这是一个按钮" onclick="alert('hello')">

提交按钮:submit

外表是和button差不多的,会触发form和服务器的交互

文件选择框

<input type="file">

点击选择文件就可选择文件上传 

下拉菜单:option

<select><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option>
</select>

效果: 

多行编辑框:textarea 

<body><textarea cols="30" rows="20">123456</textarea>
</body>

 上述这些标签可以称为"控件",是构成图形化界面的基本要素

div标签和span标签

这俩是无语义标签,也就是没有特定含义,适用于各种场景

div默认是独占一行的,是块级元素

span默认是不独占一行的,行内元素

表示一个内容还是优先考虑有确切语义的标签 

html的相关文档:mdn

2.html语法练习 

接下来用html写一个简单的页面

展示简历信息

代码:

<!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>个人简历</title>
</head>
<body><!-- 边框大小 --><div style="border: 3px solid black; width: 500px" ><!-- 正文 --><h1>YoLo的简历</h1><h2>基本信息</h2><img src="头像.png" height="200px"><p>求职意向:软件开发工程师</p><p>联系方式:13645671234</p><p>邮箱:435223443@qq.com</p><p><a href="https://blog.csdn.net/chenchenchencl?type=blog">我的博客</a></p><h2>教育背景</h2><ol><li>1998-2004 金伯利私立小学</li><li>2004-2007 金伯利私立初中</li><li>2007-2010 金伯利私立高中</li><li>2010-2014 杜克大学</li></ol><h2>专业技能</h2><ul><li>熟练掌握Java基本语法,熟悉面向对象程序设计思想</li><li>熟悉常用的数据结构与算法</li><li>熟悉操作系统中的典型概念,熟练掌握并发编程</li><li>熟练掌握网络编程,熟悉网络原理</li><li>熟练掌握SOL,能够进行基础的增删改查,熟悉索引和事务等机制</li></ul><h2>我的项目</h2><ol><li><h3>留言墙</h3><p>开发时间:2018-2021</p><div>功能介绍</div><ul><li>支持留言发布</li><li>支持匿名留言</li></ul></li><li><h3>学习小助手</h3><p>开发时间:2021-2023</p><div>功能介绍</div><ul><li>支持错题记录</li><li>支持课程回顾</li></ul></li></ol><h2>个人评价</h2><div>学习成绩优秀</div></div>
</body>
</html>

填写简历信息
 

<!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>Document</title>
</head>
<body><table width = "500px" cellspacing = "0"><thead><h3>请填写简历信息</h3></thead><tbody><tr><td><label for="name">姓名</label></td><td><input type="text" id = "name"></td></tr><tr><td>性别</td><td><input type="radio" name="sex" id="male" checked = "checked"><label for="male"><!-- 默认是男性 --><img src="th.jfif" alt="" width="20px">男</label><input type="radio" name="sex" id="male" ><label for="male"><img src="th (1).jfif" alt="" width="20px">男</label></td></tr><tr><td>出生日期</td><td><select><option>--请选择年份--</option><option>2001</option><option>2002</option><option>2003</option><option>2004</option></select><select><option>--请选择月份--</option><option value="">1</option><option value="">2</option><option value="">3</option><option value="">4</option><option value="">5</option><option value="">6</option><option value="">7</option><option value="">8</option><option value="">9</option><option value="">10</option><option value="">11</option><option value="">12</option></select><select><option>--请选择出生日期--</option><option value="">1</option><option value="">2</option><option value="">3</option><option value="">4</option><option value="">5</option><option value="">6</option><ption value="">7</option><option value="">8</option><option value="">9</option><option value="">10</option><option value="">11</option><option value="">12</option><option value="">13</option><option value="">14</option><option value="">15</option><option value="">16</option><option value="">17</option><option value="">18</option><option value="">19</option><option value="">20</option><option value="">21</option><option value="">22</option><option value="">23</option><option value="">24</option><option value="">25</option><option value="">26</option><option value="">27</option><option value="">28</option><option value="">29</option><option value="">30</option><option value="">31</option></select></td></tr><tr><td>就读学校</td><td> <input type="text"></td></tr><tr><td>应聘岗位</td><td><input type="checkbox" id="frontend"><label for="frontend">前端开发</label><input type="checkbox" id="backend"><label for="backend">后端开发</label><input type="checkbox" id="qa"><label for="qa">测试开发</label></td></tr><tr><td>掌握的技能</td><td><textarea name="" id="" cols="30" rows="10"></textarea></td></tr><tr><td>项目经历</td><td><textarea name="" id="" cols="30" rows="10"></textarea></td></tr><tr><td></td><td><input type="checkbox" id="lisence"><label for="lisence">我已经仔细阅读公司的招聘要求</label></td></tr><tr><td></td><td><a href="#">查看我的状态</a></td></tr><tr><td></td><td><h3>请招聘者确认：</h3><ul><li>以上信息真实有效</li><li>能尽快到公司实习</li><li>能接受加班</li></ul></td></tr></tbody></table>
</body></html>

3.HTML特殊字符

还有一些特殊字符,不能再html文件中直接表示

空格:&nbsp

小于号:&lt    (因为html就是用大量的<>标签来表示的,如果正常的使用大于号小于号会发生混淆,因此为了更清晰的使用和机器的解释,就规定了写法)

大于号:&gt

按位与:&amp 

相关文章：

html常用标签2和语法练习

目录 1.表单标签 form标签 input标签 选择框 复选框:checkbox 按钮框:button 文件选择框 多行编辑框:textarea 2.html语法练习 展示简历信息 填写简历信息 ​编辑 3.HTML特殊字符 1.表单标签 表单是让用户输入信息的重要途径 表单域:包含表单元素的区域,重点是form…...

编程日记 2023/3/4 1:59:18

【go语言之thrift协议三之client端分析】

go语言之thrift协议之client端分析runClientOpenprotocolFactory.GetProtocolhandleClientNewTStandardClientNewCalculatorClienthandleClient的具体实现上一篇文章分析了thrift协议server端的实现&#xff0c;这边还是基于官方的示例去分析。 import ("crypto/tls"…...

编程日记 2023/3/4 1:58:04

Codeforces Round #855 (Div. 3) A-E

传送门 A. Is It a Cat? 题意 给你一个只有英文字母的字符串&#xff0c;问你这个字符串是否由连续的’m’, ‘e’, ‘o’,‘w’,&#xff08;顺序不能改变&#xff09;构成&#xff0c;并且不区分大小写。 如&#xff1a; “meow”, “mmmEeOWww”, “MeOooOw” 是符合要求…...

编程日记 2023/3/4 1:56:36

3/3操作系统作业

目录 1.前趋图和程序执行 &#xff08;1&#xff09;前驱图 &#xff08;2&#xff09;程序的顺序执行 &#xff08;3&#xff09;程序的并发执行 2.进程的描述 &#xff08;1&#xff09;进程的定义与特征 ​编辑​编辑&#xff08;2&#xff09;进程控制块​编辑 &…...

编程日记 2023/3/4 1:55:04

「C/C++」 标准文件操作大全

一、设备文件&#xff08;运行程序时会默认打开这三个设备文件&#xff09; stdin&#xff1a;标准输入&#xff0c;默认为当前终端&#xff08;键盘&#xff09;&#xff0c;我们使用的scanf、getchar函数默认从此终端获得数据。stdout&#xff1a; 标准输出&#xff0c;默认…...

编程日记 2023/3/4 1:53:42

一款SAST工具需要支持多少种编译器呢？

除了Java语言&#xff0c;C#语言之外&#xff0c;C、C语言是编译器类型最多的编程语言&#xff0c;有几十种编译器&#xff0c;这些编译器方言为研发SAST工具带来了巨大的工作量&#xff0c;很多产品由于无法适配客户的编译器&#xff0c;导致无法检测。下面我们罗列一下国外和…...

编程日记 2023/3/4 1:52:27

jvm mat分析dump文件

jvm调优中&#xff0c;经常使用dump来分析是否存在大对象导致频繁full gc&#xff0c;以下为使用步骤&#xff1a; 一、获得服务进程 ps -ef | grep list-app | grep -v grep 二、生成dump文件 jmap -dump:formatb,filexxx.dump pid jmap -dump:filetest.hprof,formatb 3307…...

编程日记 2023/3/4 1:51:08

python16行代码获取原神全角色+全语音

前言 大家早好、午好、晚好吖 ❤ ~欢迎光临本文章 本来是不玩原神的&#xff0c;但是实在是经不住双重诱惑呀~ 毕竟谁能拒绝角色风景超级好看又可以爬树、炸鱼、壶里造房子、抓小动物、躲猫猫的游戏捏~ 今天点进官网~角色得配音让我沉陷其中&#xff0c;于是 我决定把他们爬…...

编程日记 2023/3/4 1:49:56

链接投票二维码制作制作投票链接视频选举投票制作

关于微信投票&#xff0c;我们现在用的最多的就是小程序投票&#xff0c;今天的网络投票&#xff0c;在这里会教大家如何用“活动星投票”小程序来进行投票。我们现在要以“信赖挚友”为主题进行一次投票活动&#xff0c;我们可以在在微信小程序搜索&#xff0c;“活动星投票”…...

编程日记 2023/3/4 1:48:41

HTTP 协议

HTTP&#xff08;hypertext transport Protocol&#xff09;&#xff1b;超文本传输协议&#xff0c;是浏览器与万维网服务器之间通信的规则。 规定了客户端与服务端之间互相发送内容的格式&#xff0c;客户端发给服务端的叫 请求协议&#xff0c;服务端返回给客户端的为 响应…...

编程日记 2023/3/4 1:47:26

公司新招了个人，一副毛头小子的样儿，哪想到是新一代卷王····

内卷&#xff0c;是现在热度非常高的一个词汇&#xff0c;随着热度不断攀升&#xff0c;隐隐到了“万物皆可卷”的程度。 在程序员职场上&#xff0c;什么样的人最让人反感呢? 是技术不好的人吗?并不是。技术不好的同事&#xff0c;我们可以帮他。 是技术太强的人吗?也不是…...

编程日记 2023/3/4 1:46:08

TSDF学习记录

【唐宇迪】三维重建-TSDF通俗解读 人工智能入门教程 水泡动画模拟&#xff08;Marching Cubes&#xff09; - 算法小丑 - 博客园 (cnblogs.com) TSDF 流程分析 首先需要构建一大块空区域采用体素网格来存储该区域需要计算每个体素的TSDF值及其权重 原理简述 SDF值&#x…...

编程日记 2023/3/4 1:44:43

【Linux】孤儿进程

在Linux中&#xff0c;如果子进程运行时&#xff0c;父进程因为某些原因先行终止&#xff0c;就称该子进程为孤儿进程。 我们编写如下代码&#xff1a; 子进程一直在运行&#xff0c;父进程运行一段时间后自动终止。运行该程序观察现象&#xff1a; 最开始时&#xff0c;子进程…...

编程日记 2023/3/4 1:43:24

ChatGPT解答：python大批量读写ini文件时，性能很低，有什么解决方法吗，给出具体的思路和实例

ChatGPT解答&#xff1a; python大批量读写ini文件时&#xff0c;性能很低&#xff0c;有什么解决方法吗&#xff0c;给出具体的思路和实例 ChatGPTDemo Based on OpenAI API (gpt-3.5-turbo). python大批量读写ini文件时&#xff0c;性能很低&#xff0c;有什么解决方法吗&…...

编程日记 2023/3/4 1:42:14

MySql主键id不推荐使用UUID

前言 昨天在某个技术群中&#xff0c;有个老哥发送了一个技术视频&#xff1a;讲的是一个毕业生面试被问&#xff0c;前后端的交互ID是使用自增的吗&#xff1f;为什么不使用UUID&#xff1f;最后的解释是说性能问题&#xff0c;这个引起了我的兴趣&#xff0c;查了一下资料总…...

编程日记 2023/3/4 1:40:57

密码算法（SM1、SM2、SM3、SM4、同态加密、密态计算、隐私计算和安全多方计算）

文章目录SM1 对称密码SM2 椭圆曲线公钥密码算法SM3 杂凑算法SM4 对称算法同态加密密态计算和隐私计算安全多方计算技术安全多方计算的应用场景对称加密算法非对称加密算法&#xff08;公钥加密&#xff09;参考文章SM1、SM2、SM3和SM4 为了保障商用密码的安全性&#xff0c;国家…...

编程日记 2023/3/4 1:39:40

保险行业中【内容行政系统】模块功能的实现

以下是一个基本的保险行业中的内容行政系统功能模块&#xff0c;包括对保单、理赔等方面的处理&#xff1a; 创建保单表创建理赔表创建保单查询视图创建理赔查询视图创建新保单更新保单状态创建理赔更新理赔状态-- 创建保单表 CREATE TABLE policies ( policy_id NUMBER PRIM…...

编程日记 2023/3/4 1:38:31

C语言入门知识——（7）VS2022的C语言基础调试

1、什么是bug 这个故事很多人都知道 1947年9月9日&#xff1a;第一个“Bug”被发现的时候&#xff1a;“1949年9月9日&#xff0c;我们晚上调试机器的时候&#xff0c;开着的窗户没有纱窗&#xff0c;机器闪烁的亮光几乎吸引来了世界上所有的虫子。果然机器故障了&#xff0c;…...

编程日记 2023/3/4 1:37:11

数据库可视化开发工具内容介绍

在现代化办公环境中&#xff0c;数据管理的重要性不言而喻。对于企业来说&#xff0c;将企业内部的数据做好规划和管理&#xff0c;可以给企业提升办公协作效率&#xff0c;为企业高层做出正确的经营决策奠定基础。本文主要给大家介绍的是数据化可视化开发工具的内容&#xff0…...

编程日记 2023/3/4 1:36:00

坚如磐石：TiDB 基于时间点的恢复（PiTR）特性优化之路丨6.5 新特性解析

本文介绍了 TiDB 数据库的基于时间点的恢复&#xff08;PiTR&#xff09;特性&#xff0c;该特性允许用户将数据库恢复到特定时间点&#xff0c;从而避免丢失重要数据。文章首先介绍了 PiTR 技术的基本概念和工作原理&#xff0c;接着探讨了 TiDB 对 PiTR 的优化&#xff0c;包…...

编程日记 2023/3/4 1:34:41

从零到精通：Human Resource Machine 全关卡高效解法与思维跃迁指南

1. 为什么《Human Resource Machine》是程序员的最佳思维训练场 第一次打开《Human Resource Machine》时&#xff0c;我以为这不过是个披着编程外衣的小游戏。但当我卡在"第三年"的关卡整整一个下午后&#xff0c;才意识到这可能是最接近真实编程思维的训练场。这款…...

编程新知 2026/3/27 23:46:49

计算机毕设 java 基于 BS 的驾校在线学习考试系统 SpringBoot 驾校在线学习与考试管理平台 JavaWeb 驾校理论学习与模拟考试系统

计算机毕设 java 基于 BS 的驾校在线学习考试系统 43i2x9&#xff0c;末尾的数字和英文也要加上 &#xff08;配套有源码 程序 mysql 数据库 论文&#xff09;本套源码可以先看具体功能演示视频领取&#xff0c;文末有联 xi 可分享随着驾考需求的不断增长&#xff0c;传统驾校理…...

编程新知 2026/3/27 22:46:24

如何快速掌握Windows文件夹色彩管理：Folcolor免费工具终极指南

如何快速掌握Windows文件夹色彩管理&#xff1a;Folcolor免费工具终极指南 【免费下载链接】Folcolor Windows explorer folder coloring utility 项目地址: https://gitcode.com/gh_mirrors/fo/Folcolor 你是否曾在密密麻麻的黄色文件夹中迷失方向&#xff1f;每天花费…...

编程新知 2026/3/27 22:14:06

uniApp离线打包实战避坑指南

1. 离线打包前的环境准备 第一次接触uniApp离线打包时&#xff0c;我踩过的第一个坑就是环境配置。当时以为只要安装了Android Studio就能万事大吉&#xff0c;结果编译时各种报错接踵而至。后来才发现&#xff0c;离线打包对开发环境的版本匹配要求极为严格&#xff0c;差一个…...

编程新知 2026/3/27 21:48:00

告别ZooKeeper！ClickHouse Keeper双机集群搭建全攻略（含常见报错解决方案）

ClickHouse Keeper双机集群实战指南&#xff1a;从零搭建到故障排查 1. 为什么选择ClickHouse Keeper替代ZooKeeper 在ClickHouse集群架构中&#xff0c;协调服务一直扮演着关键角色。传统方案依赖ZooKeeper实现分布式协调&#xff0c;但这种方式存在几个明显痛点&#xff1a; …...

编程新知 2026/3/27 21:35:56

如何快速使用OpCore Simplify：零基础黑苹果的终极配置指南

如何快速使用OpCore Simplify&#xff1a;零基础黑苹果的终极配置指南 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 还在为复杂的OpenCore配置而烦恼…...

编程新知 2026/3/27 17:35:58

JeecgBoot低代码开发平台终极实战指南：从零开始构建企业级应用

JeecgBoot低代码开发平台终极实战指南&#xff1a;从零开始构建企业级应用 【免费下载链接】jeecg-boot jeecgboot/jeecg-boot 是一个基于 Spring Boot 的 Java 框架&#xff0c;用于快速开发企业级应用。适合在 Java 应用开发中使用&#xff0c;提高开发效率和代码质量。特点是…...

编程新知 2026/3/27 16:35:29

ae新手福音，用快马平台ai生成带注释的片段视频代码轻松入门

作为一个刚接触AE的新手&#xff0c;第一次打开软件时确实被复杂的界面吓到了。各种面板、时间轴、效果控件看得眼花缭乱&#xff0c;更别说要自己写表达式了。直到发现了InsCode(快马)平台&#xff0c;用自然语言描述就能生成带详细注释的AE项目代码&#xff0c;简直是新手的救…...

编程新知 2026/3/27 16:19:21

OpenClaw资源监控方案：Qwen3-32B镜像驱动服务器健康巡检

OpenClaw资源监控方案&#xff1a;Qwen3-32B镜像驱动服务器健康巡检 1. 为什么需要AI驱动的资源监控&#xff1f; 去年我的个人开发服务器连续宕机三次&#xff0c;每次都是因为磁盘写满导致服务崩溃。传统监控工具虽然能发出警报&#xff0c;但往往在问题发生后才会触发&…...

编程新知 2026/3/27 15:35:02

环境感知驱动的EFI构建：让OpenCore配置效率提升300%

环境感知驱动的EFI构建&#xff1a;让OpenCore配置效率提升300% 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify OpenCore配置&#xff08;OpenCore是一…...

编程新知 2026/3/27 14:26:28