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

前端-HTML-zxst

news 2025/6/25 0:12:53

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

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

编程新知 2025/6/24 16:22:42

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2025/6/24 16:22:25

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

编程新知 2025/6/21 15:42:32

线程同步：确保多线程程序的安全与高效！

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

编程新知 2025/6/17 15:52:48

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

编程新知 2025/6/15 19:02:54

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

编程新知 2025/6/22 11:12:41

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/6/17 10:29:06

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

编程新知 2025/6/22 10:29:40

C# 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2025/6/23 16:19:33

C#学习第29天：表达式树（Expression Trees）

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

编程新知 2025/6/16 14:09:54