前端学习:HTML块、类、Id

news/2024/4/28 8:02:09/文章来源:https://blog.csdn.net/m0_62029216/article/details/130138335

目录

一、块元素、内联元素

二、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.luyixian.cn/news_show_286192.aspx

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

相关文章

FTP-----局域网内部传输文件(1)

在日常工作中&#xff0c;如果需要跨设备的传输文件&#xff0c;您需要借助USB数据线或者借助应用实现无线互联&#xff0c;将所需文件传输到对应设备&#xff0c;这一来一去&#xff0c;花费的时间与精力变多了&#xff0c;那么&#xff0c;怎么实现不使用第三方软件来实现跨设…

3-5年以上的功能测试如何进阶自动化?【附学习路线】

做为功能测试人员来讲&#xff0c;从发展方向上可分两个方面&#xff1a; 1、业务流程方向 2、专业技能方向。 当确定好方向后&#xff0c;接下来就是如何达到了。(文末自动化测试学习资料分享) 一、业务流程方向 1、熟悉底层的业务 作为功能测试工程师来讲&#xff0c;了解…

【C++高级】手写线程池项目-经典死锁问题分析-简历项目输出指导

作为五大池之一&#xff0c; 线程池的应用非常广 泛&#xff0c;不管是客户端程序&#xff0c;还是后台服务程序&#xff0c;掌握线程池&#xff0c;是提高业务处理能力的必备模块 本课程将带你从零开始&#xff0c;设计一个支持fixed和cached模式的线程池&#xff0c;玩转C11、…

IGA_PLSM3D的理解1

文章目录前言一、IgaTop3D_FAST.m给的参数二、Material properties 材料特性对Geom_Mod3D的理解对Pre_IGA3D的理解 输出1-----CtrPts&#xff1a; 输出2-----Ele&#xff1a; 输出3-----GauPts&#xff1a;前言 只是为方便学习&#xff0c;不做其他用途 一、IgaTop3D_FAST.m给的…

Python爬虫-某跨境电商(AM)搜索热词

前言 本文是该专栏的第42篇,后面会持续分享python爬虫干货知识,记得关注。 关于某跨境电商(AM),本专栏前面有单独详细介绍过,获取配送地的cookie信息以及商品库存数据,感兴趣的同学可往前翻阅。 1. python爬虫|爬取某跨境电商AM的商品库存数据(Selenium实战) 2. Seleni…

5.39 综合案例2.0 - STM32蓝牙遥控小车1(手机APP遥控)

综合案例2.0 - 蓝牙遥控小车1- 手机APP遥控成品展示案例说明器件说明连线小车源码手机遥控APPAPP使用说明成品展示 案例说明 用STM32单片机做了一辆蓝牙控制的麦轮小车&#xff0c;分享一下小车的原理和制作过程。 控制部分分为手机APP&#xff0c;语音模块控制&#xff0c;Ha…

15-721 chapter2 内存数据库

Background 随着时代的发展&#xff0c;DRAM可以容纳足够的便宜&#xff0c;容量也变大了。对于数据库来说&#xff0c;数据完全可以fit in memory&#xff0c;但同时面向disk的数据库架构不能很好的发挥这个特性 这张图是disk database的cpu instruction cost 想buffer pool…

第5章 继承-Java核心技术·卷1

文章目录Java与C不同基本概念继承&#xff1a;基于已有的类创建新的类。构造器多态定义超类变量可以引用所有的子类对象&#xff0c;但子类变量不能引用超类对象。子类引用的数组可以转换成超类引用的数组覆写返回子类型强制类型转换阻止继承&#xff1a;final类和方法多态 vs …

ROS学习-ROS简介

