HTML和CSS是前端开发中最基础的两个技术[入门级]

HTML和CSS是前端开发中最基础的两个技术

下面是它们的代码结构:
HTML代码结构:
html
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <h1>This is a Heading</h1>
        <p>This is a paragraph.</p>
    </body>
</html>
<!DOCTYPE html>:声明文档类型为HTML。
<html>:HTML文档的根元素。
<head>:文档头部,用于包含元数据(如标题、字符编码、视口等)和链接到外部文件(如CSS和JavaScript)。
<title>:文档的标题,将显示在浏览器标签上。
<meta>:元数据。charset属性指定文档使用的字符编码,name="viewport"用于设置移动设备上的视口大小和缩放比例。
<body>:文档的主体部分,包含可见的页面内容。
<h1>和<p>:HTML标签,用于定义标题和段落。
 

CSS代码结构:
css
/* CSS注释 */
body {
    background-color: lightblue;
}

h1 {
    color: navy;
    margin-left: 20px;
}
/* CSS注释 */:CSS注释。
body和h1:CSS选择器,用于选中HTML元素。
{}:CSS规则,包含一系列的属性和值。
background-color和color:CSS属性,用于设置背景颜色和文字颜色。
lightblue和navy:CSS值,用于指定颜色。
margin-left:CSS属性,用于设置左外边距。
20px:CSS值,用于指定长度单位(像素)。

<div> 是 HTML 中的一个常用标签,用于创建一个块级容器,可以用来组织和包裹其他 HTML 元素。
下面是 <div> 标签的基本结构和示例用法:
基本结构:
<div>
    <!-- 这里是 div 内部的内容 -->
</div>
示例用法:
<div>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
    <img src="image.jpg" alt="图片">
</div>
在上面的示例中,<div> 标签用于包裹了一个标题(<h1>)、一个段落(<p>)和一张图片(<img>)。通过使用 <div> 标签,可以将这些元素组织在一个独立的块级容器中,方便对它们进行样式设置、布局调整等操作。

<div> 标签还经常与 CSS 结合使用,通过为 <div> 添加类名或 ID,可以为其指定样式或添加交互效果。例如:
<div class="container">
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</div>
在这个示例中,<div> 标签添加了一个类名为 container,可以通过 CSS 来为这个特定的 <div> 添加样式。

CSS代码如下:
.container {
    width: 80%;
    margin: 0 auto;
    background-color: #f5f5f5;
    padding: 20px;
}
在这个示例中,CSS 代码给具有 container 类名的 <div> 元素设置了宽度、居中对齐、背景色和内边距等样式。

添加 ID
<div id="main">
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</div>
在上面的示例中,<div> 标签添加了一个 ID 为 main,可以通过 JavaScript 给这个特定的 <div> 元素添加交互效果。
JavaScript 代码如下:
var main = document.getElementById("main");
main.addEventListener("click", function() {
    alert("你点击了主要区域!");
});
在这个示例中,JavaScript 代码为具有 main ID 的 <div> 元素添加了一个点击事件,当用户点击这个 <div> 时,会弹出一个提示框。

---------------------------------------- 

当为 <div> 标签添加类名或 ID 并结合 CSS 和 JavaScript 使用时,可以实现更加复杂和丰富的效果。以下是一些常见的应用场景和技术:

  1. 响应式设计:通过为 <div> 添加不同的类名,可以在不同屏幕大小下实现响应式布局。例如,使用媒体查询来根据屏幕宽度调整 <div> 的样式。

  2. 动画效果:通过CSS的动画属性或JavaScript库(如jQuery)来为带有特定类名或ID的 <div> 添加动画效果,如淡入淡出、滑动等。

  3. 模态框:通过 JavaScript 控制带有特定ID的 <div> 元素来实现模态框的显示和隐藏效果,例如点击按钮弹出一个对话框。

  4. 网页交互:通过 JavaScript 监听特定类名或ID的 <div> 元素上的事件,实现与用户的交互,比如点击、鼠标悬停等操作。

  5. 表单验证:在表单提交时,通过 JavaScript 检查带有特定类名或ID的 <div> 元素内的输入内容,并给出相应的验证提示。

