html+css示例

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;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/24495.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【原创】海为PLC与RS-WS-ETH-6传感器的MUDBUS_TCP通讯

点击“蓝字”关注我们吧 一、关于RS-WS-ETH-6传感器的准备工作 要完成MODBUS_TCP通讯,我们必须要知道设备的IP地址如何分配,只有PLC和设备的IP在同一网段上,才能建立通讯。然后还要选择TCP的工作模式,来建立设备端和PC端的端口号。接下来了解设备的报文格式,方便之后发送…

前端:快捷 复制chrome 控制台打印出来的 数组对象

程序中console.log出来的对象。按照以下步骤操作 1.右键点击需要处理的对象&#xff0c;会出现Store as global variable&#xff0c;点击 2.点击 Store as global variable 控制台会出现 3.在控制台 输入 copy(temp1) 这样对象就复制到了你的黏贴面板里面 在代码中直接 c…

基于STM32开发的智能语音控制系统

目录 引言环境准备智能语音控制系统基础代码实现&#xff1a;实现智能语音控制系统 4.1 语音识别模块数据读取4.2 设备控制4.3 实时数据监控与处理4.4 用户界面与反馈显示应用场景&#xff1a;语音控制的家居设备管理问题解决方案与优化收尾与总结 1. 引言 随着人工智能技术…

Vuepress 2从0-1保姆级进阶教程——标准化流程

Vuepress 2 专栏目录 1. 入门阶段 Vuepress 2从0-1保姆级入门教程——环境配置篇Vuepress 2从0-1保姆级入门教程——安装流程篇Vuepress 2从0-1保姆级入门教程——文档配置篇Vuepress 2从0-1保姆级入门教程——范例与部署 2.进阶阶段 Vuepress 2从0-1保姆级进阶教程——全文搜索…

Inpaint9.1软件下载附加详细安装教程

软件简介: Inpaint 是个人开发者Max开发的图片处理软件&#xff0c;可以高效去除水印&#xff0c;修复照片等。使用方法和操作都很简单&#xff0c;非常适合不会PS等软件的小白用户。 安 装 包 获 取 地 址&#xff1a; Iinpaint win版&#xff1a;​​https://souurl.cn/b…

了解JVM中的Server和Client参数

了解JVM中的Server和Client参数 Java虚拟机&#xff08;Java Virtual Machine&#xff0c;JVM&#xff09;作为Java程序运行的核心&#xff0c;提供了多种参数来优化和调整程序的性能和行为。其中&#xff0c;-server和-client是两个重要的参数&#xff0c;分别用于配置JVM在服…

【Android面试八股文】synochnized修饰普通方法和静态方法的区别?什么是原子性、可见性、有序性?

文章目录 synochnized修饰普通方法和静态方法的区别?什么是原子性、可见性、有序性?这道题想考察什么 ?考察的知识点考生应该如何回答synchronized 的基本原理synchronized 修饰普通方法和静态方法的区别synchronized定义同步代码块synochnized修饰普通方法和静态方法的区别…

微生物共生与致病性:动态变化与识别挑战

谷禾健康 细菌耐药性 抗生素耐药性细菌感染的发生率正在上升&#xff0c;而新抗生素的开发由于种种原因在制药行业受重视程度下降。 最新在《柳叶刀-微生物》&#xff08;The Lancet Microbe&#xff09;上&#xff0c;科学家提出了基于细菌适应性、竞争和传播的生态原则的跨学…

Tongweb7重置密码优化版*(by lqw )

如图所示&#xff0c;输入初始密码是会报错的&#xff0c;说明已经修改了密码 首先我们先备份一下tongweb的安装目录&#xff0c;避免因为修改过程中出现的差错而导致tongweb无法启动&#xff1a; 备份好了之后&#xff0c;我们关闭掉tongweb。 方式一&#xff1a; Cd 到tong…

C# WPF入门学习主线篇(十)—— DataGrid常见属性和事件

C# WPF入门学习主线篇&#xff08;十&#xff09;—— DataGrid常见属性和事件 欢迎来到C# WPF入门学习系列的第十篇。在前面的文章中&#xff0c;我们已经学习了 Button、TextBox、Label、ListBox 和 ComboBox 控件。今天&#xff0c;我们将探讨 WPF 中的另一个重要控件——D…

