第一章：HTML

发布时间：2026/7/3 6:11:36

第一章：HTML

第一章：HTML

  • 1.web开发-介绍
  • 1.web前端开发-课程安排
  • 3.web前端开发-HTML-快速入门
  • 4.VScode安装
  • 5.新浪新闻-实现标题-排版
  • 6.新浪新闻-实现标题-样式1
  • 7.新浪新闻-实现标题-样式2
  • 8.新浪新闻-实现标题-超链接
  • 9.新浪新闻-实现正文-排版
  • 10.新浪新闻-实现正文-布局
  • 11.表格标签
  • 12.表单标签
  • 13.表单项标签

1.web开发-介绍

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
Nginx为前端的服务器
Maven为Java项目的构建工具
Mybatis是通过Java程序操作数据库的技术
在这里插入图片描述

1.web前端开发-课程安排

在这里插入图片描述
在这里插入图片描述
AJAX，Axios是异步交互技术
ElementUI是Vue的桌面端组建库
Nginx是前端项目的部署服务器、
在这里插入图片描述

3.web前端开发-HTML-快速入门

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.VScode安装

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

安装完vscode后，我们就安装相关插件

中文插件
在这里插入图片描述
在这里插入图片描述
拼写检查器
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
下面的设置可以改变VScode的颜色字体
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5.新浪新闻-实现标题-排版

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

输入一个！可以一键生成html页面
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
我们将一些资源图片放入其中
但不能在VScode中直接放入，需要在文件夹中放入
在这里插入图片描述
在这里插入图片描述
如果将这个html文件移动到快速入门下面，则（记得点击ctrl+s保存）
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6.新浪新闻-实现标题-样式1

标题字体的颜色是灰黑色的，不是纯黑色的，下面我们改变一下标题的字体颜色
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

7.新浪新闻-实现标题-样式2

在这里插入图片描述

8.新浪新闻-实现标题-超链接

在这里插入图片描述
在这里插入图片描述

9.新浪新闻-实现正文-排版

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
text-align用来设置对齐方式
在这里插入图片描述
在这里插入图片描述

10.新浪新闻-实现正文-布局

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
如果四个值都一样
可以简写
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

我们先设置百分比，这里设置为百分之65，
这表示div这个区域占整个body的百分之65
在这里插入图片描述
在这里插入图片描述

下一步我们就要将整个内容居中展示
在这里插入图片描述
在这里插入图片描述
还有一种简化的写法
在这里插入图片描述
0表示上面下面都是0，auto表示让浏览器自动计算
自动计算的结果是左边右边各一半
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

11.表格标签

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

12.表单标签

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

13.表单项标签

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

相关新闻

rust获取本地ip地址的方法

rust获取本地ip地址的方法

大家好，我是get_local_info作者带剑书生，这里用一篇文章讲解get_local_info的使用。 get_local_info是什么？ get_local_info是一个获取linux系统信息的rust三方库，并提供一些常用功能，目前版本0.2.4。详细介绍地址&a…

2026/7/2 19:57:10
itextpdf 之 html 转 pdf 问题处理

itextpdf 之 html 转 pdf 问题处理

1. Font Provider contains zero fonts. At least one font shall be present 此问题出现的原因是 字体设置不成功，解决方法就是排查设置字体的代码。 需要特别注意的是项目打包后项目中所有文件层次会出现变动，使用何种方式获取字体文件会直接影响到字…

2026/7/3 1:47:37
python基础学习

python基础学习

缩⼩图像（或称为下采样（subsampled）或降采样（downsampled））的主要⽬的有两个：1、使得图像符合显⽰区域的⼤⼩；2、⽣成对应图像的缩略图。 放⼤图像（或称为上采样&#xf…

2026/7/2 10:37:00

最新新闻

ComfyUI-WanVideoWrapper：从零到一的AI视频创作完全指南

ComfyUI-WanVideoWrapper：从零到一的AI视频创作完全指南

ComfyUI-WanVideoWrapper：从零到一的AI视频创作完全指南 【免费下载链接】ComfyUI-WanVideoWrapper 项目地址: https://gitcode.com/GitHub_Trending/co/ComfyUI-WanVideoWrapper 想用AI轻松制作专业级视频吗？ComfyUI-WanVideoWrapper是你的完美…

2026/7/3 14:37:21
组合导航4B/5B状态、GNSS、RTK差分、伪距、搜星数超通俗详解

组合导航4B/5B状态、GNSS、RTK差分、伪距、搜星数超通俗详解

组合导航4B/5B状态、GNSS、RTK差分、伪距、搜星数超通俗详解 摘要：做自动驾驶、机器人、无人机、车载组合导航开发调试时，经常会看到设备输出 4B、5B 状态，同时会混淆 GNSS/INS、RTK差分/伪差分、伪距、搜星数等核心概念。本文从零开始，通俗拆解组合导航全套基础概念，重点…

2026/7/3 14:37:21
2026免费Word转图片在线工具指南：无需注册无水印转换实操教程

2026免费Word转图片在线工具指南：无需注册无水印转换实操教程

数字化办公场景里，不少人会有把 Word 文档页面导出为图片的需求，海报文稿、报表截图、资料分享、线上上传材料都需要这类转换操作。2026 年网络上可选择的转换渠道较多，分为网页在线工具、微信小程序、本地办公软件离线处理三类，其…

2026/7/3 14:37:21
加密与认证实战指南：从AES、JWT到API安全架构设计

加密与认证实战指南：从AES、JWT到API安全架构设计

1. 项目概述：为什么我们需要加密与认证？ 最近在排查一个线上服务的数据泄露隐患时，我再次深刻体会到，网络通信安全绝不是“锦上添花”的选修课，而是系统稳定运行的“生命线”。无论是你手机App里的一次登录&#xff0…

