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

前端-HTML-zxst

news 2025/9/17 10:34:17

HTML

  • HTML是超文本标记语言（HyperText Mark-up Language）

  • CSS是层叠样式表（Cascading Style Sheets）

  • JS，即JavaScript是一种具有函数优先的轻量级，解释型或即时编译型的编程语言

<!--doctype标签声明这个文件是一个html文件-->
<!DOCTYPE html>
<html><head><meta charset="utf-8"/><title></title></head><body></body>
</html>
  • html使用的是一些标签（标记标签）
  • 标签是由尖括号包着的关键字
  • 标签一般情况下都是成对出现
  • 第一个叫开始标签，后边的叫结束标签
  • 标签可以包含标签，但是标签不可以交叉使用
  • 一个html文件，就叫一个html文档，也就是一个网页

常用标签

  • 超链接
    • target属性
      • _self（默认）
      • _blank
<a href="www.baidu.com" target="_slef">百度一下</a>
  • 图片
    • src：既可以写相对地址，也可以写绝对地址。相对地址是相对于html文件所在的昂前目录。需要先将图片导入到项目中，比如放到 img 目录下，才可以通过该属性找到图片。
    • width
    • height

另外这个标签可以不用关闭的，或者说可以自关闭。

<img src="img/xiaomi.jpg"/>
  • 换行
<br />
  • 水平线
<hr />
  • 六级标题
<h1>一级标题</h1> <h6>六级标题</h6>
  • 列表（无序列表）
<ul><li>A.选C</li><li>C.选A</li>
</ul>
  • 列表（有序列表）
<ol><li>A.选C</li><li>C.选A</li>
</ol>
  • 空格（转义字符）
空格：&nmsp; 小于号：&lt; 大于号：&gt;
  • 块

尝试用着标签进行网页布局

<div></div>
  • 表格
    • 表头
      • 行标签
      • 列标签
    • 表体
      • 行标签
      • 列标签
    • 表尾
      • 行标签
      • 列标签
<table><thead><tr><!--表头里面我们一般不写 <td> 而写 <th>--><th>第一列</th><th>第二列</th><th>第三列</th></tr></thead><tbody><tr><!--合并单元格一般是在 th 和 td 标签上操作colspan="x",x表示这个标签占x列合并不仅有列合并，也有行合并--><td colspan="2">a1</td><td>a2</td><td>a3</td><td rowspan="2">a1</td><td>a2</td><td>a3</td></tr></tbody><tfoot><tr><td></td></tr></tfoot>
</table><!--像这种情况，加载网页时，会自动加上<tbody>标签因此表格标签很容易造成层级错误
-->
<table><tr><td></td></tr>
</table>
  • 段落标签
<p>文本内容</p>
  • span标签
<span></span>

块级元素，行级元素

  • 块级元素

    独占一行，另起一行显示，后边的元素也是另起一行

    可以设置宽高，但是只是控制了中间内容，任然改变不了是个块级元素，所以还是独占一行。

  • 行内元素

    和相邻的元素挨在一起，如果到头了再另起一行。

    宽高都无法设置，宽高的值源于内容。

  • 行内块级元素

    整合了两种元素的优点

表单

  • 表单
    • form 标签，一个 form 就是一个表单
      • action属性：通过不同的请求地址区分不同的行为
      • target：和超链接的 target 属性效果一样
      • method：代表表单提交的方式
        • get（默认）
        • post

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PRPNXFNZ-1677157615690)(C:\Users\99498\AppData\Roaming\Typora\typora-user-images\image-20230214201937581.png)]

  • 表单项
    • input 标签，是一个自关闭标签
      • type 属性
        • text：文本类型（默认）
        • password：密码类型
        • number：只允许输入数字
        • date：日期
        • radio：单选，只能选中不能取消
        • checkbox：多选
        • button：按钮，提交表单
        • file：浏览并选择本地文件
      • name 属性，只有name的值一样，radio 才能有我们想要的单选效果。另外，name 最重要的作用是提交表单时给每个参数起一个名字
      • value：一般用来设置按钮的文字信息，或者输入框的初始值
      • checked：选中属性，可以不写属性值
      • readonly：只读，可以不写属性值
    • select标签，下拉框，默认选择第一个
      • option：选项
        • value：选择的东西提交的时候，不能直接提交文字，但是可以提交编号之类的信息，需要用到value属性
        • selected：下拉框选中，可以不写属性值
    • textarea标签，大文本区域
    • button标签，也是一个按钮，只有放在表单里面才有提交的作用，不常用。
