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

HTML——前端基础1

article 2026/4/4 0:07:02

目录

前端概述

前端能做的事情​编辑

两步完成一个网页程序

前端工具的选择与安装

HTML

HTML5介绍

HTML5的DOCTYPE声明

HTML基本骨架

文字标签

标题之标签

标签之段落、换行、水平线

标签之图片

标签之超文本链接

标签之文本

列表标签之有序列表

列表标签之无序列表

标签之表格

表格单元格合并

Form表单（用户输入）

块元素和行内元素（内联元素）

HTML5新增标签

需要了解HTML三件套的基本使用，实操使用前端给后端发送Ajax请求

前端概述

前端能做的事情

app:uniapp、RN、Flutter

两步完成一个网页程序

  1. 第一步：使用记事本，编写代码

    • 创建一个文本文档，拓展名改为html

       <html><head><title>我的网页</title></head><body>Hello,我的第一个网页</body></html>

      • 记得保存ctrl+s

      • <>用英文

  2. 第二步，以浏览器方式打开即可

    • 双击

前端工具的选择与安装

  1. 浏览器

    • 谷歌

      • 简洁大方，打开响应速度快

      • 开发者调试工具

  2. 开发者工具

    • VSCode

      • 可以直接将code的文件夹拉入vscode里面，再在vscode里面添加文件，很方便

    • 生成浏览器文件.html的快捷方式

       !+回车

    • VsCode常用快捷键列表

       代码格式化:Shift+Alt+F向上或向下移动一行:Alt+Up或Alt+Down快速复制一行代码:Shift+Alt+Up 或 Shift+Alt+Down快速保存: ctl+s快速查找:Ctrl + F快速替换:Ctrl + H

    • 快速打开浏览器扩展：open in brower

      • 右键

HTML

HTML5介绍

  • 2014年

  • 超文本标记语言：用来描述网页的一种语言（布局语言）

  • 后缀以.html结尾

  • HTML是一种标记语言（一套标记标签）

    • 双标签<html></html>

    • 单标签<img>

  • 打开一个网页，右键空白部分-检查，会出现前端代码

  • 点第一个图标，当你鼠标指向页面的一个元素时，代码会跟随

HTML5的DOCTYPE声明

  • DOCTYPE是document type(文档类型)的缩写。

  •  <!DOCTYPE html>

    • 是H5的声明，位于文档的最前面：网页必备的组成部分，避免浏览器的怪异模式

HTML基本骨架

  1. html标签

    • 定义HTML文档。标签限定了文档的开始点和结束点

       <html></html>

  2. head标签

    • 定义文档的头部。

    • 描述了文档的各种属性和信息：文档的标题、在Web中的位置和其他文档的关系等

    • 绝大多数文档头部包含的数据不会真正作为内容显示给读者（不是给用户看的）

       <head></head>

  3. body标签

    • 定义文档的主体。

    • 包含文档的所有内容（文本、超链接、图像、表格和列表等）

    • 会直接在页面中显示出来（给用户看的）

       <body></body>

  4. title标签

    • 定义文档的标题

    • 显示在浏览器窗口的标题栏或状态栏上

    • 是head标签中唯一必须要求包含的东西

    • 有利于SEO优化

      • SEO是搜索引擎优化的英文缩写。通过对网站内容调整，满足搜索引擎的排名需求

       <titile></title>

  5. meta标签(单标签)

    • 描述一个HTML网页文档的属性，关键词等

    • charset="UTF-8"说明当前使用的是utf-8编码格式

       <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>itbaizhan</title></head><body></body></htm1>

文字标签

  •  <font></font><!--color face字体 size--><font color="bule">蔬菜</font>

标题之标签

  • 标题通过<h1>-<h6>标签进行定义（直接输入h1）

  • 之后会配合样式表CSS定义

     <h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>

  • 生成h1-h6快捷键：h$*6

  • 正确使用标题

    • 不要仅仅为了生成粗体或大号字体使用（CSS可以帮助完成）

    • 有利于SEO

  • 标题标签位置摆放

    • 在标签中<>添加属性，默认居左：

       <h1 align="center|left|right">

    • 报红不是报错，只是不推荐使用（CSS会改进）

