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

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

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

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

零基础学前端系列教程 | 和前端谈恋爱的第002天——约会邀请

总觉得缺点什么,会是什么呢?

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

图片 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 水平分割线的首字母简写,该标签用于绘制一条占满整行的水平分割线,常用于文章标题下方,将文章的标题和正文分割开。

说不完的情话

春天会下雪,夏天有大雨,秋天会起风,冬天有艳阳,一年四季会有很多意外,但最迷人的,还是遇见了你。

我喜欢你,就像春归花枝连里,不离不弃;我喜欢你,就像六月伏夏未雨,为你安宁;我喜欢你,就像秋叶流落晚亭,念你而行;我还是很喜欢你,就像冬与雪的生平,上天注定。

睡也是你,醒也是你,无孔不入也是你,吃饭想你,走路想你,望穿秋水还是你。

不是因为寂寞才想你,而是因为想你才寂寞。孤独的感觉之所以如此之重,只是因为想得太深。

目录
相关文章
|
2月前
|
前端开发 JavaScript
轻松上手:基于single-spa构建qiankun微前端项目完整教程
轻松上手:基于single-spa构建qiankun微前端项目完整教程
63 0
|
4月前
|
前端开发 Java Maven
【前端学java】全网最详细的maven安装与IDEA集成教程!
【8月更文挑战第12天】全网最详细的maven安装与IDEA集成教程!
113 2
【前端学java】全网最详细的maven安装与IDEA集成教程!
|
4月前
|
iOS开发 Android开发 MacOS
从零到全能开发者:解锁Uno Platform,一键跨越多平台应用开发的神奇之旅,让你的代码飞遍Windows、iOS、Android、macOS及Web,技术小白也能秒变跨平台大神!
【8月更文挑战第31天】从零开始,踏上使用Uno Platform开发跨平台应用的旅程。只需编写一次代码,即可轻松部署到Windows、iOS、macOS、Android及Web(通过WASM)等多个平台。Uno Platform为.NET生态带来前所未有的灵活性和效率,简化跨平台开发。首先确保安装了Visual Studio或VS Code及.NET SDK,然后选择合适的项目模板创建新项目。项目结构类似传统.NET MAUI或WPF项目,包含核心NuGet包。通过简单的按钮示例,你可以快速上手并构建应用。Uno Platform让你的技术探索之旅充满无限可能。
96 0
|
5月前
|
移动开发 前端开发 HTML5
零基础学前端系列教程 | 和前端谈恋爱的第005天——约会账单
零基础学前端系列教程 | 和前端谈恋爱的第005天——约会账单
31 1
|
5月前
|
前端开发 JavaScript
webpack 和 babel 实用教程【前端必备】
webpack 和 babel 实用教程【前端必备】
53 0
|
5月前
|
存储 前端开发 JavaScript
零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好
零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好
27 0
|
5月前
|
存储 前端开发 C++
零基础学前端系列教程 | 和前端谈恋爱的第004天——打扮漂亮
零基础学前端系列教程 | 和前端谈恋爱的第004天——打扮漂亮
37 0
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
188 2
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
54 0
|
2月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。