个人主页：♡喜欢做梦

目录

🎠HTML

🎡一、什么是HTML？

⛲️1.定义

⛲️2.核心特点

⛲️3.HTML的基本结构

⛲️4.标签的层次结构关系

🎡二、HTML的常用标签

🌅1.文本列表标签

标题标签：h1-h6

 段落标签：

 换行标签：br

🌅2.链接与资源标签（链接外部标签） 

 图片标签：img

超链接：a

🌅3.表格标签

🌅4.表单标签

form标签

 input标签

🌅5.无语义标签：div&span

🎠CSS

🎡一、什么是CSS？

🎡二、引入方式

🎡三、css常见属性分类

🎡四、常用选择器

🚤1.标签选择器选中所有标签

🚤2.class选择：选中所有class=“box”的元素

🚤3.id选择器：选中id=“a”的元素（唯一）

🚤4.通配符选择器

🚤5.复合选择器

🎠HTML

🎡一、什么是HTML？

⛲️1.定义

HTML（HyperText Markup Language，超文本标记语言）是用于创建和描述网页的标准标记语言。他不是编程语言，而是通过标记标签来定义网页结构和内容的标记语言。

⛲️2.核心特点

  • 超文本（HyperText）：比文本强大，文本只能有文字，而是超文本指的是页面中包含的链接，可以包含音频、图片、补充或注脚等。
  • 标记语言（Markup Language）：使用一系列预定义标签来描述网页的结构和内容，浏览器会根据这些标签解析并解析页面。在浏览器中，我们一般按快捷键F12，就可以显示该页面的html。
  • 平台无关性：You浏览器解析html代码，无论在哪个操作系统，只要有浏览器就可以显示html页面。

⛲️3.HTML的基本结构

<html><head><title>这是一个页面</title></head><body>hello</body>
</html>
  • html：是整个html文件的根标签（最顶层的标签）；
  • head：页面的属性；
  • title：页面标签标题；
  • body：页面显示内容 。
  • body：页面显示内容 。
  • 效果显示： 

⛲️4.标签的层次结构关系

  • html是head和body的父标签；
  • head与title：父子关系
  • head与body：兄弟关系

🎡二、HTML的常用标签

在VS Code中，创建xxx.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></body>
</html>
  •  可以Ctrl+/来注释；
  • Ctrl+s来保存，VS Code要记得保存。

 常见标签

🌅1.文本列表标签
标题标签：h1-h6
    <h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
  • h1->h6:数字越大，字体越小 

 显示效果

 段落标签：<p>
<p>这是一个段落</p>

效果显示：

  • 段落没有缩进，首尾空格均无效；
  • 多个空格，都只算一个空格 
  •  如果想要多个空格，可以用&nbsp

 换行标签：br
    这是一个换行标签<br/>这是一个换行标签<br/>
  • <p>与<br/> 区别，p的间隔更大

🌅2.链接与资源标签（链接外部标签） 
 图片标签：img
    <!-- 写法一 --><img src="图片.jpg"><!-- 写法二 --><img src="图.jpg" alt="这是一张图片"><!-- 写法三 --><img src="图片.jpg" alt="这是一张图片" width="100px" height="100px">

效果显示

  • 此时“图片.jpg”放在同一个目录下 ，有可以使用相对路径或者绝对路径。

  •  alt：图片加载失败是显示的文本结构，上述我写的是错误的名称，所以无法加载出来。
  • witdth/height：控制高度和宽度，一般改一个就可以。
  • px是像素，是一种相对长度单位。
超链接：a
    <!-- 写法一：在本页面跳转网页 --><a href="https://hao.360.com/?src=lm&ls=n009c1cd49d" > 搜索 </a><br/><!-- 写法二:在新建一个网页进行跳转--><a href="https://hao.360.com/?src=lm&ls=n009c1cd49d"  target="_blank"> 搜索 </a><br/><!-- 空连接：使用#在href占位 --><a href="#"> 空链接 </a>

  •  第一个写法会在本页面进行跳转地址，第二个写法会另起新建一个地址。
  • target=“_blank”:在新窗口打开链接。
🌅3.表格标签

标签：

  • <table>:表格容器
  • <tr>：表格行
  • <td>:表格单元格（普通单元格）
  • <th>:表头单元格（通常加粗居中）
  • <thead>:表格头部
  • <tbody>：表格主体