标签之段落、换行、水平线

  1. 段落：<p></p>

    •  <body><p>我是一个段落标签</p>我是一个段落标签<!--虽然两个都是一样的输出，但是在html中不推荐直接把文本放在最外层，一定要通过标签承载--></body>

  2. 换行：<br>

  3. 水平线：<hr>

    • 可设置属性

       <hr color="" width="" size="" align=""/>

      • width：长度（px像素）

      • size：高度（px像素）

      • align：默认居中

标签之图片

  • <img>定义HTML页面中的图像

  • 必须将图片放在html文档统一目录下

  • 属性

    • src:路径(图片地址与名字)

    • alt:规定图像的替代文本（可提示是什么图像）

    • width:规定图像的宽度（单位：px）

    • height:规定图像的高度（单位：px）

      • 一般不设置，可能会失真

    • title:鼠标悬停在图片上给予提示（使用率较低）

  • 图片路径详解

    1. 绝对路径

      • 电脑的盘符存储与访问的具体地址

    2. 相对路径

      • 两者相对关系，在同一路径下可以直接访问

      • (照片相对于html文档)子级关系：/

      • 父级关系：../

      • 同级关系：./

    3. 网络路径

      • 图片是网络服务器的图片

标签之超文本链接

  • 超链接：想跳哪里跳哪里

  •  <a href="url">链接文本</a>

    • 在标签<a>中使用href属性来描述链接的地址（完整地址）

    • 未访问的链接：蓝色字体+下划线

    • 访问过的链接：紫色+下划线

    • 点击链接：红色+下划线

    • 后期会用CSS样式修改掉这些效果

      <body><a href="https://www.jd.com/">京东</a></body>

    • 点击哪吒（鼠标会变成小手）会跳转百度页面

标签之文本

  1. 常用文本标签

    标签描述
    <em>定义着重文字
    <b>定义粗体文本
    <i>定义斜体字italic
    <strong>定义加重语气
    <del>定义删除字
    <span>元素没有特定的含义
    <u>下划线underline
    <sup>上标
    <sub>下标

  2. 常用文本标签和段落不同，段落代表一段文本，文本标签表示文本词汇

列表标签之有序列表

  • 是一列项目，列表项目使用数字进行标记

  • 有序列表始于<ol>标签

  • 每个列表项始于<li>标签

  • type属性

    •  <ol>的属性type拥有的选项

    • 1表示列表项目用数字标号(1,2,3...)

    • a表示列表项目用小写字母标号(a,b,....)

    • A 表示列表项目用大写字母标号(A,B,C...)

    • i表示列表项目用小写罗马数字标号(i,ii,ii...)

    • I表示列表项目用大写罗马数字标号(1,,...)

       <ol type="A"><li>苹果</li><li>香蕉</li><li>梨子</li>
</ol>

    • 嵌套

       <ol><li>水果</li><li>蔬菜<ol><li>白菜</li><li>油菜</li><li>辣椒</li></ol></li><li>肉类</li></ol>

列表标签之无序列表

  • 是一个项目的列表，用粗体圆点（小黑圆圈）进行标记

  • 无序列表始于<ul>

  • 每个列表项始于<li>

  • type属性

    •  <ul>的属性type拥有的选项

    • disc 默认实心圆

    • circle 空心圆

    • square 小方块

    • none 不显示

  • 嵌套

  • 常见应用场景

    • 无序的列表效果

    • 导航效果

  • 快速生成ul+li的布局：ul>li*3(数字根据自己的需要的li数量修改)

