html&css小白标签篇

最新推荐文章于 2024-09-12 18:22:06 发布

hyjprogramme

最新推荐文章于 2024-09-12 18:22:06 发布

阅读量222

点赞数 1

文章标签： html 前端 css

本文链接：https://blog.csdn.net/m0_70024795/article/details/125939803

版权

基础标签

<div></div>:用于存放大元素，做盒子布局，大区域大面积排版等；

<span></span>:适用于用作于小元素等等；

h1-h6:h1用作于文本标签，或者网页logo这类重要的布局元素，h2-h6可以用作其他的。

<a></a>:用存放链接

<img>:存放图片，它的原生局内属性含义为

alt图片不能正常显示的时候提示文字个别浏览器鼠标移入提示文字

title鼠标移入提示文字

<ul><li></li></ul>:无序列表， ul的子标签只能是li，但li里可以嵌套别的标签

<ol><li></li></ol>:有序列表， li的父级只能是ul或者ol

<dl></dl>:定义列表，dl定义列表 dt放置标题一般只有一个dt dd放置描述性内容

<dt></dt>:放置标题，dl的子级只能是dt和dd dt和dd的父级只能是dl

<dd></dd>:放置描述性文字

其中dl的格式为：

<dl>

<dt>水果</dt>

<dd>苹果</dd>

<dd>橘子</dd>

<dd>香蕉</dd>

</dl>

<video controls src=""></video>：存放视频

<audio src=""></audio>:存放音频

标签分类

单双标签

双标签：<标签></标签>

单标签：<标签>或者<标签 />

块级行内标签

块级标签：独占一行 p div h1-h6 dl dt dd ul li等等

行内标签：和其他标签并排 a span等等

img是一个特殊的标签，属于行内块，既可以修改高度，也不独占一行

其中行内标签不可以添加高，如果想要让行内标签有高度可以给他添加一个display的css,display的属性有block（块级），inline-block（行内块），inline（行内）

盒子模型

盒子模型是html一个很重要的内容，主要用于布局应用，它的思想是将每一个网页分成不同的盒子。让其可以更好的进行布局，就好比一个网页可以头部，主要内容以及底部，这时候就可以将这几部分化成几个大盒子，在这里大盒子里又可以划分为几个小盒子，就好比

从这个网页就可以看出，整个网页分成了三个大盒子，之后在每个大盒子里再分为别的小盒子。

盒子模型指的就是标签的占位 margin padding width height border

简单css

height:设置高度

width：设置宽度

background:设置背景，background的参数可以直接是颜色，或者可以填下列的参数

第一个值：图片地址

第二个值：平铺方式默认平铺 repeat no-repeat repeat-x reapeat-y

第三个值：水平方向坐标可以书写具体的值 left center right

第四个值：垂直方向坐标可以书写具体的值 top center bottom

第五个值：颜色

如background:url(https://p3.ssl.qhimgs1.com/sdr/400__/t01cf4a2005f74c201d.png) repeat-y;

这个的意思是将图片向y轴的方向平铺

border：设置边框，参数为，（线的粗细线的类型solid（实线） dashed（虚线） dotted（圆点虚线）线的颜色），比如

border:10px dashed #00f;设置边框大小为10px，线的类型为虚线，颜色为#00f

字体大小：font-size

字体类型：font-family

首行缩进：text-indent

去掉下划线：text-decoration:none;

list-style:去掉a标签前面的小圆点

border；设置边框 ( 边框大小边框类型（solid实线，dashed（虚线） dotted ）边框颜色)

margin:设置外边距大小，（上右下左）

padding：设置内边距大小

float（重要）:设置浮动，浮动参数为left或者right，浮动只是用来做左右排列的。如果给子级浮动过后，一般的标签不设置高度的话会根据内容来确定高度，没有单独设置高度的父级会没有高度，将会将整个布局变乱，这就需要给父级加上overflow：hidden消除浮动也可以用作图片超出部分隐藏

设置盒子居中（两个一起用）：

margin-left：auto；

margin-right：auto；

/* 鼠标移入样式改变

选择标签:hover{

鼠标移入样式

}

.nav li:hover{

background: blueviolet;

/* 设置圆角值越大圆角越明显 */

border-radius: 15px;

}

line-height: 24px;设置文字垂直居中，参数为你放置的容器高度

text-align:center :文字水平居中

transform：rotate（）可以旋转

transform：translate（）实现平移

让字体变成透明色：

