HTML基础

HTML基础

作为一个程序小白，学习前端编程，首先需要了解其基础标签，接下来就跟大家一起分享一下。

标签

标签又称为标题标签
它共有六个字体型号

…

有1到6字体依次缩小

标签

又称为链接标签，其格式如下：

标签

标签属于块标签

各类基础标签汇总

<h1>进度标签</h1>
<meter min="1" max="100" value="30"></meter>
<progress min="1" max="100" value="30"></progress>

<h1>输入框</h1>
<form action="">
    用户名: <input type="text" placeholder="请输入用户名"> <br>
    秘密: <input type="password" placeholder="请输入密码">

    <input type="submit" value="提交2">
    <input type="reset">

</form>

<!-- summary: 总结 -->
<details open>

    <summary>电脑属性</summary>
    <p>颜色: 银色 黑色</p>
    <p>屏幕尺寸: 15.6  14</p>

效果图

渐变色写法

background: linear-gradient(blue 50px,yellow 70px);

渐变色默认的排布方式是竖着的：
渐变色是可以设置方向的 例如：从左向右：to right
background: linear-gradient(to right, blue 50px,yellow 70px);

当给渐变色加上角度后就会是另一种景象：

在设置颜色时还可以设置成透明色：transparent(透明)
background: linear-gradient(45deg, green 50%,transparent 0);

使用动画

animation: name duration timing-function delay iteration-count direction fill-mode;
name：所引用动画的名字
duration:动画运行时间
timing-function:动画运行方式（linear 线性的）
delay: 动画延迟时间
iteration-count:动画运行次数（infinite 无限的）

制作动画

@keyframes lunzi{
            0%{
                transform: rotate(0deg);
                left: 0px;
            }
            40%{
                transform: rotate(400deg);
                left: 400px;
                top:100px;
            }
            100%{
                transform: rotate(1000deg);
                left: 1500px;
            }
        }

媒体选择器的使用方法

使用语句如下：
@media screen and (max-width:800px){
}

@media screen and (max-width: 800px) {
            .tu{
                display: none;
            }
            .five{
                display:block;
            }
            .six{
                display:block;
            }
            .head2{
                display: none;
            }
        }
        @media screen and (min-width: 800px) {
            .tu>div{
                display: block;
            }
            .tupian{
                display: none;
            }
            .head3{
                display: none;
            }
        }

引用

别人写好的样式，可以直接拿过来使用：

<link rel="stylesheet" href="bootstrap.css">

bootstrap.css 就是别人写好的css文件