文章目录1.ROS1.1 ROS概念1.2 ROS特征1.3 ROS特点1.4 ROS版本1.5 ROS程序其他名词介绍1. 元操作系统2. IDL 接口定义语言一些网站1.ROS 1.1 ROS概念 ROS(Robot Operating System&#xff0c;机器人操作系统) ROS 是一个适用于机器人的开源的元操作系统&#xff0c;提供一系列…

linux驱动开发 - 04_Linux 设备树学习 - DTS语法

文章目录Linux 设备树学习 - DTS语法1 什么是设备树&#xff1f;2 DTS、DTB和DTC3 DTS 语法3.1 dtsi 头文件3.2 设备节点3.3 标准属性1、compatible 属性2、model 属性3、status 属性4、#address-cells 和#size-cells 属性5、reg 属性6、ranges 属性7、name 属性8、device_type…

人工智能专题-知识表示

文章目录人工智能专题-知识表示大纲2.1 知识表示的概念2.1.1 知识表示观点2.1.2 知识表示的要求2.2 一阶谓词逻辑表示法2.2.1 一阶谓词概念2.2.2 谓词逻辑表示方法2.3 产生式表示法2.4 语义网络表示法2.5 框架表示法人工智能专题-知识表示 大纲 大纲&#xff1a;掌握知识表示方…

思科路由器发现重大漏洞,解决方法是……

晚上好&#xff0c;我是老杨。 思科知名度高&#xff0c;待遇也好&#xff0c;很多网工心生向往&#xff0c;也有很多人考过思科认证的相关证书&#xff0c;对思科的印象还是不错吧&#xff1f; 而且&#xff0c;作为美国著名的网络设备厂商&#xff0c;思科是全球路由器巨头…

【面试】如何设计SaaS产品的数据权限?

文章目录前言数据权限是什么&#xff1f;设计原则整体方案RBAC模型怎么控制数据权限&#xff1f;1. 数据范围权限控制2. 业务对象操作权限控制3. 业务对象字段权限控制总结前言 一套系统的权限可以分为两类&#xff0c;数据权限和功能权限&#xff0c;今天我们从以下几个点&am…

【RabbitMQ】初识消息中间件MQ

目录 一、什么是MQ 二、MQ的优缺点 1、MQ的优点 1.应用解耦 2.削峰填谷 3.异步提速 2、MQ的缺点 1.可用性低 2.系统复杂度高 3.数据一致性问题 三、MQ使用场景 四、常见的MQ 一、什么是MQ MQ&#xff08;Message Queue&#xff09;&#xff1a;消息队列&#xff0c…

代码随想录_二叉树_leetcode654 617

leetcode654 最大二叉树 654. 最大二叉树 给定一个不重复的整数数组 nums 。 最大二叉树 可以用下面的算法从 nums 递归地构建: 创建一个根节点&#xff0c;其值为 nums 中的最大值。递归地在最大值 左边 的 子数组前缀上 构建左子树。递归地在最大值 右边 的 子数组后缀上 …

【FPGA实验4】举重比赛机制

举重比赛有三名裁判&#xff0c;当运动员将杠铃举起后&#xff0c;须有两名或两名以上裁判认可&#xff0c;方可判定试举成功&#xff0c;若用A、B、C分别代表三名裁判的意见输入&#xff0c;同意为1&#xff0c;否定为0;F为裁判结果输出&#xff0c;试举成功时F1&#xff0c;试…

iPhone如何不用iTunes将视频传输到电脑上?

随着智能手机的普及&#xff0c;iPhone已经成为了人们生活中必不可少的一部分。而随着iPhone摄像功能的逐渐完善&#xff0c;越来越多的用户开始将iPhone作为拍摄视频的工具。 但是&#xff0c;将iPhone中的视频传输到电脑并进行后续编辑处理或者备份储存&#xff0c;对于许多…

社科院与杜兰大学中外合作办学金融管理硕士项目——比起过往,前路更值得期待

当结束一天工作陷入沉思时&#xff0c;你有没有特别遗憾的事情呢&#xff0c;人生有太多的不确定性&#xff0c;比起过往&#xff0c;未知的人生更值得我们期待。与其懊恼没完成的遗憾&#xff0c;不如珍惜当下&#xff0c;努力创造未来。人生没有太晚的开始&#xff0c;在职读…

人工智能发展到GPT4经历了什么,从专家系统到机器学习再到深度学习,从大模型到现在的GPT4

大家好&#xff0c;我是微学AI&#xff0c;今天给大家讲一下人工智能的发展&#xff0c;从专家系统到机器学习再到深度学习&#xff0c;从大模型到现在的GPT4&#xff0c;讲这个的目的是让每个人都懂得人工智能&#xff0c;每个人都懂得人工智能的发展&#xff0c;未来人工智能…

openpnp - 顶部相机辅助光的选择

文章目录openpnp - 顶部相机辅助光的选择概述折腾的过程简易灯板市售的环形灯(不带漫射板)市售的环形灯(不带漫射板) LED单色光调光控制器.市售的环形灯(带漫射板)市售的环形灯(带漫射板) 自己拆解(降低LED灯路数)ENDopenpnp - 顶部相机辅助光的选择 概述 终于将顶部相机辅…