Java Web学习笔记6——盒子模型

视频标签:<video>

src: 规定视频的URL

controls:显示播放控件

width:播放器的宽度

height:播放器的高度

音频标签:<audio>

src: 规定音频的URL

controls: 显示播放控件

段落标签:<p>

段落换行:<br>

文本加粗标签:<b>  / <strong>(带有强调的意思)

CSS样式:

line-height: 设置行高

text-indent: 定义一个行内容的缩进

text-align: 规定元素中的文本的水平对齐方式

注意:

在HTML中无论输入多少个空格,只会显示一个。可以使用空格占位符;&nbsp;

页面布局:

盒子模型:

盒子:页面中的所有元素(标签),都可以看做是一个盒子,由盒子将页面中的元素包含一个矩形区域内,通过盒子的视角更方便的进行页面布局。

盒子模型组成:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)

布局标签:实际开发网页中,会大量频繁的使用div和span这两个没有语义的布局标签。

标签:<div> <span>

特点:

div标签:

一行只显示一个(独占一行)。

宽度默认是父元素的宽度,高度默认由内容撑开。

可以设置宽高(width、height)。

span标签:

一行可以显示多个。

宽度和高度默认由内容撑开。

不可以设置宽高(width、height)。

新闻页面的页面布局:

版心居中:

使用div布局标签,一行只有一个。

然后添加一个id属性值, id="center"。

注意:如果只需要设置某一方位的边框、内边框、外边框,可以在属性后加上-位置,如:padding-top、padding-left、padding-right、.... 

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

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

相关文章

Git版本控制:核心概念、操作与实践

Git是一种分布式版本控制系统&#xff0c;被广泛应用于软件开发过程中。本文将介绍Git的核心概念、常用操作以及最佳实践&#xff0c;帮助读者掌握Git的基本技巧&#xff0c;提高团队协作效率。 一、引言 在软件开发过程中&#xff0c;版本控制是至关重要的。它能帮助我们跟踪…

linux驱动学习(七)之混杂设备

需要板子一起学习的可以这里购买&#xff08;含资料&#xff09;&#xff1a;点击跳转 一、混杂设备 混杂设备也叫杂项设备&#xff0c;是对普通的字符设备(struct cdev)的一种封装,设计目的就是为了简化字符设备驱动设计的流程。具有以下特点&#xff1a; 1) 主设备号为10&a…

全面解析:渗压计数据如何预测地下水趋势

随着人们对水资源日益增长的需求和对环境保护意识的提升&#xff0c;地下水位的监测和预测成为了水利工程和环境科学领域的重要研究内容。渗压计作为一种能够测量土壤或岩石中孔隙水压力的仪器&#xff0c;在地下水位的监测中发挥着关键作用。本文将从渗压计的工作原理、安装方…

GD32F4XX的ISP方式下载程序时的串口选择

官方资料 详细信息可参考GD32F4xx的用户手册&#xff0c;第 1.4 章节 引导配置 。 版本是 &#xff1a;GD32F4xx_User_Manual_Rev3.0_CN 资料链接: https://www.gd32mcu.com/cn/download/6?kwGD32F4

HTML到PDF转换,11K Star 的pdfmake.js轻松应对

在Web开发中&#xff0c;将HTML页面转换为PDF文件是一项常见的需求。无论是生成报告、发票、还是其他任何需要打印或以PDF格式分发的文档&#xff0c;开发者都需要一个既简单又可靠的解决方案。幸运的是&#xff0c;pdfmake.js库以其轻量级、高性能和易用性&#xff0c;成为了许…

16 - 平均售价(高频 SQL 50 题基础版)

16 - 平均售价 # 注意&#xff1a;between 小值 and 大值 select u.product_id, round(sum(u.units*p.price)/sum(u.units),2) average_price from Prices p left join UnitsSold u on p.product_idu.product_id -- and where u.purchase_date between p.start_date and p.e…

AB测试学习(附有相关代码)

目录 一、基本概念1. 定义2. 作用3. 原理 二、实验基本原则三、实验步骤四、实验步骤详解1. 确定实验目的2. 确定实验变量3. 实验指标设计3.1 实验指标类型&#xff08;按作用区分&#xff09;3.1.1 核心指标3.1.2 驱动指标&#xff08;跟踪指标&#xff09;3.1.3 护栏指标 3.2…

使用node将页面转为pdf?(puppeteer实现)

本文章适合win系统下实验&#xff08;linux&#xff0c;mac可能会出现些莫名其妙的bug我也不会解决&#xff09; 具体过程 首先了解什么时无头浏览器启动无头浏览器打开指定的url页面设置导出pdf格式开始转化完整基础代码 首先了解什么时无头浏览器 没有界面的浏览器下载pupp…

matlab使用教程(92)—流线图、流带图和流管图

