HTML Day03

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>