HTML与CSS

目录

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

小白也能轻松上手的ECharts 配置手册

小白也能轻松上手的ECharts 配置手册

&#x1f4e2; 鸿蒙专栏&#xff1a;想学鸿蒙的&#xff0c;冲 &#x1f4e2; C语言专栏&#xff1a;想学C语言的&#xff0c;冲 &#x1f4e2; VUE专栏&#xff1a;想学VUE的&#xff0c;冲这里 &#x1f4e2; CSS专栏&#xff1a;想学CSS的&#xff0c;冲这里 &#x1f4e2; …
阅读更多...
【赠书第13期】边缘计算系统设计与实践

【赠书第13期】边缘计算系统设计与实践

文章目录 前言 1 硬件架构设计 2 软件框架设计 3 网络结构设计 4 安全性、可扩展性和性能优化 5 推荐图书 6 粉丝福利 前言 边缘计算是一种新兴的计算模式&#xff0c;它将计算资源推向网络边缘&#xff0c;以更好地满足实时性、低延迟和大规模设备连接的需求。边缘计算…
阅读更多...
QML —— 键盘输入示例（附完整源码）

QML —— 键盘输入示例（附完整源码）

示例效果 Keys 所有视觉基本体都支持通过“附加关键帧”属性进行关键帧处理。按键可以通过onPressed和onReleased信号属性进行处理。 信号属性有一个KeyEvent参数&#xff0c;名为event&#xff0c;其中包含事件的详细信息。如果键被处理&#xff0c;则event.accepted应设置为t…
阅读更多...
利用STM32和可控硅控制220V加热电路

利用STM32和可控硅控制220V加热电路

利用STM32和可控硅控制220V加热电路 Chapter1 利用STM32和可控硅控制220V加热电路一、错误原理图二、正确原理图 Chapter2 可控硅驱动芯片MOC3081/3061Chapter3 一个MOC3061的可控硅触发电路的分析Chapter4 可控硅的两种触发方式&#xff1a;移相触发和过零触发1、过零触发2、移…
阅读更多...
ElasticSearch 文档操作

ElasticSearch 文档操作

创建文档 PUT /<target>/_doc/<_id> POST /<target>/_doc/ PUT /<target>/_create/<_id> POST /<target>/_create/<_id>删除文档 // 根据 id 删除 DELETE /<index>/_doc/<_id> // 根据查询删除 POST /<target>/…
阅读更多...
2023年软件工程师工作总结范文

2023年软件工程师工作总结范文

各位领导&#xff1a; 你们好&#xff01;时光飞逝&#xff0c;光阴似箭&#xff0c;转眼间又到了一年的年末。2023年又是一个不平凡的年&#xff0c;今年是国家十四个五年计划的第三年&#xff0c;是全面贯彻党的二十大精神的开局之年。中国XX集团作为中国XX行业中最大的企…
阅读更多...
接口测试及常用接口测试工具（postman/jmeter）附教程

接口测试及常用接口测试工具（postman/jmeter）附教程

首先&#xff0c;什么是接口呢&#xff1f; 接口一般来说有两种&#xff0c;一种是程序内部的接口&#xff0c;一种是系统对外的接口。 系统对外的接口&#xff1a;比如你要从别的网站或服务器上获取资源或信息&#xff0c;别人肯定不会把数据库共享给你&#xff0c;他只能给…
阅读更多...
通过 conda 安装 的 detectron2

通过 conda 安装 的 detectron2

从 detectron2官网 发现预编译的版本最高支持 pytorch1.10、cuda11.3。&#xff08;2023-12-26&#xff09; 1、安装 conda 环境。 conda create --name detectron2 python3.8 2、安装 pytorch1.10 和 cuda11.3。 pip3 install torch1.10.0cu113 torchvision0.11.1cu113 torc…
阅读更多...
blender使用faceit绑定自己的表情动作

blender使用faceit绑定自己的表情动作

blender使用faceit绑定自己的表情控制模型 faceit是个神器&#xff0c;来记录一下如何让表情动起来保持相对位置头部分离&#xff0c;方便后续绑定faceitfaceit的注册rig生成地标Animate可以修正表情烘培之前记得保存使用Faceit的整个流程 faceit是个神器&#xff0c;来记录一下…
阅读更多...
【开源】基于JAVA的创意工坊双创管理系统

