本文详细介绍了HTML与CSS的基础知识，包括HTML用于网页结构和内容的标记、CSS控制样式和布局的方法，以及如何使用视频、音频、段落、文本加粗和换行标签进行正文排版，以及盒模型和div、span在布局中的应用。
🔥博客主页： 【小扳_-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>最终结果：
908
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