标签之表格

  • 优点：展示数据简单，优秀

  • 表格标签：

    • 表格：<table>

    • 行：<tr>

    • 单元格（列）：<td>

  • 快速生成表格结构：table>tr*n>td{单元格}

  • 表格属性（在table里面）

    • border:表格边框

    • width:表格宽度

    • height:表格高度

表格单元格合并

  • 给表格更多可能性

  • 属性

    • 水平合并：colspan(保留左边，删除右边)

    • 垂直合并：rowspan(保留上边，删除下边)

Form表单（用户输入）

  • 在Web网页中用来给用户填写信息，使网页具有交互功能

  • 由容器、控件组成

  • 一个表单（容器：能够容纳各种各样的控件）一般应该包含用户填写信息的输入框、提交按钮（控件）等

  •  <form action="url" method="get|post" name="myform"></form>

  • 属性

    • action:服务器地址

    • name:表单名称

    • method中Get和Post区别

      • 数据提交方式，get把提交的数据url可以看到，post看不到

      • get一般用于提交少量数据，post用来提交大量数据

  • 元素

    • 表单标签

    • 表单域

    • 表单按钮

       <form><input><input type="submit"><button>按钮</button></form>

  • 文本框

    • 文本域通过<input type="text">标签设定

    • 输入字母、数字等内容

       <form>First name:<input type="text" name="firstname"><br>Last name:<input type="text" name="lastname"></form>

  • 密码框

    • 通过<input type="password">来定义

    • 密码字段字符不会明文显示，而是以星号或圆点代替

       <form>Password:<input type="password" name="pwd"></form>

  • 提交按钮

    •  <input type="submit" value="登录"><!--value是替换submit-->

块元素和行内元素（内联元素）

  • 对比

    块级元素内联元素
    块元素会在页面中独占一行(自上向下垂直排列)行内元素不会独占页面中的一行，只占自身的大小
    可以设置width，height属性行内元素设置width，height属性无效
    一般块级元素可以包含行内元素和其他块级元素一般内联元素包含内联元素不包含块级元素

  • 常见块级元素

     div、form、h1~h6、hr、p、table、ul、等

  • 常见内联元素

     a、b、em、i、span、strong等

  • 行内块级元素(特点:不换行、能够识别宽高)

     button、img、input等

HTML5新增标签

  • 新增布局标签：有利于SEO

  • div:容器元素，也是页面中见到的最多的元素

    • 增加文章清晰度，将区域分隔

  • H5新标签

相关文章：

HTML——前端基础1

目录 前端概述 前端能做的事情​编辑 两步完成一个网页程序 前端工具的选择与安装 HTML HTML5介绍 HTML5的DOCTYPE声明 HTML基本骨架 文字标签 标题之标签 标签之段落、换行、水平线 标签之图片 标签之超文本链接 标签之文本 列表标签之有序列表 列表标签之无序…...

编程日记 2026/4/4 0:07:02

Blueprint —— Events

目录 一&#xff0c;Event Level Reset 二&#xff0c;Event Actor Begin Overlap 三&#xff0c;Event Actor End Overlap 四&#xff0c;Event Hit 五&#xff0c;Event Any Damage 六&#xff0c;Event Point Damage 七&#xff0c;Event Radial Damage 八&#xff…...

编程日记 2026/4/4 7:25:17

Java一揽子集合整理

Java 集合框架 List ArrayList&#xff0c;底层Object数组&#xff0c;相关方法add&#xff0c;remove Vector&#xff0c;底层Object数组&#xff0c;线程安全&#xff0c;使用 synchronized 关键字进行同步处理 Stack&#xff0c;继承自Vector&#xff0c;是一个后进先出的…...

编程日记 2026/4/4 7:27:59

第二十四：5.2【搭建 pinia 环境】axios 异步调用数据

第一步安装&#xff1a;npm install pinia 第二步&#xff1a;操作src/main.ts 改变里面的值的信息&#xff1a; <div class"count"><h2>当前求和为&#xff1a;{{ sum }}</h2><select v-model.number"n">　 // .number 这里是…...

