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

HTML——前端基础1

news 2025/9/3 17:07:21

前端概述

前端能做的事情编辑

两步完成一个网页程序

前端工具的选择与安装

HTML

HTML5介绍

HTML5的DOCTYPE声明

HTML基本骨架

文字标签

标题之标签

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

标签之图片

标签之超文本链接

标签之文本

列表标签之有序列表

列表标签之无序列表

标签之表格

表格单元格合并

Form表单（用户输入）

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

HTML5新增标签

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

前端概述

前端能做的事情

app:uniapp、RN、Flutter

两步完成一个网页程序

第一步：使用记事本，编写代码
- 创建一个文本文档，拓展名改为html
```
 <html><head><title>我的网页</title></head><body>Hello,我的第一个网页</body></html>
```
  - 记得保存ctrl+s
  - <>用英文
第二步，以浏览器方式打开即可
- 双击

前端工具的选择与安装

浏览器
- 谷歌
  - 简洁大方，打开响应速度快
  - 开发者调试工具
开发者工具
- 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基本骨架

html标签
- 定义HTML文档。标签限定了文档的开始点和结束点
```
 <html></html>
```
head标签
- 定义文档的头部。
- 描述了文档的各种属性和信息：文档的标题、在Web中的位置和其他文档的关系等
- 绝大多数文档头部包含的数据不会真正作为内容显示给读者（不是给用户看的）
```
 <head></head>
```
body标签
- 定义文档的主体。
- 包含文档的所有内容（文本、超链接、图像、表格和列表等）
- 会直接在页面中显示出来（给用户看的）
```
 <body></body>
```
title标签
- 定义文档的标题
- 显示在浏览器窗口的标题栏或状态栏上
- 是head标签中唯一必须要求包含的东西
- 有利于SEO优化
  - SEO是搜索引擎优化的英文缩写。通过对网站内容调整，满足搜索引擎的排名需求
```
 <titile></title>
```
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会改进）

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

段落：<p></p>

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

