当前位置：首页 > article >正文

HTML Day03

article 2025/6/3 8:05:46

Day03

0. 引言
1. CSS
- 1.1 CSS的3种使用方法
- 1.2 内联样式
- 1.3 内部样式表
- 1.4 外部CSS文件
2. 图像
3. 表格
- 3.1单元格间距和单元格边框
4. 列表
- 4.1 有序表格的不同类型
- 4.2 不同类型的无序表格
- 4.3 嵌套列表
5. 区块
6. 布局
- 6.1 div布局
- 6.2 表格布局

0. 引言

HELLO ^ _ ^大家好，今天是HTML专栏一刷第三天（连续一个月，断一次评论区有人发现了直接v100，不过你们肯定没有机会的😏），今天的学习内容有CSS，图像，表格，列表，区块，布局和表单。说真的HTML的内容实在是太多了，要灵活运用的话必须把基础打牢，换句话说就是死记这些知识点。废话不多说，直接开始吧！

1. CSS

定义：CSS (Cascading Style Sheets)是用于渲染HTML元素标签的样式。

先来个开胃菜，看看如何使用CSS对HTML进行格式化。
代码：

<!DOCTYPE html>  	<!声明文档类型为 HTML5，告诉浏览器以 HTML5 标准解析页面。>
<html> 				<!HTML 文档的根标签，所有其他 HTML 元素都包含在其中。>
<head>				<!头部标签，包含文档元数据（如字符编码、页面标题），不直接显示在页面上。>
<meta charset="utf-8"> 			<!设置页面字符编码为 UTF-8，确保中文等特殊字符能正确显示。>
<title>菜鸟教程(runoob.com)</title>			<!设置浏览器标签页和收藏夹中显示的页面标题><style type="text/css">       <!css部分>
h1 {color:red;}
p {color:blue;}
</style>  					<!css部分结束></head><body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body></html>

预览效果：

说明： 显然，此代码在 $< h e a d >$ 部分新增了一个 $< s t y l e >$ 标签。在 $< s t y l e >$ 标签内对标签 $< h 1 >, < p >$ 进行了添加颜色渲染。然后在HTML的主体部分的对应的标签 $< h 1 >, < p >$ 内的文本就被格式化为 $< s t y l e >$ 预处理的效果。

1.1 CSS的3种使用方法

内联样式
在HTML元素中使用"style"属性。
内部样式表
在HTML文档头部 $< h e a d >$ 区域使用 $< s t y l e >$ 元素来包含CSS。
外部引用
使用外部CSS文件。

最好的方式是通过外部引用CSS文件（为什么？后面再说）。

下面两个样式标签非常重要常见：

$< s t y l e >$ :定义文本样式。
$< l ink >$ :定义资源引用地址。

1.2 内联样式

什么时候适用？

当需要用在个别元素身上的时候，就使用内联样式。

怎么用？

在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。

示例1:

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

参数说明：

color:blue：颜色，蓝色。
margin-left:20px: 设置元素左外边距，在元素左边创建一个20像素的空包区域。

示例2:

<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>

参数说明：

background-color:yellow：背景颜色，黄色。
background-color:red：背景颜色，红色。
background-color:green：背景颜色，绿色。
图片预览：

还有一些常见的样式属性:

样式属性名	作用
font_family	定义字体类型，比如 font_family=arial 表示无衬线字体
font_size	字体大小
text-align	文字对齐，比如 text-align:center 表示字体居中对齐

1.3 内部样式表

什么时候适用？

当需要用在很多元素（比如一整个HTML文件）身上的时候，就使用内联样式表。

怎么用？

在 $< h e a d >$ 部分通过 $< s t y l e >$ 标签定义内部样式表

示例1
这也是开头那个示例。

