html总结_html总结介绍-CSDN博客

本文链接：https://blog.csdn.net/formylovetm/article/details/102303668

html的初始文件内容

<!DOCTYPE html>
<html lang="en">
<!-- 代表英语 -->
<head>
    <meta charset="UTF-8">
    <!-- 中文网页 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    //宽度是设备屏幕的宽度  //初始的缩放比例
    //maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别
    //user-scalable:是否可对页面进行缩放，no 禁止缩放
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    //X-UA-Compatible是针对IE8新加的一个设置
    <title>Document</title>
</head>

<body>

</body>

</html>

web标准

W3C----------万维网联盟
ECMA------欧洲电脑厂商联合会
XHTML----可扩展超文本标记语言，跟html类似，语法更严格
在这里插入图片描述

<h1></h1>-----------<h6></h6>   标题
<p></p> 段落标签
&nbsp;  英文空格
&ensp; 中文半空格
&emsp; 中文空格
<br/>   换行
<hr/>   水平线
<strong></strong>   <b></b>  加粗
 <em></em>   <i></i>  倾斜
<div></div>
<span></span>

<ul >   //无序列表
 <li></li>
<ul>
 
<ol>   //有序列表
 <li></li>
<ol>

<dl>
<dt>你是谁？</dt>
<dd>皮卡丘</dd>
</dl>

<img src="目标文件路径及全称"  alt="图片替换文本" title="图片标题">
<a href="目标文件路径和全称" title="提示文本"  target="_blank"></a>

 <table width="200px" height="100px" border="1" bordercolor="blue" bgcolor="orange" cellpadding="20px"
        cellspacing="20px">
        <tr align="center">
            <td colspan="2">1,1</td>
            <td rowspan="2">1,3</td>
        </tr>
        <tr>
            <td>2,1</td>
            <td>2,2</td>
        </tr>
    </table>

在这里插入图片描述

input的type类型

在这里插入图片描述

get和post提交的区别

1.get是从服务器获取数据，post是向服务器传输数据
2.get传送数据量少，post传输的数据量多
3.get安全性低，post高，但是执行效率却比post好
4.get传输数据，在url请求中会显示请求的信息，post不会

省略号

.boss {
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

浮动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .boss {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .box1 {
            width: 50px;
            height: 50px;
            background: blue;
            float: left;
        }

        .box2 {
            width: 50px;
            height: 50px;
            background: hotpink;
            float: left;
        }

        .box3 {
            width: 50px;
            height: 50px;
            background: lightseagreen;
            clear: both;
        }

        .wap {
            width: 700px;
            height: 200px;
            background: green;
        }
    </style>
</head>

<body>
    <div class="boss">
    </div>
    <div class="box1">
    </div>
    <div class="box2">
    </div>
    <div class="box3">
    </div>
    <div class="wap"></div>
</body>

</html>

万能清除浮动

<head>
    <style>
        .boss {
            width: 200px;
            background-color: red;
        }

        .boss:after {
            content: '';
            display: block;
            clear: both;
            height: 0;
            overflow: hidden;
            visibility: hidden;
        }

        .box1 {
            width: 50px;
            height: 50px;
            background: blue;
            float: left;
        }

        .box2 {
            width: 50px;
            height: 50px;
            background: hotpink;
            float: left;
        }
    </style>
</head>

<body>
    <div class="boss">
        <div class="box1">
        </div>
        <div class="box2">
        </div>
    </div>
</body>

</html>

伪元素

<head>
    <style>
        .boss {
            width: 100px;
        }

        .boss:first-line {
            color: blue;
        }

        .boss:first-letter {
            color: red;
        }

        /* 选中后的样式 */
        .boss::selection {
            color: violet;
        }

        .boss::before {
            content: '前面插入';
        }

        .boss::after {
            content: '后面插入';
        }
    </style>
</head>

<body>
    <div class="boss">
        发送到发放大声的发送到发放大声的发送到发放大声的
    </div>
</body>

</html>

锚点定位

<a href="#id的名字"></a>
<div id="box"></div>

雪碧图

background-position调整背景图位置
减少服务器请求次数，提高页面加载
减少图片的体积

bfc

BFC，即“块级格式化上下文”（Block Formatting Context），是 CSS 中一个重要的概念，它指的是一个独立的渲染区域，让块级盒子在布局时遵循一些特定的规则。BFC 的存在使得我们可以更好地控制文档流，处理浮动、清除浮动等问题。

我是bfc盒子，我不占领浮动元素的位置（默认后来盒子会占领浮动元素的位置）

<html>
<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: green;
        float: left;
    }

    .box2 {
        height: 100px;
        background-color: hotpink;
        overflow: hidden;
    }

    .box3 {
        width: 200px;
        height: 200px;
        background-color: green;
        float: right;
    }
</style>

<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box3"></div>
        <div class="box2"></div>
    </div>
</body>

</html>

我是bfc盒子，我的孩子元素是浮动的，都参与高度计算

<html>

<body>
    <style>
        .boss {
            overflow: hidden;
            background-color: skyblue;
        }

        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }

        .box2 {
            width: 100px;
            background-color: blue;
            float: left;
        }

        .box2-1 {
            width: 70px;
            background-color: springgreen;
        }

        .box2-1-1 {
            width: 40px;
            background-color: tomato;
            height: 300px;
            float: left;
        }

        .box3 {
            width: 100px;
            height: 200px;
            background-color: yellow;
            float: left;
        }
    </style>
    <div class="boss">
        <div class="box1"></div>
        <div class="box2">
            <div class="box2-1">
                <div class="box2-1-1"></div>
            </div>
        </div>
        <div class="box3"></div>
    </div>
</body>

</html>