HTML 学习笔记(十)块和内联

news/2024/5/30 17:32:40/文章来源:https://blog.csdn.net/k903161661/article/details/136623665

每个HTML元素都有一个默认的显示值,显示值又可以再分为block(块)和inline(内联)

一、块元素

通过F12进入浏览器开发者模式查看该元素会发现其所占宽度为整个网页的宽度

1.div标签

通过div标签将一些元素装进"盒子",从而对盒子中的全部元素进行相同的操作

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>table</title></head><body><div align="center"><h2>标题</h2><p>第一段</p><p>第二段</p></div></body>
</html>

在这里插入图片描述

2.常见的块元素

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>table</title></head><body><table width="600" border="1" cellspacing="0" cellpadding="0" align="center"><caption><b>块级元素</b></caption><tr><th>标题元素</th><th>段落元素</th><th>列表元素</th><th>表格元素</th><th>分块元素</th></tr><tr align="center"><td>h1-h6</td><td>p</td><td>ol,<br>li,<br>ul,<br>dl,<br>dd,<br>dt</td><td>table,<br>tr,<br>td,<br>th,<br>thead,<br>tfoot,<br>caption<br></td><td>div</td></tr></table></body>
</html>

在这里插入图片描述

二、内联元素

内联元素(不会独占一行,且只占用必要的宽度)
内联元素里不能嵌套块级元素

1. span标签

内联元素span用来标记文本的一部分,而不产生额外的影响

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>table</title></head><body><h2>什么是佛系?</h2><p><span title="inline">所谓佛系</span>,是对无法改变的事物的不强求,而非浑浑噩噩的代名词</p></body>
</html>

在这里插入图片描述

2.常见的内联元素

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>table</title></head><body><!-- 内联元素有 --><table width="600" border="1" cellspacing="0" cellpadding="0" align="center"><caption><b>内联元素</b></caption><tr><th>链接元素</th><th>文本修饰元素</th><th>换行元素</th><th>图片元素</th><th>范围元素</th></tr><tr align="center"><td>a</td><td>b,<br>em,<br>i,<br>strong,<br>sub,<br>sup</td><td>br</td><td>img</td><td>span</td></tr></table></body>
</html>

在这里插入图片描述

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

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

相关文章

mysql5.6---windows和linux安装教程和忘记密码怎么办

一、windows安装 1.完成解压 解压完成之后将其放到你喜欢的地址当中去&#xff0c;这里我默认放在了D盘&#xff0c;这是我的根目录 2.配置环境变量 我的电脑->属性->高级->环境变量->系统变量 选择PATH,在其后面添加: (注意自己的安装地址) D:\mysql-5.6.49…

产品必会的6个Axure使用技巧(高阶)

1. 事件也可以复制/剪切/粘贴 只需要选中事件&#xff0c;复制/剪切&#xff0c;再选择其它事件&#xff0c;即可粘贴到这个事件上。同时支持跨页面的复制粘贴。 2. Axure支持复制粘贴Excel里的表格 具体操作 在excel里复制具体内容&#xff0c;如下图&#xff1a; 进入axur…

phpcms上传导致getshell详解及案例

一、环境 这里我根据大佬的文章将环境复原 phpcms上传导致getshell详解及案例 | 离别歌 回忆phpcms头像上传漏洞以及后续影响 | 离别歌 二、代码&#xff1a; php&#xff1a; <?php header("Content-Type:text/html; charsetutf-8"); require_once(pclzip…

交叉注意力融合时域、频域特征的FFT + CNN -BiLSTM-CrossAttention电能质量扰动识别模型

往期精彩内容&#xff1a; 电能质量扰动信号数据介绍与分类-Python实现-CSDN博客 Python电能质量扰动信号分类(一)基于LSTM模型的一维信号分类-CSDN博客 Python电能质量扰动信号分类(二)基于CNN模型的一维信号分类-CSDN博客 Python电能质量扰动信号分类(三)基于Transformer…

深入理解 CSS——CSS进阶与实践(5w字高频面试题整理)

本文总结了CSS高频面试题&#xff0c;并搭配了演示动画进行CSS样式演示。介绍了关于如何理解盒模型&#xff0c;如何实现块级元素水平居中&#xff0c;如何实现两侧固定中间自适应的三栏布局、如何实现两栏布局&#xff0c;如何进行响应式设计&#xff0c;对BFC的理解&#xff…

【计算机网络】概述 习题

体系结构 练习题 体系结构 真题 时延相关习题 参考公式&#xff1a; 习题1 题解&#xff1a; 发送时延1b 然后通过传播时延传到对面。即1b的发送时延剩下的传播时延 习题1扩展&#xff1a; 将距离修改为20米&#xff0c;其他条件不变。 将距离修改为10米&#xff0c;其他条…

PostgreSQL从入门到精通教程 - 第47讲:JMETER工具使用

PostgreSQL从小白到专家&#xff0c;是从入门逐渐能力提升的一个系列教程&#xff0c;内容包括对PG基础的认知、包括安装使用、包括角色权限、包括维护管理、、等内容&#xff0c;希望对热爱PG、学习PG的同学们有帮助&#xff0c;欢迎持续关注CUUG PG技术大讲堂。 第47讲&…

