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

html5cssjs代码 006 文章排版《桃花源记》

news 2026/2/10 16:30:02

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代码通过结构和样式的方式，呈现了《桃花源记》这篇文章的网页版面，使得文章内容更加美观、易读。

相关文章：

html5cssjs代码 006 文章排版《桃花源记》

html5&css&js代码 006 文章排版《桃花源记》 一、代码二、解释页面整体结构&#xff1a;头部信息&#xff1a;CSS样式&#xff1a;文章内容&#xff1a; 这段代码定义了一个网页&#xff0c;用于展示文章《桃花源记》的内容。网页使用了CSS样式来定义各个部分的显示效果…...

编程日记 2024/3/12 12:41:03

勾八头歌之数据科学导论—数据采集实战

一、数据科学导论——数据采集基本概念 第1关&#xff1a;巧妇难为无米之炊 第2关&#xff1a;数据采集概念与内涵 二、数据科学导论——数据采集实战 第1关&#xff1a;单网页爬取 import urllib.request import csv import re# ********** Begin ********** # dataurllib.r…...

编程日记 2024/3/12 12:36:57

微信小程序云开发教程——墨刀原型工具入门（素材面板）

引言 作为一个小白&#xff0c;小北要怎么在短时间内快速学会微信小程序原型设计&#xff1f; “时间紧&#xff0c;任务重”&#xff0c;这意味着学习时必须把握微信小程序原型设计中的重点、难点&#xff0c;而非面面俱到。 要在短时间内理解、掌握一个工具的使用&#xf…...

编程日记 2024/3/12 12:35:56

C#与WPF通用类库

个人集成封装&#xff0c;仓库已公开 NetHelper 集成了一些常用的方法&#xff1b; 如通用的缓存静态操作类、常用的Wpf的ValueConverters、内置的委托类型、通用的反射加载dll操作类、Wpf的ViewModel、Command、Navigation、Messenger、部分常用UserControls(可绑定的Passwo…...

编程日记 2024/3/12 12:33:53

http协议中的强缓存与协商缓存，带图详解

此篇抽自本人之前的文章&#xff1a;http面试题整理 。 别急着跳转&#xff0c;先把缓存知识学会了~ http中的缓存分为两种&#xff1a;强缓存、协商缓存。 强缓存 响应头中的 status 是 200&#xff0c;相关字段有expires&#xff08;http1.0&#xff09;,cache-control&…...

编程日记 2024/3/12 12:31:51

蓝桥杯2019年第十届省赛真题-修改数组

查重类题目&#xff0c;想到用标记数组记录是否出现过 但是最坏情况下可能会从头找到小尾巴&#xff0c;时间复杂度O(n2)&#xff0c;数据范围106显然超时 再细看下题目&#xff0c;我们重复进行了寻找是否出现过&#xff0c;干脆把每个元素出现过的次数k记录下来&#xff0c;直…...

编程日记 2024/3/12 12:29:50

【Python使用】python高级进阶知识md总结第3篇：静态Web服务器-返回指定页面数据,静态Web服务器-多任务版【附代码文档】

python高级进阶全知识知识笔记总结完整教程&#xff08;附代码资料&#xff09;主要内容讲述&#xff1a;操作系统&#xff0c;虚拟机软件&#xff0c;Ubuntu操作系统&#xff0c;Linux内核及发行版&#xff0c;查看目录命令&#xff0c;切换目录命令&#xff0c;绝对路径和相对…...

编程日记 2024/3/12 12:27:48

ELK 日志分析系统

ELK &#xff08;Elasticsearch、Logstash、Kibana&#xff09;日志分析系统的好处是可以集中查看所有服务器日志&#xff0c;减轻了工作量&#xff0c;从安全性的角度来看&#xff0c;这种集中日志管理可以有效查询以及跟踪服务器被攻击的行为。 Elasticsearch 是个开源分布式…...

编程日记 2024/3/12 12:25:46

机器学习模型—逻辑回归

机器学习模型—逻辑回归 逻辑回归是一种用于分类任务的监督机器学习算法，其目标是预测实例属于给定类别的概率。逻辑回归是一种分析两个数据因素之间关系的统计算法。本文探讨了逻辑回归的基础知识、类型和实现。 什么是逻辑回归 逻辑回归用于二元分类，其中我们使用sigmoi…...

编程日记 2024/3/12 12:21:43

​Ubuntu20.04 创建新的用户​

1、了解Linux目录结构 推荐看一下&#xff1a;https://www.runoob.com/linux/linux-system-contents.html Linux支持多个用户进行操作的&#xff0c;这样提高了系统的安全性&#xff0c;也可以多人共用一个系统&#xff0c;不过要注意的是系统中安装的软件相关路径&#xff0…...

编程日记 2024/3/12 12:19:39

大数据入门之hadoop学习

大数据 1. 学习hadoop之前&#xff0c;我们先了解一下什么是大数据&#xff1f; 大数据通常指的是数据集规模非常庞大且难以在常规数据库和数据处理工具中有效处理的数据。 大数据的特点&#xff1a; 容量&#xff1a;大数据具有庞大的规模&#xff0c;远远超出了传统数据库和…...

编程日记 2024/3/12 12:17:37

MySQL安装使用（mac、windows）

目录 macOS环境 一、下载MySQL 二、环境变量 三、启动 MySql 四、初始化密码设置 windows环境 一、下载 二、 环境配置 三、安装mysql 1.初始化mysql 2.安装Mysql服务 3.更改密码 四、检验 1.查看默认安装的数据库 2.其他操作 macOS环境 一、下载MySQL 打开 MyS…...

编程日记 2024/3/12 12:16:37