<!DOCTYPE html>  	<!声明文档类型为 HTML5，告诉浏览器以 HTML5 标准解析页面。>
<html> 				<!HTML 文档的根标签，所有其他 HTML 元素都包含在其中。>
<head>				<!头部标签，包含文档元数据（如字符编码、页面标题），不直接显示在页面上。>
<meta charset="utf-8"> 			<!设置页面字符编码为 UTF-8，确保中文等特殊字符能正确显示。>
<title>菜鸟教程(runoob.com)</title>			<!设置浏览器标签页和收藏夹中显示的页面标题><style type="text/css">       <!css部分>
h1 {color:red;}
p {color:blue;}
</style>  					<!css部分结束></head><body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body></html>

参数说明：

type:声明标签内的内容属于哪种资源类型。
style type="text/css"：表明内容是 CSS 代码。
h1 {color:red;}: 将 HTML 页面中所有的一级标题（ $< h 1 >$ 标签）文本颜色设置为红色。
p {color:blue;}:将 HTML 页面中所有的一级标题（ $< p >$ 标签）文本颜色设置为蓝色。

预览效果：

1.4 外部CSS文件

什么时候适用？

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

怎么用？

创建CSS文件。（如 styles.css）
在HTML引入 $< h e a d >$ 标签
同级目录：href="styles.css"
子目录：href="css/styles.css"
上级目录：href="../styles.css"

示例

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

参数说明：

link: 此标签用于引入外部资源，例如CSS，图标，字体等等。
rel: 此属性高速浏览器引入资源的类型，比如 rel=stylesheet 告诉浏览器引入资源是CSS代码。如果rel=icon，那么浏览器会将引入资源视为图标。rel=preload 为预加载文件
href:引入资源的类型，这里是表示CSS文件的相对路径,mystyle.css等价./mystyle.css
type:声明标签内的内容属于哪种资源类型。

2. 图像

介绍：在 HTML 中，图像由 $< im g >$ 标签定义。 $< im g >$ 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。 $src$ 指 “source”。源属性的值是图像的 $U R L$ 地址。

几个属性

属性	描述
src	包含图像的URL地址
alt	alt 属性为预备的替换文本。在浏览器无法载入图像时，替换文本属性告诉读者失去的信息
width	指定图像宽度
height	指定图像高度

示例:

<body><h4>默认对齐的图像 (align="bottom"):</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" width="32" height="32"> 这是一些文本。</p><h4>图片使用 align="middle":</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32">这是一些文本。</p><h4>图片使用 align="top":</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32">这是一些文本。</p><p><b>注意:</b>在HTML 4中 align 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。</p></body>

效果预览：
在这里插入图片描述

3. 表格

介绍：HTML表格是用于展示结构化数据的元素，用 $< t ab l e >$ 标签来定义。
每个表格有若干行，用 $< t r >$ 来定义。每一行又被分割成若干单元格，用 $< t d >$ 来定义，表格可以包含标题行（ $< t h >$ ）。
先将常用的标签列举一下：

标签	描述
$< t ab l e >$	定义表格
$< t h >$	定义表格的表头，也就是列标题
$< t r >$	定义表格的行
$< t d >$	定义表格单元，就是一行的一部分
$< c a pt i o n >$	定义表格标题
$< co l g ro u p >$	定义表格列的组
$< co l >$	定义用于表格列的属性
$< t h e a d >$	定义表格的页眉
$< t b o d y >$	定义表格的主体
$< t f oo t >$	定义表格的页脚

示例1：

<body>
<p>
每个表格从一个 table 标签开始。 
每个表格行从 tr 标签开始。
每个表格的数据从 td 标签开始。
</p><h4>一列:</h4>                 <!4级标题>
<table border="1">  			<!table是表格标签，整个表格都在这里面编写。border是边框复合属性，在这里数值越大，边框越粗>
<tr>							<!tr是一行的标签，一行内的内容又分为若干个表格单元，也就是td，一行有几个单元，就有几个td><td>100</td>
</tr>
</table><h4>一行2列:</h4>
<table border="10">
<tr><td>100</td><td>200</td>
</tr>
</table><h4>两行2列:</h4>
<table border="1">
<tr><td>100</td><td>200</td>
</tr>
<tr><td>400</td><td>500</td>
</tr>
</table></body>

