温馨提示：被【】包裹的是专有名词，详细介绍见下文的恋爱宝典，你可以在目录中快速找到它们，有任何问题/建议，欢迎随时微信我，我是朝阳 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 水平分割线的首字母简写，该标签用于绘制一条占满整行的水平分割线，常用于文章标题下方，将文章的标题和正文分割开。
说不完的情话
- 春天会下雪，夏天有大雨，秋天会起风，冬天有艳阳，一年四季会有很多意外，但最迷人的，还是遇见了你。
- 我喜欢你，就像春归花枝连里，不离不弃；我喜欢你，就像六月伏夏未雨，为你安宁；我喜欢你，就像秋叶流落晚亭，念你而行；我还是很喜欢你，就像冬与雪的生平，上天注定。
- 睡也是你，醒也是你，无孔不入也是你，吃饭想你，走路想你，望穿秋水还是你。
- 不是因为寂寞才想你，而是因为想你才寂寞。孤独的感觉之所以如此之重，只是因为想得太深。
