前端学习——HTML初学__4 HTML常用标签

要记住标签的语义!!!

要记住标签的语义!!!

要记住标签的语义!!!

标签语义就是告诉我们这个标签是用来do what的!!!

一、标题标签

HTML提供了6个等级的标题标签:<h1>—<h6>。根据重要性递减,就跟word的一级二级三级标题一样哦。

加了标题标签的文字会变粗,字号会依次变大,并且一个标题独占一行。接下来在之前的代码里加入这三句话试试:

<body>
    <h1>我是一级标题嘿嘿</h1>
    <h2>我是二级标题嘿嘿</h2>
    <h6>猜猜我是几级标题</h6>
    是不是很激动呢!
</body>

保存,并且Alt+B,简直妙啊:

 二、段落标签

段落标签就是将文字分段,HTML中使用<p>标签用于定义段落,将网页划分为若干段落。

这里用我的分手文案做个演示哈哈哈哈。

<body>
    <h1>我是一级标题嘿嘿</h1>
    <p>你真要把一个喜欢你的男生推的这么远,一点机会不留。我给你说的快说晚安快说早安等等等等你真的就感觉不出来我在小心翼翼试探你,想确定我们关系还好吗。我节奏是快了,让你不舒服了,我可以变。我为了想见你一面两天没睡觉一整天一口饭没吃,身上五百块钱说来就来最后没见到你也没什么委屈,因为你理我了。还有以前,只要你还理我,我就从来没难过过。</p>
    <p>我不知道,我从没对谁这么认真过,为什么你不可以体谅一下,等我慢慢去学会怎么跟你相处去改变去平静下来,最后因为习惯有你而变得平淡呢?我到现在确实还在奢求你只是一时的推开我懂吗。一个月让你变得有点讨厌我,但是一个月我真的越来越喜欢你,想去保护你。你非要去扎一扎我的心吗,真要推开我,不在给我喜欢你的机会,就删了吧。你后悔不后悔我不知道,我知道三个月后我也照样会难过,但是我的难过跟你没关系了,你开心就好。可能我们的爱情观不一样吧,我认为的恋爱就是可能我们有很多不合的地方,但是我们彼此都会努力坚持这份恋爱,你知道吗?就这样吧,你想删我就删吧,我也不要求什么了,祝你以后遇见的人值得你今天把我推开。</p>
    <h2>我是二级标题嘿嘿</h2>
    <h6>猜猜我是几级标题</h6>
    是不是很激动呢!
</body>

保存后进行演示,嘿嘿我是非主流:

 另外段落标签还有这么几个特点:文本在一个段落中会根据浏览器窗口的大小自动换行,段落之间会有空隙!

三、换行标签

换行标签会将某段文本强制换行显示,这是第一个学习的单标签哦:<br />

直接上非主流代码:

<body>
    <h1>我是一级标题嘿嘿</h1>
    <p>你真要把一个喜欢你的男生推的这么远,一点机会不留。<br />我给你说的快说晚安快说早安等等等等你真的就感觉不出来我在小心翼翼试探你,想确定我们关系还好吗。我节奏是快了,让你不舒服了,我可以变。我为了想见你一面两天没睡觉一整天一口饭没吃,身上五百块钱说来就来最后没见到你也没什么委屈,因为你理我了。还有以前,只要你还理我,我就从来没难过过。</p>
    <p>我不知道,我从没对谁这么认真过,为什么你不可以体谅一下,等我慢慢去学会怎么跟你相处去改变去平静下来,最后因为习惯有你而变得平淡呢?我到现在确实还在奢求你只是一时的推开我懂吗。一个月让你变得有点讨厌我,但是一个月我真的越来越喜欢你,想去保护你。你非要去扎一扎我的心吗,真要推开我,不在给我喜欢你的机会,就删了吧。你后悔不后悔我不知道,我知道三个月后我也照样会难过,但是我的难过跟你没关系了,你开心就好。可能我们的爱情观不一样吧,我认为的恋爱就是可能我们有很多不合的地方,但是我们彼此都会努力坚持这份恋爱,你知道吗?就这样吧,你想删我就删吧,我也不要求什么了,祝你以后遇见的人值得你今天把我推开。</p>
    <h2>我是二级标题嘿嘿</h2>
    <h6>猜猜我是几级标题</h6>
    是不是很激动呢!
</body>

运行结果:

它果然换行啦!!! <br />只是简单的换行,中间没有间距!

四、文本格式化标签

为文本设置粗体,斜体以及下划线等效果时用到哦,这里列个表格看看哦

语义标签说明
加粗<strong></strong>或<b></b>推荐<strong>
倾斜<em></em>或<i></i>推荐<em>
删除线<del></del>或<s></s>推荐<del>
下划线<ins></ins>或<u></u>推荐<ins>

废话不说,直接代码演示:

<body>
    正常文字<br />
    <strong>我粗了</strong><br />
    <em>我xie了</em><br />
    <del>我是删除线</del><br />
    <ins>我是下划线</ins>
</body>

结果:

是不是很强!快夸我!!!

 五、两个特殊标签

<div>和<span>两个标签,没有语义的标签!用来装内容,相当于盒子,可以理解为pdf中的文本框,划定一个区域添加内容。

div意为分割,分区。一行只能放一个div,div里的内容独占一行,相当于大的盒子。

直接代码演示会好理解很多:

<body>
    <div>我真的好想你</div>我真的好想你
    <div>你会想我吗</div>真想见见你
</body>

演示:

span意为跨度,跨距。一行上可以有很多的span,相当于小盒子。继续演示:

<body>
    <span>龙龙</span>
    <span>想</span>
    <span>茹茹</span>
</body>

 

目前理解为每个span之间加了个空格???

还不理解这两个标签怎么用呢!!!

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

龙蛋蛋啊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值