2026/7/3 14:37:21
KMX63与PIC24FV16KA304在人机界面中的协同设计与实现

KMX63与PIC24FV16KA304在人机界面中的协同设计与实现

1. KMX63与PIC24FV16KA304在人机界面中的协同作用KMX63是一款三轴加速度计和磁力计组合传感器，而PIC24FV16KA304是Microchip公司生产的一款16位微控制器。这两款器件在人机界面(HMI)设计中形成了完美的互补关系。KMX63传感器能够精确检测设备的空间姿态和运动状态&a…

2026/7/3 14:37:21
M2XFP：突破4位量化瓶颈的元数据增强架构

M2XFP：突破4位量化瓶颈的元数据增强架构

1. M2XFP：突破4位量化瓶颈的元数据增强架构在深度学习模型部署领域，量化技术始终面临着精度与效率的权衡难题。传统4位量化方案（如MXFP4）虽然大幅降低了存储和计算开销，但在大语言模型（LLM）等复…

2026/7/3 14:36:42

日新闻

JMeter gRPC性能测试插件实战：从原理到CI/CD集成

JMeter gRPC性能测试插件实战：从原理到CI/CD集成

1. 项目概述：为什么我们需要一个gRPC性能测试插件？ 如果你正在处理一个现代化的微服务架构，那么gRPC大概率是你绕不开的通信协议。它基于HTTP/2，支持双向流，序列化效率高，天生就是为微服务间的高性能、低延…

2026/7/3 0:00:03
iOS自动化测试：基于facebook-wda与weditor的稳定元素定位实战

iOS自动化测试：基于facebook-wda与weditor的稳定元素定位实战

1. 项目概述：iOS自动化测试的“定位”之痛做iOS自动化测试的朋友，十有八九都卡在“元素定位”这个环节上。你兴冲冲地写好了测试脚本，结果一运行，要么是找不到元素，要么是找到了但点不动，要么是这次能跑通下…

2026/7/3 0:00:05
MTKClient实战指南：深度解析联发科芯片调试与设备修复方案

MTKClient实战指南：深度解析联发科芯片调试与设备修复方案

MTKClient实战指南：深度解析联发科芯片调试与设备修复方案 【免费下载链接】mtkclient MTK reverse engineering and flash tool 项目地址: https://gitcode.com/gh_mirrors/mt/mtkclient MTKClient是一款专业的联发科芯片调试工具，为技术爱好者和…

2026/7/3 0:00:05

周新闻

Figma中文界面插件终极指南：5分钟快速上手完整教程

Figma中文界面插件终极指南：5分钟快速上手完整教程

Figma中文界面插件终极指南：5分钟快速上手完整教程 【免费下载链接】figmaCN 中文 Figma 插件，设计师人工翻译校验 项目地址: https://gitcode.com/gh_mirrors/fi/figmaCN 还在为Figma的英文界面而困扰吗？FigmaCN中文插件是设计师必备…

2026/7/2 15:30:08
Windows字体自定义终极方案：No!! MeiryoUI完全指南

Windows字体自定义终极方案：No!! MeiryoUI完全指南

Windows字体自定义终极方案：No!! MeiryoUI完全指南 【免费下载链接】noMeiryoUI No!! MeiryoUI is Windows system font setting tool on Windows 8.1/10/11. 项目地址: https://gitcode.com/gh_mirrors/no/noMeiryoUI 还在为Windows系统单调的字体界面感到困…

2026/7/2 15:29:50
WinBtrfs终极实战指南：3种配置方案解锁Windows Btrfs文件系统完整功能

WinBtrfs终极实战指南：3种配置方案解锁Windows Btrfs文件系统完整功能

WinBtrfs终极实战指南：3种配置方案解锁Windows Btrfs文件系统完整功能 【免费下载链接】btrfs WinBtrfs - an open-source btrfs driver for Windows 项目地址: https://gitcode.com/gh_mirrors/bt/btrfs WinBtrfs是一款革命性的开源Windows驱动程序&#xf…

2026/7/2 15:29:51

月新闻

[C++]内存管理：串顺序存储的内存回收

[C++]内存管理：串顺序存储的内存回收

在串（字符串）的顺序存储中，内存回收的方式取决于字符串的存储方式以及所使用的编程语言和相关库。以下以 C 为例进行说明，因为 C 对内存管理有较为直接的控制。 1. 基于 char 数组的串顺序存储 如果使用普通的 char 数组来存储字…

2026/7/2 15:47:40
移动端游戏功耗测试实战：电流、功率、亮度和场景对比

移动端游戏功耗测试实战：电流、功率、亮度和场景对比

移动端游戏功耗测试：先控制变量，再比较优化是否真的省电 摘要：功耗测试最容易犯的错误，是拿两次不同温度、不同亮度、不同场景的平均功率直接比较。本文给出一套可复现的游戏功耗测试方法，覆盖引擎特性验证、版本回归和黑盒体验测试，并说明如何把功耗与帧率、温控、CPU/G…

2026/7/2 15:47:40
足球口袋教练 HarmonyOS 离线应用实战（03/20）：ArkUI 首页仪表盘搭建

足球口袋教练 HarmonyOS 离线应用实战（03/20）：ArkUI 首页仪表盘搭建

本文是“足球口袋教练 HarmonyOS 离线应用实战”系列第 3 篇。示例项目是一个 HarmonyOS / ArkTS / ArkUI 编写的离线足球训练助手，围绕真实页面、真实截图和可复现操作展开。 本篇要解决的问题 训练 App 的首页不能只展示欢迎语，它要解决“我现在该点哪…

2026/7/2 14:14:33