什么是 HTML？

news/2024/4/20 4:34:45/文章来源:https://www.cnblogs.com/amboke/p/16640340.html

什么是 HTML？

超文本标记语言或 HTML 是用于创建网页的常用标记语言。使用 HTML 组件（例如标签和属性）可以开发和构建部分、段落和链接。

HTML有很多用例，即：

· Web开发- 开发人员使用 HTML 代码来设计浏览器如何显示网页元素，例如文本、超链接和媒体文件。

· 互联网导航- 由于 HTML 被大量用于嵌入超链接，因此用户可以轻松地在相关页面和网站之间导航和插入链接。

· 网络文档- HTML 使组织和格式化文档成为可能，类似于 Microsoft Word。

所有 HTML 页面都包含许多 HTML 元素，这些元素由许多标签和属性组成。网页的基础是由 HTML 元素组成的。与描述元素属性的属性相比，标签向 Web 浏览器指定元素开始和结束的位置。

一个元素由三个主要组件组成：

· 打开标签 — 它们指示元素变为活动的点。打开和关闭的尖括号包裹在标签周围。例如，要创建一个段落，请使用开始标签 (p)。

· 内容 - 其他用户看到的输出称为内容

· 结束标签- 结束标记与开始标记相同，但它在元素名称之前加上一个正斜杠。例如，要结束一个段落，请使用</p.>

这是我们的基本 HTML 标签列表：

  • ** <b>** 制作粗体文本
  • ** <a>** 链接
  • ** <strong>** 用于强调的粗体文本
  • ** <body>** 主要的 HTML 部分
  • ** <br>** 休息
  • ** <div>** 它是 HTML 文档的一个部分或一部分
  • ** <h1>至<h6>** 到标题
  • ** <i>** 制作斜体文本
  • ** <img>** 对于文档中的图像
  • ** <ol>** 是一个有序列表， <ul> 对于无序列表
  • ** <li>** 是项目符号（有序列表）中的列表项
  • ** <p>** 对于段落
  • ** <span>** 为部分文本设置样式。

什么是 CSS？

简而言之，CSS 是一种描述网站样式的语言。 CSS代表 层叠样式表 .我们使用这种语言来确定我们网站元素的显示方式。

如何使用 CSS

我们知道如何将 CSS 与 HTML 结合使用的三种方式，即内部、外部，当然还有内部。

1.内部

要直接在 HTML 文档中使用样式表，我们必须在 HTML 文件的开头使用 style 标签定义样式。看看下面的例子：

通常，当您创建一个没有太多样式的简单单页网站时，这是最佳实践。

2. 外部

在这种情况下，您将创建一个单独的 CSS 文件。这是最常见的用途，因为它允许您在整个网站上使用相同的 CSS 文件。此外，它还可以帮助您 **** 轻松更改和监控整个网站的样式。在 HTML 文件中，您必须与头部的 CSS 文件建立连接（查看下面的示例）

3.内联

内联样式有利于对单个准确的 HTML 元素进行小幅更改。 CSS 代码直接写入 HTML 标记并仅适用于该部分。请参见下面的示例：

这就是内联使用 CSS 时的样子。

什么是 CSS 属性和属性值？

描述什么是 CSS 属性和属性值的最佳方式是举例。所以下面有一段代码，它将选择我们 HTML 文档中的所有段落并将字体大小设置为 20 像素。

如您所见，在我们的案例 p（段落）中，代码以选择器开头。现在，让我们专注于声明。

声明由属性和属性值组成。在我们的例子中，属性是为 HTML 元素赋予样式的不同方式，所有段落的字体大小 (p)。

因此，属性值也是如此。这些值总是写在冒号之后，让您有可能多次出现某个属性；在我们的例子中，它是 20 像素。

CSS 选择器

当我们谈论什么是 CSS 时，我们必须看看不同类型的选择器。选择器帮助我们定义或选择网站的任何部分或我们想要设置样式的任何元素 .

以下是我认为最常见的类型的列表。

1. HTML元素

在前面的示例中，我们使用了基于 HTML 元素的选择器。元素选择器也称为标签或类型选择器，用于根据 HTML 元素或标签对网站的一部分进行样式设置。例如 h2 选择所有带有 a 的元素

标签。

2. ID选择器

