HTML及CSS常用知识点复习

原创

申小兮

发布于 2023-04-20 14:09:17

1K0

发布于 2023-04-20 14:09:17

文章被收录于专栏：前端开发基础

一、常用标签及对应的属性

1、标题标签【不同级标题h1~h6】

<body>
    <h1 title="我是一个标题标签">标题1</h1>
    <h2>标题2</h2>
    <h6>标题6</h6>
</body>

2、段落标签【有换行效果】

<body>
    <p>段落</p>
    <p>段落</p>
</body>

3、图片标签【单标签】

<body>
    <img src="https://p1.music.126.net/c-LMZbZbQLcMobnFciAl7w==/109951167683507100.jpg?imageView&quality=89" alt="图片显示失败">
    <img src="../imgs/3.png" alt="图片显示失败">
</body>

4、超链接（跳转链接）

<a href="跳转地址" target="默认值，当前页面跳转"></a>

（1）target="_self"：默认值，当前页面跳转

（2）target="_blank"：新开一页跳转

5、换行标签（单标签）：<br>

6、列表标标签

（1）有序

<ol type="序号方式">
        <li></li>  //旧版生成多个li标签li*10，新版不可用了
</ol>

（2）无序

<ul>
        <li></li>
</ul>

<body>
    <ol type="a">
        <li>青椒肉丝</li>
        <li>皮蛋瘦肉</li>
        <li>紫菜蛋汤</li>
    </ol>
    <ul>
        <li>青椒肉丝</li>
        <li>皮蛋瘦肉</li>
        <li>紫菜蛋汤</li>
    </ul>
</body>

7、表格标签

（1）容器：<table></table>

属性：

①边框：border="1"

②单元格边沿到单元内容的距离：cellpadding（上下左右都变）

③单元格与单元格之间的距离：cellspacing

（2）表格标题<caption>最喜欢的音乐</caption>

（3）行：<tr></tr>

（4）单元格：<td></td>

①单元格宽度：width=""【注意：不用带单位，因为已经默认封装好的】

②单元格高度：height=""

③行合并：rowspan="2"

④列合并：colspan="2"

（5）表头（特殊的单元格）：<th>歌曲</th>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        th{
            height: 40px;
            width: 300px;
        }
        td{
            height: 40px;
            width: 300px;
            font-weight: bold;
            padding-left: 10px;
        }
    </style>
</head>
<body>
    <table border="1" cellspacing="0">
        <tr>
            <th rowspan="2" width="300" height="80" >设备名称</th>
            <th rowspan="2" width="300">消防泵</th>
            <th width="300">设备参数</th>
            <th width="300"></th>
        </tr>
        <tr>
            <th>额定功率</th>
            <th ></th>
        </tr>
        <tr>
            <th>保养项目</th>
            <th colspan="3">保养完成情况</th>
        </tr>
        <tr>
            <td>擦洗，除污</td>
            <td colspan="3"></td>
        </tr>
        <tr>
            <td>长期不用时，定期盘动</td>
            <td colspan="3"></td>
        </tr>
        <tr>
            <td>测试，检查，紧固</td>
            <td colspan="3"></td>
        </tr>
        <tr>
            <td>检查或更换盘根填料</td>
            <td colspan="3"></td>
        </tr>
        <tr>
            <td>加0号黄油</td>
            <td colspan="3"></td>
        </tr>
        <tr>
            <td colspan="4" style="height: 150px;">备注：</td>
        </tr>
        <tr>
            <td colspan="4" style="padding-left: 30px;height: 80px;">保养作业完成后，保养人员或单位应如实填写保养完成情况，并作相应功能试验，遇有故障应及时填写《建筑消防设施故障维修记录表》（见表B.1）。
                <br>
                注：本表为样表，单位可根据制定的建筑消防设施维护保养计划表确定的保养内容分别制表。
            </td>
        </tr>
    </table>
</body>
</html>

8、表单标签

（1）表单容器：<form action="点击提交后触发的服务器地址"></form>

（2）输入框：<input type="各种属性">