<body><body><!-- border：边框粗细cellpadding：内容边距cellspacing：单元格边距 --><table style="width: 100px;height: 150px;"border="4px" cellspacing="10" cellpadding="30"><!-- tr：表格行td：单元格 --><tr><td>a</td><td>b</td></tr><tr><!-- 跨列合并 --><td colspan="2">b</td></tr><tr><!-- 跨行合并 --><td rowspan="2">c</td></tr><tr><td>d</td></tr>
</body>

结果显示： 

  •  style="width: 500;height: 300;"：通过内敛样式设置表格位宽度为500，高度为300；
  • border：用于设置表格边框的粗细；
  • cellspacing：用于设置单元格与单元格之间的宽度；
  • cellpadding：内容距离边框的距离；
  • colspan:跨列合并；
  • rowspan：跨行合并。
🌅4.表单标签

用于创建交互表单，收集用户数据

分成两个部分

  • 表单域：包含表单元素的区域，重点的form标签（表单容器）
  • 表单控件：输入框，提交按钮，重点是input标签（输入框）
form标签
 <form action="test.html" method="get">内容</form>
  • action：指定表单要提交的目标地址

  • method：表单数据的提交方式，常用的有post和get

    • pos：数据会附加在URL后面（格式：？参数名1=值1&参数名2=值2），可见性高
    • get：数据会放在HTTP请求的“请求体”中，不在URL中显示，更安全。
 input标签

input：输入框(通过type属性定义类型)

文本框

<input type="text">
<input type="text" placeholder="请输入姓名">

结果显示：

  • placeholder：显示提示文本，引导用户输入相关信息。 

 密码框

<input type="password">

单选框

<input type="radio" name="gender" id="gender1" value="1"><label for="gender1">男</label>
<input type="radio"name="gender" id="gender2" value="2"><label for="gender2">女</label><br/>

效果： 

  •  name是给后端看的标识名，用来收数据，这提交表单时，后端会收到gender1或gender2；
  • lable是用来关联表单元素；
  • id是给前端用的唯一身份证，方便元素操作，整个页面中id必须唯一，与<lable>标签关联，实现点击文字也能选中选项；
  • value是实际传给后端看的内容。

多选框

<input type="checkbox" name="Evaluation" id="evaluation1" value="1"><label for="evaluation1">很好</label>
<input type="checkbox" name="Evaluation" id="evaluation2" value="2"><label for="evaluation2">一般</label>
<input type="checkbox" name="Evaluation" id="evaluation3" value="3"><label for="evaluation3">不好</label>

 

提交

<input type="submit" value="提交">

 

select标签：下拉菜单

  <select><option>1</option><option>2</option><option selected="selected">3</option>
</select><br/>

结果显示 

  • selected=“selected”表示默认选中

 textarea标签：多行文本输入框

<textarea row="3" cols="40"></textarea>

结果显示： 

  •  row：默认行数
  • cols：默认列数
🌅5.无语义标签：div&span

div：块级元素，会独占一行，常用来做页面大结构

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{color:rgb(216, 17, 17)}</style>
</head>
<body><div style="color: blue;">1</div><div>1</div><div>1</div><div>1</div>
</body>

span：行内元素，不会独占一行，常用来包裹小段文本

<span style="color: blue;">1</span>
<span style="color: blue;">1</span>
<span>1</span>

 

案例：

用户注册

 

<!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><form action method="get"><table><tr><td>用户名</td><td><input type="text" placeholder="请输入用户名"></td></tr><tr><td>手机号</td><td><input type="text" placeholder="请输入手机号"></td></tr><tr><td>密码</td><td><input type="password" placeholder="请输入密码"></td></tr></table><input type="submit" value="注册"><span>已有账号？</span><a href="#">登入</a></form>
</body>
</html>

🎠CSS

🎡一、什么是CSS？

CSS（Cascadong Style Sheets，层叠样式表）用于控制页面的样式，主要负责网页的视觉表现、包括布局、颜色、字体、间距等外观样式。HTML决定网页“有什么内容”，CSS决定网页内容“看起来什么样的”。

下面的布局就是由css控制的，而里面布局的内容是由html写的 

🎡二、引入方式

  • 行内样式：直接写在html元素的style属性中
<div style="属性">文本</div>

