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

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

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


注意事项:千万别跟我一样,傻傻地第一次约会跑去看电影,赶紧换个更有趣、有更多互动,方便增进彼此沟通和了解的约会方式吧!

自从见她的第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 ,后面还有更多精彩内容,敬请期待!

说不完的情话

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

99f6204994ad4923adc77a1f8d1d0048.png

目录
相关文章
|
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让你的技术探索之旅充满无限可能。
95 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
|
5月前
|
存储 编解码 移动开发
零基础学前端系列教程 | 和前端谈恋爱的第003天——电影海报
零基础学前端系列教程 | 和前端谈恋爱的第003天——电影海报
34 0
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
187 2
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
53 0