HTML+CSS基础——基础标签（有序列表、无序列表、定义列表）

最新推荐文章于 2024-08-23 18:41:09 发布

张謹礧

最新推荐文章于 2024-08-23 18:41:09 发布

阅读量641

点赞数 15

分类专栏： HTML+CSS基础——标签文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_66547608/article/details/135240508

版权

HTML+CSS基础——标签专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<html>
  <head>
	<title>List</title>
  </head>
  <body>
	<h1>Scrambled Eggs</h1>
	<p>Eggs are one of my favorite foods.Here is a recipe for deliciously rich scrambled eggs.</p>
	<h2>Ingredients</h2>
	<ur>
	   <li> 2 eggs</li>
	   <li>1tbs butter</li>
	   <li>2tbs cream</li>
	</ur>
	<h2>Method</h2>
	<ol>
	   <li>Melt butter in a frying pan over a medium heart</li>
	   <li>Gently mix the eggs and cream in a bowl</li>
	   <li>Once butter has melted add cream and eggs</li>
	   <li>Using a spatual fold the eggs from the edge of the pan to the center every 20 seconds (as if you are making an omelette)</li>
	   <li>When the eggs are still moist remove from the heat (it will continue to cook on the plate until served)</li>
	</ol>
  </body>
</html>

这是一个HTML格式的食谱，内容为炒鸡蛋的制作方法。配料包括2个鸡蛋、1汤匙黄油和2汤匙奶油，其中鸡蛋和奶油需要在碗中轻轻混合。步骤包括在中火热锅上加热黄油、加入鸡蛋和奶油、不断翻动锅边的鸡蛋直到变成滑嫩的状况，并在鸡蛋仍然含有少量水分的时候离开热源（因为它在碟子上仍会继续煮熟），最后按照此方法完成美味的炒鸡蛋。

```
<html>
```
- 这是HTML文档的根元素，包含了整个HTML文档。
```
<head>
  <title>List</title>
</head>
```
- <head>定义了文档的头部部分，包含了文档的元数据。
- <title>指定了文档的标题，这里的标题是"List"。
```
<body>
  <h1>Scrambled Eggs</h1>
  <p>Eggs are one of my favorite foods. Here is a recipe for deliciously rich scrambled eggs.</p>
```
- <body>是文档的主体部分。
- <h1>定义了页面的主标题，显示为"Scrambled Eggs"。
- <p>定义了一个段落，包含了有关鸡蛋的介绍信息。
```
<h2>Ingredients</h2>
<ul>
   <li> 2 eggs</li>
   <li>1tbs butter</li>
   <li>2tbs cream</li>
</ul>
```
- <h2>定义了一个二级标题，显示为"Ingredients"。
- <ul>定义了一个无序列表，用于显示食材列表。
- <li>定义了每个食材的列表项。

<h2>Method</h2>
<ol>
   <li>Melt butter in a frying pan over a medium heat</li>
   <li>Gently mix the eggs and cream in a bowl</li>
   <li>Once butter has melted add cream and eggs</li>
   <li>Using a spatula fold the eggs from the edge of the pan to the center every 20 seconds (as if you are making an omelette)</li>
   <li>When the eggs are still moist remove from the heat (it will continue to cook on the plate until served)</li>
</ol>

<h2>定义了另一个二级标题，显示为"Method"。
<ol>定义了一个有序列表，用于展示烹饪步骤。
<li>定义了每个步骤的列表项。

<html>：这是整个HTML文档的根元素，表示此代码块是一个HTML文档。
<head>：这个标签包含了关于文档的元数据，如标题（<title>标签中的内容）和其他引用的外部资源（如CSS和JavaScript）。
<title>：这个标签用于设置文档的标题，通常会显示在浏览器的选项卡或书签中。
<body>：这是HTML文档的主体部分，包含了要显示在浏览器中的内容。
<h1>：这是一个一级标题的标签，用于显示主要的标题文本，对应这里的"Scrambled Eggs"。
<p>：这是一个段落标签，用于包含和显示文本内容，对应这里的"Eggs are one of my favorite foods. Here is a recipe for deliciously rich scrambled eggs."。
<h2>：这是一个二级标题的标签，用于显示副标题，对应这里的"Ingredients"和"Method"。
<ul>：这是一个无序列表标签，用于包含和显示无序列表的项目。
<li>：这是一个列表项标签，用于定义和显示列表中的每个项目，对应这里的"2 eggs"、“1tbs butter"和"2tbs cream”。
<ol>：这是一个有序列表标签，用于包含和显示有序列表的项目。
<li>：同样是列表项的标签，但这里的列表项是有编号的，对应这里的制作步骤。