换行：<br>
水平线：<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>
```
- 点击哪吒（鼠标会变成小手）会跳转百度页面

标签之文本

常用文本标签

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

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

列表标签之有序列表

是一列项目，列表项目使用数字进行标记
有序列表始于<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基本骨架文字标签标题之标签标签之段落、换行、水平线标签之图片标签之超文本链接标签之文本列表标签之有序列表列表标签之无序…...

编程日记 2025/2/28 0:39:18

AI回答：Linux C/C++编程学习路线

Linux C/C编程学习路线需要结合Linux系统特性和C/C语言的特点，以下是一个系统化的学习路径，适合从初学者到进阶者： 第一阶段：Linux基础 Linux操作系统基础学习Linux基本命令：ls、cd、mkdir、rm、grep、find等。理解…...

编程日记 2025/2/28 0:38:15

螺旋数字矩阵

螺旋数字矩阵真题目录: 点击去查看 E 卷 100分题型题目描述疫情期间，小明隔离在家，百无聊赖，在纸上写数字玩。他发明了一种写法：给出数字个数n和行数m（0 < n ≤ 999，0 < m ≤ 999），从左上角的1开始，按照顺时针螺旋向内写方式，依次写出2,3…n，最终形成一…...

编程日记 2025/2/28 0:36:12

Jupyter Notebook切换虚拟环境(Kernel管理)

我们在使用Jupyter Notebook的时候，打开文件发现只有一个Python3(ipykernel)，我们自己在conda中创建的虚拟环境为什么没有显示出来，今天我就来和大家一起讨论一下！ 在 Jupyter Notebook 中，kernel 是执行代码的核心。管…...

编程日记 2025/2/28 0:34:10

linux下软件安装、查找、卸载

目录常见安装方式有三种： 1.源码安装。 2.rpm安装方式。 3.yum/apt工具级别安装。对于前两种安装方式，因为软件可能有依赖关系（安装的软件依赖于某些库，而这些库又依赖于某些库，这些都需要手动安装）…...

编程日记 2025/2/28 0:29:05

vuetify项目添加代理跨域请求

vuetify项目添加代理转发后端接口实现跨域请求配置一（推荐）配置二在项目根目录下找到vite.config.mts文件并在里面的server下配置代理， 具体实现代码如下： 配置一（推荐） server: {port: 3000,// 配置代理…...

编程日记 2025/2/28 0:28:02

H5 火柴人科目三和GitHub获取仓库点星星的用户列表发生了艺术的碰撞

先看效果，代码写的比较乱，有待优化效果 https://linyisonger.github.io/H5.Examples/?name./089.%E7%9C%8B%E6%98%9F%E6%98%9F%E7%9A%84%E8%88%9E%E8%80%85.html 思路看起来很简单，实则也不是很难，就是需要思路要打开。一…...

编程日记 2025/2/28 0:27:00

【Azure 架构师学习笔记】- Azure Databricks (12) -- Medallion Architecture简介

本文属于【Azure 架构师学习笔记】系列。本文属于【Azure Databricks】系列。接上文【Azure 架构师学习笔记】- Azure Databricks (11) – UC搭建前言使用ADB 或者数据湖，基本上绕不开一个架构“Medallion”， 它使得数据管理更为简单有效。ADB 通过…...

编程日记 2025/2/28 0:12:35

基础知识|原型在什么时候用和类的区别

在 JavaScript 中，原型和类是两个密切相关但有所不同的概念。理解这两者之间的差异有助于更好地掌握面向对象编程（OOP）在 JavaScript 中的实现。 1. 原型（Prototype） 原型是 JavaScript 中实现继承和共享行为的核心机…...

编程日记 2025/2/28 0:07:27

【FFmpeg】拉流

概述项目实践中涉及到使用ffmpeg进行推流和拉流操作，本文主要对一些基本操作做一个学习总结，后续再学习其源码架构；总结方法遵循实现功能配合函数具体实现基本使用拉流 avformat_network_init();//日志输出等级set_ffmpeg_log_level();…...

编程日记 2025/2/28 0:05:23

LangChain构建行业知识库实践：从架构设计到生产部署全指南

文章目录引言：行业知识库的进化挑战一、系统架构设计1.1 核心组件拓扑1.2 模块化设计原则二、关键技术实现2.1 文档预处理流水线2.2 混合检索增强三、领域适配优化3.1 医学知识图谱融合3.2 检索结果重排序算法四、生产环境部署4.1 性能优化方案4.2 安全防护体系五、评估与调优…...

编程日记 2025/2/28 0:01:16

解决jupyter notebook不是内部或外部命令问题

我们打开cmd有的时候，输入jupyter notebook，发现会提示jupyter 不是内部或外部命令，也不是可运行的程序或批处理文件。遇到这个问题我们应该怎么解决呢? 没错就是添加环境变量！ Step01：在电脑中找到jupyter notebook的…...

编程日记 2025/2/27 23:56:07

MySQL----case的用法

在 MySQL 中，CASE 表达式是一个用于条件判断的功能，可以根据不同的条件返回不同的结果。CASE 表达式通常用于 SELECT 查询语句中，可以在 SQL 中灵活地进行条件判断和数据转换。CASE 有两种基本的语法形式： 简单 CASE 表达式&…...

编程日记 2025/2/27 23:55:06

Unity XR-XR Interaction Toolkit开发使用方法（十）组件介绍（XR Interaction Group）

目录一、插件介绍二、主要组件 XR Interaction Manager XR Controller XR Interactor XR Direct Interactor XR Ray Interactor XR Socket Interactor XR Gaze Interactor 三、XR Interaction Group 1、组件介绍 2、核心功能与特点优先级与冲突管理动态交互切…...

编程日记 2025/2/27 23:53:03

深入理解并查集LRUCaChe

并查集&LRUCaChe 个人主页：顾漂亮文章专栏：Java数据结构 1.并查集的原理在一些应用问题中，需要将n个不同的元素划分成一些不相交的集合。开始时，每个元素自成一个单元素集合，然后根据一定规律将归于同一组元素的…...

编程日记 2025/2/27 23:48:55

详解 c++ 中的 namespage

C 中的命名空间很特别，其他编程语言基本都没有。命名空间介于函数与类之间，兼顾了二者的一些优点。这篇博客根据 chatgpt 的回答整理。文章目录 **1. 什么是 namespace（命名空间）？****2. 语法****3. 使用 namespace 访…...

编程日记 2025/2/27 23:47:53

50周学习go语言：第五周复合类型与词频统计

以下是第五周复合类型（数组、切片与映射）的详细学习内容，按照第四周的深度要求设计： 第五周：复合类型与词频统计一、复合类型详解 1. 数组（Array） // 声明与初始化 var arr1 [3]int …...

编程日记 2025/2/27 23:41:44

HTTP非流式请求 vs HTTP流式请求

文章目录 HTTP 非流式请求 vs 流式请求一、核心区别服务端代码示例（Node.js/Express）非流式请求处理流式请求处理客户端请求示例非流式请求（浏览器fetch）流式请求处理（浏览器fetch） Python客户端示例&…...

编程日记 2025/2/27 23:40:42

深圳南柯电子｜医疗设备EMC测试整改检测：零到一，保障医疗安全

在当今医疗科技飞速发展的时代，医疗设备的电磁兼容性（EMC）已成为确保其安全、有效运行的关键要素之一。EMC测试整改检测不仅关乎设备的性能稳定性，更是保障患者安全、避免电磁干扰引发医疗事故的重要措施。一、医疗设备EMC测试整…...

编程日记 2025/2/27 23:39:41

详解：事务注解 @Transactional

创作内容丰富的干货文章很费心力，感谢点过此文章的读者，点一个关注鼓励一下作者，激励他分享更多的精彩好文，谢谢大家！ Transactional 是 Spring Framework 中常用的注解之一，它可以被用于管理事务。通过使…...

编程日记 2025/2/27 23:33:32

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造，完美适配AGV和无人叉车。同时，集成以太网与语音合成技术，为各类高级系统（如MES、调度系统、库位管理、立库等）提供高效便捷的语音交互体验。 L…...

编程新知 2025/9/3 9:09:34

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

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下： 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/6/17 9:20:49

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议（EPSFD 2025）将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会，EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

编程新知 2025/8/27 5:58:46

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时，可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案： 1. 检查电源供电问题问题原因：多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/8/2 6:48:59

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用，可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器，能够帮助开发者更好地管理复杂的依赖关系，而 GraphQL 则是一种用于 API 的查询语言，能够提…...

编程新知 2025/8/3 20:26:48

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件，然后打开终端，进入下载文件夹，键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

编程新知 2025/8/25 22:27:27