前端学习:HTML块、类、Id

news2024/9/21 11:10:25

目录

一、块元素、内联元素

二、HTML

元素

三、HTML元素

 一、分类块级元素

二、分类行内元素

Id 

一、使用 id 属性

二、 class与ID的差异

三、总结


一、块元素、内联元素

大多数HTML元素被定义为块级元素或内联元素。

块级元素在浏览器显示时,通常会以新行来开始(和结束)。

例子:<h1>、<p>、<ul>、<table>

内联元素在显示时,通常不会以新行开始。

例子:<b>、<td>、<a>、<img>

二、HTML<div>元素

HTML<div>元素是块级元素,它是用于组合其他HTML元素的容器

<div>元素没有特定的含义,如果与CSS一同使用,<div>元素可用于对大的内容快设置样式属性。

<div元素的另一个常见的用途是文档布局。

三、HTML<span>元素

HTML<span>元素是内联元素,可作为文本的容器。

<span>元素也没有特定的含义。

与CSS一同使用时,<span>元素可用于为部分文本设置样式属性。

对HTML进行分类(设置类),使我们能够为元素的类定义CSS样式。

为相同的类设置相同的样式,或者为不同的类设置不同的样式。

 一、分类块级元素

HTML<div>元素是块级元素。它能够用作其他的HTML元素的容器。

设置<div>元素的类,是我们能够为相同的<div>元素设置相同的类

二、分类行内元素

HTML<span>元素是行内元素,能够用作文本的容器。

设置<span>元素的类,能够为相同的<span>元素设置相同的样式。

Id 

 HTML id 属性用于为HTML元素指定唯一的id。

 一个HTML文档中不能存在多个有相同 id 的元素。

一、使用 id 属性

id 属性指定HTML元素的唯一ID。id 属性的值在HTML文档中必须是唯一的。

id 属性用于指向样式表中的特定样式声明。