Day27：安全开发-PHP应用TP框架路由访问对象操作内置过滤绕过核心漏洞

目录 TP框架-开发-配置架构&路由&MVC模型 TP框架-安全-不安全写法&版本过滤绕过 思维导图 PHP知识点 功能&#xff1a;新闻列表&#xff0c;会员中心&#xff0c;资源下载&#xff0c;留言版&#xff0c;后台模块&#xff0c;模版引用&#xff0c;框架开发等 技…...

编程日记 2024/3/12 12:15:36

c++: 引用能否替代指针? 详解引用与指针的区别.

文章目录 前言1. 引用和指针的最大区别:引用不能改变指向2. 引用和指针在底层上面是一样的3. 引用和指针在sizeof面前大小不同4. 有多级指针,没有多级引用5.引用是引用的实体,指针会向后偏移同一个类型的大小 总结 前言 新来的小伙伴如果不知道引用是什么?可以看我的上一篇文…...

编程日记 2024/3/12 12:13:34

Java项目源码基于springboot的家政服务平台的设计与实现

大家好我是程序员阿存&#xff0c;在java圈的辛苦码农。辛辛苦苦板砖&#xff0c;今天要和大家聊的是一款Java项目源码基于springboot的家政服务平台的设计与实现&#xff0c;项目源码以及部署相关请联系存哥&#xff0c;文末附上联系信息 。 项目源码&#xff1a;Java基于spr…...

编程日记 2024/3/12 12:07:29

十大排序算法（冒泡排序、插入排序、选择排序、希尔排序、堆排序、快排、归并排序、桶排序、计数排序、基数排序）

目录 一、冒泡排序&#xff1a; 二、插入排序&#xff1a; 三、选择排序&#xff1a; 四、希尔排序&#xff1a; 五、堆排序&#xff1a; 六、快速排序&#xff1a; 6.1挖坑法&#xff1a; 6.2左右指针法 6.3前后指针法&#xff1a; 七、归并排序&#xff1a; 八、桶…...

编程日记 2024/3/12 12:06:28

matplotlib 画多子图的时候添加图例/legend

一开始搞不懂图例是什么意思&#xff0c;以为是整个图&#xff0c;最后发现原来图例就是代码中的legend&#xff1a; 子图的图例&#xff08;legend&#xff09;用于解释图表中各条线、点或其他元素所代表的含义。图例通常位于图表的一角&#xff0c;以帮助观众理解图表中展示的…...

编程日记 2024/3/12 12:03:25

手写一个线程池

自己手动写一个线程池的必要条件需要先了解我们使用的线程池的功能。为什么会有线程池&#xff1f;这是为了减少线程创建和销毁的开销。复用线程的目的。为了达到这个目的。预计方案是&#xff1a;需要一个存放任务的队列&#xff0c;主线程相当于生产者&#xff0c;在这个队列…...

编程日记 2024/3/12 12:02:24

Spring Boot 多环境配置

Spring Boot 多环境配置 在现代的软件开发中&#xff0c;通常需要将应用程序部署到不同的环境中&#xff0c;如开发环境、生产环境和测试环境等。每个环境可能需要不同的配置参数&#xff0c;例如数据库连接信息、日志级别等。在 Spring Boot 中&#xff0c;我们可以通过简单的…...

编程日记 2024/3/12 12:01:23

【Python】一文带你详解sys.executable函数的作用

【Python】一文带你详解sys.executable函数的作用 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f448; 希望得到您的订阅和支…...

编程日记 2024/3/12 12:00:21

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

编程新知 2026/2/8 4:37:15

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/12/10 4:08:53

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

编程新知 2025/9/18 11:31:13

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

编程新知 2026/1/23 10:28:48

C#学习第29天：表达式树（Expression Trees）

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

编程新知 2025/10/20 9:03:01

解决：Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...

编程新知 2025/12/15 0:46:42

React从基础入门到高级实战：React 实战项目 - 项目五：微前端与模块化架构

React 实战项目&#xff1a;微前端与模块化架构 欢迎来到 React 开发教程专栏 的第 30 篇&#xff01;在前 29 篇文章中&#xff0c;我们从 React 的基础概念逐步深入到高级技巧&#xff0c;涵盖了组件设计、状态管理、路由配置、性能优化和企业级应用等核心内容。这一次&…...

编程新知 2025/10/18 20:50:06

leetcode73-矩阵置零

leetcode 73 思路 记录 0 元素的位置&#xff1a;遍历整个矩阵&#xff0c;找出所有值为 0 的元素&#xff0c;并将它们的坐标记录在数组zeroPosition中置零操作&#xff1a;遍历记录的所有 0 元素位置&#xff0c;将每个位置对应的行和列的所有元素置为 0 具体步骤 初始化…...

编程新知 2026/2/1 11:11:34

Canal环境搭建并实现和ES数据同步

作者&#xff1a;田超凡 日期&#xff1a;2025年6月7日 Canal安装&#xff0c;启动端口11111、8082&#xff1a; 安装canal-deployer服务端&#xff1a; https://github.com/alibaba/canal/releases/1.1.7/canal.deployer-1.1.7.tar.gz cd /opt/homebrew/etc mkdir canal…...

编程新知 2026/2/1 18:11:41

ZYNQ学习记录FPGA(二)Verilog语言

一、Verilog简介 1.1 HDL&#xff08;Hardware Description language&#xff09; 在解释HDL之前&#xff0c;先来了解一下数字系统设计的流程&#xff1a;逻辑设计 -> 电路实现 -> 系统验证。 逻辑设计又称前端&#xff0c;在这个过程中就需要用到HDL&#xff0c;正文…...

编程新知 2026/2/8 7:19:44