HTML与CSS

news2025/1/20 3:36:10

目录

1、HTML简介

2、CSS简介

2.1选择器

2.1.1标签选择器

2.1.2类选择器

2.1.3层级选择器(后代选择器)

2.1.4id选择器

2.1.5组选择器

2.1.6伪类选择器

2.2样式属性

2.2.1布局常用样式属性

2.2.2文本常用样式属性

1、HTML简介

超文本标记语言HTML是一种标记语言，用于描述网页的结构和内容。通过使用各种标签和元素，我们可以定义标题、段落、图像、链接和表格等网页元素。HTML的语法简单直观，容易上手。

标题标签：

<html>：定义 HTML 文档的根元素，包括 <head> 和 <body>。

<head>：定义文档头部，包含元数据和其他文档级设置，如标题、样式表和脚本等。

<body>：定义文档的主体部分，包含文档的内容。

<h1> - <h6>：定义标题，从大到小分别为一级标题到六级标题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>  
  <h1>欢迎来到我的网页</h1>  
  <p>这是一段介绍文本。</p>  
</body>  
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>  
  <h1>一级标题</h1>  
  <p>这是第一个一级标题下的段落。</p>  
    
  <h2>二级标题</h2>  
  <p>这是第一个二级标题下的段落。</p>  
    
  <h3>三级标题</h3>  
  <p>这是第一个三级标题下的段落。</p>  
    
  <h4>四级标题</h4>  
  <p>这是第一个四级标题下的段落。</p>  
    
  <h5>五级标题</h5>  
  <p>这是第一个五级标题下的段落。</p>  
    
  <h6>六级标题</h6>  
  <p>这是第一个六级标题下的段落。</p>  
</body>  
</html>

<p>：定义段落。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>  
  <p>这是一个段落。</p>  
  <p>这是另一个段落。</p>  
</body>  
</html>

<a>：定义超链接，可以跳转到其他页面或锚点位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>  
  <h1>我的第一个超链接</h1>  
  <p>这是一个超链接到 <a href="https://www.example.com">example.com</a> 的段落。</p>  
</body>  
</html>

<img>：定义图像标签，用于在页面中显示图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head> 
<body>  
  <h1>我的第一个图像</h1>  
  <img src="image.jpg" alt="描述图像的文本">  
</body>  
</html>

<ul> 和 <ol>：定义无序列表和有序列表。

<li>：定义列表项，必须在 <ul> 或 <ol> 标签内使用。

<ul>  
  <li>苹果</li>  
  <li>香蕉</li>  
  <li>橙子</li>  
</ul>
<ol>  
  <li>第一项</li>  
  <li>第二项</li>  
  <li>第三项</li>  
</ol>

<div>：定义文档中的一个区域或块，常用于布局。

<span>：定义文档中的一个区域或行内元素，常用于样式设置。

HTML 中常用的高级标签：

<table>：定义表格标签，用于显示数据。

<tr>：定义表格行。

<th> 和 <td>：定义表头单元格和普通单元格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <table border="1">
    <tr>
      <td>姓名</td>
      <td>年龄</td>
    </tr>
    <tr>
      <td>张三</td>
      <td>25</td>
    </tr>
</html>

<form>：定义表单标签，可以用于输入和提交数据。

<input>：定义表单中的输入控件，如文本框、单选框和复选框等。

<label>：定义表单控件的标签。

<button>：定义按钮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <form action="/submit" method="post">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name"><br>
​
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email"><br>
​
    <label for="message">留言：</label><br>
    <textarea id="message" name="message" rows="4" cols="50"></textarea><br>
​
    <input type="submit" value="提交">
  </form>
</body>  
</html>

<select> 和 <option>：定义下拉列表框和选项。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <form action="/submit">
    <label for="fruits">选择一种水果：</label>
    <select id="fruits" name="fruits">
      <option value="apple">苹果</option>
      <option value="banana">香蕉</option>
      <option value="orange">橙子</option>
    </select>
    <input type="submit" value="提交">
  </form>
</body>  
</html>

<textarea>：定义文本输入框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <form action="/submit">
    <label for="message">留言：</label><br>
    <textarea id="message" name="message" rows="4" cols="50"></textarea><br>
    <input type="submit" value="提交">
  </form>
</body> 
</html>

<iframe>：定义内嵌框架，可以嵌入其他网页或内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <iframe src="https://www.example.com" width="500" height="300"></iframe>
</body>
</html>
</html>

标签属性说明：

id：定义元素的唯一标识符。

class：定义元素的类名，用于样式设置。

style：定义元素的样式，如颜色、字体等。

src：定义元素的资源路径，如图像、视频等。

href：定义链接的目标地址。

target：定义链接跳转的目标窗口，如 _blank 表示在新窗口打开链接。

name：定义表单控件的名称。

value：定义表单控件的值。