使用 ID 选择器时，我们根据 ID 属性中的名称选择网站上的所有元素。这在开发一个简单的网站时非常方便，因为可以在 CSS 和 JavaScript 中使用相同的 ID 名称。在 CSS 中，在编写 ID 名称之前，必须使用破折号 (#)。例如 #nav 将选择所有包含 id=”nav” 的元素

或者

.

**#导航** {  **颜色** ： 红色的 ;  **字体** -重量： 大胆的 ;  }

3.类选择器

使用此选择器，我们为其赋予某些属性，然后将这些属性分配给我们网站上的不同元素。此外，在使用类选择器时，我们可以将一个类分配给多个元素。当您开始进行 Web 开发时，重要的是您知道在 CSS 文件中您必须在类名之前使用点，并且在 HTML 或 JS 文件中使用该类时不要使用点。请看下面的类头部分示例：

 . **标题部分** {  **颜色** ： 红色的 ;  **字体** -重量： 大胆的 ;  }

伪类如 :hoover 或: active

众所周知，网站上的某些元素可以有不同的状态，每个状态可以有不同的样式。这就是伪类的用武之地；我们使用它们为处于不同状态的元素分配属性。例如，当我们将鼠标悬停在链接上时，链接的样式会发生变化。看看下面的例子：

**一：悬停** **{  颜色：** **** 浅蓝 **;  }**

媒体查询

自从引入移动设备以来，这是最需要的 CSS 功能。事实上，当我们谈论响应式网页设计时，我们谈论的是媒体查询。简而言之，这引入了@media 规则，它在特定条件下将属性分配给元素。例如，如果浏览器屏幕尺寸小于 700 px，字体大小应该改变：

**@媒体** 只要 **屏幕** 和 （ **最大宽度** : 700 像素) {  **身体** {  **字体大小** ：80像素；  }  }

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/1848/58583017

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

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

相关文章

自己玩KAFKA 版本 kafka_2.13-3.2.1

自己玩KAFKA 版本 kafka_2.13-3.2.1

好久没有研究Kafka了，重新摸起来 自己在虚机中 、环境JDK8 + kafka_2.13-3.2.1 不太建议使用Windows，除非迫不得已，毕竟Kafka的使用场景都是高并发场景，Windows服务器不合适。 （1）下载最新版本https://kafka.apache.org/downloads各位同学，请注意，因为是开源的软件中间…
阅读更多...
图像处理工具推荐

图像处理工具推荐

如果您正好想要一款方便快捷的图像照片处理工具，那就来试试这款名为Movavi Picverse Photo Editor的编辑软件。Movavi Picverse Photo Editor Mac优化大家的图像处理步骤，可以花费更多的时间拍摄和更少的修饰时间，Movavi Picverse Photo Editor是每一位初学者和专业摄影师的…
阅读更多...
3 个你不知道的 Python 库

3 个你不知道的 Python 库

3 个你不知道的 Python 库 Python 是那些从世界各地获得巨大贡献的社区之一，并且有一个我们不知道的无可挑剔的集合。让我们深入挖掘并了解三个新的 python 库。 人脸识别 数据科学和人工智能位于当今世界的领先技术之上。您是否知道已经有一个 Python 库可以为您识别人脸并且…
阅读更多...
P1231 教辅的组成

P1231 教辅的组成

求三重匹配最大匹配数。 \(N\leq 10^5\)，\(M_1\), \(M_2 \leq 20000\)。首先要承认，这一题属于P3254的延申，可以先复习一下P3254的题解。 然而这一题又和P3254不太一样 （不就是从两条边匹配变成三条边吗） 那就错了！看上面这张图，如果用最大流来跑，最后答案会是2条，但 …
阅读更多...
方正璞华入选“火炬智能制造服务商”和“智能制造产品服务”！

方正璞华入选“火炬智能制造服务商”和“智能制造产品服务”！

方正璞华协助客户实现数字化运营管理和工业互联网产业升级。日前，经初审、专家评审、公示等程序，凭借多年在工业领域的实践经验与优质产品，方正璞华成功入选“火炬智能制造服务商”和“智能制造产品服务”，标志着厦门火炬高新区对方正璞华信息企业数字化转型赋能实力的充分…
阅读更多...
[CTF]2022 CNSS夏令营 WebReverse 复现wp

[CTF]2022 CNSS夏令营 WebReverse 复现wp

写在前面 很有趣的一次(大)学前教育, 作为一个22级泥电新生, 对CTF网安类的东西完全是一窍不通, 进新生群然后就被拉进来Van了. 结果没想到还挺好玩(可能是我这几天太无聊了), 边学边打居然还能霸几天榜一, 满足了. 其实我就只是总榜高, 细分分区我其实不是很行的, 毕竟都是现学…
阅读更多...
JUC学习23：理解JMM

JUC学习23：理解JMM

JUC学习23：理解JMM面试题：请你谈谈你对Volatile的理解：Volatile是Java虚拟机提供轻量级的同步机制；1，保证可见性（JMM）；2，不保证原子性；3，禁止指令重排； 什么是JMM：JMM：Java内存模型，不存在的东西，概念，是一种约定；关于JMM的一些同步约定：线程解锁前：必须把…
阅读更多...
channel与range、select

channel与range、select

