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

【Web前端开发】HTML基础

Web前端开发是用来直接给用户呈现一个一个的网页,主要包含实现用户的结构(HTML)、样式(CSS)、交互(JavaScript)。然而一个软件通常是由后端和前端完成的。可以查阅文档:HTML 教程 (w3school.com.cn)

1.HTML 

1.1HTML概念

HTML称为超文本标记语言

  • 超文本指:文本、声音,图片、视频、表格、链接等;
  • 标记指:由标签构成的语言。

1.2HTML结构

HTML基本结构如下: 

  • html标签是整个html文件中的根标签 
  • head标签是编写页面相关的属性
  • title标签是页面的标题
  • body标签是页面显示的内容

 1.3HTML基本标签

  •  标题标签<h1>~<h6>:借助标题标签,能够清晰地划分出页面内容的层次关系。

  • 段落标签<p>:是将每个段落区分开来
  • 换行标签<br>:两个换行标签相当于一个段落标签

  • 加粗标签strong / b:让字体变粗

  • 倾斜标签em / i:让字体变倾斜
  • 下划线标签ins / u:字体下边有一条线
  • 删除线标签del / s:字体被删除但是还是可以显现出来


  • 超链接标签a:
  1. href属性:点击跳转某个页面链接中,#代表占位符(也表示在当前页面刷新)
  2. target属性:默认在当前页面跳转_self,如果想要在新的页面打开就用_blank


  • 图片标签img:
  1.  src属性:指定图片路径,img标签必须搭配src使用
  2. alt属性:alt后面的信息表明图片加载失败后的提示信息
  3. title属性:当光标落在图片上时出现的提示信息
  4. width / height属性:修改图片大小
  5. border属性:给图片添加边框

  • 表格标签table:
  1. width / height属性:将表格中每一个小表格改成对应的width和height
  2. border属性:给表格添加边框
  3. cellspacing属性:表格中的边框默认为1px,该属性是将边框间隙进行调整
  4. align属性:将表格调至左、中、右任一位置(默认left,center,right)
  • 表格头标签thead:
  • 表格体标签tbody:
  • 表格中的行标签tr:
  • 表格中的列标签td:
  1. rowspan属性:合并行,从当前位置往下数几行合并
  2. colspan属性:合并列,从当前位置往下数几列合并


列表标签 

  • 有序列表标签ol:ol -》li
  1. type属性:1(默认数字编号),a(小写英文编号),A(大写英文编号),i(小写罗马编号),I(大写罗马编号)
  2. start属性:从某个位置编号开始
  • 无序列表标签ul:ul -》li
  1. type属性:disc(默认实心圆),square(实心方块),circle(空心圆)

表单标签

  • 表单域标签form:
  1. action属性:跳转至该链接
  • 表单控件标签input:
  1. type属性:其中的submit和reset标签必须在form标签内效果才能实现
  • 相关联标签label:
  1. for属性:for搭配着input中的id属性使用,如果要让两者相关必须要id和for相同值。例:如果我想要选择男的时候点击男也可以选中,那就需要给男这个字与input-radio加上相关联
  • 下拉菜单标签select:select -》option(设置默认值时用selected属性)
  • 文本域标签textarea:
  1. cols属性:设置列的默认值
  2. rows属性:设置行的默认值

div标签:独占一行

spanbiaoqian:不独占一行 

特殊符号

  1. &nbsp:空格。想要多少个空格就需要写多少遍
  2. &lt:小于号
  3. &gt:大于号
  4. &amp:按位与 

 

相关文章:

【Web前端开发】HTML基础

Web前端开发是用来直接给用户呈现一个一个的网页&#xff0c;主要包含实现用户的结构&#xff08;HTML&#xff09;、样式&#xff08;CSS&#xff09;、交互&#xff08;JavaScript&#xff09;。然而一个软件通常是由后端和前端完成的。可以查阅文档&#xff1a;HTML 教程 (w…...

spark-哈希join介绍

