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

html+css示例

news 2026/5/11 19:54:10

HTML

HTML（超文本标记语言）和CSS（层叠样式表）是构建和设计网页的两种主要技术。HTML用于创建网页的结构和内容，而CSS用于控制其外观和布局。

HTML基础

HTML使用标签来标记网页中的不同部分。每个标签通常有一个开始标签和一个结束标签，内容放在这两个标签之间。例如：

<!DOCTYPE html>
<html>
<head><title>我的第一个网页</title>
</head>
<body><h1>欢迎来到我的网站</h1><p>这是一个段落。</p><a href="https://example.com">这是一个链接</a>
</body>
</html>
  • <!DOCTYPE html>: 声明文档类型，告诉浏览器这是一个HTML5文档。
  • <html>: HTML文档的根元素。
  • <head>: 包含网页的元数据，比如标题和引用的样式表。
  • <title>: 网页的标题，会显示在浏览器标签上。
  • <body>: 包含网页的主要内容。
  • <h1>: 标题标签，<h1>到<h6>表示不同级别的标题。
  • <p>: 段落标签。
  • <a>: 链接标签，href属性指定链接目标。

CSS基础

CSS用于为HTML元素添加样式。CSS可以直接嵌入到HTML中，也可以作为独立的文件引用。以下是CSS的几种用法：

内联样式（Inline CSS）：直接在HTML标签内使用style属性。

<p style="color: red;">这是一个红色的段落。</p>

内部样式表（Internal CSS）：在HTML文档的<head>部分使用<style>标签。

<head><style>body {background-color: lightblue;}p {color: red;}</style>
</head>

外部样式表（External CSS）：在独立的CSS文件中定义样式，并在HTML中引用。

<head><link rel="stylesheet" href="styles.css">
</head>

在styles.css文件中：

body {background-color: lightblue;
}
p {color: red;
}

CSS选择器和属性

标签选择器：选择特定的HTML标签。

p {color: red;
}

类选择器：选择特定类的元素，使用.表示。

.my-class {color: blue;
}

在HTML中：

<p class="my-class">这是一个蓝色的段落。</p>

ID选择器：选择特定ID的元素，使用#表示。

#my-id {font-size: 20px;
}

在HTML中：

<p id="my-id">这是一个大号字体的段落。</p>

实际示例

以下是一个完整的示例，包括HTML和CSS：

HTML（index.html）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的网页</title><link rel="stylesheet" href="styles.css">
</head>
<body><h1>欢迎</h1><p class="intro">这是一个介绍段落。</p><p>这是另一个段落。</p><a href="https://example.com" id="example-link">点击这里</a>
</body>
</html>

CSS（styles.css）

body {font-family: Arial, sans-serif;background-color: #f0f0f0;
}h1 {color: #333;
}.intro {color: #555;font-size: 18px;
}p {color: #666;
}#example-link {color: #0088cc;text-decoration: none;
}#example-link:hover {text-decoration: underline;
}

相关文章：

html+css示例

HTML HTML&#xff08;超文本标记语言&#xff09;和CSS&#xff08;层叠样式表&#xff09;是构建和设计网页的两种主要技术。HTML用于创建网页的结构和内容&#xff0c;而CSS用于控制其外观和布局。 HTML基础 HTML使用标签来标记网页中的不同部分。每个标签通常有一个开始…...

编程日记 2024/6/8 19:00:29

Day51 动态规划part10+Day52 动态规划part11

LC121买卖股票的最佳时机&#xff08;未掌握&#xff09; 暴力&#xff1a;双层循环寻找最优间距&#xff0c;每一次都确定一个起点&#xff0c;遍历剩余节点当作终点 贪心&#xff1a;取最左最小值&#xff0c;不断遍历那么得到的差值最最大值就是最大利润。 动态规划 dp数组…...

编程日记 2024/6/8 18:59:28

Wireshark自定义Lua插件

背景&#xff1a; 常见的抓包工具有tcpdump和wireshark&#xff0c;二者可基于网卡进行抓包&#xff1a;tcpdump用于Linux环境抓包&#xff0c;而wireshark用于windows环境。抓包后需借助包分析工具对数据进行解析&#xff0c;将不可读的二进制数转换为可读的数据结构。 wires…...

