黑马JavaWeb企业级开发(知识清单)03——HTML实现正文:排版(音视频、换行、段落)、布局标签(div、span)、盒子模型

文章目录

  • 前言
  • 一、正文排版
    • 1. 视频标签: < video >
    • 2. 音频标签: < audio >
    • 3. 换行标签: < br >
    • 4. 段落标签 < p >
    • 5. vscode实现
  • 二、布局
    • 1. 盒子模型
    • 2. 布局标签< div >和< span >
    • 3. VScode实现
  • 三、源代码和运行结果
  • 总结


前言

本篇文章是2023年最新黑马JavaWeb企业级开发(知识清单)03:实现正文排版、布局的总结,帮助需要学习Web开发的朋友温故而知新。

  1. 视频标签< video >、音频标签< audio >
  2. 换行标签< br >、段落标签< p >
  3. 盒子模型
  4. 布局标签< div > < span >

一、正文排版

  • 整个正文部分的排版,主要分为这么四个部分:
    • 视频 (当前这种新闻页面,可能也会存在音频)
    • 文字段落
    • 字体加粗
    • 图片

1. 视频标签: < video >

  • src: 规定视频的url
  • controls: 显示播放控件
  • width: 播放器的宽度
  • height: 播放器的高度

2. 音频标签: < audio >

  • src: 规定音频的url
  • controls: 显示播放控件

3. 换行标签: < br >

注意: 在HTML页面中,我们在编辑器中通过回车实现的换行, 仅仅在文本编辑器中会看到换
行效果, 浏览器是不会解析的, HTML中换行需要通过br标签

4. 段落标签 < p >

  • 如: < p > 这是一个段落 < /p >
  • 文本格式标签
    在这里插入图片描述
    • 前面的标签 b、i、u、s 就仅仅是实现加粗、倾斜、下划线、删除线的效果,是没有强调语义的。

    • b标签:
      在这里插入图片描述

    • 而后面的strong、em、ins、del在实现加粗、倾斜、下划线、删除线的效果的同时,还带有强调语义

    • strong标签:
      在这里插入图片描述

5. vscode实现

  • 实现视频播放

    • 如果只是给出视频路径,那么只有图片没有播放按钮
    • 加上controls就有了播放按钮播放视频(一定都要写)
    • 可以调整播放器的大小
      在这里插入图片描述
  • 实现音频

    • 会自动生成一个音频播放器
      在这里插入图片描述
      在这里插入图片描述
  • 实现文字和图片穿插

  • 设置段落缩进、行距和文本向右对齐
    在这里插入图片描述

二、布局

新浪新闻的原始页面,新闻网页内容都是居中展示的,左边、右边都有一定的边距。

1. 盒子模型

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

盒子模型组成:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)
在这里插入图片描述
在vscode 里,我们自设定一个盒子模型,体验一下每个参数的意义:
在这里插入图片描述

2. 布局标签< div >和< span >

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

  • div标签
    • 一行只显示一个(独占一行)
    • 宽度默认是父元素的宽度,高度默认由内容撑开
    • 可以设置宽高(width、height)
  • span标签
    • 一行可以显示多个
    • 宽度和高度默认由内容撑开
    • 不可以设置宽高(width、height)

3. VScode实现

  • 新浪新闻页面布局,上下边界为0,为版心居中布局
  • 直接用div包裹标题和正文部分,设置占比比例和边距,保证文本居中即可
    在这里插入图片描述
    在这里插入图片描述

三、源代码和运行结果

由于题材原因,这里的文本信息替换为正文1、正文2…

<!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head><!-- 字符集为UTF-8 --><meta charset="UTF-8"><!-- 设置浏览器兼容性的 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=S, initial-scale=1.0"><title>焦点访谈:中国底气 新思想夯实大国粮仓_新浪新闻</title><style>h1 {color: rgb(77, 79, 83);}/* ID选择器 */#time {color: #968D92;font-size: 13px; /* 设置字体大小 */}a {/* 把超链接字体颜色仍然设置为黑色 */color: black;/* 把下划线的效果去掉 *//* 设置文本为一个标准的文本,就默认把下划线去掉了 */text-decoration: none;}p {/* 为所有段落设置首行缩进 */text-indent: 35px;/* 把每一行行距调宽 */line-height: 40px;}#plast {/* 设置文本对齐方式,文本靠右对齐 */text-align: right;}#center {/* 整个标题和正文内容占整个区域65% */width: 65%;/* 让div居中展示 *//* margin: 0% 17.5% 0% 17.5%; */margin: 0 auto; /* 只有两个数据的时候,前一个表示上下边距,后一个表示左右边距 */}</style>
</head><body><div id="center"><img src="../img/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self">新浪政务</a>  > 正文<!-- 方式三:外联样式 --><h1>焦点访谈:底气 新思想夯实大国粮仓</h1><hr><!-- <span></span>标签无意义,只是用来组合一行的元素的 --><!-- 可以把一行的元素单独切割,方便单独修改 --><span id="time">2023年03月02日 21:50</span> <span> <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a> </span><hr><!-- 正文 --><!-- 视频 --><video src="../video/1.mp4" controls width="950px"></video> <!-- 音频 --><!-- <audio src="../audio/1.mp3" controls></audio> --><!-- 用段落标签把正文每一个段都包裹起来 --><p><strong>重点内容</strong>正文1</p><p>正文2</p><img src="../img/1.jpg"><p>正文3</p><img src="../img/2.jpg"><p>正文4</p><p id="plast">责任编辑:XXX</p></div>
</body>
</html>