示例：

    <div color:red>hello</div><div color:black>hello</div><div color:blue>hello</div>

结果显示 

 

  • 内部样式：定义style标签，在标签内定义css样式
<style>div{属性;}
</style> <body><div>文本</div>
</body>

示例： 

<style>div{color:aquamarine;}
</style> <body><div>hello</div><div>hello</div><div>hello</div>
</body>

显示结果 

 

  • 外部样式：定义link标签，通过href属性引入外部css文件
<link rel="stylesheet" href="css外部文件">

示例： 

<link rel="stylesheet" href="style.css"><body><div>hello</div><div>hello</div><div>hello</div>
</body>//style.css文件
div{color: blueviolet;
}
  • 在创建css外部文件时，可以先先直接写<link ret=""...>,在点击ctrl+clik自动创建外部文件
  • 遵循就近原则 
    • <style>div{color:aquamarine;}
</style>  <body><div style="color: chocolate;">hello</div><div>hello</div><div>hello</div>
</body>

🎡三、css常见属性分类

  • color：文本颜色；
  • front-size：字体大小
  • width/height：宽/高
  • margin：外边距
  • padding：内边距

示例

<style>#div1{color: #ba1515;font-size:large;}#div2{width: 300px;height: 200px;margin: 50px;padding: 20px;border: 60px;}
</style>
<body><div id="div1">hello</div><div id="div2">world</div><!-- <div id="div3">zhangsan</div> -->
</body>

结果显示 

🎡四、常用选择器

🚤1.标签选择器选中所有标签
    a{属性；}div{属性；}span{属性；}
🚤2.class选择：选中所有class=“box”的元素
.box{属性;
}

示例：

<style>.a1{color:aquamarine;}
</style><body><a class="a1">这个一个</a><div class="div1">这个一个</div><span class="a1">这个一个</span>
</body>

 

🚤3.id选择器：选中id=“a”的元素（唯一）
#a{属性;
}

示例： 

<style>#a{color:aquamarine;}
</style><body><a id="a">这个一个</a><div id="a">这个一个</div>
</body>
</html>

🚤4.通配符选择器
*{...}

 示例：

<style>*{color: rgb(17, 207, 67);}
</style>
<body><a>这个一个</a><div>这个一个</div>
</body>

🚤5.复合选择器
ul li{...}

示例： 