编程日记 2024/6/8 18:57:26

商城项目【尚品汇】07分布式锁-2 Redisson篇

文章目录 1 Redisson功能介绍2 Redisson在Springboot中快速入门&#xff08;代码&#xff09;2.1 导入依赖2.2 Redisson配置2.3 将自定义锁setnx换成Redisson实现&#xff08;可重入锁&#xff09; 3 可重入锁原理3.1 自定义分布式锁setnx为什么不可以重入3.2 redisson为什么可…...

编程日记 2024/6/8 18:55:24

Adobe Illustrator 矢量图设计软件下载安装，Illustrator 轻松创建各种矢量图形

Adobe Illustrator&#xff0c;它不仅仅是一个简单的图形编辑工具&#xff0c;更是一个拥有丰富功能和强大性能的设计利器。 在这款软件中&#xff0c;用户可以通过各种精心设计的工具&#xff0c;轻松创建和编辑基于矢量路径的图形文件。这些矢量图形不仅具有高度的可编辑性&a…...

编程日记 2024/6/8 18:54:23

Nvidia/算能 +FPGA+AI大算力边缘计算盒子：中国舰船研究院

中国舰船研究院又称中国船舶重工集团公司第七研究院&#xff0c;隶属于中国船舶重工集团公司&#xff0c;是专门从事舰船研究、设计、开发的科学技术研究机构&#xff0c;是中国船舶重工集团公司的军品技术研究中心、科技开发中心&#xff1b;主要从事舰船武器装备发展战略研究…...

编程日记 2024/6/8 18:52:21

双网卡配置IP和路由总结

1.在网络适配器属性IPv4中设置默认网关&#xff08;记网关地址为A&#xff09;&#xff0c;将会在本地路由表中新增一条记录&#xff1a; 网络号子网掩码网关地址0.0.0.00.0.0.0A 2.如果有两个网卡&#xff08;假设一个连接内网&#xff0c;一个连接互联网&#xff09;&#…...

编程日记 2024/6/8 18:51:20

【纯血鸿蒙】——自适应布局如何实现？

界面级一多能力有 2 类&#xff1a; 自适应布局: 略微调整界面结构 响应式布局&#xff1a;比较大的界面调整 本文章先主要讲解自适应布局&#xff0c;响应式布局再后面文章再细讲。话不多说&#xff0c;开始了。 自适应布局 针对常见的开发场景&#xff0c;方舟开发框架提…...

编程日记 2024/6/8 18:45:15

Qt5学习笔记（一）：Qt Widgets Application项目初探

笔者长期使用MFC开发Windows GUI软件。随着软件向Linux平台迁移的趋势越发明朗&#xff0c;GUI程序的跨平台需求也越来越多。因此笔者计划重新抓一下Qt来实现跨平台GUI程序的实现。 0x01. 看看Qt Widgets Application项目结构 打开Qt5&#xff0c;点击“ New”按钮新建项目。…...

编程日记 2024/6/8 18:44:14

Linux网络编程：数据链路层协议

目录 前言&#xff1a; 1.以太网 1.1.以太网帧格式 1.2.MTU&#xff08;最大传输单元&#xff09; 1.2.1.IP协议和MTU 1.2.2.UDP协议和MTU 1.2.3.TCP协议和MTU 2.ARP协议&#xff08;地址解析协议&#xff09; 2.1.ARP在局域网通信的角色 2.2.ARP报文格式 2.3.ARP报文…...

编程日记 2024/6/8 18:42:12

企业估值的三种方法

估值模型三剑客—DCF、P/E、EV /EBITDA 三种主要估值模型的优缺点: DCF 优点&#xff1a;通过对自由现金流的折现计算&#xff0c;反映了公司内在价值的本质&#xff0c;是最重要与最合理的估值方法。 缺点&#xff1a;未来自由现金流的估计不准确&#xff0c;受折现率影响…...

编程日记 2024/6/8 18:41:11

