html5&css&js代码 008 名画欣赏
这段HTML代码定义了一个网页，展示了名画欣赏的内容。主要包括页面的标题、样式定义和主体内容。其中，样式定义使用了CSS来控制页面的布局和外观，主体内容使用了结构化的HTML标签来展示画作的标题、图片、信息和作者介绍等。通过这段代码，可以实现将名画的相关信息以美观的方式呈现给用户。
原笔记：编程笔记 html5&css&js 008 HTML图片。
一、代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>编程笔记 html5&css&js 008 名画欣赏</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>名画欣赏</title>
<style>
body {
color: #eeeeee;
background-color: #333333;
font-family: "宋体", sans-serif;
line-height: 1.6;
text-align: left;
width: 90%;
margin-left: 10%;
margin-right: 10%;
padding: 2rem;
}
.title {
font-size: 3rem;
font-weight: bold;
margin-bottom: 1rem;
}
.artwork-container {
align-content: center;
margin-bottom: 30px;
}
.artwork-title {
font-size: 30px;
font-weight: bold;
margin-bottom: 10px;
}
.artwork-image {
width: 90%;
text-align: left;
display: block;
height: auto;
margin-bottom: 15px;
}
.artwork-info {
width: 90%;
font-style: italic;
margin-bottom: 10px;
}
.artwork-review {
width: 90%;
font-weight: bold;
}
.artist-intro {
width: 90%;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="artwork-container">
<h1>编程笔记 html5&css&js 008 名画欣赏</h1>
<h2 class="artwork-title">塞纳河畔</h2>
<img src="page008/p1.jpg" alt="塞纳河畔" class="artwork-image">
<div class="artwork-info">作品信息：<br>
作者：克劳德·莫奈 | Claude Monet<br>
类型：油画<br>
风格流派：印象派<br>
创作年代：1878<br><br>
</div>
<div class="artist-intro">作者介绍：<br>
克劳德·莫奈（Claude
Monet，1840年11月14日－1926年12月5日），法国画家，莫奈是法国印象派最重要的画家之一，是他将毕生精力献给了对西方画界产生了重要影响的印象主义，是以他为首的一批艺术家的不懈努力，突破了此前学院派的保守思想，极大地冲击了19世纪后半叶占据西方画坛统治地位的官方艺术，从而为掀开西方现代绘画史新的一页。<br>
莫奈是法国最重要的画家之一，印象派的理论和实践大部分都有他的推广。莫奈擅长光与影的实验与表现技法。他最重要的风格是改变了阴影和轮廓线的画法，在莫奈的画作中看不到非常明确的阴影，也看不到突显或平涂式的轮廓线。光和影的色彩描绘是莫奈绘画的最大特色。<br>
2019年5月14日，法国印象派画家克劳德·莫奈的作品《干草堆》在纽约苏富比拍卖行以破纪录的1.107亿美元（当时1美元约合人民币6.87元）高价拍出。这是莫奈作品拍卖价格的最高纪录，也是印象派画作拍卖最高纪录。<br><br>
</div>
<div class="artwork-review">作品简介：<br>
1878至1881年间，克劳德•莫奈住在贝特维尔。这是一座位于巴黎和鲁昂之间的小城，莫奈的房屋正好在塞纳河边，周围是一片美景，为他捕捉一年四季的光线变化提供了绝妙的环境。画家在贝特维尔完成的对塞纳河的观察，说明他对研究同一物体在不同光照条件下产生的变化不定的效果怀有极大的兴趣，并且为他二十年后完成的《睡莲》系列大作打下了伏笔。此外，逐渐远离巴黎喧嚣的现代化生活，也让莫奈集中精力专心探究同一景色的各种变化。这种归隐的生活方式表明，莫奈对描绘一个地方的特殊自然环境的各种不同景象，怀有极其强烈的兴趣。<br>
<hr>
</div>
</div>
<div class="artwork-container">
<h2 class="artwork-title">向日葵</h2>
<img src="page008/p2.jpg" alt="向日葵" class="artwork-image">
<div class="artwork-info">作品信息：<br>
作者：文森特·梵高 | Vincent Willem van Gogh<br>
类型：油画<br>
风格流派：后印象派<br>
创作年代：1888年8月-1889年1月<br><br>
</div>
<div class="artist-intro">作者介绍：<br>
文森特·威廉·梵高（荷兰语：Vincent Willem van
Gogh，1853年3月30日－1890年7月29日），荷兰后印象派画家。代表作品有：《星月夜》《向日葵》、自画像系列等，他在2004年票选最伟大的荷兰人当中，排名第十。<br><br>
早年的梵高做过职员和商行经纪人，还当过矿区的传教士，最后他投身于绘画。他早期画风写实，受到荷兰传统绘画及法国写实主义画派的影响。1886年，他来到巴黎，结识印象派和新印象派画家，并接触到日本浮世绘的作品，视野的扩展使其画风巨变。1888年，来到法国南部小镇阿尔，创作《阿尔的吊桥》；同年与画家保罗·高更交往，但由于二人性格的冲突和观念的分歧，合作很快便告失败。此后，梵高的疯病时常发作，但神志清醒时他仍然坚持作画。1890年7月，梵高在精神错乱中开枪自杀，年仅37岁。<br><br>
</div>
<div class="artwork-review">作品简介：<br>
《向日葵》是荷兰画家梵高绘画的一系列静物油画。当中有2幅绘有15朵向日葵，1幅绘有14朵向日葵，另有两幅绘有12朵向日葵。画家1888年8月在法国南部阿尔勒绘画了第一幅15朵的《向日葵》（藏于英国伦敦英国国家美术馆）和第一幅12朵的《向日葵》（藏于德国慕尼黑新美术馆），其余的作品在翌年1月绘成。全部作品都画在93
× 72 公分（37″ × 28″）的帆布上。1887年他另外在巴黎绘画了一套四幅的向日葵静物画。<br>
梵高通过该系列作品向世人表达了他对生命的理解，并且展示出了他个人独特的精神世界。该系列作品也传递着这么一个信息：怀着感激之心对待家人，怀着善良之心对待他人，怀着坦诚之心对待朋友，怀着赤诚之心对待工作，怀着感恩之心对待生活，怀着一颗欣赏之心享受艺术，宛若眼前那灿若花开的向日葵。<br>
<hr>
</div>
</div>
<div class="artwork-container">
<h2 class="artwork-title">富岳三十六景-神奈川冲浪里</h2>
<img src="page008/pg3.jpg" alt="富岳三十六景-神奈川冲浪里" class="artwork-image">
<div class="artwork-info">作品信息：<br>
作者：葛饰北斋<br>
年代：初版于天保2年（1831年）发行<br>
类别：浮世绘<br><br>
</div>
<div class="artist-intro">作者介绍：<br>
葛饰北斋（ 日语：葛飾 北斎／かつしか ほくさい Katsushika Hokusai 1760年10月31日－1849年5月10日），本名时太郎 / ときたろう
Tokitarou、铁藏 / てつぞう Tetsuzou，日本江户城人（今日本东京），江户时代末期浮世绘大师，化政文化代表人物。葛饰北斋多才多艺，
作品涉猎版画、水墨、染画、图书插画等，其中以浮世绘《富岳三十六景》以及出版幅度达六十四年的《北斋漫画》为其最具代表性的作品。<br><br>
</div>
<div class="artwork-review">作品简介：<br>
《神奈川冲浪里》(かながわおきなみうら)是日本画家葛饰北斋于19世纪初期创作的一幅彩色浮世绘版画作品。<br>
该画作描绘的是神奈川附近的海域汹涌澎湃的海浪，浪里有三条奋进的船只，英勇的船工们正为了生存而与大自然进行着惊险而激烈的搏斗，表达了人们乘风破浪、勇往直前的无畏精神。<br>
整个画面不仅采用了大胆而直截了当的构图和造型手法，而且采用强烈的动与静的对比渲染，呈现出瞬间即逝的千姿百态和令人目眩的丰富表情。<br>
该作品出版时印制了数千幅，但现存于世的估计仅有数百幅，部分收藏于大英博物馆、大都会艺术博物馆、东京国立博物馆等大型博物馆。<br>
<hr>
</div>
</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代码定义了一个网页，展示了名画欣赏的内容。主要包括页面的标题、样式定义和主体内容。其中，样式定义使用了CSS来控制页面的布局和外观，主体内容使用了结构化的HTML标签来展示画作的标题、图片、信息和作者介绍等。通过这段代码，可以实现将名画的相关信息以美观的方式呈现给用户。
<img src="page008/p1.jpg" alt="塞纳河畔" class="artwork-image">
src 属性：这是 img 标签的一个必需属性，它定义了图像文件的路径。
在这个例子中，src="page008/p1.jpg" 表示图片位于当前页面所在目录下的 "page008" 子目录里，文件名为 "p1.jpg"。
alt 属性：也是必需的属性，它提供了图像的替代文本描述，当图像由于某种原因无法加载或用户使用屏幕阅读器时会读出这个描述。
例如，alt="塞纳河畔" 说明这幅画的主题是"塞纳河畔"。
class 属性：这是一个可选但常见的属性，用于给元素添加样式类。
这里的 class="artwork-image" 表明该图片属于名为 "artwork-image" 的CSS类，通过CSS可以为这类图片定义统一的样式规则。
因此，整个 img 标签的功能就是向网页中嵌入一张名为 "p1.jpg" 的图片，并且当图片无法显示时提供文字替代信息（即"塞纳河畔"），
同时通过CSS类 ".artwork-image" 来控制图片的布局、尺寸等样式特征。```