重生之while在鸣潮学习HTML

原创 已于 2024-05-27 09:09:47 修改 · 955 阅读 · 23 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#html #前端
于 2024-05-27 08:39:21 首次发布

个人主页：终端

今天是开荒的第五天，数据坞都刷了吗，没刷就过来学html！

目录

JavaWeb学习路线

1.HTML入门

 1.1什么是HTML

1.2HTML&CSS&JavaScript的作用

1.3什么是超文本

 1.4什么是标记语言

1.5HTML基础结构

 1.6HTML的入门程序

 1.7HTML概念词汇解释

 1.8开发工具VScode

JavaWeb学习路线

图1

1.HTML入门

 1.1什么是HTML

什么是 HTML？HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML5 是最新的 HTML 标准。
  • HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。
  • HTML5 拥有新的语义、图形以及多媒体元素。
  • HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
  • HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行

1.2HTML&CSS&JavaScript的作用

  • HTML主要用于网页主体结构的搭建
  • CSS主要用于页面元素美化
  • JavaScript主要用于页面元素的动态处理

1.3什么是超文本

HTML文件本质上是文本文件,而普通的文本文件只能显示字符。但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中,让网页有了非常丰富的呈现方式,这就是超文本的含义 - -本身是文本,但是呈现出来的最终效果超越了文本。

 1.4什么是标记语言

说HTML是一种『标记语言』是因为它不是像Java这样的『编程语言』,因为它是由一系列『标签』组成的,没有常量、变量、流程控制、异常处理、IO等等这些功能。HTML很简单,每个标签都有它固定的含义和确定的页面显示效果。

  •  双标签：是通过一组尖括号+标签名的方式定义的：
<p> HTML welcome you ！</p>

 <p>叫开始标签，</p>叫结束标签。 开始标签和结束标签之间的部分叫做文本标签，简称标签体

  • 单标签
<input type=" text " name="username" />
  • 属性
<a herf="https://blog.csdn.net/twlinl0613?type=blog"> while03的博客</a>

1.5HTML基础结构

1. 文档声明

  • HTML文件中第一行的内容,用来告诉浏览器当前HTML文档的基本信息,其中最重要的就是当前HTML文档遵循的语法标准。这里我们只需要知道HTML有4和5这两个大的版本
  • HTML4版本的文档类型声明是:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/htm14/loose.dtd">
  • HTML4版本的文档类型声明是:
<!DOCTYPE html>

2.跟标签

 html标签是整个文档的跟标签，所有标签都必须在html标签里面。

3.头部元素

 head标签用于定义文档的头部，其他头部元素都放在head标签里。

4.主体元素

 body标签定义网页的主体内容，在浏览器窗口内显示的内容都定义到body标签内。

5.注释

<!-- 注释内容-->
图2

 1.6HTML的入门程序

  • 代码
<html>
          <head>
			<title>HTML 快速入门</title>
	</head>
	<body>
			<h1>Hello 鸣潮！</h1>

	<body>
</html>
  •  效果

 1.7HTML概念词汇解释

标签

  •  代码中的一个<>叫做一个标签，有些标签成对出现，称之为双标签，有些标签单独出现，称之为单标签

属性

  •  一般在开始标签中，用于定义标签的一些特征

 文本

  •  双标签中间的文字，包含空格行等结构

 元素

  •  经过浏览器解析后，每一个完整的标签（标签+属性+文本）可以称之为一个元素

 1.8开发工具VScode

简介：VScode（百度百科）。

安装过程

 一路next，注意安装路径不要中文，空格和特殊符号即可。

安装插件

  •  Auto Rename Tag 自动修改标签对插件
  • Chinese Language Pack 汉化包
  •  HTML CSS Support HTML CSS 支持
  •  Intellij IDEA Keybindings IDEA快捷键支持
  •  Live Server 实时加载功能的小型服务器
  •  open in browser 通过浏览器打开当前文件的插件
  •  Prettier-Code formatter代码美化格式化插件
  •  Vetur VScode中的Vue工具插件
  •  vscode-icons 文件显示图标插件
  •  Vue 3 snipptes 生成VUE模板插件
  • Vue language Features Vue3语言特征插件

 今天的内容就到这了，我要去养我的卡卡罗了！

