8 图标换行以及其他

2024-12-19 技术教程

符号

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

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

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

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

代码：符号是空格符号

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

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

代码： > 符号是 >

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

p标签、br标签

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <a href="https://www.baidu.com/">测 > 试</a> 1lskjdf89l23j4osdlkjluij2lkj3ljk 123 123 123</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> 1lskjdf89l23j4o sdlkjluij2lkj3ljk 123 123 123</body></html>

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

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

p标签属于块级标签。

span标签

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