8 图标换行以及其他

原创

bits小兵 2019-10-25 21:47:20 博主文章分类：web基础 ©著作权

©著作权归作者所有：来自51CTO博客作者bits小兵的原创作品，请联系作者获取转载授权，否则将追究法律责任

符号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a rel="nofollow" href="https://www.baidu.com/">测      试</a>
</body>
</html>

代码：测试两字中间有很多空格

enter description here

上图：实际效果看到，测试两字并没有那么多的空格，这是因为不管源码中有多少空格，最多只会保持当前的最大距离。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a rel="nofollow" href="https://www.baidu.com/">测     ; ; 试</a>
</body>
</html>

代码：符号是空格符号

enter description here

上图：越多，显示的空格越多

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a rel="nofollow" href="https://www.baidu.com/">测  >  试</a>
</body>
</html>

代码： > 符号是 >

enter description here

上图：在web中使用<>表示定义标签，用>来表示>符号以免直接使用<>时，被识别成标签格式。

enter description here

p标签、br标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a rel="nofollow" href="https://www.baidu.com/">测  >  试</a>

    <p>1lskjdf89l23j4osdlkjluij2lkj3ljk</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>

</body>
</html>

enter description here

上图：p标签是段落标签，使用p标签可以看到每个段落上下之间都有一定距离，不会很紧凑。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a rel="nofollow" href="https://www.baidu.com/">测  >  试</a>

    <p>1lskjdf89l23j4o<br>sdlkjluij2lkj3ljk</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>

</body>
</html>

代码：在p标签中使用< br >换行

enter description here