零基础学前端系列教程 | 和前端谈恋爱的第003天——电影海报

本文链接：https://blog.csdn.net/weixin_41192489/article/details/122730734

温馨提示：被【】包裹的是专有名词，详细介绍见下文的恋爱宝典，你可以在目录中快速找到它们，有任何问题/建议，欢迎随时微信我，我是朝阳 13908056224！

约会邀请函已经做好了，但迟迟没有发出去

总觉得缺点什么，会是什么呢？

嗯，好像不够生动，缺乏吸引力，仅凭《爱情神话》这个电影名，恐怕很难打动她，要不，先加一张电影海报？

图片 img

      <img
        height="240"
        src="./images/电影海报《爱情神话》.jpg"
        alt="《爱情神话》的电影海报"
      />

img 是image 图片的简写，该标签用于表示图片
height 属性——指定图片的高度，默认单位为像素【px】
src 属性——指定图片的地址，范例中为【相对地址】，还可以是【绝对地址】，支持的【图片格式】为jpg、jpeg、gif、png、bmp，其他格式不支持，如psd、ai
alt 属性——指定图片无法显示时的替代文字，alt是alternate 替代的简写

你可能发现了，img不再是 夹心饼干 风格，没有首尾标签，而是一个【单标签】！

在这里插入图片描述
哇，一下子颜值就提升了不少，有“食欲”多了！
不过还可以更进一步，再加个电影的宣传视频怎么样？

视频 video

<video height="240" controls>
  <source src="./videos/《爱情神话》宣传片.mp4" />
</video>

video 即video 视频，该标签用于表示视频
height 属性——指定视频的高度，默认单位为像素【px】
controls属性——指定是否显示视频的控制面板，写上就能控制视频的播放，不写就无法控制视频的播放。
source 即source 资源 ，该标签用于表示视频资源，写在video 的首尾标签内部，也是【单标签】
src 属性——指定视频的地址，范例中为【相对地址】，还可以是【绝对地址】，支持的【视频格式】为MP4、WebM、Ogg，不支持其他格式，如flv、mkv等。

太棒了，连视频都能搞定，还有什么能难倒我，嘿嘿嘿！

嗯，好像还差点什么……
对了，对了，是电影评论，大家都说好，才是真的好，哈哈！
让我来加个超链接，点击就能跳转打开查看“豆瓣影评”

超链接 a

<a href="https://movie.douban.com/subject/35376457/">电影《爱情神话》豆瓣影评</a>

a 是anchor 锚的首字母缩写，该标签用于表示超链接（超链接用于将不同的网页链接在一起，通过点击超链接，可以实现不同网页间的跳转切换，类似网游中不同世界间的传送器，要想从A网页跳转到B网页，需在A上定义一个超链接，如果想从B网页跳回到A网页，则需在B网页上定义另一个超链接）
href 属性——指定链接的目标地址，通常是一个网址，如此例中的 https://movie.douban.com/subject/35376457/

这时发现一个问题，超链接和图片、视频排列在一行太难看了！
在这里插入图片描述
怎么办呢？
教你一招，用p标签把超链接包裹起来，让它单独占一行就好看啦！

<p>
  <a href="https://movie.douban.com/subject/35376457/">电影《爱情神话》豆瓣影评</a>
</p>

最终效果

在这里插入图片描述

完整代码

<h1>一份诚挚的约会邀请</h1>
<p>你好，我是朝阳，最近新上映的电影《爱情神话》听说还不错，一起去吧？</p>
<p>详细时间地点信息如下：</p>
<ul>
  <li>时间：2022年12月28日19:00-21:00</li>
  <li>地点：太平洋电影院（春熙路店）</li>
  <li>电影：《爱情神话》</li>
  <img
    height="240"
    src="./images/电影海报《爱情神话》.jpg"
    alt="《爱情神话》的电影海报"
  />

  <video height="240" controls>
    <source src="./videos/《爱情神话》宣传片.mp4" />
  </video>
  <p>
    <a href="https://movie.douban.com/subject/35376457/">电影《爱情神话》豆瓣影评</a>
  </p>
  <li>交通：2号地铁春熙路站D口</li>
  <li>碰头：18:45在电影院正门口</li>
</ul>

<p>温馨提示：</p>
<ol>
  <li>晚上天气微凉，多穿点衣服注意保暖；</li>
  <li>年关将近，春熙路人多，留意提防小偷；</li>
  <li>若迷失方向随时联系我，我来接你！</li>
</ol>

恋爱宝典

像素 px

像素，即图像的元素，所有图像都需要显示屏才能展示，所有显示屏都是由一个个小方格拼接而成的，这每一个小方格就是构成图像的最小单位，给它们取了个专业的名字，叫“像素”（在十字绣中，相当于每一个十字）。