【开源】基于JAVA的创意工坊双创管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 管理员端2.2 Web 端2.3 移动端 三、系统展示四、核心代码4.1 查询项目4.2 移动端新增团队4.3 查询讲座4.4 讲座收藏4.5 小程序登录 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的创意工坊双创管理…
阅读更多...
Thinkphp开发的返佣商城分销商城理财商城源码

Thinkphp开发的返佣商城分销商城理财商城源码

&#xff08;本站长在localhost安装测试&#xff0c;发现提示有错&#xff0c;具体问题没有时间查找了&#xff0c;或者php解密插件没有安装&#xff0c;有能力的朋友自行折腾。&#xff09; 程序基于 THINKPHP6VUE 全新开发&#xff0c;保障安全的同时大大提高代码执行效率。…
阅读更多...
CentOS进入单用户模式

CentOS进入单用户模式

一、重启 二、出现内核选项 按“e” 三、编辑这一行 输入 rw init/sysroot/bin/sh 四、进入单用户模式 ctrlx 进入 五、切换目录 chroot /sysroot 六、然后你就操作你的系统了。 修改密码等等
阅读更多...
大模型工具_QUIVR

大模型工具_QUIVR

https://github.com/StanGirard/quivr/ 24.5K Star 1 功能 整体功能&#xff0c;想解决什么问题 实现了前后端结合的 RAG 方案。构建能直接使用的应用。提出了“第二大脑”&#xff0c;具体实现也是RAG&#xff0c;但针对不同用户不同场景支持多个“大脑”并存&#xff0c;每个…
阅读更多...
可视化盒模型理解

可视化盒模型理解

对应代码 对应F12 对应画面
阅读更多...
JVM的生命周期

JVM的生命周期

1.加载&#xff08;Loading&#xff09;&#xff1a; 在加载阶段&#xff0c;JVM会找到并加载Java字节码文件。加载阶段分为三个步骤&#xff1a;通过类的全限定名找到对应的字节码文件&#xff0c;创建一个与该类相关的Class对象&#xff0c;将类的静态数据结构存储在方法区中…
阅读更多...
深入探索Spring Boot的核心功能：快速构建原生程序响应式处理数据（文末送书）

深入探索Spring Boot的核心功能：快速构建原生程序响应式处理数据（文末送书）

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏:《linux深造日志》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! ⛳️ 写在前面参与规则 ✅参与方式&#xff1a;关注博主、点赞、收藏、评论&#xff0c;任意评论&#xff08;每人最多评论…
阅读更多...
OpenStack搭建和部署

OpenStack搭建和部署

Centos官网qcow2镜像修改root账号密码&#xff0c;开启ssh等 wget http://172.16.20.10/vmtemplate/KVM/wangrui/Debian/debian-10.2.0-openstack-amd64.qcow2 一、查看镜像文件信息 [debian-10.2-cloud] nameDebian 10.2.0 (Buster) Cloud osinfodebian10 archx86_64 fi…
阅读更多...
Linux | 解决问题Ubuntu重启无法进入系统以及网络无法连接【图文详解】

Linux | 解决问题Ubuntu重启无法进入系统以及网络无法连接【图文详解】

Ubuntu18.04重启无法进入系统&#xff0c;重开后如图 一直在加载系统内核4.15.0-213-generic,无法加载 错误原因 原本的系统是Ubuntu16.04,使用命令升级到Ubuntu18.04版本&#xff0c;升级重启后&#xff0c;远程无法连接&#xff01; 错误解决 第一步&#xff1a;进入GRUB…
阅读更多...
大米API：实现大米供应链的智能化管理与优化

大米API：实现大米供应链的智能化管理与优化

产品介绍&#xff1a; 大米API是一个免费开放api接口在线网站&#xff0c;提供各类免费API接口服务。它汇聚了丰富实用的api接口&#xff0c;包括天气、翻译、网站信息查询等接口。无需服务器&#xff0c;只需简单调用就可在各类应用和网站中集成丰富的数据接口。 应用场景&a…
阅读更多...
论文阅读《Restormer: Efficient Transformer for High-Resolution Image Restoration》

论文阅读《Restormer: Efficient Transformer for High-Resolution Image Restoration》

论文地址：https://openaccess.thecvf.com/content/CVPR2022/html/Zamir_Restormer_Efficient_Transformer_for_High-Resolution_Image_Restoration_CVPR_2022_paper.html 源码地址：https://github.com/swz30/Restormer 概述 图像恢复任务旨在从受到各种扰动（噪声、模糊、雨滴…
阅读更多...
最新文章

Copyright @ 2022~2023