图片预览

在这里插入图片描述

示例解释：

border：是一个复合属性，用于定义元素的边框样式。不是HTML元素，是用于修饰元素的视觉效果。它的主要功能是设置：边框厚度（2px），边框样式（solid实线，dashed虚线），边框颜色（red，blue等）。
td：表格单元元素，是表格的最小单位，可以看作表格是由一个个表格单位构成。一行有若干个表格单位。
tr: 定义表格的行。
table:定义整个表格。

示例2：

<table border="1"><tr><th>Header 1</th>      <!th定义表格的表头><th>Header 2</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr>
</table>

图片预览

页面标题

示例解释：

<th>:定义表格头。
<tr>:定义表格的行。

示例3：

<body>
<table border="1">
<tr>	<!第1行开始><td><p>这是一个段落</p><p>这是另一个段落</p></td><td>这个单元格包含一个表格:<table border="1"><tr>			`<!第1行开始><td>A</td><td>B</td></tr>		<!第1行end><tr>        <!第二行开始><td>C</td><td>这个单元格包含一个表格:<table border="1"><tr><td>A</td><td>B</td></tr><tr><td>c</td><td>d</td>	</tr></table></td></tr>	<!第二行end></table></td>
</tr>		<!第二行end><tr><td>这个单元格包含一个列表<ul><li>apples</li><li>bananas</li><li>pineapples</li></ul></td><td>HELLO</td>
</tr>
</table></body>
</html>

图片预览
在这里插入图片描述

说明：
重点在于表格的套娃的理解，每一个<td>为一个表格单元，在一个单元里面，又可以内嵌一个新的表格，这样迭代下去。所以表格里面可以有别的表格，别的表格里面可以有别的表格的表格，如此如此。。。。。

在这里插入图片描述

3.1单元格间距和单元格边框

还有两个很重要的属性，分别是单元格间距（Cell Spacing）和单元格边距（Cell Padding）。

Cell Spacing
相邻单元格之间的空白距离。通过 $< t ab l e >$ 标签的cellspacing属性来控制。
Cell Padding
单元格内容与单元格边框的距离。通过 $< t ab l e >$ 标签的cellpadding属性来控制。

示例4：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body><h4>没有单元格边距:</h4>
<table border="1">
<tr><td>First</td><td>Row</td>
</tr>   
<tr><td>Second</td><td>Row</td>
</tr>
</table><h4>单元格边距为100:</h4>
<table border="1" 
cellpadding="100">
<tr><td>First</td><td>Row</td>
</tr>   
<tr><td>Second</td><td>Row</td>
</tr>
</table><br/><br/><h4>没有单元格间距:</h4>
<table border="1">
<tr><td>First</td><td>Row</td>
</tr>
<tr><td>Second</td><td>Row</td>
</tr>
</table><h4>单元格间距="100":</h4>
<table border="1" cellspacing="100">
<tr><td>First</td><td>Row</td>
</tr>
<tr><td>Second</td><td>Row</td>
</tr>
</table></body>
</html>

效果预览：
在这里插入图片描述
对于这两个属性，我将值取了两个极端以区分两个属性的区别。所以就不再重复了。

4. 列表

介绍：HTML列表分为无序，有序，和自定义列表三种形式。
下面是列表标签：

标签	描述
$< o l >$	定义有序列表
$< u l >$	定义无序列表
$< l i >$	定义列表项，每个列表项始于`<li>`
$< d l >$	定义列表
$< d t >$	自定义列表项目，每个自定义列表项以 `<dt>` 开始
$< dd >$	定义自定列表项的描述，每个自定义列表项的描述以 `<dd>` 开始。

提示：列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

用一个代码片简单展示三种表格的使用方式：

</head> 
<body><h4>无序列表:</h4>   <!4级标题>
<ul>               <!无序列表的开始><li>Coffee</li>    <!列表项的开始><li>Tea</li><li>Milk</li>
</ul><h4>有序列表:</h4>
<ol>                <!有序列表的开始><li>Coffee</li><li>Tea</li><li>Milk</li>
</ol>	<h4>自定义列表:</h4>
<dl>                         <!自定义列表的开始>
<dt>Coffee</dt>       		<!自定义列表项>
<dd>- black hot drink</dd>		<!自定义列表项的描述>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl></body>
</html>

解释一下：

<ul>：无序列表的开始标签，列表的所有描述都应该在此框架里面。
<ol>：有序列表的开始标签，列表的所有描述都应该在此框架里面。
<dl>：自定义列表的开始标签，列表的所有描述都应该在此框架里面。
<li>：列表项的开始标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。是不是又有套娃的感觉😁
<dt>：自定义列表项的开始标签。
<dd>：对自定义列表项的描述开始标签。

效果预览：

在这里插入图片描述

知道最基本的表格制作方法，下面是一些表格的更具体操作。

4.1 有序表格的不同类型

介绍：有序表格的顺序一般来说是1，2，3，，，HTML提供更多的方式来顺序记录。

标签<ol>的type属性是一个HTML属性，提供了以下几个有效值。

值	效果
1	1，2，3，，
A	A，B，C，，
a	a，b，c，，
I	I. II. III. … (大写罗马数字）
i	i. ii. iii. …（小写罗马数字）

4.2 不同类型的无序表格

介绍：同上，无序列表的列表项图标也可以不一样。

标签<ul>的style属性提供了以下几个有效值。

值	效果
disc	● 列表项
circle	○ 列表项
square	■ 列表项
none	不显示任何标记

示例代码：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body><p><b>注意：</b> 在 HTML 4中 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表如下：</p><h4>圆点列表：</h4>
<ul style="list-style-type:disc"><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li>
</ul>  <h4>圆圈列表：</h4>
<ul style="list-style-type:circle"><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li>
</ul>  <h4>正方形列表：</h4>
<ul style="list-style-type:square"><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li>
</ul></body>
</html>

效果预览：
在这里插入图片描述

4.3 嵌套列表

介绍：这个就是套娃，和图表一样的做法，在列表项里面嵌套列表项。
示例：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body><h4>嵌套列表：</h4>
<ul style="list-style:square"><li>第1行</li><li>第2行<ul><li>第2.1行</li><ul style="list_style:disc"><li>第2.1.1行</li><li>第2.1.2行</li></ul><li>第2.2行</li></ul></li><li>第三行</li>
</ul></body>
</html>

效果预览：
在这里插入图片描述

5. 区块

介绍：HTML元素如果都放在一起会杂乱无章，所以通常将元素分为一个一个区域，即区块。
大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）。内联元素在显示时通常不会以新行开始。

下面是一些常见的区块元素：

标签	描述
$< d i v >$	通用容器，无特殊语义，用于布局划分（最常用）
$< p >$	段落，自动在前后添加换行（默认有上下 margin）。
$< h 1 > < h 6 >$	标题，从大到小（默认加粗，有不同的 font-size）。
$< u l >$	无序列表（圆点 / 方块标记）。
$< o l >$	有序列表（数字 / 字母标记）。
$< l i >$	列表项，必须嵌套在 `<ul>` 或 `<ol>` 中。
$< p re >$	预格式化文本（保留空格和换行，通常使用等宽字体）
$< b l oc k q u o t e >$	块级引用，文本通常会缩进。
$< f or m >$	表单容器，用于用户输入。
$< t ab l e >$	表格，包含行（`<tr>`）和单元格（`<td>`）。
$< a dd ress >$	联系信息（通常斜体显示）。
$< h e a d er >$	页面或章节的头部（HTML5 语义标签）。
$< f oo t er >$	页面或章节的底部（HTML5 语义标签）。
$< main >$	页面的主要内容（HTML5 语义标签，一个页面只能有一个）。
$< sec t i o n >$	文档中的章节（HTML5 语义标签）。
$< a r t i c l e >$	独立的内容（如博客文章、评论）。
$< a s i d e >$	侧边栏或补充信息（通常与主要内容无关）。

下面是块级元素的特征：

独占一行：无论内容有多少，都会从新的一行开始，并占据父元素¹的全部宽度。
可以设置宽和高：可以通过CSS设置width，height，margin，padding。
可以嵌套别的元素：可以嵌套其他区块元素或内联元素（如 <a>、<span>）。

6. 布局

介绍：就是网页的布局罗，字面意思。
布局标签：

标签	描述
`<div>`	定义文档区块，块级(block-level)
`<span>`	定义 span，用来组合文档中的行内元素。

6.1 div布局

先说明2个属性

style： style 是 HTML 中的内联样式属性。它允许你直接在 HTML 标签中定义元素的 CSS 样式，而不必创建外部 CSS 文件或内部 <style> 标签。
id：在 HTML 中，id 属性用于为元素提供唯一标识符

示例：

<body><div id="container" style="width:500px"><div id="header" style="background-color:#FFA500;">       <!此大区块的id是header，背景样式颜色是#FFA500编号对应的颜色><h1 style="margin-bottom:10;">主要的网页标题</h1>      <!在CSS中，margin-bottom 是一个用于设置元素底部外边距的属性></div><div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">    <!此区块的id是menu，样式为：背景是#FFD700，高200像素，宽100像素，区块往左浮动>                                          <b>菜单</b>    <!加粗><br>           <!换行>HTML<br>CSS<br> JavaScript</div><div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">内容在这里</div><div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">    <!clear强制元素不与之前的浮动元素在同一行，从而恢复正常的文档流布局，text-align:center是文本布局在中央>
版权 © runoob.com</div>
</div>
</body>

说明：

margin_bottom: margin-bottom 是一个用于设置元素底部外边距的属性
float: 用于将元素从正常文档流中移出，使其向左或向右浮动，周围的文本和内联元素会环绕它。常用于创建多列布局。
clear: 用于指定元素的哪一侧不允许有浮动元素，强制其移至浮动元素下方。常用于修复浮动导致的布局塌陷问题。
text-align: 用于控制块级元素内文本的水平对齐方式（左对齐、右对齐、居中或两端对齐）。

效果预览：

在这里插入图片描述

6.2 表格布局

用div布局和用表格布局都可以做到类似的效果。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body><table width="500" border="0" cellspacing="0">    <!cellspacing要设0，不然表格之间有间隙>
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>主要的网页标题</h1>
</td>
</tr><tr>
<td style="background-color:#FFD700;width:100px;vertical-align:top;">    <!vertical_align控制表格单元格内容的垂直对齐方式>
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;vertical-align:top;">
内容在这里</td>
</tr><tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 © runoob.com</td>
</tr>
</table></body>
</html>

效果预览：

在这里插入图片描述

今日任务完结撒花！！😘😘
在这里插入图片描述
点赞加关注，学习不迷路！！

如果a元素包含b，那么a就是b的父元素。 ↩︎

Day03

0. 引言

1. CSS

1.1 CSS的3种使用方法

1.2 内联样式

1.3 内部样式表

1.4 外部CSS文件

2. 图像

3. 表格

3.1单元格间距和单元格边框

4. 列表

4.1 有序表格的不同类型

4.2 不同类型的无序表格

4.3 嵌套列表

5. 区块

6. 布局

6.1 div布局

6.2 表格布局

相关文章：