整个网页在任意一个时刻呈现给用户的其实都可以看做一张图像（就像手机或视频截屏一样，画面定格在那里），因为不同类型的显示屏的小方格大小各不相同，所以使用像素作为网页中长度的计量单位，比用 cm厘米，mm毫米等更利用适配不同类型的显示器。
在这里插入图片描述

px 是pixel 像素的缩写，不是自然界的长度单位，而是电子屏幕上的1个点，比如某电脑/手机显示屏的分辨率为1024px * 768px，即水平方向上有1024个点，垂直方向上有768个点（每个页面都由1024 * 768个点组成），分辨率越高、画面越清晰！

在html语言中，标签上的属性若是表示长度的属性值，则可以不带单位，因为默认长度单位为像素px，如上文提到的图片中的高度属性 height ，此时 240 的默认单位就是 px。

     <img
        height="240"
        src="./images/电影海报《爱情神话》.jpg"
        alt="《爱情神话》的电影海报"
      />

相对地址 vs 绝对地址

比如我的收货地址为“中国四川省成都市锦江区新光华街9号” ，这种通过地址描述本身就能精准找到目标位置的地址叫“绝对地址”。

如果换个说法，我的收货地址在“航天科技大厦正门左手边100m”，这时快递员必须先搜索找到航天科技大厦，然后再从航天科技大厦正门出发左行100m才能找到目标位置，这种以其他地址作为参照物（起点）来描述目标位置的地址就叫“相对地址”。

现实生活中的地址是用省市区街等行政区划来定位的，而计算机中，某个图片或文档的地址，就是它们在计算机中存储的位置，如
在这里插入图片描述
此时这张图片的存储地址为 E:\图片 即计算机中E盘的名为图片的文件夹中。
那么它的绝对地址就是 ‪E:\图片\唯美星月.jpg

在这里插入图片描述
所以绝对地址通常如下：

若资源来自网络，则以http:或https:开头 http://man.fishc.com/html5/image/FishC.png
若资源来自当前的电脑（俗称“本地”），则以电脑盘符开头 E:\图片\唯美星月.jpg

再以下图中的文件关系为例，在 loveWeb文件夹中有

文件夹 images （里面只有一张图片— 电影海报《爱情神话》.jpg）
文件夹 videos （里面只有一个视频 —《爱情神话》宣传片.mp4）
文件 index.vue

则图片相对于文件 index.vue的地址为 ./images/电影海报《爱情神话》.jpg，这便是相对地址，详细解析如下：

从文件 index.vue出发（./表示当前目录），先进入文件夹 images ./images/, 再指定图片电影海报《爱情神话》.jpg，于是便有了 ./images/电影海报《爱情神话》.jpg

相对地址描述起来稍微复杂一些

./进入下级目录
../进入上级目录（父级目录）
/放在最开头，表示网站根目录
文件夹和文件名之间用/隔开，以便区分
文件名记得带上表示文件类型的后缀，以便提升浏览器解析速度（若无后缀，当存在相同名字的图片、视频等文件时，浏览器需花更多的时间判断具体使用哪个文件）。

比如文件 index.vue 相对于图片——电影海报《爱情神话》.jpg 的地址是 ../index.vue

图片格式

根据图片编码方式的不同，图片会有不同的格式，最常见的图片格式是 jpg、png、bmp等，更多详情可参考百度百科–图片格式

视频格式

根据视频编码方式的不同，视频会有不同的格式，最常见的视频格式是MP4，更多详情可参考百度百科–视频格式

单标签

大部分的html标签都是分首尾标签的，但部分标签因无需在内部包含内容，不分首尾标签，被称为“单标签”，使用时末尾尖括号 > 前的 /可以省略，不过通常建议保留，以便开发时，一眼就看出该标签已结束，比如上文提到的 img 图片标签

      <img
        height="240"
        src="./images/电影海报《爱情神话》.jpg"
        alt="《爱情神话》的电影海报"
      />

另外还有空行 br、水平线分割线 hr、输入框input（后续表单相关的部分再详解）等。

空行 br

<p>第一行</p>
<br/>
<p>第二行</p>

第一行

第二行

br 是blank row 空白行的首字母简写，该标签用于表示空白的行，常用于文章段落间。

水平线分割线 hr

<hr/>

hr 是horizontal rule 水平分割线的首字母简写，该标签用于绘制一条占满整行的水平分割线，常用于文章标题下方，将文章的标题和正文分割开。

说不完的情话

春天会下雪，夏天有大雨，秋天会起风，冬天有艳阳，一年四季会有很多意外，但最迷人的，还是遇见了你。
我喜欢你，就像春归花枝连里，不离不弃；我喜欢你，就像六月伏夏未雨，为你安宁；我喜欢你，就像秋叶流落晚亭，念你而行；我还是很喜欢你，就像冬与雪的生平，上天注定。
睡也是你，醒也是你，无孔不入也是你，吃饭想你，走路想你，望穿秋水还是你。
不是因为寂寞才想你，而是因为想你才寂寞。孤独的感觉之所以如此之重，只是因为想得太深。