background：rgba(0，0，0，0.3) /* 实现透明色 rgb书写红绿蓝 a书写透明度，a的方位填0--1之间就可以实现透明色 */ ，用background做透明色的话会有一个灰色的背景色，如果不需要背景色的话可以使用oopacity：参数0--1之间,0隐藏占位；

visibility: hidden; /* 隐藏标签占位 */

定位：

固定定位

固定定位( position:fixed)：

/* 网站布局的时候，首先考虑标准流(不浮动，不定位)，再次是浮动，最后是定位 */

固定定位实现的效果是不会随着窗口的滚动而滚动，会一直存在网页中的一个固定位置

参照物是当前的窗口 left top bottom right left和right top和bottom只能存在一个

不占位,相互遮盖的效果。多个定位同时存在，默认后写(结构)的在上面。可以通过z-index调整图层顺序。值越大越靠上。默认是0

固定定位以后脱离标准流(行内标签水平排列，块级标签垂直，不浮动不定位)，变成行内块

例：img{

position: fixed;

left:10px;

bottom:10px;

z-index: 1;

}

相对定位（position：relative）（重要）:

相对定位：相对自身移动。参照物是自身原来的位置。

一般用来做微调。不会对其余标签造成影响

占位：占的是原来的位置

半脱离标准流：不会改变标签的性质。一方面标签的性质没有改变。另外一方面可以微调位置

很少单独使用,配合绝对定位使用

例子：.pic{

position: relative;

top:-100px

}

绝对定位（position:absolute）：

绝对定位实现的效果，一个标签在另外一个标签上面

一个标签绝对定位以后，会向上寻找，找到有定位的标签，然后以该标签作为参照物

一般情况下子级绝对定位，父级相对定位。相对定位对别的标签影响最小

不占位

脱离标准流，变成行内块

例：

<style>

        div{
                background:lime;
                margin:200px 200px 0px 200px;
                width:400px;
                position: relative;
            }
       span{
                position: absolute;
                top:0px;
                left:0px;
                background:red;
                color:white;
                width:100px;
                text-align: center;
            }
</style>

<body>
 <div>
            <img src="https://p0.ssl.img.360kuai.com/dmfd/155_155_/t01b81ca7f9ed5da91a.webp?size=155x155" alt="">
            <span>当面应怼</span>
            <p>他给xxx上了一课</p>
        </div>
</body>

这个例子就是在给span进行绝对定位，之后对他的父级div进行相对定位，注意在对父级进行相对定位时不要给父级的定位添加参数

精灵图片引用

span

              span{

                width:71px;

                height: 71px;

                display: inline-block;  //设置成行内块，给span增加高度

                background:url('https://www.txpc.cn/res/images/sprite/my-icons-sc9dad631e6.png') no-repeat 0px -323px;

            }

            span:hover{

                /* 鼠标移入图片时需要更换的背景图片位置地址 */

                background-position: 0px -394px;

            }





<body>


       <span></span>

       <!-- bui和span标签用法一样，引入小元素 -->

       <b>加粗</b>

       <u>下划线</u>

       <i>倾斜</i>

    </body>

表单：

 <!-- 表单属性:autofocus自动聚焦 selected默认选中  checked选框选中  maxlength最大长度 disabled禁用 placeholder默认提示-->

        <form action="xxx.html">

            <p><label for="user" >用户名:</label><input id="user" autofocus type="text" maxlength="4" disabled placeholder="百度一下"></p>

            <p><label for="pass">密码:</label> <input id="pass" type="password" placeholder="请输入密码"></p>

            <p><label for="pass">手机号:</label> <input id="pass" type="number"></p>

            <!-- radio单选框，需要加相同的name值，成为真正的单选框 -->

            <p><label for="">性别:</label> <input type="radio" name="sex" checked>男 <input name="sex" type="radio" checked>女 </p>

            <p> <label for="">爱好:</label> <input type="checkbox" checked>写代码   <input type="checkbox" checked>xxx </p>

            <p>

                <label for="">地址</label>

                <!--  select>option下拉选框-->

                <select name="" id="">

                    <option value="">北京</option>

                    <option value="">上海</option>

                    <option value="" selected>广州</option>

                </select>

            </p>

            <p>

                <label for="">个人介绍</label>

                <!-- textarea文本域，输入多行内容 -->

                <textarea name="" id="" maxlength="10"></textarea>

            </p>

            <!-- 按钮 -->

            <button>按钮</button>

            <input type="button" value="按钮">



            <!-- reset和submit放置在 form内部有用 -->

            <input type="reset" >

            <input type="submit">

        </form>