<style>ol li{color:aqua;}
</style>
<body><ol><li>这个一个li</li><li>这个一个li</li></ol>
</body>

    本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
    如若转载，请注明出处：http://www.pswp.cn/pingmian/92691.shtml
    繁体地址，请注明出处：http://hk.pswp.cn/pingmian/92691.shtml
    英文地址，请注明出处：http://en.pswp.cn/pingmian/92691.shtml

    如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

    相关文章

    【MATLAB 2025a】安装离线帮助文档

    【MATLAB 2025a】安装离线帮助文档

    文章目录一、在 MATLAB 设置中安装二、从math works 网站下载ISO&#xff1a;适用于给无法联网的电脑安装或自定义路径三、startup文件说明四、重要说明&#x1f9e9;&#x1f9e9;【Matlab】最新版2025a发布&#xff0c;深色模式、Copilot编程助手上线&#xff01; 版本&#…
    阅读更多...
    Linux系统编程Day8 -- Git 教程（初阶）

    Linux系统编程Day8 -- Git 教程（初阶）

    往期内容回顾 基于Linux系统知识的第一个程序 自动化构建工具-make/Makefile gcc/g编译及链接 Vim工具的使用 Linux常用工具&#xff08;yum与vim&#xff09; ​​​​​​ Linux系统编程Day4-- Shell与权限 回顾进度条程序的编写&#xff1a; //.h文件内容 #include<stdio…
    阅读更多...
    React18 Transition特性详解

    React18 Transition特性详解

    Transition 核心概念&#xff1a;Transition是一种标记非紧急任务更新的机制&#xff0c;它允许React在用户交互&#xff08;如输入&#xff09;期间保持界面的响应&#xff0c;同时准备后台更新 主要特点&#xff1a; 区分优先级&#xff1a;可以将更新分为紧急非紧急任务可中…
    阅读更多...
    OpenHarmony概述与使用

    OpenHarmony概述与使用

    1. OpenHarmony Hi3861 学习目标与任务 硬件基础知识&#xff1a;涵盖嵌入式硬件体系架构&#xff08;如 MCU 基础、硬件接口原理 &#xff09;、硬件设计流程&#xff08;原理图绘制、PCB Layout 规范 &#xff09;&#xff0c;了解常见硬件外设&#xff08;传感器、通信模…
    阅读更多...
    大模型提示词工程实践：大语言模型文本转换实践

    大模型提示词工程实践：大语言模型文本转换实践

    大模型文本转换 学习目标 在本课程中&#xff0c;我们将探究如何使用大语言模型来完成文本转换任务&#xff0c;例如语言翻译、拼写和语法检查、语气调整以及格式转换。 相关知识点 大模型文本转换 学习内容 1. 大模型文本转换 文本转换的核心定义与范畴 文本转换 是指通过技术…
    阅读更多...
    力扣LCR024：反转链表206.反转链表双解法（经典面试题）

    力扣LCR024：反转链表206.反转链表双解法（经典面试题）

    LCR 024. 反转链表 - 力扣&#xff08;LeetCode&#xff09;LCR 024. 反转链表 - 给定单链表的头节点 head &#xff0c;请反转链表&#xff0c;并返回反转后的链表的头节点。 示例 1&#xff1a;[https://assets.leetcode.com/uploads/2021/02/19/rev1ex1.jpg]输入&#xff1a…
    阅读更多...
    Day 6: CNN卷积神经网络 - 计算机视觉的核心引擎

    Day 6: CNN卷积神经网络 - 计算机视觉的核心引擎

    Day 6: CNN卷积神经网络 - 计算机视觉的核心引擎 📚 核心概念(5分钟理解) 什么是CNN卷积神经网络？ 核心概念解释： CNN(Convolutional Neural Network): 专门处理具有网格状拓扑结构数据的深度学习模型，特别擅长图像识别 为什么需要: 传统全连接神经网络处理图像时参数量…
    阅读更多...
    MacBook 本地化部署 Dify 指南

    MacBook 本地化部署 Dify 指南

    Dify 安装前的准备工作 确认系统满足最低配置要求&#xff0c;包括操作系统版本、内存、CPU 和存储空间。 检查是否已安装必要的依赖项&#xff0c;如 Python、Docker 确保网络环境稳定&#xff0c;能够访问所需的软件源或镜像仓库。 获取 Dify 安装包 https://docs.dify.ai…
    阅读更多...
    疫情可视化：基孔肯雅热风险地图实战解析

    疫情可视化：基孔肯雅热风险地图实战解析

    > 一只白纹伊蚊的飞行半径是100米，而一套WebGIS系统能将疫情防控范围精确到每平方米。 2025年夏季，基孔肯雅热疫情在广东佛山爆发，短短一个月内感染病例占全省95%以上。这种由伊蚊传播的病毒性疾病，以**突发高热、剧烈关节痛和全身皮疹**为特征，患者关节疼痛可能持续数…
    阅读更多...
    【14-模型训练细节】

    【14-模型训练细节】

    训练步骤 1、指定输入和输出&#xff0c;即模型定义&#xff1b; 2、指定损失函数和成本函数&#xff1b; 3、指定训练算法&#xff0c;如梯度下降算法&#xff1b;训练细节 损失函数和成本函数用梯度下降算法训练模型 主要是求成本函数的偏导数&#xff0c;使用的是反向传播算…
    阅读更多...
    ConcurrentDictionary 详解：.NET 中的线程安全字典

    ConcurrentDictionary 详解：.NET 中的线程安全字典

    什么是 ConcurrentDictionary&#xff1f; ConcurrentDictionary<TKey, TValue> 是 .NET Framework 4.0 和 .NET Core/.NET 5 中引入的线程安全字典实现&#xff0c;位于 System.Collections.Concurrent 命名空间。它解决了多线程环境下操作字典时的同步问题&#xff0c…
    阅读更多...
    集成电路学习：什么是URDF Parser统一机器人描述格式解析器

    集成电路学习：什么是URDF Parser统一机器人描述格式解析器

    URDF Parser（URDF解析器）是ROS（Robot Operating System，机器人操作系统）中用于解析URDF（Unified Robot Description Format，统一机器人描述格式）文件的工具。URDF是一种基于XML（Extensible Markup Language，可扩展标记语言）规范的格式，用于描述机器人的结构、关节、…
    阅读更多...
    老式大头显示器（CRT）和当前最高分辨率的LED显示器对比

    老式大头显示器（CRT）和当前最高分辨率的LED显示器对比

    老式 CRT&#xff08;阴极射线管&#xff09;和当前最顶尖的 LED&#xff08;包括 MicroLED / 高端 MiniLED / OLED&#xff09;显示器在画面清晰度极限相关的参数并列分析。1. 分辨率与像素密度指标老式 CRT&#xff08;PC/电视用&#xff09;顶级 LED 显示器&#xff08;2025…
    阅读更多...
    北京JAVA基础面试30天打卡07

    北京JAVA基础面试30天打卡07

    1. 缓存三大问题及解决方案问题场景后果常用解决方案缓存穿透请求的数据在缓存和数据库中都不存在&#xff08;恶意攻击或查询异常 ID&#xff09;每次请求都会打到数据库&#xff0c;导致 DB 压力骤增- 缓存空值&#xff08;短期缓存不存在的 key&#xff09;- 布隆过滤器&…
    阅读更多...
    后量子密码学的迁移与安全保障：迎接量子时代的挑战

    后量子密码学的迁移与安全保障：迎接量子时代的挑战

    在当今数字化时代&#xff0c;信息安全无疑是保障个人隐私、企业运营和国家安全的基石。我们依赖密码学来保护敏感信息&#xff0c;从在线银行交易到机密军事通信&#xff0c;从医疗记录的存储到云计算中的数据传输&#xff0c;传统密码学为我们构筑起一道抵御恶意攻击的防线。…
    阅读更多...
    Android 获取 UserAgent (UA) 的三种方式深度解析：差异、风险与最佳实践

    Android 获取 UserAgent (UA) 的三种方式深度解析：差异、风险与最佳实践

    引言 在 Android 开发中&#xff0c;获取 UserAgent (UA) 字符串是常见需求&#xff0c;尤其涉及网络请求和 WebView 交互时。开发者通常使用三种方式获取 UA&#xff1a; new WebView(context).getSettings().getUserAgentString()WebSettings.getDefaultUserAgent(context)…
    阅读更多...
    Apache IoTDB 全场景部署：跨「端-边-云」的时序数据库 DB+AI 实战

    Apache IoTDB 全场景部署：跨「端-边-云」的时序数据库 DB+AI 实战

    时序数据正成为现代工业物联网的核心资产，从设备传感器到业务分析，数据需跨越端、边、云多个层级。本文将深入探讨 **Apache IoTDB** 如何实现全场景统一时序数据管理，并融合AI能力实现智能决策。 --- ### 一、为什么需要「端-边-云」协同？ 在工业物联网场景中： - **端侧…
    阅读更多...
    某地渣库边坡自动化监测服务项目

    某地渣库边坡自动化监测服务项目

    1. 项目简介该矿山主要从事稀有金属钽、铌及合金等的研发、生产、销售和进出口业务。具有科学的管理理念、精良的工艺装备、先进的技术水平、高素质的员工队伍等综合优势&#xff0c;已形成钽、铌金属及其合金材料等主要产业格局。公司产品被广泛应用于电子、通讯、航空、航天、…
    阅读更多...
    redis（2）-java客户端使用（IDEA基于springboot）

    redis（2）-java客户端使用（IDEA基于springboot）

    一、准备工作首先确保&#xff1a;Linux 服务器上已安装并启动 Redis 服务Redis 已配置允许远程连接&#xff08;修改 redis.conf 文件&#xff09;开发环境&#xff08;IDEA&#xff09;已准备好二、Spring Boot 项目配置 Redis1. 添加依赖在pom.xml中添加 Redis 相关依赖&…
    阅读更多...
    解决 vscode 编辑 markdown 文件时退格键/backspace 删除卡顿问题

    解决 vscode 编辑 markdown 文件时退格键/backspace 删除卡顿问题

    文章目录发现问题解决问题发现问题 使用 vscode 编辑 markdown 时&#xff0c;发现有时按下退格键 backspace 后等待很久才会生效&#xff0c;卡顿明显 解决问题 从界面左下角的设置图标&#xff0c;打开 vscode 的键盘快捷键设置页面 Keyboard Shortcuts 搜索 backspace 按…
    阅读更多...
    最新文章

    Copyright @ 2022~2023