①text：文本输入框

提示文字：placeholder="请输入用户名"

用户输入值存放的位置：name="userName"

②password：密码输入框

③submit：提交按钮

④reset：重置按钮

<body>
    <form action="">
        <input type="text" placeholder="请输入用户名" name="userName">
        <input type="password">
        <input type="submit">
        <input type="reset">
    </form>
</body>

⑤radio：单选框

默认选中：checked

禁止选中：disabled

⑥checkbox：多选框

默认选中：checked

禁止选中：disabled

⑦value

<1>在单选输入框、多选输入框时，定义相关联的值（value="男"/value="0"）

<2>在文本、密码输入框时，表示默认值（定义初始值）

<3>按钮，定义按钮文字

⑧file：文件上传（主要搭配后台地址）

<body>
    <form action="">
        男
        <input type="radio" name="sex" checked value="0">
        女
        <input type="radio" name="sex" value="1">
        运动
        <input type="checkbox" name="hobby" value="a">
        唱歌
        <input type="checkbox" name="hobby" value="b">
        跳舞
        <input type="checkbox" name="hobby" value="c">
        <input type="file" name="icon">
        <input type="submit">
    </form>
</body>

（3）下拉框

<select name="city"> <!-- 容器 -->
                <option value="0">福州</option> <!-- 具体选项，value具有默认值效果 -->
                <option value="2" selected>南京</option><!-- selected默认选中 -->
</select>

（4）多行文本

<textarea name="detail" id="" cols="宽度" rows="高度"></textarea>

<body>
    <form action="">
        <select name="city"> <!-- 容器 -->
            <option value="0">福州</option> <!-- 具体选项，value具有默认值效果 -->
            <option value="1">厦门</option>
            <option value="2" selected>南京</option><!-- selected默认选中 -->
        </select>
        <textarea name="detail" id="" cols="30" rows="10"></textarea>
        <input type="submit">
    </form>
</body>

9、注意区别两个标签

（1）<div></div>为块级元素（会自动换行，可设置宽高）类似的标签还有div、p、h1

（2）<span></span>为行内元素（没有默认样式，主要修饰文字，不会自动换行，大小由内容自动撑开）类似的标签还有a标签

二、常用易忘易错的样式属性

1、positioin：定位

（1）相对定位：相对于当前的正常位置position: relative

（2）绝对定位：position: absolute

①absolute：父子关系（子元素进行定位，相对于其父级【设置了定位/没有设置而是找到浏览器】的绝对定位） ②fiexd：窗口定位（浏览器窗口）

（3）常见搭配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: skyblue;
            position: relative;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            top: 50px;
            right: 20px;
        }
        .box3{
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>

2、display：转换元素特性

（1）none：隐藏

（2）block：转成块级元素（自动换行h1,div,p）

（3）inline：转成内联元素（不会自动换行span,a）

（4）inline-block：行内块（转换成具有自己大小的且横向排列的元素）

（5）与float区别：display占位置，而float不占位置

（6）flex：默认横向布局【Flex的布局内容较多，小伙伴们可以去参考一下前面的文章有专门介绍flex布局🧐】

3、overflow：滚动条

（1）hidden：溢出隐藏【常用overflow: hidden; overflow-x: hidden; overflow-y: hidden; 】

（2）scroll：滚动条，不管有无溢出

（3）auto：自动识别需不需要滚动条

4、平移：transform:translate(x轴,y轴)

5、透明度

（1）opacity：全部包括子元素都透明

（2）rgba(r,g,b,a)：元素不受影响

6、伪类

（1）鼠标的点击、悬浮

（2）标签的前面、后面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            position: relative;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box2{
            width: 50px;
            height: 50px;
            background-color: greenyellow;
        }
        .box:hover .box1{
            background-color: black;
        }
        .box1:active+.box2{
            background-color: violet;
        }
        p::before{
            content: '某某：';
            color: yellow;
        }
        p::after{
            content: '完毕';
            color: aqua;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    <p>你好</p>
</body>
</html>