比亚迪正式签约国际皮划艇联合会和中国皮划艇协会，助推龙舟入奥新阶段

6月5日&#xff0c;比亚迪与国际皮划艇联合会、中国皮划艇协会在深圳共同签署合作协议&#xff0c;国际皮划艇联合会主席托马斯科涅茨科&#xff0c;国际皮划艇联合会秘书长理查德派蒂特&#xff0c;中国皮划艇协会秘书长张茵&#xff0c;比亚迪品牌及公关处总经理李云飞&#…...

编程日记 2024/6/8 18:39:10

宏集Panorama SCADA：个性化定制，满足多元角色需求

前言 在考虑不同人员在企业中的职能和职责时&#xff0c;他们对于SCADA系统的需求可能因其角色和工作职责的不同而有所差异。在SCADA系统的设计和实施过程中&#xff0c;必须充分考虑和解决这种差异性。 为了满足不同人员的需求, 宏集Panorama SCADA平台具备灵活的功能和定制…...

编程日记 2024/6/8 18:37:08

聪明人社交的基本顺序：千万别搞反了，越早明白越好

聪明人社交的基本顺序&#xff1a;千万别搞反了&#xff0c;越早明白越好 国学文化 德鲁克博雅管理 2024-03-27 17:00 作者&#xff1a;方小格 来源&#xff1a;国学文化&#xff08;gxwh001&#xff09; 导语 比一个好的圈子更重要的&#xff0c;是自己优质的能力。 唐诗宋…...

编程日记 2024/6/8 18:33:05

图片和PDF展示预览、并支持下载

需求 展示图片和PDF类型&#xff0c;并且点击图片或者PDF可以预览 第一步&#xff1a;遍历所有的图片和PDF列表 <div v-for"(data,index) in parerFont(item.fileInfo)" :key"index" class"data-list-item"><downloadCard :file-inf…...

编程日记 2024/6/8 18:32:03

图论第5天

127.单词接龙 需要cout看一下过程。 #include <iostream> #include <queue> #include <stack> #include <unordered_map> #include <unordered_set> #include <vector> using namespace ::std;class Solution { public:int ladderLength(…...

编程日记 2024/6/8 18:31:02

Java开发-面试题-0004-HashMap 和 Hashtable的区别

Java开发-面试题-0004-HashMap 和 Hashtable的区别 更多内容欢迎关注我&#xff08;持续更新中&#xff0c;欢迎Star✨&#xff09; Github&#xff1a;CodeZeng1998/Java-Developer-Work-Note 技术公众号&#xff1a;CodeZeng1998&#xff08;纯纯技术文&#xff09; 生活…...

编程日记 2024/6/8 18:30:02

Swift 序列（Sequence）排序面面俱到 - 从过去到现在（一）

概览 在任何语言中对序列（或集合）元素的排序无疑是一种司空见惯的常规操作，在 Swift 语言里自然也不例外。序列排序看似简单，实则“暗藏玄机”。 要想真正掌握 Swift 语言中对排序的“各种姿势”，我们还得从长计议。不如就先从最简单的排序基本功开始聊起吧。 在本篇博…...

编程日记 2024/6/8 18:29:01

redis 04 redis结构

1.客户端...

编程日记 2024/6/8 18:27:59

【原创】springboot+mysql农业园区管理系统设计与实现

个人主页&#xff1a;程序猿小小杨 个人简介&#xff1a;从事开发多年&#xff0c;Java、Php、Python、前端开发均有涉猎 博客内容&#xff1a;Java项目实战、项目演示、技术分享 文末有作者名片&#xff0c;希望和大家一起共同进步&#xff0c;你只管努力&#xff0c;剩下的交…...

编程日记 2024/6/8 18:25:58

2026年5月AI编程工具最新横评

摘要本文基于2026年4-5月AtomGit开源社区、SegmentFault等平台的最新实测数据&#xff0c;覆盖当前市占率最高的5款主流AI编程工具&#xff0c;从功能、价格、适用场景三个维度拆解优劣&#xff0c;不管你是学生、职场开发者还是独立开发者&#xff0c;都能直接抄作业选到最适合…...