重生之while在鸣潮学习HTML&标签
while03的博客
05-27 1490
html标签
顶象滑块验证码逆向：从乱序背景图还原到自动化识别全流程
weixin_34117211的博客
06-16 384
滑块验证码是Web安全中常见的人机验证机制，其核心原理是通过前端技术（如Canvas）对验证元素进行动态干扰，以抵御自动化程序的识别。理解其背后的JavaScript执行逻辑和图像处理流程，对于爬虫工程师和安全研究人员而言，是突破自动化瓶颈的关键技术。通过动态调试和代码逆向，可以定位到核心的乱序索引生成算法，该算法通常基于图片URL或特定参数生成一个唯一的排列序列，用于在前端对背景图片进行切割和重排。掌握这一原理后，便能在本地或服务端使用Python等语言复现还原算法，将打乱的图片拼回原样，从而为后续的图像
IIS原生静态化：让HTML请求彻底绕过ASP.NET管线
xiang_fu的博客
06-14 364
静态化本质是将高频只读页面转化为零开销的静态资源交付，其核心原理在于利用IIS请求处理管道的分层机制，在Native层通过StaticFileModule直接响应.html请求，从而跳过ASP.NET托管管线与MVC生命周期。这种方案规避了IHttpModule劫持导致的ThreadAbortException、缺失内核缓存及压缩能力等缺陷，显著降低CPU、数据库连接与内存压力。典型应用场景包括电商首页、商品详情页等高并发低更新内容，适用于ASP.NET MVC/IIS传统架构的性能优化与稳定性加固。
JavaScript中DOM树与数据结构树的深度解析
weixin_30781107的博客
06-20 389
树（Tree）是计算机科学中最基础的非线性数据结构之一，其核心在于节点（Node）间的父子、兄弟等层级关系。在前端开发中，这种抽象模型具象化为浏览器中的DOM树，每个HTML元素都是一个node，具备parentNode、childNodes、nextSibling等原生属性。理解nodeType类型区分（如ELEMENT_NODE与TEXT_NODE）、children与childNodes的本质差异，是避免遍历错乱、事件失效、性能卡顿的关键。结合JSON格式的逻辑树与DOM树的双向映射，开发者可构建可拖
Azure原生文档智能Embedding实战：PDF语义向量化全链路
cm333666的博客
06-13 585
文档智能（Document Intelligence）是企业知识管理的核心能力，其底层依赖于高质量的文本向量化（Embedding）技术——即把非结构化PDF、扫描件、表格等转化为可计算、可检索的语义向量。该过程涉及文档解析、结构识别、语义增强与向量生成四大环节，关键技术价值在于突破关键词匹配局限，实现跨格式、跨语境的精准语义召回。典型应用场景包括合同审查、政策条款检索、医疗病历分析及B2B客服知识库构建。本文基于Azure Document Intelligence、Azure OpenAI Embedd
工具类到框架的临界点：何时该造轮子，何时该拆框架
diaozhiwa5526的博客
06-14 507
在软件开发中，'框架'本质是对重复问题的抽象封装，其价值取决于底层约束强度与团队认知深度。当HTTP协议、硬件时序、安全合规等不可协商的铁律存在时，框架是必要基础设施；而当业务逻辑简单、团队规模小或领域高度垂直时，过度抽象反而抬高协作与维护成本。真正的技术决策不应围绕‘要不要自研框架’，而应回归‘哪些能力必须复用’‘哪些胶水代码正在吞噬生产力’。本文结合ASP.NET Handler机制、工具类组合契约、胶水层设计等实践路径，揭示从Excel解析器、订单校验链到可插拔Web处理管道的演进逻辑，帮助开发者识别
用IPO优化大模型语义标签生成：工程化落地实践
aofan9566的博客
06-24 443
语义标签是文本理解与结构化的核心技术，其本质是将非结构化内容映射为机器可计算、业务可驱动的标准化标识。传统监督微调依赖大量人工标注，成本高且泛化差；而Identity Preference Optimization（IPO）通过定义‘格式合规性’与‘语义贴近度’双重偏好标准，让模型自主学会判别优质标签。该方法无需人工打标，支持自动化数据构建、4-bit量化部署及LoRA高效微调，在客服对话、金融研报、医疗问诊等多场景验证有效。本文聚焦IPO在语义标签任务中的完整工程链路，涵盖偏好对生成、相似度校准、训练稳定
Ubuntu 20.04 下 Apache 自签名 SSL 证书实战指南
weixin_30338481的博客
06-20 344
SSL 证书是实现 HTTPS 加密通信的基础技术，其核心原理是通过公钥基础设施（PKI）建立可信身份与加密通道。在开发、测试及内网场景中，自签名证书凭借离线生成、零依赖、完全可控等技术优势，成为替代公网 CA 证书的高效方案。它不提供第三方公信力，但能快速解决本地调试、Docker 容器、Jenkins/Grafana 等内部服务的 TLS 加密需求。结合 Apache 的 mod_ssl 模块与系统原生 openssl 工具链，可在 Ubuntu 20.04 环境中完成从密钥生成、SAN 配置、模块启用
SUMO与CARLA联合仿真：构建宏观可控、微观可感的车路协同验证体系
davy57345的博客
06-14 338
交通仿真系统是智能网联汽车研发的核心基础设施，其本质是在数字空间中复现真实道路环境下的车辆交互与动态演化。基于离散事件驱动的SUMO擅长建模百万级交通流、信号配时与路网级拥堵传播，而基于物理引擎的CARLA则提供高保真感知数据、车辆动力学响应与决策执行能力。二者联合并非简单接口对接，而是通过时间步长协商、进程级解耦与数据契约设计，实现宏观交通状态到微观车辆行为的可信映射。该技术已广泛应用于L4自动驾驶算法回归测试、车路协同场景生成及数字孪生交通推演等工程实践，显著提升测试复现性与场景覆盖度。
OpenClaw+CodePlan：基于Bash函数注入的本地智能体工作流框架
chouxuyi9789的博客
06-22 363
智能体（Agent）是将大模型能力转化为自动化任务执行的关键范式，其核心在于指令解析、技能调度与安全执行。OpenClaw并非传统AI客户端，而是一个轻量级本地智能体运行时；它依托CodePlan实现动态Shell函数注入，绕过二进制安装与环境配置，在终端中以自然语言触发Bash级自动化任务。该架构以JSON Schema定义技能契约、Bash脚本实现逻辑、沙盒化执行保障安全，适用于飞书/微信/CSV分析等高频办公场景，为开发者提供零依赖、可审计、易调试的AI工作流启动方案。
HTML 的 ＜blockquote＞ 元素
IMPYLH的博客
06-25 331
是一个块级元素，用于定义一段从其他来源引用的独立内容区块。浏览器通常会将 <blockquote>内的文本进行缩进显示，以视觉上区别于普通段落，明确其引用属性。从语义上讲，使用 <blockquote>明确告知浏览器、辅助技术（如屏幕阅读器）和搜索引擎：此段内容源自他处，并非页面作者的原创论述。语义优先：当内容确实是引用时，才使用 <blockquote>。始终添加cite属性：提供原始来源的 URL。提供可见出处：使用 <cite>元素或在 footer中标注作者/来源。
HTML 的 ＜b＞ 元素
IMPYLH的博客
06-23 474
b><b>元素是一个纯粹的表现层标签。用于视觉突出，而非语义强调。在<b>和<strong>之间犹豫时，优先考虑语义。对于复杂的样式需求，CSS 是更强大的工具。记住，好的 HTML 代码不仅看起来正确，其结构本身也应具有清晰的含义。合理使用 <b>，能让你的网页在保持美观的同时，也更加专业和规范。
HTML 的 ＜audio＞ 元素
IMPYLH的博客
06-23 346
虽然浏览器提供了默认控件，但很多时候我们需要自定义播放器界面以满足设计需求。
Flask 笔记六：模板继承，告别每个页面复制一遍 HTML
liuyicenysabel的博客
06-23 541
下一页</a><a href="{{ url_for('home.note_edit', note_id=note.id) }}">编辑
webgis开发零基础入门：HTML/CSS/JavaScript前端核心基础
最新发布
2403_88103571的博客
06-25 113
前三篇把方向、环境、平台概念都讲完了。今天开始，我们正式进入。本文介绍前端三剑客核心基础。
使用 C# 将 HTML 转 Word 或者 Word 转 HTML
asdzx67的博客
06-24 393
通过 Spire.Doc for .NET，开发者可以用极少的代码量，在 C# 项目中实现高质量、高保真的 HTML 与 Word 互转。无论是处理动态生成的 HTML 字符串，还是批量转换现有的 HTML 文件，这个库都提供了一个稳定、高效的解决方案，能够帮助你快速构建文档自动化处理流程，将精力更多地投入到业务逻辑本身。
使用HTML写一个悬浮摄像头，可拖拽、放大、缩小
weixin_52803316的博客
06-13 1052
这段代码实现了一个可拖拽、可调整大小的悬浮摄像头窗口。主要功能包括：1) 通过浏览器API调用用户摄像头并显示实时画面；2) 窗口可自由拖动位置；3) 提供8个方向的调整手柄，支持窗口大小调整并设置最小尺寸限制（160×120px）；4) 采用固定定位，始终悬浮在其他页面内容之上。界面为黑色圆角矩形，带有阴影效果，光标会根据操作区域自动变化形状，提供直观的交互体验。
HTML 的 ＜base＞ 元素
IMPYLH的博客
06-24 454
base>是一个空元素（没有闭合标签），它必须位于 HTML 文档的 <head>部分。它的核心作用是为文档中所有的相对 URL 定义一个基准地址（base URL）和一个默认的链接打开目标（target）。简单来说，当你在页面中使用一个相对路径（如或 about.html）时，浏览器会将其与 <base>元素指定的href属性值进行组合，从而得到完整的绝对 URL。</href属性：指定基准 URL。这是 <base>元素最核心的功能。target属性：可选。为页面上所有没有显式指定。
HTML 的 ＜bdi＞ 元素
IMPYLH的博客
06-24 480
bdi>是 HTML5 中一个专门用于双向文本隔离（Bidirectional Isolation）的语义化元素。它的全称是 “Bidirectional Isolate”。当一段文本的书写方向（从左到右 LTR 或从右到左 RTL）与周围文本的书写方向不同，且需要独立处理其方向性，避免因混合方向导致文本顺序错乱时，<bdi>元素就派上了用场。简单来说，<bdi>
Fastapi + html +json 的 装机报价系统 v2.6
PieroPc的博客
06-24 338
电脑配件管理与装机报价工具 该工具是一个基于FastAPI的Web应用，提供全面的电脑配件管理和装机报价功能，支持PC端和移动端访问。 核心功能： 配件管理 - 支持13类配件(CPU/主板/显卡等)的增删改查，提供卡片和列表两种视图 电脑组装 - 按分类选择配件，自动计算装机费和总价 报价方案 - 生成可打印/导出的报价单，支持TXT/CSV格式 数据管理 - JSON导入导出、预设数据加载、一键清空 仪表盘 - 显示配件总数、库存总值、均价等统计信息 技术特点： 前端采用单页应用(SPA)设计，响应式布
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值