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

Day-01 前端 Web - HTMLCSS

article 2026/1/26 0:21:42

目录

一、HTML 基础

1. HTML 简介

2. HTML 基本结构

3. 常用 HTML 标签

二、CSS 基础

1. CSS 简介

2. CSS 引入方式

3. 常用 CSS 选择器

4. 常用 CSS 属性

一、HTML 基础

1. HTML 简介

HTML（HyperText Markup Language）即超文本标记语言，是用于创建网页的标准标记语言。它通过各种标签来描述网页的结构和内容，浏览器会根据这些标签来渲染网页。

2. HTML 基本结构

一个基本的 HTML 文档结构如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 这里放置网页的可见内容 --><h1>这是一个标题</h1><p>这是一个段落。</p>
</body>
</html>
  • <!DOCTYPE html>：声明文档类型为 HTML5。
  • <html>：根标签，包含整个 HTML 文档。
  • <head>：包含文档的元数据，如字符编码、页面标题等。
  • <meta charset="UTF-8">：设置字符编码为 UTF - 8。
  • <title>：定义页面的标题，显示在浏览器的标签栏上。
  • <body>：包含网页的可见内容，如文本、图像、链接等。

3. 常用 HTML 标签

  • 标题标签：<h1> - <h6>，用于定义不同级别的标题，<h1> 级别最高，字体最大。
  • 段落标签：<p>，用于定义段落。
  • 链接标签：<a>，用于创建超链接，例如 <a href="https://www.example.com">这是一个链接</a>。
  • 图像标签：<img>，用于插入图像，例如 <img src="image.jpg" alt="图片描述">。

二、CSS 基础

1. CSS 简介

CSS（Cascading Style Sheets）即层叠样式表，用于控制 HTML 文档的外观和布局。它可以将内容与样式分离，使网页的设计更加灵活和易于维护。

2. CSS 引入方式

  • 内联样式：直接在 HTML 标签中使用 style 属性，例如 <p style="color: red;">这是一个红色段落</p>。
  • 内部样式表：在 HTML 文件的 <head> 标签中使用 <style> 标签定义样式，例如：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内部样式表示例</title><style>p {color: blue;}</style>
</head>
<body><p>这是一个蓝色段落</p>
</body>
</html>
  • 外部样式表：将 CSS 代码放在一个独立的 .css 文件中，然后在 HTML 文件的 <head> 标签中使用 <link> 标签引入，例如：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>外部样式表示例</title><link rel="stylesheet" href="styles.css">
</head>
<body><p>这是一个应用了外部样式的段落</p>
</body>
</html>

 在 styles.css 文件中可以这样定义样式：

p {color: green;
}

3. 常用 CSS 选择器

  • 元素选择器：通过元素名称选择元素，例如 p 选择所有的 <p> 标签。
  • 类选择器：通过元素的 class 属性选择元素，类名前面加 .，例如 .my - class 选择所有 class 属性为 my - class 的元素。
  • ID 选择器：通过元素的 id 属性选择元素，ID 名前面加 #，例如 #my - id 选择 id 属性为 my - id 的元素。

4. 常用 CSS 属性

  • 颜色属性：color 用于设置文本颜色，background - color 用于设置背景颜色。
  • 字体属性：font - size 用于设置字体大小，font - family 用于设置字体族。
  • 边框属性：border 用于设置元素的边框，例如 border: 1px solid black 表示 1 像素宽的黑色实线边框。

通过今天对 HTML 和 CSS 基础知识的学习，你已经迈出了前端开发的第一步。后续可以通过不断实践来加深对这些知识的理解和掌握。

相关文章：

Day-01 前端 Web - HTMLCSS

目录 一、HTML 基础 1. HTML 简介 2. HTML 基本结构 3. 常用 HTML 标签 二、CSS 基础 1. CSS 简介 2. CSS 引入方式 3. 常用 CSS 选择器 4. 常用 CSS 属性 一、HTML 基础 1. HTML 简介 HTML&#xff08;HyperText Markup Language&#xff09;即超文本标记语言&…...

编程日记 2026/1/10 1:10:11

AWS出海合规解决方案：全球业务扩张的技术指南

1. 引言 随着企业加速全球化进程，出海业务面临的合规挑战日益复杂。AWS作为全球领先的云服务提供商，为企业提供了强大的工具和服务，以帮助它们满足各国的合规要求。本文将探讨如何利用AWS服务构建全面的出海合规解决方案。 2. 全球数据合规挑战 在开始讨论具体解决方案之…...

编程日记 2025/8/15 19:12:55

[ctfshow web入门] web38

信息收集 过滤多了php和file if(isset($_GET[c])){$c $_GET[c];if(!preg_match("/flag|php|file/i", $c)){include($c);echo $flag;}}else{highlight_file(__FILE__); }解题 更多解法参考 [ctfshow web入门] web37 我们选个最简单的。但是因为php被过滤了我们改用…...

编程日记 2026/1/7 13:26:06

汽车CAN总线采样点和采样率详解

写在前面 本篇文章主要讲解在汽车电子中CAN总线采样率的相关知识点，内容涉及CAN波特率、采样点、时间份额、同步跳转宽度以及采样率的计算。 若有相关问题，欢迎评论沟通，共同进步。(*^▽^*) 1、CAN波特率 CAN波特率常规分为250kbps和500kbps，本文章主要以这两个波特率为…...

编程日记 2026/1/7 6:19:58

网络协议学习

最近在适配ESP32的网络驱动&#xff0c;借此机会先学习一下网络通信协议。 以太网帧、IP包及TCP与UDP的报文格式一文读懂网络报问中的检验和&#xff08;checksum&#xff09;—— 原理举例代码 提问腾讯元宝提示词&#xff1a; TCP窗口是干什么的拥塞窗口是什么的...

编程日记 2025/12/18 8:37:33

仙剑奇侠传98柔情版游戏秘籍

战斗秘技&#xff1a;在战斗中输入 “cheat”&#xff0c;然后输入 “v” 直接取胜&#xff1b;输入 “y” 敌人不攻击。另外&#xff0c;在战斗中按 “XJPXZ123” 加 “shift” 键&#xff0c;攻击力增加 1000&#xff05;。等级提升秘籍&#xff1a;当李逍遥等级到达 99 级时…...

编程日记 2025/12/30 17:42:56

Maven error：Could not transfer artifact

问题描述 当项目从私有仓库下载依赖时&#xff0c;Maven 报错&#xff0c;无法从远程仓库下载指定的依赖包&#xff0c;错误信息如下&#xff1a; Could not transfer artifact com.ding.abcd:zabk-java:pom from/to releases (http://192.1122.101/repory/mavenleases/): 此…...

编程日记 2026/1/22 6:28:45

pytorch 反向传播

文章目录 概念计算图自动求导的两种模式 自动求导-代码标量的反向传播非标量变量的反向传播将某些计算移动到计算图之外 概念 核心&#xff1a;链式法则 深度学习框架通过自动计算导数(自动微分)来加快求导。 实践中&#xff0c;根据涉及号的模型&#xff0c;系统会构建一个计…...

编程日记 2026/1/8 23:06:44

WindowsPE文件格式入门06.手写最小PE

https://bpsend.net/thread-346-1-1.html 实现目标 实现目标&#xff1a;手写实现不大于 200 Byte大小的PE文件&#xff08;又名&#xff1a;畸形PE/变形PE&#xff09;&#xff0c;要求MessageBox弹框显示一个字符串。实现要点&#xff1a;充分利用空间&#xff0c;在保证遵…...

编程日记 2026/1/23 10:30:36

并发编程--互斥锁与读写锁

并发编程–互斥锁与读写锁 文章目录 并发编程--互斥锁与读写锁1. 基本概念2. 互斥锁2.1 基本逻辑2.2 函数接口2.3示例代码12.4示例代码2 3. 读写锁3.1 基本逻辑3.2示例代码 1. 基本概念 互斥与同步是最基本的逻辑概念&#xff1a; 互斥指的是控制两个进度使之互相排斥&#x…...

编程日记 2026/1/7 22:07:34

记录第一次使用H5的WebBluetooth完成蓝牙标签打印机的（踩坑）过程

第1步 首先第一步&#xff0c;调试环境必须是https的&#xff0c;由于浏览器的强制安全策略&#xff0c;本地可以采用localhost 第2步 然后&#xff0c;如果打印需要服务UUID&#xff08;Service UUID&#xff09; 和 特征UUID&#xff08;Characteristic UUID&#xff09;&…...

编程日记 2026/1/7 20:12:04

2025 年“认证杯”数学中国数学建模网络挑战赛 A题 小行星轨迹预测

近地小行星&#xff08; Near Earth Asteroids, NEAs &#xff09;是轨道相对接近地球的小行 星&#xff0c;它的正式定义为椭圆轨道的近日距不大于 1.3 天文单位&#xff08; AU &#xff09;的小行星。 其中轨道与地球轨道最近距离小于 0.05A 且直径大于 140 米的小行星被…...

编程日记 2025/11/27 12:27:41

【WRF理论第十七期】单向/双向嵌套机制（含namelist.input详细介绍）

WRF运行的单向/双向嵌套机制 准备工作&#xff1a;WRF运行的基本流程namelist.input的详细设置&time_control 设置&domain 嵌套结构&bdy_control 配置部分 namelist 其他注意事项Registry.EM 运行 ARW 嵌套双向嵌套&#xff08;two-way nesting&#xff09;Moving …...

编程日记 2026/1/11 19:07:34

Spring Boot 3.4.3 和 Spring Security 6.4.2 结合 JWT 实现用户登录

在现代 Web 应用中&#xff0c;用户认证和授权是保障系统安全的核心环节。传统的 Session 认证方式在分布式系统或前后端分离场景下存在局限&#xff0c;而 JWT&#xff08;JSON Web Token&#xff09;作为一种无状态的认证机制&#xff0c;凭借其轻量、可扩展和跨服务的特性&a…...

编程日记 2025/11/26 23:42:48

Python 实现的运筹优化系统数学建模详解(0-1规划指派问题)

一、引言 在数学建模的广阔领域中&#xff0c;指派问题作为一类经典且重要的组合优化问题&#xff0c;频繁出现在各类实际场景里。例如&#xff0c;在人力资源管理中&#xff0c;如何将不同技能水平的员工高效地分配到各个项目&#xff0c;以实现项目成本最小化或收益最大化&am…...

编程日记 2025/11/27 7:15:10

TCP转发隧道

✅ 功能特性&#xff1a; 1. 高并发支持&#xff1a;采用 threading.Thread socket&#xff0c;可承载多并发连接 2. 异常处理完善&#xff1a;确保线程内异常不会崩溃整个程序 3. 可持续运行&#xff1a;守护线程 主线程监控机制 4. 运行状态监控&#xff1a; • 当前活跃连…...

编程日记 2025/12/7 21:52:20

React 学习 JSX

APP根组件被index.js渲染到public下的index.html下 JS中写 HTML 代码 渲染列表 条件渲染 复杂条件渲染 事件绑定 传递自定义参数 button标签中写箭头函数引用的格式 自定义参数和事件本身对象都想要的情况...

编程日记 2026/1/9 7:17:37

大模型论文：Language Models are Few-Shot Learners(GPT3)

大模型论文&#xff1a;Language Models are Few-Shot Learners(GPT3) 文章地址&#xff1a;https://proceedings.neurips.cc/paper_files/paper/2020/file/1457c0d6bfcb4967418bfb8ac142f64a-Paper.pdf 一、摘要 我们证明了&#xff0c;扩大语言模型的规模在任务无关的 few…...

编程日记 2026/1/9 16:19:37

一周学会Pandas2 Python数据处理与分析-Pandas2数据导出

锋哥原创的Pandas2 Python数据处理与分析 视频教程&#xff1a; 2025版 Pandas2 Python数据处理与分析 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 任何原始格式的数据载入DataFrame后&#xff0c;都可以使用类似 DataFrame.to_csv()的方法输出到相应格式的文件或者…...

编程日记 2026/1/19 17:40:12

深入解析栈式虚拟机与反向波兰表示法

1.1 什么是虚拟机&#xff1f; 虚拟机&#xff08;Virtual Machine, VM&#xff09;是一种软件实现的计算机系统&#xff0c;提供与物理计算机相类似的环境&#xff0c;但在软件层面运行。虚拟机的存在简化了跨平台兼容性、资源管理以及安全隔离等问题。 1.2 栈式虚拟机的架构…...

编程日记 2026/1/9 0:22:11

python中的数据模型-pydantic浅讲

数据模型-pydantic 1. 基本用法 通过继承 BaseModel&#xff0c;你可以定义一个数据模型类。类的属性使用类型注解来声明字段的类型 from pydantic import BaseModelclass User(BaseModel):name: strage: intis_active: bool True # 默认值字段类型​&#xff1a;每个字段…...

编程日记 2025/11/27 4:42:02

15.【.NET 8 实战--孢子记账--从单体到微服务--转向微服务】--单体转微服务--如何拆分单体

单体应用&#xff08;Monolithic Application&#xff09;是指将所有功能模块集中在一个代码库中构建的应用程序。它通常是一个完整的、不可分割的整体&#xff0c;所有模块共享相同的运行环境和数据库。这种架构开发初期较为简单&#xff0c;部署也较为方便&#xff0c;但随着…...

编程日记 2025/11/27 18:13:57

华为数字芯片机考2025合集4已校正

单选 1. 题目内容 影响芯片成本的主要因素是 Die Size 和封装&#xff0c;但电源、时钟等因素&#xff0c;特别是功耗对解决方案的成本影响较大&#xff0c;因此低成本设计需要兼顾低功耗设计&#xff1a;&#xff08;&#xff09; 1. 解题步骤 1.1 分析题目 Die Size&…...

编程日记 2025/11/27 9:36:18

Java面试黄金宝典47

1. 如何设计一个秒杀系统 定义 秒杀系统是一种应对短时间内大量用户并发请求的系统，其核心目标是在高并发场景下保证系统的稳定性、数据的一致性，避免超卖等问题，同时快速响应用户请求。 秒杀系统设计需从多个层面考虑，以应对高并发场景： 前端优化： 页面静态化：将商品详…...

编程日记 2025/11/29 7:40:51

学习MySQL的第八天

海到无边天作岸 山登绝顶我为峰 一、数据库的创建、修改与删除 1.1 引言 在经过前面七天对于MySQL基本知识的学习之后&#xff0c;现在我们从基本的语句命令开始进入综合性的语句的编写来实现特定的需求&#xff0c;从这里开始需要我们有一个宏观的思想&…...

编程日记 2026/1/14 12:51:39

AI识别与雾炮联动：工地尘雾治理新途径

利用视觉分析的AI识别用于设备联动雾炮方案 背景 在建筑工地场景中&#xff0c;人工操作、机械作业以及环境因素常常导致局部出现大量尘雾。传统监管方式存在诸多弊端&#xff0c;如效率低、资源分散、监控功能单一、人力效率低等&#xff0c;难以完美适配现代工程需求。例如…...

编程日记 2026/1/9 20:10:18

GD32F303-IAP的过程和实验

使用的芯片为GD32F303VC 什么是IAP呢&#xff1f;有个博主写的很清楚&#xff1b;就是远程升级&#xff1b; 【单片机开发】单片机的烧录方式详解&#xff08;ICP、IAP、ISP&#xff09;_isp烧录-CSDN博客 我们需要写一个boot 和APP 通过 boot对APP的程序进行更新&#xf…...

编程日记 2026/1/9 4:26:45

众趣科技助力商家“以真示人”，让消费场景更真实透明

在当今的消费环境中&#xff0c;消费者权益保护问题日益凸显。无论是网购商品与实物不符、预定酒店民宿与图文描述差异大&#xff0c;还是游览景区遭遇“照骗”&#xff0c;这些问题不仅让消费者在消费和决策过程中倍感困扰&#xff0c;也让商家面临信任危机。 消费者在享受便…...

编程日记 2026/1/12 12:39:34

spark core编程之行动算子、累加器、广播变量

一、RDD 行动算子 reduce&#xff1a;聚集 RDD 所有元素&#xff0c;先聚合分区内数据&#xff0c;再聚合分区间数据。 collect&#xff1a;在驱动程序中以数组形式返回数据集所有元素。 foreach&#xff1a;分布式遍历 RDD 元素并调用指定函数。 count&#xff1a;返回 RDD…...

编程日记 2026/1/9 2:16:23

提高课：数据结构之树状数组

1&#xff0c;楼兰图腾 #include<iostream> #include<cstring> #include<cstdio> #include<algorithm>using namespace std;typedef long long LL;const int N 200010;int n; int a[N]; int tr[N]; int Greater[N], lower[N];int lowbit(int x) {ret…...

编程日记 2026/1/9 23:10:01