做招投标网站,联网站,厦门网站制作专业,秀山微信网站建设文章目录 前言一、正文排版1. 视频标签: video 2. 音频标签: audio 3. 换行标签: br 4. 段落标签 p 5. vscode实现 二、布局1. 盒子模型2. 布局标签 div 和 span 3. VScode实现 三、源代码和运行结果总结 前言
本篇文章是… 文章目录 前言一、正文排版1. 视频标签: video 2. 音频标签: audio 3. 换行标签: br 4. 段落标签 p 5. vscode实现 二、布局1. 盒子模型2. 布局标签 div 和 span 3. VScode实现 三、源代码和运行结果总结 前言
本篇文章是2023年最新黑马JavaWeb企业级开发知识清单03实现正文排版、布局的总结帮助需要学习Web开发的朋友温故而知新。
视频标签 video 、音频标签 audio 换行标签 br 、段落标签 p 盒子模型布局标签 div span 一、正文排版
整个正文部分的排版主要分为这么四个部分 视频 (当前这种新闻页面,可能也会存在音频)文字段落字体加粗图片
1. 视频标签: video
src: 规定视频的urlcontrols: 显示播放控件width: 播放器的宽度height: 播放器的高度
2. 音频标签: audio
src: 规定音频的urlcontrols: 显示播放控件
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 langen
head!-- 字符集为UTF-8 --meta charsetUTF-8!-- 设置浏览器兼容性的 --meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthS, initial-scale1.0title焦点访谈中国底气 新思想夯实大国粮仓_新浪新闻/titlestyleh1 {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
/headbodydiv idcenterimg src../img/news_logo.png a hrefhttp://gov.sina.com.cn/ target_self新浪政务/a 正文!-- 方式三外联样式 --h1焦点访谈底气 新思想夯实大国粮仓/h1hr!-- span/span标签无意义只是用来组合一行的元素的 --!-- 可以把一行的元素单独切割方便单独修改 --span idtime2023年03月02日 21:50/span span a hrefhttps://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml target_blank央视网/a /spanhr!-- 正文 --!-- 视频 --video src../video/1.mp4 controls width950px/video !-- 音频 --!-- audio src../audio/1.mp3 controls/audio --!-- 用段落标签把正文每一个段都包裹起来 --pstrong重点内容/strong正文1/pp正文2/pimg src../img/1.jpgp正文3/pimg src../img/2.jpgp正文4/pp idplast责任编辑XXX/p/div
/body
/html总结
本篇文章是2023年最新黑马JavaWeb企业级开发知识清单03实现正文排版、布局的总结帮助需要学习Web开发的朋友温故而知新。
视频标签 video 、音频标签 audio 换行标签 br 、段落标签 p 盒子模型布局标签 div span
