编程笔记 html5cssjs 006 HTML文本:标题 文章排版《桃花源记》

编程笔记 html5&css&js 006 HTML文本:标题 文章排版《桃花源记》

  • 一、代码
  • 二、解释

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/731641.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AcWing 2154. 梦幻布丁

#include<bits/stdc.h>using namespace std;//N 表示的是有多少个布丁 //M 表示的是有多少种颜色 const int N1e510,M1e610;//h e ne idx 是链表的组成元素 //表示的是有 M 个颜色&#xff0c;每一个颜色下面连着一个单链表 int h[M],e[N],ne[N],idx; //n 表示元素个数&a…

02、进程的基础

1.进程的概念 进程&#xff08;Process&#xff09;是计算机中的程序关于某数据集合上的一次运行活动&#xff0c; 是系统进行资源分配的基本单位&#xff0c;是操作系统结构的基础。在早期面向进程设计的计算机结构中&#xff0c;进程是程序的基本执行实体&#xff1b;在当代…

【数仓】Maxwell软件安装及配置,采集mysql数据

相关文章 【数仓】基本概念、知识普及、核心技术【数仓】数据分层概念以及相关逻辑【数仓】Hadoop软件安装及使用&#xff08;集群配置&#xff09;【数仓】Hadoop集群配置常用参数说明【数仓】zookeeper软件安装及集群配置【数仓】kafka软件安装及集群配置【数仓】flume软件安…

LeNet5实战——衣服分类

搭建模型训练代码&#xff08;数据处理、模型训练、性能指标&#xff09;——> 产生权重w ——>模型结构c、w测试 配置环境 Pycharm刚配置的环境找不到了-CSDN博客 model.py 导入库 import torch from torch import nn from torchsummary import summary 模型搭…

河北省光伏展

光伏展是指光伏行业的展览会&#xff0c;也被称为太阳能展。光伏展一般是由光伏企业、科研机构、行业协会和专业展览公司等共同举办的。展会内容包括光伏产品、技术、设备、材料、应用等方面的展示和交流。 光伏展通常是光伏行业的重要盛事&#xff0c;吸引了全球范围内的光伏企…

npm镜像源地址

镜像源地址替换问题&#xff08;重要&#xff09; 2024 年 1 月 22 日 &#xff0c;registry.npm.taobao.org 的 SSL 证书正式过期。 2022 年 5 月 淘宝源发布了公告&#xff1a; &#xff08;大家应该没有太多关注哦&#xff0c;也包括我&#xff0c;哈哈&#xff09; &am…

144.乐理基础-根三五音、大三和弦、小三和弦

内容参考于&#xff1a; 三分钟音乐社 上一个内容&#xff1a;143.乐理基础-和弦是什么&#xff1f;和声是什么&#xff1f;三和弦-CSDN博客 必须先看上一个内容&#xff0c;了解什么是和弦、什么是和声&#xff0c;以及三和弦的定义 上一个内容最后写了三和弦的定义&#x…

【C++ 学习】构造函数详解!!!

1. 类的6个默认成员函数的引入 ① 如果一个类中什么成员都没有&#xff0c;简称为空类。 ② 空类中真的什么都没有吗&#xff1f;并不是&#xff0c;任何类在什么都不写时&#xff0c;编译器会自动生成以下6个默认成员函数。 ③ 默认成员函数&#xff1a;用户没有显式实现&…

嵌入式学习第二十五天!(网络的概念、UDP编程)

网络&#xff1a; 可以用来&#xff1a;数据传输、数据共享 1. 网络协议模型&#xff1a; 1. OSI协议模型&#xff1a; 应用层实际收发的数据表示层发送的数据是否加密会话层是否建立会话连接传输层数据传输的方式&#xff08;数据包&#xff0c;流式&#xff09;网络层数据的…

基于YOLOv8深度学习的智能道路裂缝检测与分析系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测、目标分割

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…

外包干了5天,技术退步明显。。。。。

