html5&css&js代码 006 文章排版《桃花源记》
- 一、代码
- 二、解释
- 页面整体结构:
- 头部信息:
- CSS样式:
- 文章内容:
这段代码定义了一个网页,用于展示文章《桃花源记》的内容。网页使用了CSS样式来定义各个部分的显示效果。呈现了《桃花源记》这篇文章的网页版面,使得文章内容更加美观、易读。
一、代码
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>/* 通用样式 */body {font-family: "宋体", sans-serif;line-height: 1.6;text-align: center;margin: 0;padding: 2rem;}/* 文章标题样式 */.title {font-size: 3rem;font-weight: bold;margin-bottom: 1rem;color: #333;}/* 作者及朝代样式 */.author-period {font-size: 1.5rem;color: #666;margin-bottom: 2rem;}/* 正文样式 */article {text-align: left;text-indent: 2em; /* 首行缩进2个字符 */color: #333;margin-left: 20%;margin-right: 20%;}/* 正文段落样式 */p {text-indent: 2em;}</style><title>《桃花源记》 - 陶渊明</title>
</head>
<body>
<div class="container"><h1 class="title">桃花源记</h1><p class="author-period">东晋 陶渊明(约365—427年)</p><!-- 此处放置《桃花源记》正文 --><article><p>晋太元中,武陵人捕鱼为业。缘溪行,忘路之远近。忽逢桃花林,夹岸数百步,中无杂树,芳草鲜美,落英缤纷,渔人甚异之。复前行,欲穷其林。</p><p>林尽水源,便得一山,山有小口,仿佛若有光。便舍船,从口入。初极狭,才通人。复行数十步,豁然开朗。土地平旷,屋舍俨然,有良田、美池、桑竹之属。阡陌交通,鸡犬相闻。其中往来种作,男女衣着,悉如外人。黄发垂髫,并怡然自乐。</p><p>见渔人,乃大惊,问所从来。具答之。便要还家,设酒杀鸡作食。村中闻有此人,咸来问讯。自云先世避秦时乱,率妻子邑人来此绝境,不复出焉,遂与外人间隔。问今是何世,乃不知有汉,无论魏晋。此人一一为具言所闻,皆叹惋。余人各复延至其家,皆出酒食。停数日,辞去。此中人语云:“不足为外人道也。”</p><p>既出,得其船,便扶向路,处处志之。及郡下,诣太守,说如此。太守即遣人随其往,寻向所志,遂迷,不复得路。</p><p>南阳刘子骥,高尚士也,闻之,欣然规往。未果,寻病终,后遂无问津者。</p></article>
</div>
</body>
</html>
二、解释
这段HTML代码定义了一个网页,用于展示文章《桃花源记》的内容。网页使用了CSS样式来定义各个部分的显示效果。
具体功能如下:
页面整体结构:
使用<!DOCTYPE html>
声明文档类型,<html>
标签包裹整个网页内容,<head>
标签包含网页头部信息<body>
标签包含网页主体内容。
头部信息:
在<head>
标签内,定义了网页的标题(<title>
),设置了字符编码(<meta charset="UTF-8">
),以及视口设置(<meta name="viewport" content="width=device-width, initial-scale=1.0">
)等。
CSS样式:
在<head>
标签内,使用<style>
标签定义了页面的CSS样式。这些样式包括:页面的通用样式(字体、行高、对齐方式等)、文章标题样式、作者及朝代样式、正文样式和正文段落样式。
文章内容:
在<body>
标签内,使用<div>
标签创建了一个容器,其中包含一个标题(<h1>
)显示文章名,一个段落(<p>
)显示作者及朝代信息,以及一个<article>
标签包裹的正文内容。正文内容分为多个段落(<p>
),使用了首行缩进的样式。
总结:这段HTML代码通过结构和样式的方式,呈现了《桃花源记》这篇文章的网页版面,使得文章内容更加美观、易读。