HTML(五)——HTML区块,布局

HTML区块

HTML可以通过 <div> 和 <span>将元素组合起来,可以来布局,就是盒子,div是块级盒子,里面 可以放任何东西,span里面装的是文本

HTML 区块元素

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

实例: <h1>, <p>, <ul>, <table>

HTML 内联元素

实例: <b>, <td>, <a>, <img>

HTML 内联元素和区块元素的区别

区块(块级)元素在浏览器显示时,通常会以新行来开始,而内联元素不会,会在原来的行上显示,如果所在行的前面有内容,那就会在前面内容的后面

HTML <div> 元素

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

<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。

div和css一起使用,会让内容更加美观和多变

div元素也常用于文档布局

HTML <span> 元素

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

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

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

<div> 用于创建页面结构和布局,而 <span> 用于对文本或行内元素进行样式化或包裹。它们在页面设计和样式设置中有不同的用途和作用。

HTML 布局

HTML布局可以使用<div>元素,也可以使用table(表格),但我们一般使用div元素来进行布局,table毕竟不是布局工具

HTML 布局 - 使用<div> 元素

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>简单网页布局</title>
</head><body><div id="container" style="width:500px"><div id="header" style="background-color:#00ff37;"><h1 style="margin-bottom:0;">主要的网页标题</h1></div><div id="menu" style="background-color:#00eeff;height:200px;width:100px;float:left;"><b>菜单</b><br>HTML<br>CSS<br>JavaScript</div><div id="content" style="background-color:#eeeeee;height:200px;width:400px;float:left;">内容在这里</div><div id="footer" style="background-color:#48ff00;clear:both;text-align:center;">底部</div></div></body></html>

实现效果:

HTML 布局 - 使用表格

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>网页标题</title>
</head><body><table width="500" border="0"><tr><td colspan="3" style="background-color:#00ff40;"><h1>主要的网页标题</h1></td></tr><tr><td style="background-color:#00c3ff;width:100px;"><b>菜单</b><br>HTML<br>CSS<br>JavaScript</td><td style="background-color:#eeeeee;height:200px;width:400px;">内容在这里</td><td style="background-color:#10a7c2;height:200px;width:100px;">还有内容在这里</td></tr><tr><td colspan="3" style="background-color:#5eff00;text-align:center;">底部</td></tr></table></body></html>

实现效果:

<td colspan="3" style="background-color:#00ff40;"><h1>主要的网页标题</h1></td>

其中里面出现的colspan=“n ”,这个是和中间部分相对应的,我的这个例子中间有三部分,如果n的值为2,那么右边的那一部分就不会被上面的盖住,如果是1,那右边的两部分都不会被盖住,这可能也是用table创布局的一方面原因

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

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

相关文章

Java 面试 | Redis

目录 1. 在项目中缓存是如何使用的&#xff1f;2. 为啥在项目中要用缓存&#xff1f;3. 缓存如果使用不当会造成什么后果&#xff1f;4. redis 和 memcached 有什么区别&#xff1f;5. redis 的线程模型是什么&#xff1f;6. 为什么单线程的 redis 比多线程的 memcached 效率要…

dns逆向解析,主从服务,多域名访问(穿插ntp服务器)

复习 域名解析&#xff1a; 正向解析&#xff1a;将域名解析为ip 反向解析&#xff1a;将ip解析为域名 逆向解析 关闭防火墙和selinux&#xff0c;配置静态ip [rootdns ~]# vim /etc/named.rfc1912.zones [rootdns ~]# vim /etc/named.conf [rootdns ~]# cd /var/named/ [rootd…

【电子数据取证】了解数据库

文章关键词&#xff1a;电子数据取证、数据库取证、手机取证 一、前言 数据库是信息系统中不可或缺的部分。无论是取证收集&#xff0c;网站重建又或是开发程序都离不开数据库这个角色。 可能你已经或多或少看到过像是MySQL、Redis、MongoDB之类的程序&#xff0c;这些程序统…

前端:Vue学习-4

前端&#xff1a;Vue学习-4 1. 组件缓存 keep-alive2. 状态管理工具 - Vuex2.1 vuex 提供数据&使用数据 - mapState2.2 mutations 修改数据 - mapMutations2.3 actions - 异步操作 - mapActions2.4 getters - 计算属性 - mapGetters 3. Vuex 模块 modules - state,mutation…

day07:用户下单、订单支付

文章目录 地址薄相关相关代码需求分析和设计代码书写 用户下单需求分析和设计代码开发 订单支付微信支付介绍微信支付准备工作如何保证数据安全&#xff1f;如何调用到商户系统 地址薄相关相关代码 需求分析和设计 产品原型接口设计数据库设计 代码书写 地址薄相关代码都是单…

Objects类

Objects类 Objects类&#xff1a;常用方法&#xff1a;equals()&#xff1a; Objects类&#xff1a; Objects是一个工具类&#xff0c;提供了很多操作对象的静态方法给我们使用。 常用方法&#xff1a; 方法名说明public static boolean equals(Object a, Object b)先做非空判…

电商大型活动行动清单样例

背景 为保证在大型活动/节日&#xff08;双十一、黑色星期五&#xff09;时服务稳定&#xff0c;提出各个角色必要的行动清单 涉及到的角色与职能范围&#xff08;包括但不限于&#xff09; 产品&#xff1a;确定核心功能链路&#xff0c;制定服务降级默认行为&#xff0c;提…