在湖南的一个安静角落&#xff0c;我&#xff0c;一个普通的大专生&#xff0c;开始了我的软件测试之旅。四年的外包生涯&#xff0c;让我在舒适区里逐渐失去了锐气&#xff0c;技术停滞不前&#xff0c;仿佛被时间遗忘。然而&#xff0c;生活的转机总是在不经意间降临。 与女…

家庭关怀视角下对待患病亲人态度的重要性——评析母对病父大声呵斥的行为现象

在家庭生活中&#xff0c;尤其是面对家人身体不适或疾病困扰的时候&#xff0c;我们的态度和行为方式显得尤为重要。近期&#xff0c;社会上存在一种令人忧虑的现象&#xff0c;即某些家庭中&#xff0c;母亲因压力或其他原因对生病的父亲表现出不耐烦甚至大吼大叫的态度。这种…

警用移动执法远程视频监控方案:安防视频监控系统EasyCVR+4G/5G移动执法仪

一、背景需求 在现代城市管理中&#xff0c;移动执法仪视频监控方案正逐渐成为一种高效、便捷的管理工具。该方案通过结合移动执法仪和视频监控技术&#xff0c;实现了对城市管理现场的实时监控和取证&#xff0c;有效提升了城市管理水平和效率。 移动执法仪作为现场执法的重…

TypeScript 哲学 - Object Types

readonly 修饰对象和数组的 双向可分配性是不同的 只有有一个可选属性不是意味着必须 不能传空对象&#xff0c;&#xff1a;这个例子&#xff08;两个属性可选&#xff09;而是如果对象有额外属性&#xff0c;那么必须至少加一个 可选属性。只要你在传递的值和目标类型有一个…

大模型概念解析 | Prompt Engineering

注1:本文系"概念解析"系列之一,致力于简洁清晰地解释、辨析复杂而专业的概念。本次辨析的概念是:大模型中的Prompt Engineering 大模型概念解析 | Prompt Engineering 第一部分 通俗解释 在人工智能的世界里,有一群被称为大模型的巨无霸。它们就像是知识的海绵…

关于STM32G070RBTx单片机使用HAL库往flash写数据的过程中死机问题

1.单片机型号:STM32G070RBTx 2.出现的问题 根据库函数FLASH_If_Write()的使用&#xff0c;我们分析往flash写数据的过程是把uint8_t 类型的数据(p_data)以地址的形式强转成uint64类型的&#xff0c;在一包128字节的数据时一次存储8位&#xff0c;存16次(packet_size/8)&#x…

Java项目:基于SSM框架实现的二手车交易平台【源码+开题报告+任务书+毕业论文+答辩ppt】

一、项目简介 本项目是一套基于SSM框架实现的二手车交易平台 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、界面美观、操作简单、功能齐…

MySQL底层原理

1. 请解释MySQL的逻辑架构和物理架构。 MySQL的逻辑架构和物理架构涉及到多个层面&#xff0c;包括网络连接、服务处理、存储引擎以及数据存储等部分。具体如下&#xff1a; 逻辑架构&#xff1a; 连接层&#xff08;Connection Layer&#xff09;&#xff1a;客户端通过TCP…

瑞芯微 | I2S-音频基础 -1

最近调试音频驱动&#xff0c;顺便整理学习了一下i2s、alsa相关知识&#xff0c;整理成了几篇文章&#xff0c;后续会陆续更新。 喜欢嵌入式、Li怒晓得老铁可以关注一口君账号。 1. 音频常用术语 名称含义ADC&#xff08;Analog to Digit Conversion&#xff09;模拟信号转换…

Android中Fragment的onResume方法的介绍、执行时机,以及不执行回调的异常情况分析

onResume()是Fragment生命周期中的一个重要方法&#xff0c;表示Fragment已经获取焦点并开始与用户交互。在onResume()方法中&#xff0c;Fragment通常完成与用户界面交互的准备工作&#xff0c;比如开始执行一些动画、加载数据或注册监听器等。 1. 回调时机&#xff1a; onRe…