在这里插入图片描述


总结

本篇文章是2023年最新黑马JavaWeb企业级开发(知识清单)03:实现正文排版、布局的总结,帮助需要学习Web开发的朋友温故而知新。

  1. 视频标签< video >、音频标签< audio >
  2. 换行标签< br >、段落标签< p >
  3. 盒子模型
  4. 布局标签< div > < span >

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

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

相关文章

uniapp bug解决:uniapp文件查找失败:‘uview-ui‘ at main.js:14

文章目录 报错内容解决方法main.js 文件中 uView 主 JS 库引入 uView 的全局 SCSS 主题文件内容修改引入 uView 基础样式内容修改配置 easycom 内容修改 报错内容 10:50:51.795 文件查找失败&#xff1a;uview-ui at main.js:14 10:59:39.570 正在差量编译... 10:59:43.213 文…

git的一些使用技巧(git fetch 和 git pull的区别,git merge 和 git rebase的区别)

最近闲来无聊&#xff0c;虽然会使用git操作&#xff0c;但是 git fetch 和 git pull 的区别&#xff0c;git merge 和 git rebase的区别只是一知半解&#xff0c;稍微研究一下&#xff1b; git fetch 和 git pull 的区别 git fetch git fetch 是将远程仓库中的改动拉到本地…

ARM架构(三)——AMBA和总线②

本文参考 ARM文档“Introduction to AMBA AXI4 - Arm Developer” 手册可以在ARM官方文档中下载ARM.con&#xff0c;也可以访问我的百度网盘资源 提取码&#xff1a;1234 目录 1. AXI协议概述1.1 多主系统中的AXI1.2 AXI通道1.3 AXI的主要特点 2. 通道传输和事务&#xff08; …

基础IO(重定向与缓冲区)

一、重定向 1、stat() 与 read() 函数 &#xff08;1&#xff09;stat() 函数 path&#xff1a;文件路径 buf&#xff1a;输出型参数&#xff0c;用于返回文件的各种属性。 函数成功返回 0 &#xff0c;失败返回 -1 &#xff08;2&#xff09;read() 函数 fd&#xff1a;文…

使用minio cllient(mc)完成不同服务器的minio的数据迁移和mc基本操作

minio client 前言使用1.拉取minio client 镜像2.部署mc容器3.添加云存储服务器4.迁移数据1.全量迁移2.只迁移某个桶3.覆盖重名文件 5.其他操作1.列出所有alias、列出列出桶中的文件和目录1.1.列出所有alias1.2.列出桶中的文件和目录 2.创建桶、删除桶2.1.创建桶2.2.删除桶 3.删…

Android APK混淆处理方案分析

这里写目录标题 一、前言1.1 相关工具二、Apk 分析2.1 apk 解压文件2.2 apk 签名信息2.3 apk AndroidManifest.xml2.4 apk code三、Apk 处理3.1 添加垃圾文件3.2 AndroidManifest.xml 处理3.3 dex 混淆处理3.4 zipalign对齐3.5 apk 重新签名3.6 apk 安装测试四、总结一、前言 提…

顺序表和单链表的经典算法题

目录 前言 一、基础思想&#xff08;数组&#xff09; 1. 移除元素 2.删除有序元素的重复项 3.合并两个有序数组 二、单链表算法 1.移除链表元素 2.翻转链表 3.合并两个有序的链表 前言 Hello,小伙伴们&#xff0c;今天我们来做一个往期知识的回顾&#xff0c;今天我将…

C++ 设计模式(五)——状态模式

状态模式 序言理解源码 序言 设计模式只是一个抽象的设计模式方法&#xff0c;并不是一个固定使用的搭配&#xff0c;就算是普通switch语句&#xff0c;Map&#xff0c;乃至状态机都是状态模式的其中一种实现方法 状态模式看起来好像和策略模式差不多&#xff0c;主要是其的侧…

【vluhub】log4j注入漏洞 CVE-2021-44228