编程日记 2026/4/4 8:00:51

dubbo转http方式调用

业务背景&#xff1a;在当前项目下&#xff0c;所有前端请求均通过外层网关转发到后端这边的dubbo服务&#xff0c;现计划去掉网关层&#xff0c;由前端直接http调用后端dubbo。 解决方案&#xff1a;在前端调用方式不变的前提下&#xff0c;后端服务新建controller层&#xf…...

编程日记 2025/7/3 0:26:06

HybridCLR+Adressable+Springboot热更

本文章会手把手教大家如何搭建HybridCLRAdressableSpringboot热更。 创作不易&#xff0c;动动发财的小手点个赞。 安装华佗 首先我们按照官网的快速上手指南搭建一个简易的项目&#xff1a; 快速上手 | HybridCLR 注意在热更的代码里添加程序集。把用到的工具放到程序集里…...

编程日记 2026/3/25 22:50:05

金融行业专题｜某基金公司基于超融合信创平台支持人大金仓数据库的性能评测

随着“自主可控”在 IT 基础设施领域不断深化&#xff0c;数据库的国产化替代也被很多金融机构提上日程。为了保证性能&#xff0c;大部分国产数据库都基于信创架构的裸金属服务器部署。在国产虚拟化/超融合平台上&#xff0c;国产数据库性能表现如何&#xff1f;尤其是搭配信创…...

编程日记 2026/4/4 9:03:49

父组件用的是原生监听，子组件用的是onClick，子组件添加了stopPropagation还是没有阻止传播

父组件用事件监听&#xff0c;子组件用onClick&#xff0c;即使子组件加了stopPropagation还是没有阻止冒泡。父组件可能使用原生的addEventListener来绑定事件&#xff0c;而子组件用的是React的onClick事件。这时候&#xff0c;虽然子组件调用了e.stopPropagation()&#xff…...

编程日记 2025/3/22 9:56:13

【问题解决方案】随笔 - vscode里面出现双环境解决方案

1.问题重述 (.venv) (base) 2.解决方案 看是conda还是venv环境&#xff0c;先给退出了 1.conda 比如Anaconda 的 (base) 环境&#xff0c;使用 conda deactivate2.venv deactivate然后重新激活环境即可 END...

编程日记 2025/9/29 21:04:54

什么是 Java 中的线程安全？

回答 Java 中的线程安全&#xff08;Thread Safety&#xff09;指的是在多线程环境下&#xff0c;当多个线程同时访问和操作共享资源&#xff08;如对象、变量、数据结构等&#xff09;时&#xff0c;能够保证程序的正确性&#xff0c;不会出现数据不一致、竞争条件&#xff0…...

编程日记 2026/3/31 3:42:17

【2025全网最新最全】前端Vue3框架的搭建及工程目录详解

文章目录 安装软件Node.js搭建Vue工程创建Vue工程精简Vue项目文件 Vue工程目录的解读网页标题的设置设置全局样式路由配置 安装软件Node.js 下载地址&#xff1a;https://nodejs.org/zh-cn/ 安装完成后&#xff0c;打开cmd,查看环境是否准备好 node -v npm -vnpm使用之前一定…...

编程日记 2026/3/25 20:48:53

大白话JavaScript闭包在实际项目中有哪些应用场景？

大白话JavaScript闭包在实际项目中有哪些应用场景&#xff1f; 闭包是指有权访问另一个函数作用域中的变量的函数。在实际项目中&#xff0c;闭包有很多应用场景&#xff0c;以下是一些常见的例子&#xff1a; 数据封装和隐私保护 场景&#xff1a;在开发中&#xff0c;有时…...

编程日记 2026/3/31 3:55:14

R 语言科研绘图第 27 期 --- 密度图-分组

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

编程日记 2026/4/4 9:04:13

QT各种版本下载安装