<!--注意action的值不宜过程，可以通过斜杠“/”划分注意提交的地址也有相对和绝对之分，比如1. /employee/add提交后url变成：http://127.0.0.1:8848/employee/add?name=zhangsan&pwd=1254&age=21&birthday=2023-01-30&gender=on&hobby=on&hobby=on&province=%E5%B1%B1%E4%B8%9C%E7%9C%812. employee/add提交后url变成：http://127.0.0.1:8848/HTML1/employee/add?name=%E5%BC%A0%E4%B8%89&pwd=123&age=231&birthday=2023-01-31&hobby=on&hobby=on&province=1注意：form 表单一提交是要换页面的！
-->
<form action="/employee/add">用户名：<input type="text" name="name"/><br/>密码：<input type="password" name="pwd"/><br/>年龄：<input type="number" name="age"/><br/>生日：<input type="date" name="birthday"/><br/>性别：男<input type="radio" name="gender"/>女<input type="radio" name="gender"/><br/>爱好：网球<input type="checkbox" checked="checked" name="hobby"/>游戏<input type="checkbox" checked name="hobby"/><br/>省份：<select name="province"><option value="1">山东省</option><option value="2">山东省</option></select><br/><input type="submit" value="提交"/><br/>
</form>

点击提交按钮，地址栏的信息变成

http://127.0.0.1:8848/employee/add?name=zhangsan&pwd=1254&age=21&birthday=2023-01-30&gender=on&hobby=on&hobby=on&province=%E5%B1%B1%E4%B8%9C%E7%9C%81

相关文章：

前端-HTML-zxst

HTML HTML是超文本标记语言&#xff08;HyperText Mark-up Language&#xff09; CSS是层叠样式表&#xff08;Cascading Style Sheets&#xff09; JS&#xff0c;即JavaScript是一种具有函数优先的轻量级&#xff0c;解释型或即时编译型的编程语言 <!--doctype标签声明…...

编程日记 2023/2/24 3:11:38

终极方案，清理 docker 占用磁盘过大问题， 亲测有效！

背景 在笔者的工作测试环境中&#xff0c;使用过程中突然出现根磁盘快吃满了&#xff08;docker也是使用的根池盘的/var/lib/docker&#xff09;&#xff0c; wtf &#xff1f; 服务用不了&#xff1f; 当然网上找到了一些常规的清楚docker 日志文件 但是通过df -hT 查看到over…...

编程日记 2023/2/24 3:10:33

puzzle（1321）时间旅人

时间旅人 最强大脑同款项目。​​​​​​​ 每个指针会带动周围2圈指针一起带动&#xff0c;内圈8个旋转180度&#xff0c;外圈16个旋转90度&#xff0c;全部调整为朝上则胜利。 问题本质&#xff1a; 很明显&#xff0c;问题本质就是求每个格子的点击次数&#xff0c;最少为…...

编程日记 2023/2/24 3:09:22

活动预告 | 2023 Meet TVM 开年首聚，上海我们来啦！

内容一览&#xff1a;从去年 12 月延期至今的 TVM 线下聚会终于来了&#xff01;首站地点我们选在了上海&#xff0c;并邀请到了 4 位讲师结合自己的工作实践&#xff0c;分享 TVM 相关的开发经验&#xff0c;期待与大家线下相聚~ 关键词&#xff1a;2023 Meet TVM 线下活动 自…...