编程新知 2026/5/11 17:19:40

FanControl完整使用指南：解决风扇控制难题的实用技巧

FanControl完整使用指南&#xff1a;解决风扇控制难题的实用技巧 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Trending/fa/…...

编程新知 2026/5/11 16:31:59

League-Toolkit终极指南：英雄联盟玩家的智能自动化神器

League-Toolkit终极指南&#xff1a;英雄联盟玩家的智能自动化神器 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power &#x1f680;. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 如果你是英雄联盟玩家&…...

编程新知 2026/5/11 16:16:11

Base64编码实战：手把手教你用PHPStudy环境在本地调试图片/PDF内联显示

Base64编码实战&#xff1a;手把手教你用PHPStudy环境在本地调试图片/PDF内联显示 在Web开发中&#xff0c;Base64编码是一种常见的数据处理方式&#xff0c;它可以将二进制数据&#xff08;如图片、PDF等&#xff09;转换为可打印的ASCII字符串&#xff0c;从而方便地在HTML中…...

编程新知 2026/5/11 15:04:50

高效解决Visual C++运行库问题的终极方案实战指南

高效解决Visual C运行库问题的终极方案实战指南 【免费下载链接】vcredist AIO Repack for latest Microsoft Visual C Redistributable Runtimes 项目地址: https://gitcode.com/gh_mirrors/vc/vcredist Visual C运行库缺失或版本冲突是Windows开发者最常见的系统环境问…...

编程新知 2026/5/11 14:56:27

HC32F460移植指南：除了代码，你还需要搞定Keil、J-Flash和驱动库这三大件

HC32F460开发环境搭建实战&#xff1a;从工具链配置到驱动库迁移 第一次拿到华大HC32F460开发板时&#xff0c;我对着Keil里找不到的芯片型号和一堆陌生的驱动库文件陷入了沉思。与STM32生态相比&#xff0c;华大MCU的开发环境搭建确实存在不少"坑点"。本文将分享一套…...

编程新知 2026/5/11 13:20:50

《QGIS空间数据处理与高级制图》004：内置地理处理工具箱

作者：翰墨之道，毕业于国际知名大学空间信息与计算机专业，获硕士学位，现任国内时空智能领域资深专家、CSDN知名技术博主。多年来深耕地理信息与时空智能核心技术研发，精通 QGIS、GrassGIS、OSG、OsgEarth、UE、Cesium、OpenLayers、Leaflet、MapBox 等主流工具与框架，兼具…...

编程新知 2026/5/11 12:58:18

MCGS触摸屏Modbus通讯调试避坑指南：从驱动安装到脚本调试的全流程解析

MCGS触摸屏Modbus通讯调试避坑指南&#xff1a;从驱动安装到脚本调试的全流程解析 第一次接触MCGS触摸屏与Modbus通讯集成的工程师&#xff0c;往往会在调试过程中遇到各种"坑"。本文将从实际项目经验出发&#xff0c;梳理从驱动安装到脚本调试的全流程中那些容易踩雷…...

编程新知 2026/5/11 12:41:08

GitHub 开源育儿知识库：技术型父母如何用 Awesome List 构建科学育儿体系

1. 项目概述&#xff1a;一个为新手父母量身定制的技能宝库当一个小生命降临&#xff0c;新手父母们常常会陷入一种既幸福又焦虑的复杂情绪中。幸福自不必说&#xff0c;那份焦虑则大多源于“未知”——面对一个不会说话、只会用哭声表达一切的小家伙&#xff0c;如何判断他是饿…...

编程新知 2026/5/11 11:42:41

CTFshow F5杯 逆向与隐写实战解析 超详细

1. CTFshow F5杯逆向与隐写技术全景解析 去年参加F5杯时&#xff0c;我对着那道LSB隐写题折腾到凌晨三点。当终于从图片噪点中提取出flag那一刻&#xff0c;突然理解了什么叫做"数字世界的考古学"。逆向工程和隐写术就像侦探破案&#xff0c;需要同时具备技术功底和发…...

编程新知 2026/5/11 11:28:09