目录 1. Shuffle Join 和 Hash Join 的复杂度1.1 Shuffle Join1.2 Hash Join 2. 哈希算法的原理2.1 什么是哈希算法&#xff1f;2.2 哈希算法的工作原理2.3 常见哈希函数 3. 哈希算法的弊端3.1 哈希碰撞3.2 哈希分布不均匀3.3 哈希值不可逆 4. 哈希碰撞的处理方法4.1 链地址法4…...

计算机网络与多线程同步机制详解

一、IP地址与子网划分 在互联网世界中&#xff0c;IP地址就像是每个设备的"门牌号"&#xff0c;它使得数据包能够准确送达目的地。IP地址的划分与管理就像城市的规划&#xff0c;通过合理的子网划分&#xff0c;能够高效地管理网络资源。 子网掩码的工作原理 子网…...

栈溢出攻击最基本原理

函数在调用的过程中&#xff0c;函数在调用之前呢&#xff0c;会将调用完这个函数之后的下一条命令的地址保存到LR中。 void func() {int a[4];a[6] 100; } 这个函数在用gcc编译的时候是不会报错的&#xff0c;所以我们可以在尝试之后&#xff0c;修改LR的值&#xff0c;让代…...

ChemDraw、InDraw、KingDraw有什么差别?

在化学相关的科研与教学领域&#xff0c;一款好用的结构式编辑器至关重要&#xff0c;ChemDraw因此闻名&#xff1b;但近年来&#xff0c;ChemDraw代理商频繁发送律师函&#xff0c;给学校和企业带来诸多困扰&#xff0c;促使大家纷纷寻找替代软件。InDraw和KingDraw这两款软件…...

NVMe控制器IP设计之接口模块

这是NVMe控制器IP设计系列博客之一&#xff0c;其他的见本博客或csdn搜用户名&#xff1a;tiantianuser。相关视频见B站用户名&#xff1a;专注与守望。 接口转换模块负责完成AXI4接口与控制器内部的自定义接口之间的转换工作。接口转换模块的框图如图1所示。 图1 接口转换示…...

从0开始学linux韦东山教程第三章问题小结(2)

本人从0开始学习linux&#xff0c;使用的是韦东山的教程&#xff0c;在跟着课程学习的情况下的所遇到的问题的总结,理论虽枯燥但是是基础。 摘要关键词&#xff1a;PC远程访问ubuntu配置&#xff0c;ubuntu配置uboot环境&#xff0c;串口控制开发板 本文详细介绍以下问题&…...

JS正则表达式介绍(JavaScript正则表达式)

文章目录 JavaScript正则表达式完全指南正则表达式基础元字符与特殊字符基本元字符. - 点号\d - 数字\D - 非数字\w - 单词字符\W - 非单词字符\s - 空白字符\S - 非空白字符 正则表达式标志常用标志详解g - 全局匹配i - 忽略大小写m - 多行匹配s - 点号匹配所有字符u - Unicod…...

(51单片机)LCD显示红外遥控相关数字(Delay延时函数)(LCD1602教程)(Int0和Timer0外部中断教程)(IR红外遥控模块教程)

前言&#xff1a; 本次Timer0模块改装了一下&#xff0c;注意&#xff01;&#xff01;&#xff01;今天只是简单的实现一下&#xff0c;明天用次功能显示遥控密码锁 演示视频&#xff1a; 在审核 源代码&#xff1a; 如上图将9个文放在Keli5 中即可&#xff0c;然后烧录在…...

关于单片机的基础知识(一)

成长路上不孤单&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a; 【14后&#x1f60a;///计算机爱好者&#x1f60a;///持续分享所学&#x1f60a;///如有需要欢迎收藏转发///&#x1f60a;】 今日分享关于单片机基础知识的相关内容&#xf…...

操作系统学习笔记第2章 (竟成)

第 2 章 进程管理 【考纲内容】 1.进程与线程&#xff1a; (1) 进程 / 线程的基本概念&#xff1b; (2) 进程 / 线程的状态与转换&#xff1b; (3) 线程的实现&#xff1a;内核支持的线程&#xff1b;线程库支持的线程&#xff1b; (4) 进程与线程的组织与控制&#xff1b; (5)…...