编程日记 2023/2/24 3:08:16

CoreIDRAW 软件的强大功能及适用性

1.1 绘图功能CoreIDRAW 软件是一种特殊的设计软件和图形绘制软件&#xff0c;使用方便、功能强大&#xff0c;在网页效果、商业插画设计、海报广告设计、平面设计等各类行业中都得到广泛的应用&#xff0c;在服装设计行业中&#xff0c;也逐渐地投入使用。由于纺织服装行业在设…...

编程日记 2023/2/24 3:07:11

JavaScript Window History

在 Web 开发中&#xff0c;JavaScript Window History&#xff08;浏览器窗口历史记录&#xff09;是一个非常有用的对象&#xff0c;它提供了一个接口来与浏览器历史记录进行交互。JavaScript Window History 对象允许您访问当前会话的历史记录&#xff0c;以及在会话历史记录…...

编程日记 2023/2/24 3:06:04

2023年人力资源管理师报名和培训费用是多少

2023年考人力资源管理师各个地区的收费标准不同&#xff0c;报名费用在几百元左右&#xff0c;培训费上千&#xff0c;具体看各地区人力资源管理师考试报名要求。 12023人力资源管理师考试费用 人力资源管理师考试分为四个等级&#xff0c;各级别费用是不同的&#xff0c;一般来…...

编程日记 2023/2/24 3:04:59

2023-2-23 刷题情况

灌溉花园的最少水龙头数目 题目描述 在 x 轴上有一个一维的花园。花园长度为 n&#xff0c;从点 0 开始&#xff0c;到点 n 结束。 花园里总共有 n 1 个水龙头&#xff0c;分别位于 [0, 1, …, n] 。 给你一个整数 n 和一个长度为 n 1 的整数数组 ranges &#xff0c;其中…...

编程日记 2023/2/24 3:03:52

数据归档，存储的完美储备军

数据爆炸性增长的同时&#xff0c;存储成为了大家首要担心的问题大家都希望自家数据保存20年、50年后仍完好无损但是&#xff0c;N年后的数据量已达到一个无法预测的峰值如此大量的数据在保存时极可能存在丢失、损坏等问题这时需要提前对数据进行“备份”、“归档”备份是对数据…...

编程日记 2023/2/24 3:02:46

ES6-11、基本全部语法

一,变量声明&#xff1a;let声明变量&#xff1a;1.变量不可重复声明&#xff0c;let star 罗志祥 let star 小猪结果报错2.块级作用域&#xff0c;{ let girl 周扬青 }在大括号内的都属于作用域内3.不存在变量提升4.不影响作用域链const声明常量&#xff1a;const SCHOOL …...

编程日记 2023/2/24 3:01:40

Spring Boot整合Thymeleaf和FreeMarker模板

虽然目前市场上多数的开发模式采用前后端分离的技术&#xff0c;视图层的技术在小一些的项目中还是非常有用的&#xff0c;所以一直也占有一席之地&#xff0c;如spring官方的spring.io等网站就是使用视图层技术实现的。 目前Spring Boot支持的较好的两个视图层模板引擎是Thyme…...

编程日记 2023/2/24 3:00:32

SQL的四种连接-左外连接、右外连接、内连接、全连接

SQL的四种连接-左外连接、右外连接、内连接、全连接 内连接inner join…on… / join…on… 展现出来的是共同的数据 select m.Province,S.Name from member m inner join ShippingArea s on m.Provinces.ShippingAreaID; 相当于&#xff1a;select m.Province,S.Name from m…...

编程日记 2023/2/24 2:59:26

“点工”的觉悟，5年时间从7K到24K的转变，我的测试道路历程~

