首页 > 其他分享 >什么是 HTML?

什么是 HTML?

时间:2022-08-30 18:13:31浏览次数:69  
标签:标签 什么 元素 HTML 选择器 CSS 属性

什么是 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

标签:标签,什么,元素,HTML,选择器,CSS,属性
From: https://www.cnblogs.com/amboke/p/16640340.html

相关文章

  • 微服务分布式开源架构是什么?
    在大数据时代,随着科技的进步和发展,低代码开发平台因其更灵活、更便利的优势特点,已经深入到各行各业数字化发展进程中。那么,什么是微服务分布式开源架构?要想了解这个问题,我......
  • docker swarm集群中,task是什么意思?
    你在查看dockerswarm文档的时候,是不是经常听说task这个词,是什么意思呢? 非常,非常的简单: 在dockerswarm中,service中的容器,就叫做task. Container=task ......
  • 什么情况下会用到final?
     https://blog.csdn.net/qq_46657442/article/details/121360785 ①final作用final修饰类:表示该类不能被继承,是顶级类。修饰方法  :表示不能重写。修饰变量 :表......
  • Linux输出重定向>和>>的区别是什么?
    Linux输出重定向>和>>的区别是什么-百度经验 https://jingyan.baidu.com/article/358570f64345c4ce4724fcba.htmlLinux输出重定向有>和>>,如果不清楚他们的区别,混淆......
  • MYSQL中的COLLATE是什么?
    在mysql中执行showcreatetable<tablename>指令,可以看到一张表的建表语句,example如下:CREATETABLE`table1`(`id`bigint(20)unsignedNOTNULLAUTO_INCREMENT,......
  • linux用wget下载的文件放在什么地方?
    linux用wget下载的文件放在什么地方?_百度知道 https://zhidao.baidu.com/question/1824525879028523548.html匿名用户2017-12-16 Linux系统中的wget是一个下载......
  • EasyCVR级联向上级注册时,上级平台通道显示为0是什么原因?
    EasyCVR具备强大的视频接入、汇聚与管理、视频分发、设备管理、用户及角色权限管理等能力。平台可对前端接入的设备进行统一集中管理,并能支持采用设备树对设备进行分组、分......
  • EasyCVR视频播放一段时间后不能播放,重启又可以正常播放是什么原因?
    EasyCVR平台是我们支持协议最全面的视频平台,它能支持主流协议包括国标GB/T28181、RTMP、RTSP/Onvif协议,以及厂家的私有协议,如海康Ehome、海康SDK、大华SDK等。平台可拓展性......
  • unix kill -9 与kill 有什么区别
    unixkill-9与kill有什么区别_百度知道 https://zhidao.baidu.com/question/289182098.html区别:1、kill-9id:一般不加参数kill是使用15来杀,这相当于正常停止进程,停......
  • 为什么常识知识不(也不能)学习
    为什么常识知识不(也不能)学习常识(背景)知识,至少是我们在语言理解过程中获取和传递的知识:(i)不能通过处理大量文本来学习,因为这些知识从未在文本中明确说明——而你找不到不......