《从零开始:构建你的第一个区块链应用》

一、引言 区块链技术&#xff0c;这个曾经只在金融领域被广泛讨论的技术&#xff0c;如今已经渗透到各个行业。从供应链管理到智能合约&#xff0c;区块链的应用场景越来越丰富。对于开发者来说&#xff0c;理解区块链的基本原理并构建一个简单的区块链应用&#xff0c;是进入这…...

[思维模式-24]:《本质思考力》-5- 马克思主义毛泽东思想揭示了了人类社会运作的普遍规律有哪些?

目录 一、马克思主义毛泽东思想揭示了了人类社会运作的普遍规律有哪些&#xff1f; 1、生产力与生产关系的辩证运动规律 2、阶级斗争与社会革命规律 3、社会形态演变规律 4、人民群众是历史创造者的规律 5、社会基本矛盾运动规律 6、认识与实践的辩证关系规律 二、马克…...

CentOS7.9部署FunASR实时语音识别接口 | 部署商用级别实时语音识别接口FunASR

0. 环境说明 本次在云服务器中部署一套实时语音识别接口&#xff0c;基于阿里开源的FunASR。 云服务器使用莱卡云&#xff0c;4核心4GB内存50GB存储空间&#xff0c;带宽10Mbps。 操作系统使用CentOS7.9 视频演示可以看 云服务器中部署实时语音识别接口 | FunASR在云服务器…...

炫酷粒子系统动画实战:Matplotlib实现银河漩涡效果

炫酷粒子系统动画实战&#xff1a;Matplotlib实现银河漩涡效果 效果演示&#xff1a;银河粒子漩涡核心代码分析1. 粒子系统初始化2. 动画更新函数3. 渲染优化技巧 完整实现代码Matplotlib的动画模块介绍​核心类对比核心功能分点注意事项 效果演示&#xff1a;银河粒子漩涡 动…...

MAD-TD: MODEL-AUGMENTED DATA STABILIZES HIGH UPDATE RATIO RL

ICLR 2025 spotlight paper 构建能够在少量样本下学习出优良策略的深度强化学习&#xff08;RL&#xff09;智能体一直是一个极具挑战性的任务。为了提高样本效率&#xff0c;近期的研究尝试在每获取一个新样本后执行大量的梯度更新。尽管这种高更新-数据比&#xff08;UTD&am…...

机器学习第四讲:无监督学习 → 给无标签积木自由组合,发现隐藏规律

机器学习第四讲&#xff1a;无监督学习 → 给无标签积木自由组合&#xff0c;发现隐藏规律 资料取自《零基础学机器学习》。 查看总目录&#xff1a;学习大纲 关于DeepSeek本地部署指南可以看下我之前写的文章&#xff1a;DeepSeek R1本地与线上满血版部署&#xff1a;超详细…...

Vue 两种导航方式

目录 一、声明式导航 二、编程式导航 三、两句话总结 一、声明式导航 1. 传参跳转&#xff1a; <router-link :to"/user?nameCHEEMS&id114514">Query传参 </router-link><router-link :to"/user?参数名1参数值1&参数名2参数值2&a…...

HTTP 的发展史:从前端视角看网络协议的演进

别再让才华被埋没&#xff0c;别再让github 项目蒙尘&#xff01;github star 请点击 GitHub 在线专业服务直通车GitHub赋能精灵 - 艾米莉&#xff0c;立即加入这场席卷全球开发者的星光革命&#xff01;若你有快速提升github Star github 加星数的需求&#xff0c;访问taimili…...

Spring 必会之微服务篇(2)

经过上一篇文章的介绍,应该对微服务有了基本的认识,以及为什么要用微服务和微服务要面临的挑战和对应的解决问题,这一期继续聊聊关于微服务的相关知识。 服务拆分 为什么拆 对于大多数的小型项目来说,一般是先采用单体架构,但是随着后面的用户规模变大,业务越来越复杂…...