参考链接&#xff1a; 【Qt】超详细&#xff01;Qt4.8.6和VS2010的配置及使用 由于QT官网一般现在进不去&#xff0c;所以下载一些QT版本只能通过镜像或者以前下载存储的安装包来进行&#xff0c;现在推荐两种方法 从参考链接中搬过来&#xff1a; 方案一&#xff1a;国内镜…...

编程日记 2026/3/26 18:25:51

信息系统的安全防护

文章目录 引言**1. 物理安全****2. 网络安全****3. 数据安全****4. 身份认证与访问控制****5. 应用安全****6. 日志与监控****7. 人员与管理制度****8. 其他安全措施****9. 安全防护框架**引言 从技术、管理和人员三个方面综合考虑，构建多层次、多维度的安全防护体系。 信息…...

编程日记 2026/4/4 9:03:59

TCPDF 任意文件读取漏洞：隐藏在 PDF 生成背后的危险

在网络安全的世界里&#xff0c;漏洞就像隐藏在黑暗中的“定时炸弹”&#xff0c;稍有不慎就会引发灾难性的后果。今天&#xff0c;我们要聊的是一个与 PDF 生成相关的漏洞——TCPDF 任意文件读取漏洞。这个漏洞可能让攻击者轻松读取服务器上的敏感文件&#xff0c;甚至获取整个…...

编程日记 2025/8/4 13:30:05

如何解决svn st中出现！（冲突）的问题

在 SVN&#xff08;Subversion&#xff09;中&#xff0c;svn status 命令用于查看工作副本的状态。当你看到 ! 符号时&#xff0c;通常表示文件或目录在工作副本中丢失&#xff08;missing&#xff09;。以下是解决这个问题的步骤&#xff1a; 1. 理解 ! 的含义 ! 表示该文件…...

编程日记 2026/3/26 21:34:39

Redis｜复制 REPLICA

文章目录 是什么能干嘛怎么玩案例演示复制原理和工作流程复制的缺点 是什么 官网地址&#xff1a;https://redis.io/docs/management/replication/Redis 复制机制用于将数据从一个主节点&#xff08;Master&#xff09;复制到一个或多个从节点&#xff08;Slave&#xff09;&a…...

编程日记 2026/3/29 12:00:15

水利 2月26日练习

测量前准备 使用数字万用表的蜂鸣器档&#xff0c;可以高速检验电解电容器的质量好坏。测量方法如图5-14所示。将数字万用表拨至蜂鸣器档&#xff0c;用两支表笔区分与被测电容器Cx的两个引脚接触&#xff0c;应能听到一阵急促的蜂鸣声&#xff0c;随即声响中止&#xff0c;同时…...

编程日记 2026/4/4 4:18:11

Windows逆向工程入门之LOOP与REP指令的深度解析

公开视频 -> 链接点击跳转公开课程博客首页 -> ​​​链接点击跳转博客主页 目录 1. LOOP 指令 概念 操作过程 用途 示例代码 扩展知识点&#xff1a;循环优化 2. REP 指令 概念 操作过程 用途 示例代码 扩展知识点&#xff1a;条件前缀 3. LOCK 指令 概念…...

编程日记 2026/3/31 0:23:21

[Web 安全] PHP 反序列化漏洞 —— PHP 序列化 反序列化

关注这个专栏的其他相关笔记&#xff1a;[Web 安全] 反序列化漏洞 - 学习笔记-CSDN博客 0x01&#xff1a;PHP 序列化 — Serialize 序列化就是将对象的状态信息转化为可以存储或传输的形式的过程&#xff0c;在 PHP 中&#xff0c;通常使用 serialize() 函数来完成序列化的操作…...

编程日记 2026/3/29 14:18:10

汽车免拆诊断案例 | 保时捷车发动机偶发熄火故障 2 例

案例1　2008款保时捷卡宴车行驶中发动机偶发熄火 故障现象　 一辆2008款保时捷卡宴车&#xff0c;搭载4.8 L 自然吸气发动机&#xff0c;累计行驶里程约为21万km。车主反映&#xff0c;该车行驶中发动机偶发熄火&#xff1b;重新起动&#xff0c;发动机能够起动着机&#xff…...