channel与range、selectpackage mainimport "fmt"func main() {c := make(chan int)go func() {for i := 0; i < 5; i++ {c <- i}//close可以关闭一个channelclose(c)}()//可以使用range来迭代不断操作channelfor data := range c {fmt.Println(data)}fmt.Prin…
阅读更多...
channel

channel

channel有缓冲与无缓冲同步问题package mainimport ("fmt""time" )func main() {c := make(chan int, 3) //带有缓冲的channelfmt.Println("len(c) = ", len(c), ", cap(c)", cap(c))go func() {defer fmt.Println("子go程结束&q…
阅读更多...
selenium 常用操作汇总

selenium 常用操作汇总

使用selenium1、查看Chrome版本去下载浏览器驱动 驱动下载链接2、selenium官方网站 官方文档 selenium通信原理对于每一条Selenium脚本，一个http请求会被创建并且发送给浏览器的驱动 浏览器驱动中包含了一个HTTP Server，用来接收这些http请求 HTTP Server接收到请求后根据请…
阅读更多...
不想当Window的Dialog不是一个好Modal，弹窗翻身记

不想当Window的Dialog不是一个好Modal，弹窗翻身记

Windows的灵魂是什么？当然是Window，当方便快捷的多窗口进入人们视野的时候，大家无不为之惊呼太好用了！！弹窗是我们熟视无睹的一种交互方式，经常用到，但从没好好想过这种交互行为背后的意义... 弹窗是Windows的灵魂 Windows的灵魂是什么？当然是Window，当方便快捷的多窗…
阅读更多...
工具 -- git 汉化

工具 -- git 汉化

说明 来源转载 https://blog.csdn.net/mansir123/article/details/121692125Git GUI汉化包来源 https://github.com/stayor/git-gui-zh转载 https://www.cnblogs.com/chenghu/articles/12678500.html1、git bash 汉化 这个Git bash本身就支持中文，只需要在打开Git bash后命令窗…
阅读更多...
好多不懂的和bug

好多不懂的和bug

1、知道了MD5， 2、知道了validate是干什么的，（validate中的rules中编写验证规则，规范输入），可以在管理员在网站修改数据的时候对输入进行限制。1 <script type="text/javascript">2 $(function(){3 $("#addForm").validate({4 rul…
阅读更多...
DevTools 无法加载来源映射：无法加载 webpack net::ERR_UNKNOWN_URL_SCHEME

DevTools 无法加载来源映射：无法加载 webpack net::ERR_UNKNOWN_URL_SCHEME

问题：DevTools 无法加载来源映射：无法加载 webpack:///node_modules/element-plus/es/components/notification/src/notification.mjs.map 的内容：Fetch through target failed: Unsupported URL scheme; Fallback: HTTP 错误：状态代码 404，net::ERR_UNKNOWN_URL_SCHEME 当…
阅读更多...
JAVA进阶--static、工具类、单例、继承--2022年8月28日

JAVA进阶--static、工具类、单例、继承--2022年8月28日

第一节 static静态关键字1、成员变量的分类和访问分别是什么样的？静态成员变量（有static修饰，属于类，加载一次，可以被共享访问）访问格式：类名.变量名（推荐）对象名.变量名(不推荐）实例成员变量（无static修饰，属于对象）访问格式：对象名.变量名2、两种成员变量各自…
阅读更多...
QA特辑 | 看了这场直播，我找到了设备指纹“从不说谎”的原因

QA特辑 | 看了这场直播，我找到了设备指纹“从不说谎”的原因

除了身份证外，设备指纹可能是唯一一个可以证明你是谁的方法。 究其原因，就在于设备指纹的唯一性和稳定性。 8月 25 日下午 15 点，顶象技术总监杜威就设备指纹的唯一性和稳定性的核心算法展开分享。直播过程中，我们也收到了一系列关于设备指纹唯一性稳定性核心算法的疑问，现…
阅读更多...
YBTOJ [树状数组] 二进制

YBTOJ [树状数组] 二进制

哇咔咔，此乃真好题！这种东西当然要抢个榜首辣qaq。 Solution 首先不带 \(+x\) 的做法，相信大家都会，维护一下全局二进制每一位 \(1\) 的个数，把 \(y\) 二进制拆分一下，就知道答案了。 这个 \(+x\) 真滴很恶心啊！ 考虑这样一个事实，非常滴实用： 对于一个 \(x\) \(and\)…
阅读更多...
科普达人丨一图看懂安全组

科普达人丨一图看懂安全组

建议收藏安全组是一种虚拟防火墙，通过安全组规则控制 ECS 实例出/入方向的流量，保障云服务器的安全。本文将通过介绍安全组的工作原理、功能、默认安全组和规则，以及快速上手使用安全组的操作等方面的介绍，您对于安全组有一个全面的了解，帮助您更好、更安全地开展业务上云…
阅读更多...
京东云PostgreSQL在GIS场景的应用分享

京东云PostgreSQL在GIS场景的应用分享

在地图或地理信息有关的场景里，地址关键词的检索尤其重要。比如打开百度地图，想要查询某个位置的信息“北京市海淀区清华东路17号中国农业大学”，往往我们输入的是关键词“中国农业大学”而不是精确到街道的详细地址信息。在地图或地理信息有关的场景里，地址关键词的检索尤…
阅读更多...
超全的正则表达式速查手册

超全的正则表达式速查手册

一、校验数字的表达式 数字：^[0-9]*$ n位的数字：^\d{n}$ 至少n位的数字：^\d{n,}$ m-n位的数字：^\d{m,n}$ 零和非零开头的数字：^(0|[1-9][0-9]*)$ 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$ 带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})?$ 正…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023