绝对路径和相对路径、border块级和内联_border-bottom内连-优快云博客

本文链接：https://blog.youkuaiyun.com/boyas/article/details/111827305

博客介绍了HTML的一些基础规则，如连续空格或换行解析规则、文件路径（绝对路径和相对路径）选择，还说明了class和ID命名规范。同时阐述了块级盒子（如div、p等）和内联盒子（如a、img等）的特性，以及text-align和border属性的相关知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在HTML里，连续的多个空格或者换行只会被解析为一个空格

文件路径：绝对路径和相对路径（windows）
绝对路径：从根目录进行查找的路径
相对路径：相对于某个文件的位置开始匹配的地址

通常情况，如果代码需要有转移环境的需求，使用相对的。

class命名：
1. 不能数字开头
2. 只能使用数字、字母、连词符(-)
3. 只能使用小写
4. 拼音不能和英文混用

ID命名：
1. 不能数字开头
2. 只能使用数字、字母、连词符(-)
3. 只能使用小写
4. 拼音不能和英文混用
5. ID具有唯一性

块级盒子特性：[div、p、h1-h6]
1. 独占一行
2. 支持width、height、边距（margin、padding）属性

内联盒子特性： [a、img、span]
1. 能跟其他同类型的标签共享一行空间
2. 不支持width、height、边距（margin、padding）属性

text-align：所有的内联元素

border 是复合属性
border：线宽线类型线色;
不同方向边框可以单独控制

transparent：透明色
删除某个方向的边框：
border-方向: none;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2020/12/27</title>
    <style>
       .div1{
           width: 80px;
           height: 80px;
           background: red;
       }
       .div2{
           width: 300px;
           height: 80px;
           background-color: green;
       }
       .div3{
           width: 0;
           border: 50px solid pink;
           border-top:  none;
           border-left: 50px solid transparent;
           border-right: 50px solid transparent;
       }
       .div4{
           width: 0;
           border: 50px solid pink;
           border-top: none;
           border-left: none;
           border-right: 50px solid transparent;
       }
       .div5{
           width: 0;
           border: 100px solid pink;
           border-top: none;
           border-left: 70px solid transparent;
           border-right: 70px solid transparent;
           border-bottom: 100px solid pink;
       }
       .div6{
           width: 80px;
           border: 80px solid #87CEEB;
           border-top:none;
           border-left: 80px solid transparent;
           border-right-color:transparent;
           border-bottom: 80px solid #87CEEB;
       }
       .div7{
           width: 0;
           border: 80px solid blue;
           border-top-color: transparent;
           border-right-color:transparent;
           border-left:50px solid blue;
           border-bottom: 50px solid blue;
       }
    </style>
</head>
<body>
    <div>正方形:</div>
    <div class="div1"></div>
    <div>长方形:</div>
    <div class="div2"></div>
    <div>等腰三角形:</div>
    <div class="div3"></div>
    <div>直三角形</div>
    <div class="div4"></div>
    <div>正三角形</div>
    <div class="div5"></div>
    <div>梯形</div>
    <div class="div6"></div>  
    <div>变态图形</div>
    <div class="div7"></div>
</body>
</html>