编程日记 2026/4/4 5:51:00

Python游戏编程之赛车游戏6-2

3.2 move()方法的定义 Player类的move()方法用于玩家控制汽车左右移动&#xff0c;当玩家点击键盘上的左右按键时&#xff0c;汽车会相应地进行左右移动。 move()方法的代码如图7所示。 图7 move()方法的代码 其中&#xff0c;第20行代码通过pygame.key.get_pressed()函数获…...

编程日记 2026/3/26 1:43:26

数据安全_笔记系列09_人工智能（AI）与机器学习（ML）在数据安全中的深度应用

数据安全_笔记系列09_人工智能&#xff08;AI&#xff09;与机器学习&#xff08;ML&#xff09;在数据安全中的深度应用 人工智能与机器学习技术通过自动化、智能化的数据分析&#xff0c;显著提升了数据分类、威胁检测的精度与效率&#xff0c;尤其在处理非结构化数据、复杂…...

编程日记 2026/2/13 13:06:36

渗透测试【order by盲注实践】

实践环境基于sqli-lab靶场的第46关进行 bool盲注 代码如下&#xff1a; import requests from bs4 import BeautifulSoup# 定义获取用户名的函数&#xff0c;使用 BeautifulSoup 解析 HTML 页面&#xff0c;提取用户名信息 def get_username(resp):soup BeautifulSoup(resp,…...

编程日记 2026/3/26 21:07:42

ROS的action通信——实现阶乘运算（三）

在ROS中除了常见的话题(topic&#xff09;通信、服务(server)通信等方式&#xff0c;还有action通信这一方式&#xff0c;由于可以实时反馈任务完成情况&#xff0c;该通信方式被广泛运用于机器人导航等任务中。本文将通过三个小节的分享&#xff0c;实现基于action通信的阶乘运…...

编程日记 2026/4/2 15:22:37

007：Cesium.ScreenSpaceEventHandler 知识详解，示例代码

查看本专栏目录 - 本文是第 007个API内容详解 vue+cesium 示例教程200+目录 文章目录 一、ScreenSpaceEventHandler 的基本概念初始化 ScreenSpaceEventHandler二、注册事件**常见事件类型**三、注销事件四、示例代码：鼠标移动时显示坐标信息五、示例代码：鼠标左键点击拾取地…...

编程日记 2026/4/3 22:01:12

期权帮|股指期货基差和价差有什么区别？

锦鲤三三每日分享期权知识&#xff0c;帮助期权新手及时有效地掌握即市趋势与新资讯&#xff01; 股指期货基差和价差有什么区别&#xff1f; 一、股指期货基差 股指期货基差是指股指期货价格与其对应的现货指数价格之间的差额。 股指期货基差计算公式&#xff1a;基差 现…...

编程日记 2026/3/26 21:10:36

WebSocketHandler 是 Spring Framework 中用于处理 WebSocket 通信的接口

WebSocketHandler 是 Spring Framework 中用于处理 WebSocket 通信的接口&#xff0c;其主要作用是定义了如何处理 WebSocket 的各种事件和消息。以下是 WebSocketHandler 的主要作用和功能&#xff1a; ### 1. 处理 WebSocket 生命周期事件 WebSocketHandler 定义了多个方法来…...

编程日记 2025/7/2 13:05:57

内网渗透测试-Vulnerable Docker靶场

靶场来源&#xff1a; Vulnerable Docker: 1 ~ VulnHub 描述&#xff1a;Down By The Docker 有没有想过在容器中玩 docker 错误配置、权限提升等&#xff1f; 下载此 VM&#xff0c;拿出您的渗透测试帽并开始使用 我们有 2 种模式&#xff1a; - HARD&#xff1a;这需要您将 d…...

编程日记 2026/4/4 1:43:01