21.【.NET 8 实战--孢子记账--从单体到微服务--转向微服务】--单体转微服务--身份认证服务拆分规划

从这篇文章开始我们将开始一步一步的拆分现有的单体应用孢子记账项目。按照上一篇文章中的介绍&#xff0c;我们首先把身份认证服务拆分出来。 一、功能分析 在当前的单体应用中&#xff0c;身份认证服务主要负责用户认证、授权以及角色权限管理等核心功能。 在拆分之前&…...

人工智能100问☞第19问:什么是专家系统?

目录 一、通俗解释 二、专业解析 ​三、权威参考 专家系统是基于​​知识库​​(存储专家经验与规则)和​​推理机​​(模拟专家逻辑判断)的人工智能程序,能在特定领域(如医疗诊断、工业控制)高效解决复杂问题。 一、通俗解释 ​​专家系统​​就像个“智能版老师傅…...

AutoGen+Deepseek+chainlit的简单使用

AutoGen 的应用场景 AutoGen 作为一个强大的多智能体协作框架&#xff0c;可用于多种复杂任务&#xff1a; 自动化工作流&#xff1a;构建由多个智能体组成的流水线&#xff0c;例如数据收集、分析、报告生成复杂问题分解&#xff1a;将难题拆解为子任务&#xff0c;分配给不…...

贪心算法专题(Part1)

目录 1. 贪心算法简介 2. 柠檬水找零 3. 将数组和减半的最少操作次数 4. 递增的三元子序列 5. K次取反后最大化的数组和 6. 增减字符串匹配 7. 分发饼干 8. 整数替换 1. 贪心算法简介 2. 柠檬水找零 题目链接&#xff1a;860. 柠檬水找零 - 力扣&#xff08;LeetCode…...

PyTorch API 4 - 分布式通信、分布式张量

文章目录 分布式通信包 - torch.distributed后端支持PyTorch 内置的后端选择哪个后端&#xff1f;常见环境变量选择使用的网络接口其他NCCL环境变量 基础概念初始化返回类型&#xff1a;boolTCP初始化共享文件系统初始化环境变量初始化方法 初始化后操作关闭处理重新初始化 组D…...

《类和对象(中)》

引言&#xff1a; 上次我们主要学习了类的相关知识&#xff0c;今天我们就来学习类和对象(中)&#xff0c;今天也会用到之前学习过的东西&#xff0c;可以说是前面知识的结合&#xff0c;较前面会难一点&#xff08;打个预防针&#xff09;。 一&#xff1a;类的默认成员函数…...

SSH终端登录与网络共享

SSH 是较可靠&#xff0c;专为远程登录会话和其他网络服务提供安全性的协议 注意 SSH终端登录的前提是&#xff1a;电脑和板卡都能够通过网络相连接及通信 与连接互联网不一样&#xff0c;SSH可以不用互联网&#xff0c;只要电脑和板卡组成一个小型网络即可 网络方案 如果您…...

n8n系列(5):LangChain与大语言模型应用

引言 n8n作为一个强大的工作流自动化平台,可以通过集成LangChain框架,为用户提供了便捷地利用OpenAI、Azure OpenAI等大语言模型的能力。 本文将深入探讨n8n中的AI集成功能,特别是LangChain节点的使用,以及如何构建智能化的工作流程来解决实际业务问题。 1. n8n的AI集成概…...

springboot3+vue3融合项目实战-大事件文章管理系统-更新用户信息

在一下三个代码处进行修改 在UserController里面增加uadate方法 PutMapping ("/update")public Result update(RequestBody Validated User user){userService.update(user);return Result.success();}在userservice中增加update方法 void update(User user); 然…...

20250510-查看 Anaconda 配置的镜像源

打开 Anaconda Prompt 查看 Anaconda 当前配置的镜像源&#xff0c;使用命令 conda config --show channels这将显示当前配置的通道&#xff08;channels&#xff09;&#xff0c;即镜像源列表。 此外&#xff0c;还可以使用 conda config --show命令来显示conda的配置信息&…...

CDGP数据治理主观题评分标准与得分策略

