html基础：效果标签+列表标签+图片标签+链接标签

最新推荐文章于 2024-05-27 19:21:01 发布

ycw_zz

最新推荐文章于 2024-05-27 19:21:01 发布

阅读量467

点赞数

分类专栏：前端文章标签： html 前端

本文链接：https://blog.csdn.net/ycw_zz/article/details/122496579

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

下面我们来学习html的效果标签、列表标签以及图片标签和链接标签，这些都是html里面比较基础的东西，也比较容易学。

效果标签

效果标签有三种，即换行标签<br/>、空格标签&nbsp以及水平分割线标签<hr/>

<br>/<br/>标签

<br>和<br/>都为空标签，单独存在，两个虽看起来不同，但意思和作用都是一样的，可以实行换行的效果，只不过在不同的html版本里面用法不同而已，在html5中常用的是<br/>。

例如：我们想将一个段落的句子进行换行，然后在网页上呈现出来

下面我们来看看不使用<br/>标签和使用<br/>标签的区别：

没有使用<br/>：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UFT-8">
        <body>
            <p>红豆生南国，春来发几枝。
            愿君多采撷，此物最相思。</p>
        </body>
    </head>
</html>

vs code的运行结果：

注意：从运行结果中我们可以看出，在编写代码的时候，即使我们用回车键进行了换行，但是没

有使用<br/>实现换行，那么在网页上呈现出来的效果是没有换行的

下面来看一下使用了<br/>的效果：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UFT-8">
        <body>
            <p>红豆生南国，春来发几枝。<br/>
            愿君多采撷，此物最相思。</p>
        </body>
    </head>
</html>

vs code运行结果：

由此可见，使用了回车键进行换行但真正意义上并没有实现换行，使用了<br/>呈现出换行的效果了。

空格标签

语法：

&nbsp

在网页中要实现空格和换行一样，不是在编写代码时使用空格键就行了，它需要我们使用特殊的字符&nbsp才能在网页中呈现出空格的效果。要实现多少个空格就要有多少个&nbsp，&nbsp放在需要空格的地方。

<hr>/<hr/>标签

<hr>/<hr/>标签，单独存在，两个意思和作用一样，不同版本的html用法不同罢了，html5中常用<hr/>，实现水平分割线的效果。

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UFT-8">
        <body>
            <p>红豆生南国，春来发几枝。<br/><hr/>
            愿君多采撷，此物最相思。</p>
        </body>
    </head>
</html>

vs code运行结果：

列表标签

列表标签有两种：有序列表标签和无序列表标签

有序列表标签 : <ol><li>

语法：

<ol>

   <li>信息</li>

   <li>信息</li>

   ......

</ol>

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UFT-8">
        <body>
            <ol>
                <li>小红</li>
                <li>小明</li>
                <li>小伟</li>
            </ol>
        </body>
    </head>
</html>

vs code运行结果：

无序列表标签 : <ul><li>

语法：

<ul>

<li>信息</li>

<li>信息</li>

......

</ul>

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UFT-8">
        <body>
            <ul>
                <li>小红</li>
                <li>小明</li>
                <li>小伟</li>
            </ul>
        </body>
    </head>
</html>

vs code运行结果：

图片标签：<img>

语法：

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

讲解：

1、src：标识图像的位置；

2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

4、图像可以是GIF，PNG，JPEG格式的图像文件。

可以用宽（width）高（height）设置图片的大小。

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UFT-8">
        <body>
            <img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg">
        </body>
    </head>
</html>

vs code运行结果：

<a>标签

为网页添加超链接

语法：

<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本（需要单击打开的文字）</a>

技术点的解释：

a标签有的target属性，代表打开网页的方式。可选值为”_self和_blank”，默认值为_self，代表在当前页面打开链接，_blank代表在新窗口打开链接。

例如：<a href="https://www.sina.com.cn/" target="_self">新浪</a>

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UFT-8">
        <body>
            <a href="https://www.sina.com.cn/"  target="_blank">新浪</a>
        </body>
    </head>
</html>

vs code运行结果：

圈出来的窗口是我们运行后点击“新浪”所打开的窗口

表格标签

创建表格的四个元素：table、tr、th、td

1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。

2、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。

3、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。

4、<th>…</th>：表格的头部的一个单元格，表格表头。

5、表格中列的个数，取决于一行中数据单元格的个数。

6、border属性可以为表格添加边框，属性值为数字。

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UFT-8">
        <body>
            <table border="1">
                <tr>
                    <th>1</th>
                     <th>2</th>
                      <th>3</th>
                       <th>4</th>
                </tr>
                <tr>
                    <td>2</td>
                    <td>2</td>
                    <td>2</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>2</td>
                    <td>2</td>
                    <td>2</td>
                </tr>
               
            </table>
        </body>
    </head>
</html>

vs code运行结果：