Web 前端基础标签第一讲


悄悄的说:在 VScode 中要用到任何一个标签,只要在英文输入法下打完字母,直接按键盘中的 Tab,就可以变成标签,例如加粗标签,直接打个 b,然后按 Tab

水平线
<hr>
换行
<br>
备注
<!--在这里面写备注-->
删除线
<del>加删除线</del>
下划线
<u>下划线</u>
上标
10<sup>2</sup>
段落

使用段落标签,文字会独占一行

<body>
    <p>
        这是一个段落
    </p>
    
    <p>
        这是另一个段落
    </p>
</body>

效果如下:
在这里插入图片描述

空格

正常 html 里只能识别一个空格,所以我们想打多个空格时,使用空格标签
注意:一定不要忘了冒号

<body>
    <p>
        这是            一个段落
    </p>

    <p>
        这是&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;一个段落
    </p>
</body>

效果如下:(第一个段落可以看出,直接多个空格并没有识别出来)
在这里插入图片描述

斜体

使用斜体标签,文字会出现斜体效果

<i>里面的文本变成斜体</i>
<body>
    <p>
        <i>这是一个段落</i> 
    </p>

    <p>
        这是另一个段落
    </p>
</body>

效果如下:
在这里插入图片描述

加粗

使用加粗标签,文字会出现加粗效果,用法和斜体标签相同,只不过把i变成b

<b>里面的文本会加粗</b>
标题

标题一共只有六级,若写超出六级标题的标签,将显示为正常文本

<body>
    这里写一句话作为正常文本来对比
    <h1>标题</h1>  <!--一级标题-->
    <h2>标题</h2>  <!--二级标题-->
    <h3>标题</h3>  <!--三级标题-->
    <h4>标题</h4>  <!--四级标题-->
    <h5>标题</h5>  <!--五级标题-->
    <h6>标题</h6>  <!--六级标题-->
    <h7>标题</h7>  <!--只有六级标题,若写超出六级标题将显示为正常文本-->
</body>

效果如下:
在这里插入图片描述

字体设置

现在只是笨拙的改字体样式,等学习了 CSS 就会方便许多
这里我们将字体颜色改成了蓝色,并且将“蓝”字变大

<span style="color: blue;">
     我是<span style="font-size: large;"></span></span> 

效果如下:
在这里插入图片描述

超链接标签

a,Tab 键,就会出来一个模板,在 href 中写点击之后即将跳到的地址,默认在本界面跳转,若想新开一个界面,就加上 target

<a href="http://www.baidu.com" target="_blank">点这里</a>

下一篇文章将介绍列表和图片相关标签

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值