Web 前端基础标签第一讲

Web 前端基础标签第一讲

        • 水平线
        • 换行
        • 备注
        • 删除线
        • 下划线
        • 上标
        • 段落
        • 空格
        • 斜体
        • 加粗
        • 标题
        • 字体设置
        • 超链接标签

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

水平线

<hr>

换行

<br>

备注

<!--在这里面写备注-->

删除线

<del>加删除线</del>

下划线

<u>下划线</u>

上标

10<sup>2</sup>

段落

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

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

效果如下:
Web 前端基础标签第一讲_第1张图片

空格

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

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

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

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

斜体

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

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

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

效果如下:
Web 前端基础标签第一讲_第2张图片

加粗

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

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

标题

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

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

效果如下:
Web 前端基础标签第一讲_第3张图片

字体设置

现在只是笨拙的改字体样式,等学习了 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>

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

你可能感兴趣的:(Web 前端基础标签第一讲)