1.数据模型题目评分标准 1)准确理解题目中所描述的业务逻辑和需求得[1分] 2)正确使用模型设计方法,使用信息工程、信息建模集成定义、巴克符号、陈氏符号等其中一种得[1分] 3)正确设计实体和属性,题目中涉及的实体数量为25-30个,10个以内得[2分],10-20个得[3分],25个…...

[学习]RTKLib详解:sbas.c与rtcm.c

RTKLib详解&#xff1a;sbas.c与rtcm.c 本文是 RTKLlib详解 系列文章的一篇&#xff0c;目前该系列文章还在持续总结写作中&#xff0c;以发表的如下&#xff0c;有兴趣的可以翻阅。 [学习] RTKlib详解&#xff1a;功能、工具与源码结构解析 [学习]RTKLib详解&#xff1a;pntp…...

【基础IO下】磁盘/软硬链接/动静态库

前言&#xff1a; 文件分为内存文件和磁盘文件。磁盘文件是一个特殊的存在&#xff0c;因为磁盘文件不属于冯诺依曼体系&#xff0c;而是位于专门的存储设备中。因此&#xff0c;磁盘文件存在的意义是将文件更好的存储起来&#xff0c;一边后续对文件进行访问。在高效存储磁盘…...

JAVA练习题(1) 卖飞机票