2015年7月我从一个90%以上的人都不知道的二本院校毕业&#xff08;新媒体专业&#xff09;&#xff0c;凭借自学的软件测试&#xff08;点点点&#xff09;在北京找到了一份月薪7000的工作&#xff0c;在当时其实还算不错&#xff0c;毕竟我的学校起点比较差&#xff0c;跟大部…...

编程日记 2023/2/24 2:58:20

【Web安全-MSF记录篇章一】

文章目录前言msfvenom生成远控木马基本系统命令webcam 摄像头命令常用的信息收集脚本注册表设置nc后门开启 rdp&添加用户获取哈希mimikatz抓取密码前言 最近打站&#xff0c;可以感觉到之前的学的渗透知识忘记很多。。。。。多用多看多练&#xff0c;简单回顾一下 msfven…...

编程日记 2023/2/24 2:57:13

配置Flutter开发环境

一、在Windows上搭建Flutter开发环境 1、去flutter官网下载其最新可用的安装包&#xff0c;下载地址&#xff1a;https://flutter.dev/docs/development/tools/sdk/releases 。 注意&#xff0c;Flutter的渠道版本一直在不断的更新&#xff0c;请以Flutter官网为准。 另外&…...

编程日记 2023/2/24 2:56:07

23年六级缓考

【【六级674】3月六级规划+许愿成功的小伙伴记得来还愿啦！！（四六级延期考2周冲刺计划）】https://www.bilibili.com/video/BV1nx4y1w7fz?vd_source=5475f4f6010a81c8e6d4789af8e1a20f 作文...

编程日记 2023/2/24 2:55:01

低代码选型，论协同开发的重要性

Git是一款用于分布式版本控制的免费开源软件: 它可以跟踪到所有文件集中任意的变更&#xff0c;通常用于在软件开发期间&#xff0c;协调配合程序员之间的代码程序开发工作。 Git 最初诞生的原因源于Linux 内核的开发&#xff0c;2005年Linus Torvalds 编写出了Git。其他内核开…...

编程日记 2023/2/24 2:53:56

【第二十二部分】游标

【第二十二部分】游标 文章目录【第二十二部分】游标22. 游标22.1 游标的定义22.2 游标的使用22.3 游标优缺点总结22. 游标 22.1 游标的定义 当我们筛选条件的时候&#xff0c;虽然可以使用WHERE或者HAVING去选出我们想要的字段&#xff0c;但是去无法将一大块的结果集进行遍…...

编程日记 2023/2/24 2:52:51

【面试题】2023高频前端面试题20题

大厂面试题分享 面试题库前端后端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★地址&#xff1a;前端面试题库1. 简述 TCP 连接的过程&#xff08;淘系&#xff09;参考答案&#xff1a;TCP 协议通过三次握手建立可靠的点对点连接&#xff0c;具体过程…...

编程日记 2023/2/24 2:51:45

Spring解决循环依赖为什么需要三级缓存？

前言什么是循环依赖呢&#xff1f;我们抛开Spring这个框架来聊下什么是循环依赖&#xff0c;循环依赖可能在我们平时的开发过程中是属于比较常见的。Spring容器最大的功能就是对bean的生命周期进行管理&#xff0c;每个bean在创建的过程中&#xff0c;需要得到一个完整的bean需…...

编程日记 2023/2/24 2:50:38

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/9/7 11:32:34

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...

编程新知 2025/8/4 18:55:37

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

编程新知 2025/9/9 10:11:58

大语言模型如何处理长文本？常用文本分割技术详解

为什么需要文本分割？ 引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...

编程新知 2025/9/6 18:01:23

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

编程新知 2025/8/30 23:51:46

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

编程新知 2025/9/8 2:13:23

AI编程--插件对比分析：CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

编程新知 2025/7/6 18:33:10

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/9/11 9:39:35

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

编程新知 2025/9/2 19:12:02

【MATLAB代码】基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），针对传感器观测数据中存在的脉冲型异常噪声问题，通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现，验证了后者在状态估计鲁棒性方面的显著优…...

编程新知 2025/9/9 22:21:42