type：定义表单控件的类型，如文本框、单选框和复选框等。

rows 和 cols：定义文本输入框的行数和列数。

2、CSS简介

层叠样式表CSS是一种样式表语言，用于在网页上为HTML元素应用样式和布局。通过使用CSS规则集和选择器，我们可以设置字体、颜色、边框、背景和布局等。CSS的目标是将样式与内容分离，以提高可维护性和重用性。

2.1选择器

2.1.1标签选择器

CSS标签选择器是指根据HTML标签来选择元素并进行样式设置。使用标签选择器时，只需要在CSS规则中指定标签名即可。

例如，下面的CSS规则将为所有的<p>标签（段落）设置字体颜色为红色：

p {  
  color: red;  
}

2.1.2类选择器

CSS类选择器是一种基于类属性的选择器，它允许您选择具有指定类属性的HTML元素并对其应用样式。

类选择器的语法是在类名前加上一个点（.），后面紧跟一个空格，然后是选择器名称。例如，下面的CSS规则将为所有具有类名“myClass”的元素设置字体颜色为红色：

.myClass {  
  color: red;  
}

2.1.3层级选择器(后代选择器)

CSS层级选择器（后代选择器）是指选择特定元素的后代元素。后代选择器可以通过空格分隔两个元素名来定义。

例如，下面的CSS规则将选择所有<div>元素内部的<p>元素，并将它们的字体颜色设置为红色：

div p {  
  color: red;  
}

2.1.4id选择器

CSS id选择器是一种特殊的选择器，它基于HTML元素的id属性来选择元素。id选择器具有最高的优先级，可以覆盖其他选择器的样式。

id选择器的语法是在id名称前加上井号（#），后面紧跟一个空格，然后是选择器名称。例如，下面的CSS规则将为id为“myId”的元素设置字体颜色为红色：

#myId {  
  color: red;  
}

2.1.5组选择器

CSS组选择器是一种将多个选择器组合在一起的选择器。使用逗号分隔多个选择器，可以将相同的样式应用于多个元素。

例如，下面的CSS规则将同时选择<p>和<h1>元素，并将它们的字体颜色设置为红色：

p, h1 {  
  color: red;  
}

2.1.6伪类选择器

CSS伪类选择器是一种特殊的选择器，它用于选择元素的特定状态或关系。伪类选择器以冒号（:）开头，后面紧跟一个标识符。

以下是一些常见的CSS伪类选择器：

:hover：选择鼠标悬停在上面的元素。

:active：选择被激活的元素（例如，被点击的按钮）。

:focus：选择获得焦点的元素（例如，输入框）。

:visited：选择用户已访问的链接。

:first-child：选择每个父元素的第一个子元素。

:last-child：选择每个父元素的最后一个子元素。

:nth-child(n)：选择每个父元素的第n个子元素。

:nth-last-child(n)：选择每个父元素的倒数第n个子元素。

:only-child：选择其父元素仅有的子元素。

:empty：选择没有子元素的元素。

:checked：选择被选中的复选框或单选按钮。

:disabled：选择禁用的元素。

:enabled：选择启用的元素。

:target：选择当前活动的锚点元素。

2.2样式属性

2.2.1布局常用样式属性

  • width 设置元素(标签)的宽度，如：width:100px;
  • height 设置元素(标签)的高度，如：height:200px;
  • background 设置元素背景色或者背景图片，如：background:gold; 设置元素的背景色, background: url(images/logo.png); 设置元素的背景图片。
  • border 设置元素四周的边框，如：border:1px solid black; 设置元素四周边框是1像素宽的黑色实线
  • 以上也可以拆分成四个边的写法，分别设置四个边的：
  • border-top 设置顶边边框，如：border-top:10px solid red;
  • border-left 设置左边边框，如：border-left:10px solid blue;
  • border-right 设置右边边框，如：border-right:10px solid green;
  • border-bottom 设置底边边框，如：border-bottom:10px solid pink;
  • padding 设置元素包含的内容和元素边框的距离，也叫内边距，如padding:20px;padding是同时设置4个边的，也可以像border一样拆分成分别设置四个边:padding-top、padding-left、padding-right、padding-bottom。
  • margin 设置元素和外界的距离，也叫外边距，如margin:20px;margin是同时设置4个边的，也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right、margin-bottom。
  • float 设置元素浮动，浮动可以让块元素排列在一行，浮动分为左浮动：float:left; 右浮动：float:right;

2.2.2文本常用样式属性

  • color 设置文字的颜色，如：color:red;
  • font-size 设置文字的大小，如：font-size:12px;
  • font-family 设置文字的字体，如：font-family:'微软雅黑';为了避免中文字不兼容，一般写成：font-family:'Microsoft Yahei';
  • font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
  • line-height 设置文字的行高，如：line-height:24px; 表示文字高度加上文字上下的间距是24px，也就是每一行占有的高度是24px
  • text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
  • text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
  • text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【GoLang】Go语言几种标准库介绍(三)