语法是:下一个井号(#),后跟一个id名称。然后,在花括号{}中定义CSS属性。

补充:id名称对大小写敏感!且必须包含至少一个字符,且不能包含空白字符(空格、制表符等)。

二、 class与ID的差异

同一个类名可以由多个HTML元素使用,而一个id名称只能由页面中的一个HTML元素使用

三、总结

  • id属性用于为 HTML 元素指定唯一的 id
  • id 属性的值在 HTML 文档中必须是唯一的
  • CSS 和 JavaScript 可使用 id 属性来选取元素或设置特定元素的样式
  • id属性的值区分大小写
  • id属性还可用于创建 HTML 书签
  • JavaScript 可以使用getElementById() 方法访问拥有特定 id 的元素

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

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

相关文章

Docker常用命令详解,有这些足够了

首先启动类 启动docker&#xff1a;systemctl start docker 停止docker&#xff1a;systemctl stop docker 重启docker&#xff1a;systemctl restart docker 查看docker状态&#xff1a;systemctl status docker 开机自启动&#xff1a;systemctl enable docker 查看docker概要…

【CocosCreator入门】CocosCreator组件 | Widget(对齐)组件

Cocos Creator 是一款流行的游戏开发引擎&#xff0c;具有丰富的组件和工具&#xff0c;其中的Widget组件用于UI布局和调整&#xff0c;可以通过调整Widget组件来实现UI元素的自适应和排版。 目录 一、组件介绍 二、组件属性 三、组件使用 四、脚本示例 一、组件介绍 在Coc…

Python中的统计学(二)

大数定律和中心极限定律都是概率论中重要的定理。它们之间的不同在于它们所涉及的随机变量和极限的不同。 大数定律是指随着样本容量的增大&#xff0c;样本均值越来越接近于总体均值的定律。即样本均值的极限等于总体均值&#xff0c;也就是说&#xff0c;当样本量足够大时&a…

绝了!!PDF转换没想到这么简单

PDF处理是很多小伙伴的“痛”&#xff0c;在工作学习中&#xff0c;PDF转换、PDF编辑、PDF和图片的各种问题都是需要快速解决的&#xff0c;但市面上不少付费的软件让我们很是肉痛&#xff01; 今天给大家推荐5个免费的神仙PDF转换网站&#xff0c;解决你的所以PDF问题~ 记得…

Simulink 自动代码生成电机控制:硬件开发板系统介绍

目录 前言 电源电路 MCU电路 开发板接口 关于电流采样和过流保护 驱动部分 总结 前言 在介绍开发板之前突然有感而发想多说两句&#xff0c;本人从事电控行业也是有一些年头了&#xff0c;除了刚刚毕业就接触的电机控制外&#xff0c;就是电源控制相关的&#xff0c;像三相P…

Point-to Analysis指针分析(2)

https://blog.csdn.net/qq_43391414/article/details/111046505 下面介绍一种新的指针分析的算法Steensgaard算法&#xff0c;并将其与上一篇文章介绍 Steensgaard算法 不同于Andersen算法,Steensgaard在前者的基础上&#xff0c;再次对问题进行了简化&#xff0c;从而指针分析…

远程访问及控制

目录 一、SSH远程管理 1&#xff09;SSH的简介 2&#xff09;SSH的优点 3&#xff09;常用的SSH软件的介绍 4&#xff09;SSH 的组成 5&#xff09;SSH的密钥登录 密钥登录的过程&#xff1a; 二、SSH的运用 1 &#xff09;SSH配置文件信息 2&#xff09;存放ssh服务…

JAVA 进程CPU过高排查

1. top命令看一下JAVA进程&#xff1a; 占用500%多&#xff0c;非常恐怖&#xff0c;程序卡得动不了了。 2. 使用命令top -H -p PID 此处PID就是上一步获取的进程PID&#xff0c;我的PID是13342&#xff0c;通过此命令可以查看实际占用CPU最高的的线程的ID&#xff0c;此处几位…

ChatGPT+Ai绘图【stable-diffusion实战】

ai绘图 stable-diffusion生成【还有很大的提升空间】 提示词1 Picture a planet where every living thing is made of light. The landscapes are breathtakingly beautiful, with mountains and waterfalls made of swirling patterns of color. What kind of societies m…

【学习笔记】unity脚本学习(五)【常用的方法函数Destroy、Instantiate 、SendMessage、invoke 、Coroutine】

目录 常用的方法函数Object体系结构MonoBehaviour复习继承的变量 继承自Object的方法Destroy 物体的销毁DestroyImmediate 立即销毁对象&#xff08;强烈建议您改用 Destroy&#xff09;Object.DontDestroyOnLoadObject.Instantiate 物体的生成类子弹生成案例 继承自Component的…

八股+面经

文章目录 项目介绍1.不动产项目数据机器学习算法调研图像提取算法调研数据集-ImageNetXceptionVGGInceptionDensenetMobilenet 2.图书项目技术栈面试问题 Java基础MapHashMap v.s Hashtable(5点)ConcurrentHashMap v.s Hashtable(2点)代理模式1. 静态代理2. 动态代理2.1 JDK 动…

什么样的人适合学习网络安全?怎么学?

有很多想要转行网络安全或者选择网络安全专业的人在进行决定之前一定会有的问题&#xff1a;什么样的人适合学习网络安全&#xff1f;我适不适合学习网络安全&#xff1f; 会产生这样的疑惑并不奇怪&#xff0c;毕竟网络安全这个专业在2017年才调整为国家一级学科&#xff0c;…

elasticsearch——数据同步

目录 数据同步思路分析 方案一&#xff1a;同步调用 方案二&#xff1a;异步通知 方案三&#xff1a;监听binlog 区别 关于elasticsearch与数据库数据同步 导入课前资料提供的hotel-admin项目&#xff0c;启动并测试酒店数据的CRUD 声明exchange、queue、RoutingKey 导…

Python列表和字典前面为什么会加星号(**)?

前言 嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 python 中&#xff0c;单星号*和双星号**除了作为“乘”和“幂”的数值运算符外&#xff0c; 还在列表、元组、字典的操作中有着重要作用。 一、列表&#xff08;list&#xff09;、元组&#xff08;tuple&#xff09…

flac格式如何转换为mp3,这3个方法超好用

随着音频格式的不断创新和发展&#xff0c;每种格式对应不同的特点。比如像flac格式可以提供无损音质的体验&#xff0c;但它的文件大小却是相对较大&#xff0c;不太适合在普通设备上进行传输和使用。而mp3作为一种流行的音频格式&#xff0c;它的压缩率较高&#xff0c;不但可…

OceanBase 4.1解读:我们想给用户一个开箱即用的OceanBase部署运维工具

欢迎访问 OceanBase 官网获取更多信息&#xff1a;https://www.oceanbase.com/ 关于作者 肖磊 OceanBase 产品专家 负责 OceanBase 运维管控体系产品规划与设计&#xff0c;包括安装部署工具(OBD、OAT)、运维管控平台&#xff08;OCP、OCP Express&#xff09;&#xff0c;致力…

MySQL安装步骤详解

MySQL环境搭建 MySQL的下载 MySQL的4大版本 MySQL Community Server 社区版本&#xff0c;开源免费&#xff0c;自由下载&#xff0c;但不提供官方技术支持&#xff0c;适用于 大多数普通用户。 MySQL Enterprise Edition 企业版本&#xff0c;需付费&#xff0c;不能在线下载…

运行torch心得体会

遇到的问题&#xff1a; ①ModuleNotFoundError: No module named torch ②‘conda‘不是内部或外部命令&#xff0c;也不是可运行的程序或批处理文件。 ③import torch 提示找不到指定的模块visual C redistributable is not installed 过程&#xff1a; 用前一段时间就下…

流程图拖拽视觉编程--概述

一般的机器视觉平台采用纯代码的编程方式&#xff0c;如opencv、halcon&#xff0c;使用门槛高、难度大、定制性强、开发周期长&#xff0c;因此迫切需要一个低代码开发的视觉应用平台。AOI缺陷检测的对象往往缺陷种类多&#xff0c;将常用的图像处理算子封装成图形节点,如抓直…

「C/C++」C/C++强制类型转换

博客主页&#xff1a;何曾参静谧的博客 文章专栏&#xff1a;「C/C」C/C学习 目录 相关术语C语言中的强制类型转换C中的强制类型转换static_castdynamic_castreinterpret_castconst_cast 注意事项 相关术语 强制类型转换&#xff1a;是指将一个数据类型强制转换为另一个数据类型…