Python私教张大鹏 Vue3整合AntDesignVue之Anchor 锚点

用于跳转到页面指定位置。 何时使用 需要展现当前页面上可供跳转的锚点链接&#xff0c;以及快速在锚点之间跳转。 案例&#xff1a;锚点的基本使用 核心代码&#xff1a; <template><a-anchor:items"[{key: part-1,href: #part-1,title: () > h(span, {…

大学国学搜题软件?分享7个软件和公众号,来对比看看吧 #经验分享#微信#媒体

在大学里&#xff0c;高效的学习工具可以帮助我们更好地管理时间和资源&#xff0c;提高学习效果。 1.彩虹搜题 这是个老公众号了 多语言查询支持&#xff0c;满足国际用户需求。全球通用&#xff0c;无障碍搜题。 下方附上一些测试的试题及答案 1、某酸碱指示剂的&#xf…

Web前端推送功能:深入剖析与应用实践

Web前端推送功能&#xff1a;深入剖析与应用实践 在信息化社会的今天&#xff0c;Web前端推送功能作为实时通信和个性化服务的重要手段&#xff0c;受到了广泛的关注和应用。本文将从四个方面、五个方面、六个方面和七个方面&#xff0c;深入探讨Web前端推送功能的原理、应用、…

uniapp自定义的下面导航

uniapp自定义的下面导航 看看效果图片吧 文章目录 uniapp自定义的下面导航 看看效果图片吧 ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/6aa0e964741d4dd3a58f4e86c4bf3247.png) 前言一、写组件、我这里就没有写组件了直接写了一个页面&#xff1f;总结 前言 在…

职场十大法则:与大家共勉

现在的社会很浮躁&#xff0c;在职的我们也都很浮躁&#xff0c;总是这山望着那山高&#xff0c;都是在为薪资而努力奋斗&#xff08;甚至跳槽&#xff09;。以下是关于职场法则的一些主要内容和建议&#xff0c;与大家共勉&#xff1a; 职场法则一&#xff1a;主动与积极&…

Elasticsearch 认证模拟题 - 12

一、题目 在集群上有 task2 索引&#xff0c;请重建它到 task2_new 索引上&#xff0c;并满足以下要求&#xff1a; task2 索引的 a 字段包含有关键字 Yoo-Hoo 和 YooHoo&#xff0c;不管搜索 Yoo-Hoo 还是YooHoo 它们的结果应该一样task2_new 和 task2 的 mapping 应该一样 …

软件架构x86 、 x86_64、 arm64、aarch64

看系统信息: 大多数Linux发行版都提供如 uname -a命令 arch命令用于显示当前主机的硬件架构类型。 例如 下面的是Kylin Linux Advanced Server for Kunpeng V10 操作系统 (鲲鹏处理器是华为在2019年1月向业界发布的高性能数据中心处理器 ) 下面这个是 ubuntu 18.04.6 …

CMakeLists如何多行注释

在使用Visual Studio编写CMakeLists的时候你可能会遇到需要多行注释的情况&#xff0c;可又不知道快捷键是什么。。。 其实你只需要敲个 #[[ 就行了&#xff0c;另外一般方括号VS会自动帮你补全&#xff0c;之后将需要注释的内容放在第二个方括号与第三个方括号之间就完成注释…

1-8 C语言分支循环语句

C语言的语句分为 5 类 1&#xff1a;表达式语句2&#xff1a;函数调用语句3&#xff1a;控制语句4&#xff1a;复合语句5&#xff1a;空语句 控制语句&#xff1a;用于控制程序的执行流程&#xff0c;以实现程序的各种结构方式&#xff0c;它们由特定的语句定义符组成&#x…

Python 机器学习 基础 之 【实战案例】中药数据分析项目实战

Python 机器学习 基础 之 【实战案例】中药数据分析项目实战 目录 Python 机器学习 基础 之 【实战案例】中药数据分析项目实战 一、简单介绍 二、中药数据分析项目实战 三、数据处理与分析实战 1、数据读取 2、中药材数据集的数据处理与分析 2.1数据清洗 2.2、 提取别…