import java.util.Scanner; public class Main {public static void main(String[] args) {Scanner scnew Scanner(System.in);System.out.println("请输入飞机的票价&#xff1a;");int pricesc.nextInt();System.out.println("请输入月份&#xff1a;");…...

SpringBoot框架开发网络安全科普系统开发实现

概述 基于SpringBoot框架的网络安全科普系统开发指南&#xff0c;该系统集知识科普、案例学习、在线测试等功能于一体&#xff0c;本文将详细介绍系统架构设计、功能实现及技术要点&#xff0c;帮助开发者快速构建专业的网络安全教育平台。 主要内容 系统功能架构 本系统采…...

机器学习 day02

文章目录 前言一、TF-IDF特征词重要度特征提取二、无量纲化处理1.最大最小值归一化2.normalize归一化3.StanderScaler标准化 前言 通过今天的学习&#xff0c;我掌握了TF-IDF特征词重要度特征提取以及无量纲化处理的相关知识和用法 一、TF-IDF特征词重要度特征提取 机器学习算…...

《AI大模型应知应会100篇》第53篇:Hugging Face生态系统入门

第53篇&#xff1a;Hugging Face生态系统入门 ——从模型获取到部署的全流程实战指南 &#x1f4cc; 摘要 在人工智能快速发展的今天&#xff0c;Hugging Face已成为自然语言处理&#xff08;NLP&#xff09;领域最具影响力的开源平台之一。它不仅提供丰富的预训练模型、强大…...

计网学习笔记———网络

&#x1f33f;网络是泛化的概念 网络是泛化的概念 &#x1f342;泛化理解 网络的概念在生活中无处不在举例&#xff1a;社交网络、电话网路、电网、计算机网络 &#x1f33f;网络的定义 定义&#xff1a; 离散的个体通过通讯手段连成群体&#xff0c;实现资源的共享与交流、个…...

Vue3 怎么在ElMessage消息提示组件中添加自定义icon图标

1、定义icon组件代码&#xff1a; <template><svg :class"svgClass" aria-hidden"true"><use :xlink:href"iconName" :fill"color"/></svg> </template><script> export default defineComponen…...

17.Excel:实用的 VBA 自动化程序

一 excel 设置 开始-选项 二 批量创建工作表 某工作簿用于保存31天的东西&#xff0c;手动创建31个工作表不方便。 A1单元格输入内容&#xff0c;或者空着。从A2单元格开始&#xff0c;一定要以字符形式的&#xff0c;不能以数值和日期形式。12345这是数值形式&#xff0c;1月…...

Kubernetes生产实战(十六):集群安全加固全攻略

Kubernetes集群安全加固全攻略&#xff1a;生产环境必备的12个关键策略 在容器化时代&#xff0c;Kubernetes已成为企业应用部署的核心基础设施。但根据CNCF 2023年云原生安全报告显示&#xff0c;75%的安全事件源于K8s配置错误。本文将基于生产环境实践&#xff0c;系统讲解集…...

Cadence学习笔记之---导入PCB板框、网表

目录 01 | 引 言 02 | 环境描述 03 | 导入PCB板框 04 | 自画PCB板框 05 | 导入PCB网表 06 | 总 结 01 | 引 言 在上一篇小记中讲述了创建PCB工程的操作步骤、PCB工程中的类与子类&#xff0c;以及Cadence颇具特色的颜色管理器。 本篇小记主要记述如何导入PCB板框、自画…...

嵌入式硬件篇---麦克纳姆轮(简单运动实现)

文章目录 前言1. 麦克纳姆轮的基本布局X型布局O型布局 2. 运动模式实现原理(1) 前进/后退前进后退 (2) 左右平移向左平移向右平移 (3) 原地旋转顺时针旋转&#xff08;右旋&#xff09;逆时针旋转&#xff08;左旋&#xff09; (4) 斜向移动左上45移动 (5) 180旋转 3. 数学原理…...

en33网络配置文件未托管

从 nmcli device status 的输出可以看到&#xff0c;所有网络设备&#xff08;包括 ens33&#xff09;都处于 "未托管"&#xff08;unmanaged&#xff09;状态&#xff0c;这导致 NetworkManager 和传统的 network.service 都无法管理网络接口&#xff0c;从而引发 n…...

嵌入式学习--江协51单片机day4

昨天周五没有学习&#xff0c;因为中午没有睡觉&#xff0c;下午和晚上挤不出整块的时间。周日有考试今天也没有学很多啊&#xff0c;但以后周末会是学一天&#xff0c;另一天休息和写周总结。 今天学了串口通信和LED点阵屏&#xff0c;硬件原理是真的很迷&#xff0c;一但想搞…...

Hadoop 2.x设计理念解析

目录 一、背景 二、整体架构 三、组件详解 3.1 yarn 3.2 hdfs 四、计算流程 4.1 上传资源到 HDFS 4.2 向 RM 提交作业请求 4.3 RM 调度资源启动 AM 4.4 AM运行用户代码 4.5 NodeManager运行用户代码 4.6 资源释放 五、设计不足 一、背景 有人可能会好奇&#xf…...

diy装机成功录

三天前&#xff0c;我正式开启了这次装机之旅&#xff0c;购入了一颗性能强劲的 i5-12400 CPU&#xff0c;一块绘图能力出色的 3060ti 显卡&#xff0c;还有技嘉主板、高效散热器、16G 内存条、2T 固态硬盘&#xff0c;以及气派的机箱和风扇&#xff0c;满心期待能亲手打造一台…...

睿思量化小程序

睿思量化小程序是成都睿思商智科技有限公司最新研发和运营的金融数据统计分析工具&#xff0c;旨在通过量化指标筛选与多策略历史回测&#xff0c;帮助用户科学配置基金资产&#xff0c;成为个人投资者与机构用户的“智能化财富管家”。 核心功能&#xff1a;数据驱动决策&…...

STM32实现九轴IMU的卡尔曼滤波

在嵌入式系统中&#xff0c;精确的姿态估计对于无人机、机器人和虚拟现实等应用至关重要。九轴惯性测量单元&#xff08;IMU&#xff09;通过三轴加速度计、陀螺仪和磁力计提供全面的运动数据。然而&#xff0c;这些传感器数据常伴随噪声和漂移&#xff0c;单独使用无法满足高精…...

JS DOM操作与事件处理从入门到实践

对于前端开发者来说&#xff0c;让静态的 HTML 页面变得生动、可交互是核心技能之一。实现这一切的关键在于理解和运用文档对象模型 (DOM) 以及 JavaScript 的事件处理机制。本文将带你深入浅出地探索 DOM 操作的奥秘&#xff0c;并掌握JavaScript 事件处理的方方面面。 目录 …...