安装kibaba

官方地址&#xff1a;Past Releases of Elastic Stack Software | Elastic 直接下载就可以 安装好了之后开始配置文件/kibana/config打开kibanba.yml server.port:5601 服务器地址 sercer.name:kibana 服务器名称 kibana.index:.kibana 索引 elasticsearch.hosts:[http://1…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:TextArea)

多行文本输入框组件&#xff0c;当输入的文本内容超过组件宽度时会自动换行显示。 高度未设置时&#xff0c;组件无默认高度&#xff0c;自适应内容高度。宽度未设置时&#xff0c;默认撑满最大宽度。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&…

加密货币在网络违法犯罪活动中的利用情况调查

一、调查背景 区块链基于分布式共识和经济激励等手段&#xff0c;在开放式、无许可的网络空间中&#xff0c;为价值的确立、存储、转移提供了新的解决方案。然而随着加密生态在过去若干年的快速发展&#xff0c;加密货币也越来越多地被用于各类风险活动&#xff0c;为网络赌博…

Docker 系列2【docker安装mysql】【开启远程连接】

文章目录 前言开始步骤1.增加mysql挂载目录2.下载镜像2.启动容器具体步骤4.开启端口5.测试连接 总结 前言 本文开始&#xff0c;默认已经安装docker&#xff0c;如果你还没有完成这个步骤&#xff0c;请查看这一篇文章【docker安装与使用】 开始步骤 1.增加mysql挂载目录 m…

vue3速查笔记

文章目录 一、创建Vue3.0工程1.使用 vue-cli 创建2.使用 vite 创建 二、常用 Composition API1.拉开序幕的setup2.ref函数3.reactive函数4.Vue3.0中的响应式原理vue2.x的响应式Vue3.0的响应式 5.reactive对比ref6.setup的两个注意点7.计算属性与监视1.computed函数2.watch函数3…

【框架学习 | 第五篇】SpringMVC(常用注解、获取请求参数、域对象共享数据、拦截器、异常处理、上传/下载文件)

文章目录 1.SpringMVC简介1.1定义1.2主要组件1.3工作流程1.3.1简要流程1.3.2详细流程 1.4优缺点 2.常用注解3.获取请求参数3.1通过 HttpServletRequest 获取请求参数3.2通过控制器方法的形参获取请求参数3.2.1请求路径参数与方法形参一致3.2.2请求路径参数与方法形参不一致3.2.…

Labelme

文章目录 前言一、遇到问题二、排查问题1.分析问题2.验证问题2.1对比两者&#xff0c;格式是一致的&#xff0c;唯一不同之处是imagePath 不一样&#xff0c;labelme 生成的是图片的名称&#xff0c;不包含路径&#xff1b;而自动生成的是完整路径的图片名称。2.2再次思考两者的…

Pytorch基础-汇总

本教程翻译自微软教程&#xff1a;https://learn.microsoft.com/en-us/training/paths/pytorch-fundamentals/ 初次编辑&#xff1a;2024/3/1&#xff1b;最后编辑&#xff1a;2024/3/4 本教程包含以下内容&#xff1a; 介绍pytorch基础和张量操作介绍数据集介绍归一化介绍构…

安卓studio安装(从安装到配置到helloworld)

安卓studio安装 2024.3.11官网的版本&#xff08;有些翻墙步骤下载东西也解决了&#xff09; 这次写的略有草率&#xff0c;后面会更新布局的&#xff0c;因为截图量太大了&#xff0c;有需要的小伙伴可以试着接受一下哈哈哈哈 进入官网下载&#xff1a; https://www.bing.com…

IOT的发展历程及其优势——青创智通

工业互联网-物联网-设备改造-IOT-青创智通 ​随着科技的不断发展&#xff0c;物联网&#xff08;IoT&#xff09;已经逐渐成为了我们生活中不可或缺的一部分。IoT是指通过互联网将各种物理设备连接起来&#xff0c;实现设备之间的数据交换和智能化控制。IoT的发展不仅改变了我们…

企商在线CTO楼炜:论云计算与产业互联网

024年全国两会召开之际&#xff0c;3月4日&#xff0c;全国政协委员、京东集团技术委员会主席曹鹏提交了《发挥产业互联网平台作用 打造实体产业数字化转型直效通道》提案&#xff0c;提出了产业互联网平台在整合供应链、资金、技术、资讯、培训、人才等各类资源的重要作用。云…

【idea】查看spring源代码没有注释

问题描述 点击类&#xff08;如&#xff1a;AnnotationConfigApplicationContext &#xff09;看到的没有注释 看到有&#xff1a; Decompiled .class file, bytecode version: 52.0 (java 8) 翻译过来是&#xff1a;解压.class文件&#xff0c;字节码版本&#xff1a;52.0…

【北京大学】徐高《金融经济学二十五讲》

一、经济的任务 经济的任务之一是确保有效地分配稀缺资源&#xff0c;这是经济学中的一个核心问题。资源是有限的&#xff0c;而需求是无限的&#xff0c;因此经济系统需要通过合理的机制来分配资源以满足社会的需求。以下是关于经济分配资源的几个方面&#xff1a; 1. 资源配…