html5cssjs代码 007 文章排版颜真卿《述张长史笔法十二意》

html5&css&js代码 007 文章排版颜真卿《述张长史笔法十二意》

一、代码
二、解释
- - 文档声明：
  - 头部（head）部分：
  - 主体（body）部分：
  - CSS样式细节：
  - <p> 标签用于定义段落：

这段代码定义了一个古文展示页面的结构和样式，同时本文内容也是书法爱好者的珍贵资料。

一、代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>/* 通用样式 */body {background-color: #666666;font-family: "宋体", sans-serif;line-height: 1.6;text-align: left;margin: 1px;padding: 2rem;}/* 文章标题样式 */.title {text-align: center;font-size: 3rem;font-weight: bold;margin-bottom: 1rem;color: #eeeeee;}/* 正文样式 */article.zw {font-family: "宋体", sans-serif;font-size: 1.2rem;text-align: left;text-indent: 2em; /* 首行缩进2个字符 */color: #dddddd;margin-left: 20%;margin-right: 20%;}/*作者样式*/article.zz {font-family: "仿宋", sans-serif;font-size: 1.1rem;text-align: left;text-indent: 2em; /* 首行缩进2个字符 */color: #00ff00;margin-left: 20%;margin-right: 20%;}/*译文样式*/article.yw {font-family: "楷体", sans-serif;font-size: 1.2rem;text-align: left;text-indent: 2em; /* 首行缩进2个字符 */color: #dddddd;margin-left: 20%;margin-right: 20%;}/* 正文段落样式 */p {text-indent: 2em;}</style><title>颜真卿《述张长史笔法十二意》</title>
</head>
<body>
<div class="container"><h1 class="title">颜真卿《述张长史笔法十二意》</h1><article class="zw"><h2>原文</h2><p>予罢秩醴泉，特诣东洛，访金吾长史张公‍(‍旭)，请师笔法。长史其时在裴儆宅憩止，已一年矣。众有师张公求笔法，或有得者，皆曰神妙。仆顷在长安师事张公，竟不蒙传授，使知是道也。人或问笔法者，张公皆大笑，而对之便草书，或三纸，或五纸，皆乘兴而散，竟不复有得其言者。予自再游洛下，相见眷然不替。仆因问裴儆：“足下师敬长史，有何所得？”曰：“但得书绢素屏数本，亦尝论请笔法，惟言倍加工学临写，书法当自悟耳。”</p><p>仆自停裴儆宅，月余，因与裴儆从长史言话散，却回长史前请曰：“仆既承九丈奖诱，日月滋深，夙夜工勤，耽溺翰墨，虽四远流扬，自未为稳，倘得闻笔法要诀，则终为师学，以冀至於能妙，岂任感戴之诚也！”长史良久不言，乃左右盼视，怫然而起。仆乃从行归於东竹林院小堂，张公乃当堂踞坐床，而命仆居乎小榻，乃曰：“笔法玄微，难妄传授。非志士高人，讵可言其要妙？书之求能，且攻真草。今以授子，可须思妙。”</p><p>乃曰：“夫平谓横，子知之乎？”仆思以对曰：“尝闻长史九丈令每为一平画，皆须纵横有象。此岂非其谓乎？”长史乃笑曰：“然。”</p><p>又曰：“夫直谓纵，子知之乎？”曰：“岂不谓直者必纵之不令邪曲之谓乎？”长史曰：“然。”</p><p>又曰：“均谓间，子知之乎？”曰：“尝蒙示以间不容光之谓乎？”长史曰：“然。”</p><p>又曰：“密谓际，子知之乎？”曰：“岂不谓筑锋下笔，皆令宛成，不令其疏之谓乎？”长史曰：“然。”</p><p>又曰：“锋谓末，子知之乎？”曰：“岂不谓末以成画，使其锋健之谓乎？”长史曰：“然。”</p><p>又曰：“力谓骨体，子知之乎？”曰：“岂不谓趯笔则点画皆有筋骨，字体自然雄媚之谓乎？”长史曰：“然。”</p><p>又曰：“转轻谓曲折，子知之乎？”曰：“岂不谓钩笔转角，折锋轻过，亦谓转角为暗过之谓乎？”长史曰：“然。”</p><p>又曰：“决谓牵掣，子知之乎？”曰：“岂不谓牵掣为撆，锐意挫锋，使不怯滞，令险峻而成，以谓之决乎？”长史曰：“然。”</p><p>又曰：“补谓不足，子知之乎？”曰：“尝闻於长史，岂不谓结构点画或有失趣者，则以别点画旁救之谓乎？”长史曰：“然。”</p><p>又曰：“损谓有余，子知之乎？”曰：“尝蒙所授，岂不谓趣长笔短，长使意气有余，画若不足之谓乎？”曰：“然。”</p><p>又曰：“巧谓布置，子知之乎？”曰：“岂不谓欲书先预想字形布置，令其平稳，或意外生体，令有異势，是之谓巧乎？”曰：“然。”</p><p>又曰：“称谓大小，子知之乎？”曰：“尝闻教授，岂不谓大字促之令小，小字展之使大，兼令茂密，所以为称乎？”长史曰：“然，子言颇皆近之矣，工若精勤，悉自当为妙笔。”</p><p>真卿前请曰：“幸蒙长史九丈传授用笔之法，敢问攻书之妙，何如得齐於古人？”</p><p>张公曰：“妙在执笔，令其圆畅，勿使拘挛。其次识法，谓口传手授之诀，勿使无度，所谓笔法也。其次在於布置，不慢不越，巧使合宜。其次纸笔精佳。其次变化适怀，纵舍掣夺，咸有规矩。五者备矣，然后能齐於古人。”</p><p>曰：“敢问长史神用执笔之理，可得闻乎？”</p><p>长史曰：“予传授笔法，得之於老舅彦远。”</p><p>曰：“吾昔日学书，虽功深，奈何迹不至殊妙。后问於褚河南。”</p><p>曰：“用笔当须如印印泥。”思而不悟，后於江岛，遇见沙平地静，令人意悦欲书。乃偶以利锋画而书之，其劲险之状，明利媚好。自兹乃悟用笔如锥画沙，使其藏锋，画乃沉着。当其用笔，常欲使其透过纸背，此功成之极矣。真草用笔，悉如画沙，点画净媚，则其道至矣。如此则其迹可久，自然齐於古人。但思此理，以专想功用，故其点画不得妄动。子其书绅。</p><p>予遂铭谢，逡巡再拜而退。自此得攻书之妙，於兹五年，真草自知可成矣。</p></article><article class="zz"><h2>作者介绍</h2><p>颜真卿（709—785）字清臣，琅邪临沂（山东临沂）人，终年77岁。是中唐时期的书法创新代表人物。楷书端庄雄伟，气势开张。行书劲朗舒和，神彩飞动。他的书法，既承继了以往书风的气韵法度，又不为古法所束缚，突破了唐初的墨守成规，书法自成一格，后世称其为“颜体”。宋·欧阳修评论说：“斯人忠义出于天性，故其字画刚劲独立，不袭前迹，挺然奇伟，有似其为人。”宋·朱长文《续书断》中列其书法为神品。并评说：“点如坠石，画如夏云，钩如屈金，戈如发弩，纵横有象，低昂有态，自羲、献以来，未有如公者也。”他的正书，以《颜氏家庙碑》为代表；摩崖大书，气势磅礴，以《大唐中兴颂》最著；表现冲和淡远之韵致者，则推《李玄靖碑》。行草遒劲秀挺，古意盎然，以《祭侄稿》为第一。书法史上唯一能与大书法家王羲之承先启后、交相辉映的，就是颜真卿了。他生于唐代楷书大成之际，因以楷书为多兼有行草。</p><p>《述张长史书法十二意》一文，首述请教张(旭)长史传授笔法经过，次述张长史以问答方式传授笔法，综述古今书法异同，颇有参考价值。</p></article><article class="yw"><h2>参考译文</h2><p>我罢官醴泉，特前往洛阳，拜访金吾长史张公旭、请求学习笔法。长史当时在裴儆家休息，已一年了。许多人师事张公询问笔法，或有得到的，都说神妙。我过去在长安二年，拜张公为师，竟未承蒙传授，使明白此道。人有问笔法的，张公皆大笑，而对他们便作草书，或者三纸或者五纸，皆乘兴致而分发，竟不复有得到他的言语的。我虽然再于洛阳相见，顾念不改变。我因而问裴儆:“足下师事张长史，有何所得？”回答说:“只得到书写的白绢屏风数本。也曾论辩请求笔法，只说加倍工夫学习摹写，书法理当自己理解了。”</p><p>我由于停留裴家一月余的日子，因同裴儆随从长史谈话分散后，就回去向长史请求说:“既已承蒙老丈劝勉诱导，日月加深，朝夕攻学勤奋，沉湎于翰墨，虽然四方流传播扬名声，自以为未为稳当。倘得闻听笔法要诀，就终久作为师从学习，以希望达到擅长书法的妙境，当以恩相亲信而感激爱戴之真诚。”长史很久不言语，乃左右顾盼，神情严肃而起。我就随行返回东竹林院小堂，张公乃当场盘屈床上而坐，叫我坐在小榻上，才说:“笔法深微玄妙，难以轻易传授。不是志士高人，岂可与谈精深微妙的义理呀！书法之求得擅长，应当攻学真书和草书。今天即传授给您，可要思考精妙。”</p><p>又道:“这平画意思指横，您知道它吗？”我思考后即应答道:“曾听长史老丈叫每作一平画，皆须多有形象。此岂不是这个意思吗？”长史又笑道:“像是这样。”</p><p>又道:“这直画意思指纵，您知道它吗？”应答道:“岂不是叫直画必须纵逸它不听从使令，不正直的意思吗？”一长史道:“像是这样。”</p><p>又道:“笔画安排停匀的意思指问隙，您知道它吗？”应答道:“曾承蒙教导使间不容发的意思吗？”长史道:“像是这样。”</p><p>又道:“紧密的意思指笔画出人之际，您知道它吗？”应答道:“岂不是叫筑锋下笔，皆使宛转完成，不使笔画出人疏松的意思吗？”长史道:“像是这样。”</p><p>又道:“用笔锋的意思指笔画的端尾，您知道它吗？”应答道:“岂不是叫笔画的端尾以完成笔画，使其笔锋雄健的意思吗？”长史道:“像是这样。”</p><p>又道:“笔力的意思指刚劲雄健的书风，您知道它吗？”应答道:“岂不是使超笔点画都有气势笔力，字体自然雄健媚好的意思吗？”长史道:“像是这样。”</p><p>又道:“转角轻过意思指屈折，您知道它吗？”应答道:“岂不是钩笔转角，折锋轻过，也叫转角为暗过的意思吗？”长史道:“像是这样。”</p><p>又道:“决的意思指牵掣，您知道它吗？”应答道:“岂不是为牵引为控制，决意用挫锋，使不要动作迟缓，令险峻而成，因而叫它决吗？”长史道:“像是这样。”</p><p>又道:“弥补因为不足，您知道它吗？”应答道:“岂不是安排点画或有失去意趣的，就用别的点画从旁补救的意思吗？”长史道:“像是这样。”</p><p>又道:“减损因为有多徐，您知道它吗？”应答道:“岂不是情趣长笔画短，常使笔意气势有访，点画似若不足的意思吗？”道:“像是这样。”</p><p>又道:“巧的意思作书先预想字形布置指布置，您知道它吗？”应答道:“岂不是要，令其平稳，有愈外字体，令有不同的形势，这称之巧吗？应答道:“像是这样。”</p><p>又道:“均称因为字有大小，您知道它吗？”应答道:“岂不是大字缩短令它小，小字舒展使它大，兼使茂密，所以为匀称吗？”长使道:“像是这样。”</p><p>您说的颇都接近它的意思。这书艺道理的妙处，鲜明呀它有旨趣，字外的奇妙，语言所不能穷尽。世上学书的，推尊与效法二王，元常高超的书迹，看都未曾看一眼，书法的妙趣，于是乎就完全相同。献之称他“古肥”，张旭亦称之“今瘦”。但今既然不同，肥瘦的标准颇相反，如果亲自观着阅览，有不同众人的说法。张芝、钟繇的技艺情趣，精微细致几乎相同，本源本来机微玄妙，肥瘦古今，岂易使人明理达意！真迹虽然很少，可得而推断。逸少到了学习钟繇，笔势巧字形密；到他自己立意作书，笔意疏朗字形舒缓。譬如讲楚语的人学习中原话，不能没有楚音。讲过头话不稳妥，不能作为确论。又子敬之不及逸少，犹如逸少之不及元常；学子敬如画虎，又议论学元常如画龙。我虽不熟习，久懂得它的道理，不熟习，心里爱慕它呀。您倘有同样的认识，认识就长了一大片。你要自勉，攻学专精，勤奋了解，自然应当能妙了。”</p><p>真卿前去询问道:“幸蒙长史传授笔法，冒昧问擅长书法之妙，怎样得以取齐于古人？”张公道:“妙在执笔，令得以旋转流畅，不使拘泥.其次了解法则，说的是口传手授的诀窍，不使不依法度，所说的作书的技法了。其次在于安排，不要无节制、无次序超越，巧妙使合宜.其次纸笔精美佳丽。其次变通适合心意，纵放控制，都有规矩。五者具备了，然后才能取齐于古人。”“冒味问执笔的道理，可得以传告吗？”。</p><p>长史道:“我传授的笔法，得之于老舅父彦远。”又道：“我过去学书法，虽然功夫深厚，奈何书迹不能达到特妙。后来听到褚河南说：用笔必须如印印泥。思考而未领悟，后在江岛碰到沙平地净，令人意悦想写字，就偶然用利锋画而书写它、那强劲险峻的形状，明利媚好。从此乃领悟用笔如锥画沙，使其藏锋，笔画才沉厚而不轻浮。当用笔时，常欲使笔透过纸背，此功业成就达到最高程度了。真草书用笔，都如画沙，点画明媚，那用笔之道达到了。如此那书迹可以久存，自然取齐于古人。只是思考此道理，在专一想象技艺和使用，所以那点画不得随便书写。您应当牢记这些话!”</p><p>我于是深切感谢,恭顺的一再叩拜而退出。从此获得攻学书法的妙道，到此五年，真草书自知应当成功了。</p></article>
</div>
</body>
<footer style="text-align: right;font-size: 1.5rem;font-weight: bold;margin-right: 22%;margin-bottom: 5rem;color: #ffcc00;">HTML+CSS+JavaScript编程配套代码 作者：明月看潮生
</footer>
</html>

二、解释

这段HTML代码定义了一个古文展示页面的结构和样式，具体内容如下：

文档声明：

<!DOCTYPE html> 指定这是遵循 HTML5 标准的文档。
HTML根元素：<html lang="zh-CN"> 表明网页使用的语言是简体中文。

头部（head）部分：

<meta charset="UTF-8"> 定义了网页的字符编码为 UTF-8。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 设置视口以适应移动设备，初始缩放比例为 1:1。
<style> 标签内包含了一段 CSS 样式表，定义了通用样式、文章标题样式、正文样式（zw类、zz类、yw类）、以及正文字体段落样式。这些样式涉及背景色、字体系列、字体大小、颜色、行高、文本对齐、首行缩进、边距和填充等属性。

主体（body）部分：

包含一个 .container 类的 div 元素作为内容容器。
在容器内部，首先是一个具有 .title 类的 h1 元素，显示文章标题“颜真卿《述张长史笔法十二意》”。
紧接着有三个 article 元素，分别应用了 .zw（原文）、.zz（作者介绍）、.yw（参考译文）这三个类名，并在其中插入相应的文章内容。
尾部是一个 footer 元素，用于显示版权信息和作者署名。

CSS样式细节：

文章标题 .title 配置居中显示、大号字体、粗体、淡灰色背景和底部间距。
正文样式 .zw、.zz 和 .yw 分别对应不同的字体、大小、颜色和左右外边距，同时所有正文段落均有首行缩进。
尾部 footer 样式设置了右对齐、较大字体、加粗、黄色字体颜色以及特定的右侧外边距和底部外边距。
这个页面主要功能是展示颜真卿关于书法笔法的文章及其翻译与作者简介，并通过自定义CSS样式来呈现清晰美观的阅读体验。

标签用于定义段落：

它是HTML中最常用的标签之一，用于将文本分组为段落。在浏览器中，段落通常以一定的间隔显示，并且默认情况下，浏览器会在段落前后添加一些空白。
<p>标签可以包含纯文本、其他标记和嵌套的其他段落。它还可以通过CSS样式进行格式化和排版，例如更改文字和段落的大小、字体样式、颜色等。
例如，以下是一个使用 p 标签定义的段落的示例：
<p>This is a paragraph.</p>
在这个示例中，"This is a paragraph."是一个段落。它将在浏览器中显示为一个独立的块，并且在段落前后都有一些默认的间距。