通过合理地组织和利用 <div> 的类名和ID,结合 CSS 和 JavaScript,可以实现丰富多彩的前端效果和交互体验。

 

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

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

相关文章

基于Redis限流(固定窗口、滑动窗口、漏桶、令牌桶)(肝货!!!)

近期redis复习的比较多&#xff0c;在限流这方面发现好像之前理解的限流算法有问题&#xff0c;索性花了一天“带薪摸鱼”时间肝了一天&#xff0c;有问题可以评论区探讨。 废话不多说&#xff0c;正片开始 目录 Maven固定窗口滑动窗口算法漏桶算法令牌桶算法 Maven 有些不用的…

SQL语句创建数据库全解析

SQL语句创建数据库全解析 大家好&#xff01;在今天的博客中&#xff0c;我们将详细讨论如何使用SQL&#xff08;Structured Query Language&#xff0c;结构化查询语言&#xff09;语句来创建一个数据库。SQL是用于管理&#xff08;如检索&#xff0c;定义&#xff0c;操纵&a…

快速排序法的名字由来,排序步骤是什么,最坏情况下的排序次数如何计算得来的呢?

问题描述&#xff1a; 快速排序法的名字由来&#xff0c;排序步骤是什么&#xff0c;最坏情况下的排序次数如何计算得来的呢&#xff1f; 问题解答&#xff1a; 快速排序法的名字来源于其排序速度快的特点。它是由英国计算机科学家 Tony Hoare 于1960年提出的&#xff0c;最…

板块一 Servlet编程:第六节 HttpSession对象全解 来自【汤米尼克的JAVAEE全套教程专栏】

板块一 Servlet编程&#xff1a;第六节 HttpSession对象全解 一、什么是HttpSessionSession的本质 二、创建Seesion及常用方法三、Session域对象四、Session对象的销毁 在上一节中&#xff0c;我们学习了Servlet五大对象里的第三个Cookie对象&#xff0c;但Cookie是有大小限制和…

Linux操作体系结构与功能流程

文章目录 前言一、linux操作系统结构二、操作系统的工作方式三、操作系统内核中各级模块的相互关联四、Linux操作系统结构的独立性 前言 以内核代码 v0.11 和 v3.4.2 版本源码对 Linux 内核相关知识进行学习&#xff0c;由浅入深逐步掌握 Linux 内核。本文记录 Linux 操作系统…

了解您的数据库管理系统及其优化器

PostgreSQL 模式 物品具有唯一标识符、唯一图像标识符、名称和价格。 仓库具有唯一标识符、名称以及由街道、城市和国家定义的位置。 对于每个可用的物品&#xff0c;我们记录每个仓库中的库存数量。如果某个物品在仓库中不可用&#xff0c;则这对没有记录。数量总是等于或大于…

[Angular 基础] - 自定义指令,深入学习 directive

[Angular 基础] - 自定义指令&#xff0c;深入学习 directive 这篇笔记的前置笔记为 [Angular 基础] - 指令(directives)&#xff0c;对 Angular 的 directives 不是很了解的可以先过一下这篇笔记 后面也会拓展一下项目&#xff0c;所以感兴趣的也可以补一下文后对应的项目&a…

Hyperf 使用配置中心 - nacos配置中心

