🔥博客主页: 【小扳_-CSDN博客】
❤感谢大家点赞👍收藏⭐评论✍
文章目录
1.0 HTML 与 CSS 概述
HTML(HyperText Markup Language) 和 CSS(Cascading Style Sheets) 是构建网页的两种基本技术。
HTML:HTML 是一种标记语言,用于描述网页的结构和内容。通过使用 HTML 标签,可以定义网页中的文本、图像、链接等元素的结构和排版。HTML 提供了一种标准化的方式来创建网页内容,并且是构建网页的基础。
CSS:CSS 是一种样式表语言,用于控制网页的外观和布局。通过使用 CSS 样式规则,可以定义网页元素的样式,如字体、颜色、大小、间距、布局等。CSS 可以将样式和结构分离,使得网页设计更加灵活和易于维护。
简单来说,HTML 负责网页中有什么内容,而 CSS 负责网页长什么样子的。
举个例子,HTML:一只青蛙四条腿两只眼;CSS:一只大大的青蛙,四条长长的腿,两只清澈的眼。
2.0 HTML - 正文排版
正文排版需要用到视频标签、音频标签、段落标签、文本加粗标签,对于图像标签,在介绍标题排版已经介绍了图像标签了,有需要的可以去了解一下。
2.1 视频标签
<video> 标签用于在网页中嵌入视频内容。通过 <video> 标签,可以向网页添加视频并控制其播放、暂停、音量等功能。
<video src="" controls="controls" width="" height=""></video>
属性:
src:规定视频的 url (资源路径)
controls:显示播放控件
width:播放器的宽度
height:播放器的高度
2.2 音频标签
<audio> 标签用于在网页中嵌入音频内容。通过 <audio> 标签,可以向网页添加音频并控制其播放、暂停、音量等功能。
<audio src="" controls="controls" width="" height=""></audio>
属性:
src:规定视频的 url (资源路径)
controls:显示播放控件
width:播放器的宽度
height:播放器的高度
2.3 段落标签
段落标签是用来定义文本段落的 HTML 标签之一,常用的段落标签是 <p> 。段落标签用于将文本内容分割成逻辑上的段落,
<p> 标签:用于定义一个段落。通常在段落的开头和结尾使用 <p> 标签,以将文本内容分割成段落。
示例:<p> 这是一个段落。</p> <p> 这是另一个段落。</p>
段落标签会自动在段落前后添加一些空白间距,使得文本更易于阅读。
段落标签通常用于包裹文本内容,但也可以包含其他 HTML 元素,如链接、图片等
2.4 文本加粗标签
文本加粗用到 <b> 或者 <strong> 两者的效果都是一样的,将文本加粗。
<b>文本1</b> <strong>文本2</strong>
2.5 换行标签
文本中用到换行相当于 “回车” , <br> 一个标签换行一次。
<br><br>
两个 <br> 标签相当于按了两个回车,换行两次。
2.6 CSS 样式
text-indent:设置首行缩进,比如 text-indent: 35px
line-height:设置行高,比如 line-height:30 px
text-align:设置文本对齐方式
需要注意,在 HTML 中无论输入多少个空格,只会显示一个。可以使用空格占位符:
2.7 实现正文排版
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>《白头神探》电影拍新版 《忍者神龟2》定档</title> <style> h1 { color: #4d4553; } #id1{ color: #968D92; font-size: 13px; } a { color: black; text-decoration: none; } #id2{ text-indent: 35px; } .cls{ text-indent: 35px; } </style> </head> <body> <!-- 标题 --> <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png"> <a href="https://ent.sina.com.cn/" target="_self">新浪娱乐</a> > <a href="https://ent.sina.com.cn/film/">电影宝库</a> > <a href="https://ent.sina.com.cn/hollywood/">好莱坞</a> > 正文 <h1>《白头神探》电影拍新版 《忍者神龟2》定档</h1> <hr> <span id="id1">2024年03月07日 06:40</span> <span> <a href="https://ent.sina.com.cn/hollywood/">新浪娱乐</a></span> <hr> <!-- 正文 --> <img src="https://k.sinaimg.cn/n/ent/763/w1000h563/20240307/d7b2-76fdfe77fb6652b354231fdd103e0028.jpg/w700d1q75cms.jpg?by=cms_fixed_width" width="600px"> <p > <b>《忍者神龟:变种大乱斗》</b></p> <p class="cls"> 新浪娱乐讯 北京时间3月7日消息,据外国媒体报道,派拉蒙多部新片宣布定档: </p> <p class="cls"> ·重启版经典喜剧电影《白头神探》宣布定档,明年7月28日北美上映。 </p> <p class="cls"> 连姆·尼森主演,阿吉瓦·沙弗尔(《奇奇与蒂蒂》《新邻里联防》)执导,丹·格雷戈尔&道格·曼德 <br>(《老爸老妈的浪漫史》《奇奇与蒂蒂》)编剧,塞思·麦克法兰等担任制片人。影片剧情未知,主角可能 <br> 是原男主弗兰克·卓本中尉的儿子。 </p> <p class="cls"> 1988年原版由大卫·扎克执导, 莱斯利·尼尔森、普瑞希拉·普雷斯利、里卡多·蒙特尔班、乔治·肯尼迪,<br> 讲述白头神探弗兰克在痛揍了一帮恐怖分子后,又挫败一起谋杀英国女王的阴谋。 </p> <p class="cls"> ·动画电影《忍者神龟2》定档2026年10月9日上映。《忍者神龟:变种大乱斗》去年暑期推出,全球<br>票房1.67亿美元,包括北美5300万美元。 </p> </body> </html>
运行结果:
3.0 HTML - 正文布局
从上面的图可以看出来,整体是靠左边的,整体布局不是居中的,那么就需要盒子模型了。盒子模型是用来描述元素在页面上所占空间的模型。每个 HTML 元素都被看作是一个矩形的盒子,这个盒子包括内容区域、内边距、边框和外边距。这些部分组合在一起形成了元素的盒子模型。
盒子模型的主要组成部分包括:
内容区域(Content):元素的实际内容,如文本、图片等。内容区域的大小由元素的宽度(width)和高度(height)属性来确定。
内边距(Padding):内容区域与边框之间的空白区域。内边距可以通过 CSS 的 padding 属性来设置,用于控制内容与边框之间的距离。
边框(Border):内边距外部的边框线,用于包围内容区域。边框可以通过 CSS 的 border 属性来设置,包括边框的样式、宽度和颜色等。
外边距(Margin):边框外部的空白区域,用于控制元素与其他元素之间的距离。外边距可以通过 CSS 的 margin 属性来设置。
如图:
3.1 布局标签
实际开发网页中,会大量频繁的使用 div 和 span 这两个没有语义的布局标签。
特点:
div 标签:
1)一行只显示一个(独占一行)
2)宽度默认是父元素的宽度,高度默认由内容撑开
3)可以设置宽高(width、height)
span 标签:
1)一行可以显示多个
2)宽度与高度默认由内容撑开
3)不可以设置宽高
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 200px; height: 200px; box-sizing: border-box; /* 指定 width height 为盒子的宽高 */ background-color: aquamarine; /* 背景色 */ padding: 20px; /* 内边距:上,右,下,左 */ border: 10px black solid; /* 边框:宽度,颜色,线条类型 */ margin: 30px; /* 外边距:上,右,下,左 */ } </style> </head> <body> <div> A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div> </body> </html>
box-sizing:指定的是整体盒子的大小为 200 px * 200 px ,如果没有指定盒子大小,那么 200 px * 200 px 就是内容 content 的大小。
需要注意的是,如果 上,右,下,左的值一样,那么可以省略,只写一个就可以了。如果只有两个值,表示的是:上下,左右。
运行结果为:
3.2 实现正文布局
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>《白头神探》电影拍新版 《忍者神龟2》定档</title> <style> h1 { color: #4d4553; } #id1{ color: #968D92; font-size: 13px; } a { color: black; text-decoration: none; } #id2{ text-indent: 35px; } .cls{ text-indent: 35px; } #center{ width: 60%; margin: auto; } #pp{ text-align: center; } </style> </head> <body> <div id="center"> <!-- 标题 --> <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png"> <a href="https://ent.sina.com.cn/" target="_self">新浪娱乐</a> > <a href="https://ent.sina.com.cn/film/">电影宝库</a> > <a href="https://ent.sina.com.cn/hollywood/">好莱坞</a> > 正文 <h1>《白头神探》电影拍新版 《忍者神龟2》定档</h1> <hr> <span id="id1">2024年03月07日 06:40</span> <span> <a href="https://ent.sina.com.cn/hollywood/">新浪娱乐</a></span> <hr> <!-- 正文 --> <img src="https://k.sinaimg.cn/n/ent/763/w1000h563/20240307/d7b2-76fdfe77fb6652b354231fdd103e0028.jpg/w700d1q75cms.jpg?by=cms_fixed_width" width="800px"> <p id="pp"> <b>《忍者神龟:变种大乱斗》</b></p> <p class="cls"> 新浪娱乐讯 北京时间3月7日消息,据外国媒体报道,派拉蒙多部新片宣布定档: </p> <p class="cls"> ·重启版经典喜剧电影《白头神探》宣布定档,明年7月28日北美上映。 </p> <p class="cls"> 连姆·尼森主演,阿吉瓦·沙弗尔(《奇奇与蒂蒂》《新邻里联防》)执导,丹·格雷戈尔&道格·曼德 (《老爸老妈的浪漫史》《奇奇与蒂蒂》)编剧,塞思·麦克法兰等担任制片人。影片剧情未知,主角可能是原男主弗兰克·卓本中尉的儿子。 </p> <p class="cls"> 1988年原版由大卫·扎克执导, 莱斯利·尼尔森、普瑞希拉·普雷斯利、里卡多·蒙特尔班、乔治·肯尼迪, 讲述白头神探弗兰克在痛揍了一帮恐怖分子后,又挫败一起谋杀英国女王的阴谋。 </p> <p class="cls"> ·动画电影《忍者神龟2》定档2026年10月9日上映。《忍者神龟:变种大乱斗》去年暑期推出,全球票房1.67亿美元,包括北美5300万美元。 </p> </div> </body> </html>
最终结果: