温馨提示:被【】包裹的是专有名词,详细介绍见下文的恋爱宝典,你可以在目录中快速找到它们,有任何问题/建议,欢迎随时微信我,我是朝阳 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>
温馨提示:
- 晚上天气微凉,多穿点衣服注意保暖;
- 年关将近,春熙路人多,留意提防小偷;
- 若迷失方向随时联系我,我来接你!
- 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 ,后面还有更多精彩内容,敬请期待!
说不完的情话
- 对你的思念是一天又一天,美丽的你何时出现,亲爱的,好想再见你一面!
- 我这一生遇到过很多人,他们如同指间的烟火,忽明忽暗,最后只沦为一抹灰烬,而你不同,你如北斗,闪耀在我的整个人生。
- 天气预报说以后都是晴天,因为有你都是晴天。
- 你的眼睛真好看,里面有日月,冬夏,晴雨,山川,花草,但我的眼睛更好看,因为里面有你。
- 你是非常可爱的人,真应该遇到最好的人,我也真希望我就是。
- 睡也是你,醒也是你,无孔不入也是你,吃饭想你,走路想你,望穿秋水还是你。