安装 composer require hyperf/config-center composer require hyperf/config-nacos 配置 配置 config/autoload/service.php <?phpreturn [enable > [// 开启服务发现discovery > true,// 开启服务注册register > true,],// 服务消费者相关配置consumers >…

排序和查找算法

一、排序算法 1.快速排序 不稳定&#xff0c;时间复杂度最理想 O(nlogn) 最差时间O(n^2) package com.test;public class fasf{/*** 快速排序* param args*/public static void main(String[]args){//不用设置大小int [] num{3,6,5,4,7,2,9};fasf fnew fasf();f.quicksort(n…

samber/lo 库的使用方法:Error

samber/lo 库的使用方法&#xff1a;Error samber/lo 是一个 Go 语言库&#xff0c;提供了一些常用的集合操作函数&#xff0c;如 Filter、Map 和 FilterMap。 这个库函数太多&#xff0c;因此我决定按照功能分别介绍&#xff0c;本文介绍的是 samber/lo 库中Error相关的函数。…

ZS Associates致盛咨询是什么公司?排名怎么样?

随着商业化时代的加速演进&#xff0c;咨询公司在企业发展中的“智囊团”角色愈发突显。对于医药企业来说&#xff0c;一个优秀的咨询团队不仅可以帮助推动整体战略转型及内部改革&#xff0c;还对药品研发、营销起到优化促进作用。 那什么样的咨询企业可称之为优秀的咨询企业…

6.网络游戏逆向分析与漏洞攻防-游戏网络架构逆向分析-通过逆向分析确定游戏明文发送数据过程

内容参考于&#xff1a;易道云信息技术研究院VIP课 上一个内容&#xff1a;测试需求与需求拆解 在开始之前要了解一个小知识&#xff0c;在逆向开始之前要很清楚知道要找的东西是什么&#xff0c;大概长什么样子&#xff0c;只有这样才能看到它第一眼发现它&#xff0c;现在我…

129 Linux 系统编程7 ,make 的编写和解析

前文中&#xff0c;我们有多少个.c文件&#xff0c;就需要build 出来多少个.o文件 假设我们的项目很大&#xff0c;怎么管理这些 .c文件呢&#xff1f; 这里就要学习一个make文件的编写了。 makefile 本质上是一个脚本语言 脚本语言实际上就是将一系列命令放在一起执行 mak…

Jetson Xavier NX 与笔记本网线连接 ,网络共享,ssh连接到vscode

Jetson Xavier NX 与笔记本网线连接 &#xff0c;网络共享&#xff0c;ssh连接到vscode Jetson Xavier NX桌面版需要连接显示屏、鼠标和键盘&#xff0c;操作起来并不方便&#xff0c;因此常常需要ssh远程连接到本地笔记本电脑&#xff0c;这里介绍一种连接方式&#xff0c;通过…

java面试题:数字与字母的映射表

前言 好记性不如烂笔头。 问题&#xff1a; 现在有一个数字与字母的映射表&#xff0c;且有以下规则&#xff1a; 映射表&#xff1a; 数字 字母 3 A 7 B 9 C 规则&#xff1a; 1.碰到当前数字时&#xff0c;使用字母替换&#xff0c;例如&#xff0c;3-> A 2.碰到当前数…

竞技游戏中的失败认知与心理调适:面对不甘心的挑战

在当今社会&#xff0c;电子竞技游戏已成为众多年轻人休闲娱乐的重要方式&#xff0c;而竞技游戏中的胜负常态&#xff0c;往往伴随着玩家心态的起伏跌宕。尤其是当玩家面临即将失败的局面时&#xff0c;内心的不甘情绪尤为强烈。本文旨在探讨这种明知败局已定但仍心有不甘的现…

如何不患心肌梗塞

目录 一&#xff0c;个人面板 二&#xff0c;公共版图 三&#xff0c;卡牌 1&#xff0c;食物牌 2&#xff0c;药物牌 3&#xff0c;事件牌 四&#xff0c;回合操作 1&#xff0c;起始玩家 2&#xff0c;一轮操作 3&#xff0c;个人回合 4&#xff0c;轮末结算 5&a…

Vision Transfomer系列第二节---Tricks测试

目录 学习式和固定式位置编码测试dropout的作用测试block深度的作用测试embeding维度大小的作用测试多头的作用测试Overlap Patch的作用 学习式和固定式位置编码测试 主要测试无位置编码\可学习位置编码和固定式位置编码的训练效果: 其中固定式位置编码采用之前博客的正余弦位…

第十一天-Excel的操作

目录 1.xlrd-Excel的读模块 安装 使用 获取工作簿 读取工作簿的内容 xlsxwriter-Excel的写模块 安装 使用 生成图表 add_series参数 图表的样式 demo&#xff1a;生成图表 Excel的操作在python中有多个模块&#xff0c;为了能够快速使用&#xff0c;选择了相对简单…

【More Effective C++】条款7:不要重载、||和,操作符

真假值表达式&#xff1a; 一旦真假值确定&#xff0c;即使表达式中有尚未计算的部分&#xff0c;也不会计算表达式的计算总是从左向右计算 不能重载的 && 和 || 的理由&#xff1a; 所有的表达式都需要计算不确定函数调用顺序 int rangeCheck(int index, int lowe…