【GoLang】Go语言几种标准库介绍(三)

文章目录 前言几种库debug 库 (各种调试文件格式访问及调试功能)相关的包和工具&#xff1a;示例 encoding (常见算法如 JSON、XML、Base64 等)常用的子包和其主要功能&#xff1a;示例 flag(命令行解析)关键概念&#xff1a;示例示例执行 总结专栏集锦写在最后 前言 上一篇&a…
阅读更多...
Leetcode 剑指 Offer II 059. 数据流中的第 K 大元素

Leetcode 剑指 Offer II 059. 数据流中的第 K 大元素

题目难度: 简单 原题链接 今天继续更新 Leetcode 的剑指 Offer&#xff08;专项突击版&#xff09;系列, 大家在公众号 算法精选 里回复 剑指offer2 就能看到该系列当前连载的所有文章了, 记得关注哦~ 题目描述 设计一个找到数据流中第 k 大元素的类&#xff08;class&#xf…
阅读更多...
使用keepalived时虚拟IP漂移注意事项

使用keepalived时虚拟IP漂移注意事项

什么是Keepalived服务 keepalived是一个开源的软件项目&#xff0c;用于实现高可用性&#xff08;HA&#xff09;的网络服务器负载均衡和故障转移。它允许将多台服务器组合在一起&#xff0c;形成一个虚拟服务器集群&#xff0c;实现负载均衡和故障转移。 keepalived的核心功…
阅读更多...
【力扣100】46.全排列

【力扣100】46.全排列

添加链接描述 class Solution:def permute(self, nums: List[int]) -> List[List[int]]:# 思路是使用回溯if not nums:return []def dfs(path,depth,visited,res):# 出递归的条件是当当前的深度已经和nums的长度一样了&#xff0c;把path加入数组&#xff0c;然后出递归if …
阅读更多...
echarts 二分图布局_力向导图_关系图

echarts 二分图布局_力向导图_关系图

Echarts 常用各类图表模板配置 注意&#xff1a; 这里主要就是基于各类图表&#xff0c;更多的使用 Echarts 的各类配置项&#xff1b; 以下代码都可以复制到 Echarts 官网&#xff0c;直接预览&#xff1b; 图标模板目录 Echarts 常用各类图表模板配置一、力向导图(二分图布局…
阅读更多...
摩尔线程S80对于软件的支持

摩尔线程S80对于软件的支持

摩尔线程对软件的支持 时间&#xff1a;2024年1月1日 显卡型号&#xff1a;MTT S80 主板型号&#xff1a;七彩虹 igame z590 火神 V20 CPU&#xff1a; intel core i5 10400f 内存&#xff1a; 海盗船3600 16*2 存储&#xff1a; 致态1Tb nvme 显卡的驱动是最新的。 游戏 S…
阅读更多...
从 MySQL 的事务 到 锁机制 再到 MVCC

从 MySQL 的事务 到 锁机制 再到 MVCC

其他系列文章导航 Java基础合集数据结构与算法合集 设计模式合集 多线程合集 分布式合集 ES合集 文章目录 其他系列文章导航 文章目录 前言 一、事务 1.1 含义 1.2 ACID 二、锁机制 2.1 锁分类 2.2 隔离级别 三、MVCC 3.1 介绍 3.2 隔离级别 3.3 原理 四、总结 前…
阅读更多...
关于Python里xlwings库对Excel表格的操作（二十五）

关于Python里xlwings库对Excel表格的操作（二十五）

这篇小笔记主要记录如何【如何使用xlwings库的“Chart”类创建一个新图表】。 前面的小笔记已整理成目录&#xff0c;可点链接去目录寻找所需更方便。 【目录部分内容如下】【点击此处可进入目录】 &#xff08;1&#xff09;如何安装导入xlwings库&#xff1b; &#xff08;2…
阅读更多...
LeetCode刷题--- 不同路径 III

LeetCode刷题--- 不同路径 III

个人主页&#xff1a;元清加油_【C】,【C语言】,【数据结构与算法】-CSDN博客 个人专栏 力扣递归算法题 http://t.csdnimg.cn/yUl2I 【C】 ​​​​​​http://t.csdnimg.cn/6AbpV 数据结构与算法 ​​​http://t.csdnimg.cn/hKh2l 前言&#xff1a;这个专栏主要讲述递…
阅读更多...
二叉树详解(深度优先遍历、前序，中序，后序、广度优先遍历、二叉树所有节点的个数、叶节点的个数)

二叉树详解(深度优先遍历、前序，中序，后序、广度优先遍历、二叉树所有节点的个数、叶节点的个数)