LOG4介绍 是一个用Java编写的可靠&#xff0c;快速和灵活的日志框架&#xff08;API&#xff09;&#xff0c;它在Apache软件许可下发布 log4j存在远程代码执行漏洞、受影响版本2.x 部署环境 攻击机环境&#xff1a;192.168.3.180 kail环境&#xff1a;192.168.203.12【NAT…

深入理解 OSPF NSSA “P-bit”

** 注&#xff1a;机翻&#xff0c;未校对。** OSPF NSSA P-bit Explained OSPF Forward Address Filtering OSPF 转发地址过滤 In this lesson we’ll take a closer look at the OSPF NSSA “P-bit”. When we redistribute something into an OSPF NSSA area then these …

数据开发/数仓工程师上手指南(一)数仓概念总览

前言 笔者毕业最开始从事的就是大数据开发和数据仓库建设工作&#xff0c;途中曾担任过人工智能工程师和计算机视觉工程师&#xff0c;没想到最后兜兜转转还是回到了最原本的工作数据开发工程师。但很少有写关于本职工作的技术内容输出。 之前笔者撰文内容大部分都是关于算法…

C++入门基础:C++中的循环语句

循环语句是编程语言中用来重复执行一段代码直到满足特定条件的一种控制结构。它们对于处理需要重复任务的场景非常有用&#xff0c;比如遍历数组、累加数值、重复执行某项操作直到满足条件等。 但是在使用循环语句的时候需要注意下哈&#xff0c;有时候一不小心会构成死循环或者…

Ubuntu上安装anaconda创建虚拟环境(各种踩坑版)

之前都是在Windows桌面版进行深度学习的环境部署及训练&#xff0c;今天尝试了一下在Ubuntu上进行环境部署&#xff0c;踩了不少坑&#xff0c;提供一些解决办法给大家避雷。 目录 一、下载和安装anaconda 1. 下载 2. 安装 二、创建虚拟环境 一、下载和安装anaconda 1. …

uniapp入门超详细教程:如何从零开始搭建项目

目录 一、介绍 二、环境搭建 2.1.需要下载的软件 2.1.1 HBuilderX 2.1.2 下载微信开发者工具 2.2 创建uniapp项目 2.2.1 新建项目 2.2.2 项目基本结构 2.2.3 在微信开发者工具上运行 2.2.4 发布微信小程序 三、pages.json 页面路由 四、组件 4.1 视图容器 4.1.1 v…

RabbitMQ入门详解

前言 本篇文章将详细介绍rabbitmq的基本概念知识&#xff0c;以及rabbitmq各个工作模式在springboot中如何使用。 文章目录 介绍 简介 RabbitMQ 核心 生产者与消费者 Exchange Queue 工作模式 简单模式 工作队列模式 发布订阅模式 路由模式 主题模式 SpringBoot中…

扭蛋机潮玩小程序搭建,扭蛋机行业的创新

在当下潮玩市场中&#xff0c;扭蛋机具有盲盒的未知性和惊喜体验感&#xff0c;商品丰富&#xff0c;并且价格相对低廉&#xff0c;获得了极高的人气。年轻人开始对扭蛋机逐渐“上头”&#xff0c;为了扭到喜欢的商品不断地进行复购下单&#xff0c;在这场随机性的扭蛋游戏中&a…

【故障排查】Docker启动Nacos报错:No DataSource set 问题解决

Nacos报错内容 Nacos Server did not start because dumpservice bean construction failure : No DataSource set原因分析 Nacos 配置的是单机模式&#xff0c;使用mysql 进行存储配置文件&#xff0c;Nacos的启动脚本已经配置了MySQL的连接方式&#xff0c;根据错误提示&a…

Window下安装Zookeeper

一、下载 地址&#xff1a;https://archive.apache.org/dist/zookeeper/zookeeper-3.5.6/ 解压&#xff1a;非中文、没有空格目录下 新建data目录&#xff0c;用于存放数据文件 二、配置 进入conf目录&#xff0c;复制zoo_sample.cfg 为zoo.cfg 打开zoo.cfg 修改dataDir&…

江苏科技大学24计算机考研数据速览,有专硕复试线大幅下降67分!

江苏科技大学&#xff08;Jiangsu University of Science and Technology&#xff09;&#xff0c;坐落在江苏省镇江市&#xff0c;是江苏省重点建设高校&#xff0c;江苏省人民政府与中国船舶集团有限公司共建高校&#xff0c;国家国防科技工业局与江苏省人民政府共建高校 &am…

层次分析模型

一、算法简介 决策问题&#xff1a;面临多种方案&#xff0c;需要根据一定的标准选择某一种方案 归一化处理(让指标在同一数量级&#xff0c;且保证在同一指标下其差距不变)&#xff1a; 给指标加上权重&#xff08;加权&#xff09; 科学地设定权重&#xff1f; 二、python…