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

自从见她的第1天，我便对她一见钟情 ！

​​零基础学前端系列教程 | 和前端谈恋爱的第001天——你好，前端​​

虽然只是简单地问了个好，但很开心她给我留了联系方式，听说最近上映的电影《爱情神话》还不错，要不约她一起看？

嗯，说干就干！

根据恋爱宝典的友情提示，她最喜欢 夹心饼干 风格【HTML】的消息：

比如第1天的

你好，前端！

虽然她也能看懂，但她更喜欢

<p>你好，前端！</p>

就像 夹心饼干 一样，将你要表达的核心内容夹在中间，外面用两个标签包裹。
不同的标签代表了不同的含义，还自带特有的样式。

比如此处的字母p，表示段落（p为​​paragraph 段落​​的首字母）。

• 用尖括号包裹p，就是首标签​​<p>​​——写在内容前面，表示开始；
• 用带​​/​​的尖括号包裹p，就是尾标签​​</p>​​——写在内容后面，表示结束；

所以最终这份约会邀请的效果是这样的：

标题 h

<h1>一份诚挚的约会邀请</h1>

• 标题与正文相比，文字会加大加粗，并独占一行。
• h为​​headline 标题​​ 的首字母
• 1 表示标题的级别，共 h1、h2、h3、h4、h5、h6 六级标题，样式上的区别表现为文字逐渐变小、变细



• 效果为：

段落 p

<p>你好，我是朝阳，最近新上映的电影《爱情神话》听说还不错，一起去吧？</p>
<p>详细时间地点信息如下：</p>

• 段落是根据正文内容划分的独立部分，和标题一样，会独占一行！
• p 是​​paragraph 段落​​ 的首字母

效果如下：

你好，我是朝阳，最近新上映的电影《爱情神话》听说还不错，一起去吧？

详细时间地点信息如下：

无序列表 ul li

<ul>
      <li>时间：2022年12月28日19:00-21:00</li>
      <li>地点：太平洋电影院（春熙路店）</li>
      <li>电影：《爱情神话》</li>
      <li>交通：2号地铁春熙路站D口</li>
      <li>碰头：18:45在电影院正门口</li>
    </ul>

• ul 是​​unordered list 无序列表​​ 的首字母缩写
• li 是​​list item 列表项​​ 的首字母缩写
• 通过修改属性 type （默认值为实心圆点 disc），可以修改默认的小黑点样式，如下：

实心方点 square

<ul type="square">
      <li>电影：《爱情神话》</li>
    </ul>

空心圆 circle

<ul type="circle">
      <li>电影：《爱情神话》</li>
    </ul>

有序列表 ol li

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

温馨提示：

1. 晚上天气微凉，多穿点衣服注意保暖；
2. 年关将近，春熙路人多，留意提防小偷；
3. 若迷失方向随时联系我，我来接你！

• ol 是​​ordered list 有序列表​​ 的首字母缩写
• li 是​​list item 列表项​​ 的首字母缩写
• 通过修改属性 type （默认值为数字1），可以修改序号，如字母 a

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

• 通过修改属性 start （默认值为数字1） ，可以修改计数起点，如数字 4

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

最终效果

完整代码

<h1>一份诚挚的约会邀请</h1>
<p>你好，我是朝阳，最近新上映的电影《爱情神话》听说还不错，一起去吧？</p>
<p>详细时间地点信息如下：</p>
<ul>
  <li>时间：2022年12月28日19:00-21:00</li>
  <li>地点：太平洋电影院（春熙路店）</li>
  <li>电影：《爱情神话》</li>
  <li>交通：2号地铁春熙路站D口</li>
  <li>碰头：18:45在电影院正门口</li>
</ul>

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

恋爱宝典

HTML

HTML的全称为超文本标记语言，是Hyper Text Markup Language的首字母缩写，最大的特点就是 夹心饼干 风格 —— 用代表不同内容含义和特定样式的标签，将要展示的内容夹在中间。

在前端的世界里，HTML就是砖瓦，用于表现主体内容，至于背景色、字体大小等装饰效果，有另外一种名叫CSS的语言负责（不急，过两天再教你！）

今天也只是简单了解了HTML最常用的标签——标题 h、 段落 p、 无序列表 ul li 、有序列表 ol li ，后面还有更多精彩内容，敬请期待！

说不完的情话

• 对你的思念是一天又一天，美丽的你何时出现，亲爱的，好想再见你一面！
• 我这一生遇到过很多人，他们如同指间的烟火，忽明忽暗，最后只沦为一抹灰烬，而你不同，你如北斗，闪耀在我的整个人生。
• 天气预报说以后都是晴天，因为有你都是晴天。
• 你的眼睛真好看，里面有日月，冬夏，晴雨，山川，花草，但我的眼睛更好看，因为里面有你。
• 你是非常可爱的人，真应该遇到最好的人，我也真希望我就是。
• 睡也是你，醒也是你，无孔不入也是你，吃饭想你，走路想你，望穿秋水还是你。