1.使用向量数据显示流线图 MATLAB 向量数据集 wind 代表北美地区的气流。本示例结合使用了几种方法&#xff1a; 利用流线跟踪风速 利用切片平面显示数据的横截面视图 利用切片平面上的等高线提高切片平面着色的可见性 1.1确定坐标的范围 加载数据并确定用来定位切片平面…

SpringBoot发邮件服务如何配置?怎么使用?

SpringBoot发邮件需要的参数&#xff1f;邮件发送性能如何优化&#xff1f; 在SpringBoot项目中配置发邮件服务是一个常见的需求&#xff0c;它允许我们通过应用程序发送通知、验证邮件或其他类型的邮件。AokSend将详细介绍如何在SpringBoot中配置发邮件服务。 SpringBoot发邮…

qmt量化交易策略小白学习笔记第17期【qmt编程之获取对应周期的北向南向数据--方式1:内置python】

qmt编程之获取对应周期的北向南向数据 qmt更加详细的教程方法&#xff0c;会持续慢慢梳理。 也可找寻博主的历史文章&#xff0c;搜索关键词查看解决方案 &#xff01; 感谢关注&#xff0c;咨询免费开通量化回测与获取实盘权限&#xff0c;欢迎和博主联系&#xff01; 获取…

小程序开发平台版源码系统——社区论坛小程序功能 带完整的安装代码包以及搭建教程

系统概述 这款社区论坛小程序源码系统是一款功能强大、易于使用的开发平台版源码系统。它采用先进的技术架构&#xff0c;结合了丰富的功能模块&#xff0c;能够满足不同用户的需求。该系统具有高度的可扩展性和灵活性&#xff0c;能够根据用户的需求进行定制化开发&#xff0…

【ffmpeg】本地格式转换 mp4转wav||裁剪mp4

个人感受&#xff1a;太爽了&#xff01;&#xff01;&#xff01;&#xff08;可能用惯了转换网站和无良的转换软件&#xff09; ———— 使用FFmpeg把mp4文件转换为WAV文件 - 简书 (jianshu.com) FFMPEG 视频分割和合并 - 简书 (jianshu.com) ———— 示例 ffmpeg -i …

Qwen2开源发布!0.5B到72B,显著提升!

Qwen2是一个开源的自然语言处理模型&#xff0c;它从0.5B到72B参数规模的显著提升&#xff0c;代表着自然语言处理技术的重大进步。Qwen2的发布&#xff0c;意味着我们可以期待模型在各项自然语言处理任务上&#xff0c;如文本生成、文本分类、机器翻译等&#xff0c;都会有更加…

Qt 窗口居中显示

Qt 窗口居中显示 引言一、窗体的setGeometry函数二、计算屏幕中心然后move三、借助QRect计算四、补充知识点 引言 窗口居中可以提供良好的视觉效果、突出重点内容、提升用户导航和操作的便利性&#xff0c;有助于改善用户体验。 Qt一般情况下&#xff0c;其Mainwindow或弹出的…

咖啡机器人如何精准控制液位流量

在如今快节奏的生活中&#xff0c;精确控制液位流量的需求愈发迫切&#xff0c;特别是在咖啡机器人等精密设备中。为了满足这一需求&#xff0c;工程师们不断研发出各种先进的技术&#xff0c;以确保液体流量的精准控制。其中&#xff0c;霍尔式流量计和光电式流量计就是两种常…

【Spring Cloud】Gateway 服务网关核心架构的执行流程和断言

文章目录 基本概念执行流程断言内置路由断言工厂自定义路由断言工厂 总结 基本概念 路由(Route)是gateway中最基本的组件之一&#xff0c;表示一个具体的路由信息载体。主要定义了下面的几个信息&#xff1a; id&#xff1a;路由标识符&#xff0c;区别于其他Route。uri&…

论文合集整理推荐2024.6.4

论文合集整理推荐2024.6.4 原创 小王搬运工 时序课堂 2024-06-04 20:12 四川 ‍2012年论文合集&#xff1a;论文入口 ‍2019年论文合集&#xff1a;论文入口 2021年论文合集&#xff1a;论文入口 2022年论文合集&#xff1a;论文入口 2023年论文合集&#xff1a;论文入口…

carbondata入库数据查询异常排查

1&#xff0c;背景&#xff1a;carbondata的入库segments对应的状态都是success&#xff0c;但是查询的时候报错&#xff0c; 2&#xff0c;排查内容 1&#xff0c;segments的状态 success 2&#xff0c;任务执行记录日志 正常 3&#xff0c;找到对应查询的天&#xff0c;指定对…

【JavaEE精炼宝库】多线程(4)深度理解死锁、内存可见性、volatile关键字、wait、notify

目录 一、死锁 1.1 出现死锁的常见场景&#xff1a; 1.2 产生死锁的后果&#xff1a; 1.3 如何避免死锁&#xff1a; 二、内存可见性 2.1 由内存可见性产生的经典案例&#xff1a; 2.2 volatile 关键字&#xff1a; 2.2.1 volatile 用法&#xff1a; 2.2.2 volatile 不…