视频行业(监控,直播,会议,视频通话)痛点,随时接入,异构融合,以OvMeet视频会议为中心解决企业视频应用完美解决方案

近年来随着网络的普及及音视频技术的不断发展&#xff0c;以全球化、网络化、智能化未趋势的办公方式越来越受到各行各业的青睐。视频会议解决方案的应用转往多种交互式视频应用&#xff0c;如转往视频接入融合&#xff0c;调度与管理、日常沟通、工作部署、紧急救援、作战指挥…

誉天Cloud Service Solutions Architect(云服务)怎么样

誉天云服务课程亮点 深度融合云原生 包含原生K8s和docker内容&#xff0c;引入isito和ASM功能进行微服务治理&#xff0c;结合Linux功底设计云上性能优化&#xff0c;和架构设计。师资力量强大 课程由两名5HCIE认证讲师授课&#xff0c;认证辅导由已通过HCIE-Cloud Service专职…

【图形图像-1】SDF

在图形图像处理中&#xff0c;SDF&#xff08;Signed Distance Field&#xff0c;带符号的距离场&#xff09;是一种表示图形轮廓和空间距离的数学结构。它通常用于计算机图形学、文本渲染、碰撞检测和物理模拟等领域。 SDF&#xff08;Signed Distance Field&#xff0c;带符号…

Card Game【map】

Card Game 题面翻译 题目描述 两名玩家正在玩在线纸牌游戏。游戏使用一副 32 32 32 张牌进行。每张牌都有花色和数字。有四种花色&#xff1a;梅花、方块、红心和黑桃。用字符 C、D、H 和 S 分别表示它们。共有 8 种数字&#xff0c;按递增顺序为 2、3、4、5、6、7、8、9。…

《中国数据库前世今生》观影——认识1980年起步阶段

引出 中国数据库的前世今生观影——认识1980年的起步阶段 20 世纪 60 年代国外就有了商业数据库&#xff0c;20 世纪 80 年代我国才有了第一批数据库专业人才。不要小看这 20 年的差距&#xff0c;它可能需要几代数据库人用一生去追。2024 年了&#xff0c;中国跨过数据库这座大…

搞DDR你必须得看看我的这篇笔记

Hi! 这篇约你一起深入认识一下DDR。 文章目录 DDR基础DDR是什么?DDR有什么用?为什么要用DDRDDR协议是如何演进的如何访问DDRDDR关键时序参数ACTIVATE Timing 激活时序REFRESH Timing 刷新时序READ Timing 读时序写时序模式寄存器时序DDR基础 DDR是什么? 如果你在学生时代自…

动态创建标签jQuery效果

动态创建标签jQuery效果https://www.bootstrapmb.com/item/14832 使用jQuery来动态创建HTML标签并添加效果是一种常见的方法。以下是一个简单的示例&#xff0c;说明如何使用jQuery来动态创建<div>标签&#xff0c;并给它们添加一些基本的效果。 1. 创建一个新的<di…

Ubuntu 24.04 LTS 无法打开Chrome浏览器

解决办法&#xff1a; 删除本地配置文件&#xff0c;再次点击Chrome图标&#xff0c;即可打开。 rm ~/.config/google-chrome/ -rf ref: Google chrome not opening in Ubuntu 22.04 LTS - Ask Ubuntu

3GPP眼中的XR及其技术特点

3GPP R18 支持了XR Services。XR需要高数据速率和低延迟通信&#xff0c;这也真是5G可以大展身手的地方。这篇就从3GPP的角度看下XR是什么以及XR有哪些技术特点。 Extended Reality (XR) 是指由计算机技术和可穿戴设备生成的所有现实与虚拟相结合的环境和人机交互技术。 实际上…

使用vscode搜索打开的文件夹下的文件

右键空白处打开命令面板 摁一次删除键&#xff0c;删除掉图中的大于号 这样就能够找到例化的模块&#xff0c;文件具体在哪个位置&#xff0c;然后打开了

探索WebKit的Web Serial API:开启串行通信的新纪元

探索WebKit的Web Serial API&#xff1a;开启串行通信的新纪元 在现代Web开发中&#xff0c;与硬件设备的交互变得越来越普遍。WebKit的Web Serial API为Web应用提供了一种直接与串行设备通信的能力&#xff0c;使得开发者能够通过浏览器与外部设备进行数据交换。这项技术的应…

python实现责任链模式

把多个处理方法串成一个list。下一个list的节点是上一个list的属性。 每个节点都有判断是否能处理当前数据的方法。能处理&#xff0c;则直接处理&#xff0c;不能处理则调用下一个节点&#xff08;也就是当前节点的属性&#xff09;来进行处理。 Python 实现责任链模式&#…

【Unity】RPG2D龙城纷争(十七)敌方常规AI(Normal)的实现

更新日期:2024年7月24日。 项目源码:第五章发布(正式开始游戏逻辑的章节) 索引 简介一、AI_Normal类二、AI调遣策略第一阶段:收集1.提供战场数据收集方法2.收集战场数据三、AI调遣策略第二阶段:评估四、AI调遣策略第三阶段:行动简介 AI_Normal定位为框架自带的最基础的…