编程笔记 html5cssjs 008 HTML图片 名画欣赏

编程笔记 html5&css&js 008 HTML图片 名画欣赏

  • 一、代码
  • 二、解释

这段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>克劳德·莫奈(ClaudeMonet,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 vanGogh,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" 来控制图片的布局、尺寸等样式特征。```

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

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

相关文章

ASP.Net实现玩具管理(三层架构,两项数据相乘)

目录 演示功能&#xff1a; 点击启动生成页面 步骤&#xff1a; 1、建文件 ​编辑 2、添加引用关系 3、根据数据库中的列写Models下的XueshengModels类 4、DAL下的DBHelper&#xff08;对数据库进行操作&#xff09; 5、DAL数据访问层下的service文件 6、BLL业务逻辑层…

华为HCIE实验题库哪里有?Cloud相关证书咋样?

华为HCIE认证的含金量很高&#xff0c;这除了是因为华为自身的影响力之外&#xff0c;也是因为HCIE的考试难度大。 HCIE的实验考试长达八个小时&#xff0c;考的是实际操作和论述&#xff0c;要想拿下HCIE实验考试&#xff0c;不断练习是十分关键的。 而华为HCIE实验的题库哪…

通讯协议制定之交互方式、步骤介绍

文章目录 通讯协议制定之交互方式、步骤介绍1. 前言2. 通讯协议发送类型2.1 周期发送2.2 事件发送 3. 通讯协议数据包类型3.1 握手3.2 心跳3.1 数据包 4. 小结 通讯协议制定之交互方式、步骤介绍 1. 前言 通讯协议又称通信规程&#xff0c;是指通信双方对数据传送控制的一种约…

【Spring Boot 3】读取resource文件

【Spring Boot 3】读取resource文件 背景介绍开发环境开发步骤及源码工程目录结构总结背景 软件开发是一门实践性科学,对大多数人来说,学习一种新技术不是一开始就去深究其原理,而是先从做出一个可工作的DEMO入手。但在我个人学习和工作经历中,每次学习新技术总是要花费或…

如何部署Python Flask并实现远程访问本地搭建web站点【内网穿透】

文章目录 前言1. 安装部署Flask并制作SayHello问答界面2. 安装Cpolar内网穿透3. 配置Flask的问答界面公网访问地址4. 公网远程访问Flask的问答界面 前言 Flask是一个Python编写的Web微框架&#xff0c;让我们可以使用Python语言快速实现一个网站或Web服务&#xff0c;本期教程…

导出微软浏览器收藏的网页,并查看网页保存的登录密码

导出微软Edge浏览器收藏夹&#xff08;书签&#xff09;的步骤如下&#xff1a; 打开Microsoft Edge浏览器。右键点击浏览器收藏栏上的任意位置或使用快捷键Ctrl Shift O打开收藏夹管理页面。在收藏夹管理页面中&#xff0c;通常你会看到右上角或菜单区域有一个“…”或者三…

Axios中每次发送post请求前都会发送options请求

今天写前端的时候&#xff0c;发现每次post请求都会失败&#xff0c; 反复调试过后发现axios在每次发送post请求前都发送了options请求&#xff0c; 在网络搜罗了一大圈&#xff0c; 发现了原因是因为web页面发送了请求给vue后&#xff0c; vue再请求后端过程中发生了跨域&…

【算法】一维前缀和以及二维前缀和

目录 一维前缀和适用场景示例 二维前缀和适用场景一种情况另一种情况示例 一维前缀和 适用场景 求一段区间的和。 比如有一个数列 &#xff1a; 如果我们要求 [l,r]即某个区间内的数组和的时候&#xff0c;思路就是每遍历一个元素就进行求和&#xff0c;记录下加到al时的和…

Skywalking

1、简介 Skywalking是由国内开源爱好者吴晟开源并提交到Apache孵化器的开源项目&#xff0c; 2017年12月SkyWalking成为Apache国内首个个人孵化项目&#xff0c; 2019年4月17日SkyWalking从Apache基金会的孵化器毕业成为顶级项目&#xff0c; 目前SkyWalking支持Java、 .Net、 …

广告主投放系统从设计到实践

在当今数字广告行业中&#xff0c;广告主投放系统扮演着至关重要的角色。它是连接广告主和广告媒体之间的桥梁&#xff0c;帮助广告主实现广告投放目标并获得可观的回报。本篇博客文章将深入探讨广告主投放系统的设计和实践过程&#xff0c;并分享一些关键的经验和最佳实践。 …

flink的分组聚合、over聚合、窗口聚合对比

【背景】 flink有几种聚合&#xff0c;使用上是有一些不同&#xff0c;需要加以区分&#xff1a; 分组聚合&#xff1a;group agg over聚合&#xff1a;over agg 窗口聚合&#xff1a;window agg 省流版&#xff1a; 触发计算时机 结果流类型 状态大小 分组聚合group ag…

使用OpenCV实现两张图像融合在一起

简单介绍 图像融合技术是一种结合多个不同来源或不同传感器捕获的同一场景的图像数据&#xff0c;以生成一幅更全面、更高质量的单一图像的过程。这种技术广泛应用于遥感、医学影像分析、计算机视觉等多个领域。常见的图像融合技术包括基于像素级、特征级和决策级的融合方法&a…

基与HTML5的塔防游戏设计与实现

目 录 摘 要 I Abstract II 引 言 1 1 项目背景与相关技术 3 1.1 背景与发展简介 3 1.2 HTML5技术及其优势 4 1.3 JavaScript开发的优势与劣势 4 1.4 CSS样式表在开发中的用处 5 1.5 本章小结 6 2 系统分析 7 2.1 需求分析 7 2.2 问题分析 7 2.3 流程设计 7 2.3 功能分析 8 2.…

数据分析入门,深入浅出的数据分析

时下正值大数据与人工智能高速发展的时刻&#xff0c;相信很多对数据分析感兴趣的朋友想要转行。很多朋友选择从事数据分析&#xff0c;主要是看到这个岗位的发展前景和薪资待遇。 但是一些小伙伴并不知道数据分析到底是做什么的&#xff1f;需要用到哪些知识&#xff1f; 为…

【Flink SQL】Flink SQL 基础概念:SQL Table 运行环境、基本概念及常用 API

Flink SQL 基础概念&#xff1a;SQL & Table 运行环境、基本概念及常用 API 1.SQL & Table 简介及运行环境1.1 简介1.2 SQL 和 Table API 运行环境依赖 2.SQL & Table 的基本概念及常用 API2.1 一个 SQL / Table API 任务的代码结构2.2 SQL 上下文&#xff1a;Tabl…

linux部署服务相关基础操作:磁盘挂载、jdk安装、docker安装、docker-compose环境安装、mysql、redis、jenkins等

磁盘挂载 1、运行mount查看数据盘挂载信息。返回结果中没有/dev/vdb1的信息。 2、运行fdisk -l查看数据盘分区信息。 3、格式化磁盘 mkfs -t ext4 /dev/vdb3.1、 (格式化后这一步跳过)运行cat /etc/fstab查看数据盘分区/dev/vdb1原有的挂载点名称。 4、运行mkdir /data重新…

[python3] 责任链模式

责任链模式&#xff08;Chain of Responsibility Pattern&#xff09;是一种行为设计模式&#xff0c;它允许多个对象都有机会处理请求&#xff0c;从而避免请求的发送者和接收者之间的耦合关系。请求沿着链传递&#xff0c;直到有一个对象处理它为止。 下面是一个简单的 Pyth…

Linux---多线程(上)

一、线程概念 线程是比进程更加轻量化的一种执行流 / 线程是在进程内部执行的一种执行流线程是CPU调度的基本单位&#xff0c;进程是承担系统资源的基本实体 在说线程之前我们来回顾一下进程的创建过程&#xff0c;如下图 那么以进程为参考&#xff0c;我们该如何去设计创建一个…

paddle的版面分析的环境搭建及使用

一、什么是版面分析 版面分析技术&#xff0c;主要是对图片形式的文档进行版面分析&#xff0c;将文档划分为文字、标题、表格、图片以及列表5类区域&#xff0c;如下图所示&#xff1a; 二、应用场景 2.1 合同比对 2.2 文本类型划分 2.3 通用文档的还原 版面分析技术可将以…

论文阅读FCN-Transformer Feature Fusion for PolypSegmentation

本文提出了一种名为Fully Convolutional Branch-TransFormer (FCBFormer)的图像分割框架。该架构旨在结合Transformer和全卷积网络&#xff08;FCN&#xff09;的优势&#xff0c;以提高结肠镜图像中息肉的检测和分类准确性。 1&#xff0c;框架结构&#xff1a; 模型采用双分…