8 图标换行以及其余

时间 2020-02-02

标签图标换行以及其余繁體版

原文原文链接

符号

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

代码：测试两字中间有不少空格html

上图：实际效果看到，测试两字并无那么多的空格，这是由于无论源码中有多少空格，最多只会保持当前的最大距离。web

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

代码：符号是空格符号ide

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

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

代码： > 符号是 > ui

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

p标签、br标签

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

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

</body>
</html>

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

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

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

</body>
</html>

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

上图：能够看到单单使用一个换行标签的话，其上下距离并不像每一个段落标签那么高。htm

p标签属于块级标签。ip

span标签

span标签是行内标签，是一个白板标签（没有特殊特性），便于设计

8 图标 换行 以及其余

符号

p标签、br标签

span标签

8 图标换行以及其余