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

前端-HTML-zxst

news 2026/2/9 6:56:35

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

从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

编程新知 2026/2/8 7:23:45

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

编程新知 2025/12/5 3:38:11

根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

编程新知 2026/1/10 1:08:51

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

编程新知 2026/1/29 9:12:46

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

编程新知 2026/2/2 18:33:19

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

编程新知 2026/1/31 6:01:08

《Docker》架构

文章目录 架构模式单机架构应用数据分离架构应用服务器集群架构读写分离/主从分离架构冷热分离架构垂直分库架构微服务架构容器编排架构什么是容器&#xff0c;docker&#xff0c;镜像&#xff0c;k8s 架构模式 单机架构 单机架构其实就是应用服务器和单机服务器都部署在同一…...

编程新知 2026/2/4 16:31:26

消防一体化安全管控平台：构建消防“一张图”和APP统一管理

在城市的某个角落&#xff0c;一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延&#xff0c;滚滚浓烟弥漫开来&#xff0c;周围群众的生命财产安全受到严重威胁。就在这千钧一发之际&#xff0c;消防救援队伍迅速行动&#xff0c;而豪越科技消防一体化安全管控平台构建的消防“…...

编程新知 2026/2/6 5:47:08

高分辨率图像合成归一化流扩展

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 1 摘要 我们提出了STARFlow&#xff0c;一种基于归一化流的可扩展生成模型&#xff0c;它在高分辨率图像合成方面取得了强大的性能。STARFlow的主要构建块是Transformer自回归流&#xff08;TARFlow&am…...

编程新知 2026/1/23 12:11:55

EasyRTC音视频实时通话功能在WebRTC与智能硬件整合中的应用与优势

一、WebRTC与智能硬件整合趋势​ 随着物联网和实时通信需求的爆发式增长&#xff0c;WebRTC作为开源实时通信技术&#xff0c;为浏览器与移动应用提供免插件的音视频通信能力&#xff0c;在智能硬件领域的融合应用已成必然趋势。智能硬件不再局限于单一功能&#xff0c;对实时…...

编程新知 2026/2/8 2:10:10