目录 一、树概念及结构(了解) 1.1树的概念 1.2树的表示 二、二叉树概念及结构 2.1概念 2.2现实中的二叉树&#xff1a; 2.3数据结构中的二叉树&#xff1a; 2.4特殊的二叉树&#xff1a; 2.5 二叉树的存储结构 2.51 顺序存储&#xff1a; 2.5.2 链式存储&…
阅读更多...
Apache Flink连载（二十三）：Flink HA - Flink基于Yarn HA

Apache Flink连载（二十三）：Flink HA - Flink基于Yarn HA

🏡 个人主页：IT贫道_大数据OLAP体系技术栈,Apache Doris,Clickhouse 技术-CSDN博客 🚩 私聊博主：加入大数据技术讨论群聊，获取更多大数据资料。 🔔 博主个人B栈地址：豹哥教你大数据的个人空间-豹哥教你大数据个人主页-哔哩哔哩视频 目录 1. Yarn HA配置 ​​​​…
阅读更多...
婴幼儿家庭护理百科知识，宝宝健康成长育儿实用课程

婴幼儿家庭护理百科知识，宝宝健康成长育儿实用课程

一、教程描述 本套教程由具有丰富育儿经验的多名专家精心打造而成&#xff0c;也是专门提供给准爸妈们学习的实用课程&#xff0c;可以解决宝宝的日常护理、日常喂养、饮食调理、疾病防治、意外护理等多方面问题。课程不仅可以丰富你的育儿知识&#xff0c;而且能够让你把这些…
阅读更多...
vue写了这么久了你对slot的理解是什么？slot使用场景有哪些？

vue写了这么久了你对slot的理解是什么？slot使用场景有哪些？

一、slot是什么 在HTML中 slot 元素 &#xff0c;作为 Web Components 技术套件的一部分&#xff0c;是Web组件内的一个占位符 该占位符可以在后期使用自己的标记语言填充 举个栗子 <template id"element-details-template"><slot name"element-na…
阅读更多...
docker应用部署(部署MySql,部署Tomcat,部署Nginx,部署Redis)

docker应用部署(部署MySql,部署Tomcat,部署Nginx,部署Redis)

Docker 应用部署 一、部署MySQL 搜索mysql镜像 docker search mysql拉取mysql镜像 docker pull mysql:5.6创建容器&#xff0c;设置端口映射、目录映射 # 在/root目录下创建mysql目录用于存储mysql数据信息 mkdir ~/mysql cd ~/mysqldocker run -id \ -p 3307:3306 \ --na…
阅读更多...
Plantuml之YAML效果图语法介绍(二十六)

Plantuml之YAML效果图语法介绍(二十六)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…
阅读更多...
3D视觉-3D测量技术对比

3D视觉-3D测量技术对比

从前面四种主流的 3D 测量技术来看&#xff0c;其优点和缺点都很明显&#xff0c;没有单独一种技术可以适用于所有的三维测量场景&#xff0c;从实际应用来看&#xff0c;双目与结构光在人脸识别&#xff0c;拆码垛定位&#xff0c;静态尺寸测量等应用上最为广泛。激光三角法因…
阅读更多...
swing快速入门（三十四）输入对话框

swing快速入门（三十四）输入对话框

&#x1f33c;注释很详细&#xff0c;直接上代码 &#x1f337;新增内容 &#x1f940;字符串输入型 输入对话框用法 &#x1f940;下拉选项输入型输入对话框用法 &#x1fab4;完整代码&#xff1a; package swing31_40;import javax.swing.*; import java.awt.*; import ja…
阅读更多...
介绍一款PDF在线工具

介绍一款PDF在线工具

PDF是我们日常工作中的一种常见格式&#xff0c;其处理也是我们工作的重要基础性环节&#xff0c;一款可靠的处理工具显得十分重要。 完全免费、易于使用、丰富的PDF处理工具&#xff0c;包括&#xff1a;合并、拆分、压缩、转换、旋转和解锁PDF文件&#xff0c;以及给PDF文件…
阅读更多...
网络通信-入门1

网络通信-入门1

网口框架 100M 2. 物理层解读 2.1 同步的方法&#xff1a;编码 为了让接收方在没有外部时钟参考的情况也能确定每一位的起始、结束和中间位置&#xff0c;在传输信号时不直接采用二进制编码。在 10BASE-T 的传输方式中采用曼彻斯特编码&#xff0c;在 100BASE-T 中则采用 4B/…
阅读更多...
数字IC设计流程

数字IC设计流程

目录 一、引例——RFID芯片 二、数字IC设计流程的发展史 第一阶段&#xff1a;人工设计 第二阶段&#xff1a;人工为主、计算机为辅 第三阶段&#xff1a;人工与计算机平分秋色 第四阶段&#xff1a;计算机为主、人工辅助 三、目前主流的数字IC设计流程 1、ASIC设计流程…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023