day-13 web前端

前端用到html css js

html

1.html简介

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8"/>
<title>女神</title>
<style>
.lvmao{
color: greenyellow;
}

</style>
</head>
<body>

<!--
h1~h6
div
span
a
img
ul
li
ol
li
table
form

文本级的标签：h1~h6 独占一行 span:小跨域的标签
-->
<h1>女神开车去西二旗见金老板</h1>
<h2>女神开车去西二旗见金老板</h2>
<h3>女神开车去西二旗见金老板</h3>
<h4>女神开车去西二旗见金老板</h4>
<h5>女神开车去西二旗见金老板</h5>
<h6>女神开车去西二旗见金老板</h6>
女神开车去西二旗见<span class="lvmao">金老板</span>
<span>女神开车去西二旗见金老板1</span><span>女神开车去西二旗见金老板2</span>

</body>
</html>

2. head标签中的相关标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*
选择器: 基础选择器和高级选择器
标签选择器
*/
html{
/*css的继承只有个别的属性 color font-xxx text-xxx line-**/
color: #fff;
font-size: 14px;
/*text-align: center;*/
}
body{
margin: 0;
}
.top{
100% ;
height: 40px;
background-color: black;
color: #fff;
/*让文本水平居中*/
/*text-align: center;*/
line-height: 40px;
}
.header{
100%;
height: 100px;
background-color: red;
}
.content{
100%;
/*height: 2000px;*/
background-color: mediumpurple;
}
.footer{
100%;
height: 400px;
background-color: grey;

}
/*.hei{*/
/* 100px;*/
/*height: 40px;*/
/*background-color: red;*/
/*overflow: hidden;*/
/*}*/

.container{
1226px;
height: 100%;
/*background-color: transparent;*/

/*让盒子水平居中*/
margin-left: auto;
margin-right: auto;
}

</style>
</head>
<body>

<div class="top">
<div class="container">
top黑色区域
</div>
</div>
<div class="header">
<div class="container">
导航区域
</div>
</div>
<div class="content">
<div class="container">
主体内容区域
</div>
</div>
<div class="footer">
<div class="container">
脚后跟
</div>
</div>

</body>
</html>

<!--
h1~h6：标题标签
span
div：division 分割块区域
a
img
ul
li
ol
li
table
form

-->

3. 超链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html{
            font-size: 14px;
        }
        body{
            margin: 0;
        }
        a{
            text-decoration: none;
        }
        .top{
             100%;
            height: 40px;
            background-color: #333;
            line-height: 40px;
            /*color: #b0b0b0;*/
        }
        .container{
             1226px;
            height: 100%;
            /*两个值： 上下  左右*/
            /*三个值： 上 左右 下*/
            /*四个值： 上 右 下 左*/
            /*一个值： */
            margin: 0 auto;
        }
        /*高级选择器 后代选择器*/
        .top a{
            color: #b0b0b0;
        }
        .top .sep{
            color: #424242;
            margin: 0 6px;
        }
        
    </style>
</head>
<body>
 <!--
        1.独占一行的标签：h1~h6,div
        2.在一行内显示的标签：span a
    -->

    <div class="top">
        <div class="container">
            <div class="top-info">
                <a href="#">小米商城</a>
                <span class="sep">|</span>
                <a href="#">loT</a>
                 <span class="sep">|</span>
                <a href="#">云服务</a>
                 <span class="sep">|</span>
                <a href="#">金融</a>
                 <span class="sep">|</span>
                <a href="#">有品</a>
                 <span class="sep">|</span>
                <a href="#">小爱开放平台</a>
                 <span class="sep">|</span>
                <a href="#">政企服务</a>
            </div>
        </div>
    </div>

</body>
</html>
4. img浮动标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
             100px;
            height: 50px;
        }
        a{
            display: inline-block;
             200px;
            height: 300px;
        }
    </style>
</head>
<body>
 <!--
        块级标签： display:block;  h1~h6,div
                   1.独占一行的标签：
                  2.可以设置宽高 如果不设置宽度 它的宽度是父亲的100%
        行内标签：display:inline; span a
                    1.在一行内显示的标签：
                  2.不能设置宽高 如果不设置宽高 那么默认是字体的大小

         行内块标签：1.在一行内显示  2.可以设置宽高  img input

         标签嵌套：
                1.行内标签可以包含行内标签
                2.行内标签不能包含块级标签

    -->
    <div class="box">
        <span>美女</span>
        <a href="#">
              <img src="./01.jpg" alt="图片来了" width="200" height="300">
             <span></span>

        </a>
        <img src="./01.jpg" alt="图片来了" width="200">
    </div>

</body>
</html>
5. 浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html{
            font-size: 14px;
        }
        body,ul{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .top{
             100%;
            height: 40px;
            background-color: #333;
            line-height: 40px;
            /*color: #b0b0b0;*/
        }
        .container{
             1226px;
            height: 100%;
            /*两个值： 上下  左右*/
            /*三个值： 上 左右 下*/
            /*四个值： 上 右 下 左*/
            /*一个值： */
            margin: 0 auto;
        }
        /*高级选择器 后代选择器*/
        .top a{
            color: #b0b0b0;
        }
        .top .sep{
            color: #424242;
            margin: 0 6px;
        }
        .top-info{
            float:left;
        }
        .top-cart{
            float: right;
            color: red;
        }
        .top-login{
            float:right;
            margin-right: 20px;
             200px;
            height: 40px;
        }
        .content {
             100%;
        }
        .content ul li{
            float: left;
             25%;
            height: 300px;
            background-color: grey;
        }

        /*.ttt{*/
            /*float:left;*/
            /* 100px;*/
            /*height: 100px;*/
            /*line-height: 100px;*/
        /*}*/
    </style>
</head>
<body>
 <!--
        1.独占一行的标签：h1~h6,div
        2.在一行内显示的标签：span a
    -->

    <div class="top">
        <div class="container">
            <div class="top-info">
                <a href="#">小米商城</a>
                <span class="sep">|</span>
                <a href="#">loT</a>
                 <span class="sep">|</span>
                <a href="#">云服务</a>
                 <span class="sep">|</span>
                <a href="#">金融</a>
                 <span class="sep">|</span>
                <a href="#">有品</a>
                 <span class="sep">|</span>
                <a href="#">小爱开放平台</a>
                 <span class="sep">|</span>
                <a href="#">政企服务</a>
            </div>

            <div class="top-cart">购物车</div>
            <div class="top-login">
                <a href="#">登陆</a>
                <span class="sep">|</span>
                <a href="#">注册</a>
                <span class="sep">|</span>
                <a href="#">消息通知</a>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="container">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>

            </ul>

        </div>
    </div>
    <!--<span class="ttt">个哈哈哈哈</span>-->

</body>
</html>
6. 清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html{
            font-size: 14px;
        }
        body,ul{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .top{
             100%;
            height: 40px;
            background-color: #333;
            line-height: 40px;
            /*color: #b0b0b0;*/
        }
        .container{
             1226px;
            height: 100%;
            /*两个值： 上下  左右*/
            /*三个值： 上 左右 下*/
            /*四个值： 上 右 下 左*/
            /*一个值： */
            margin: 0 auto;
        }
        /*高级选择器 后代选择器*/
        .top a{
            color: #b0b0b0;
        }
        .top .sep{
            color: #424242;
            margin: 0 6px;
        }
        .top-info{
            float:left;
        }
        .top-cart{
            float: right;
            color: red;
        }
        .top-login{
            float:right;
            margin-right: 20px;
             200px;
            height: 40px;
        }
        .content {
             100%;
        }
        .content ul .item{
            float: left;
             25%;
            height: 300px;
            background-color: grey;
        }
        .uuu{
             100px;
            height: 400px;
            background-color: red;
        }
        .clearfix{
            clear: both;
        }

        /*.ttt{*/
            /*float:left;*/
            /* 100px;*/
            /*height: 100px;*/
            /*line-height: 100px;*/
        /*}*/
    </style>
</head>
<body>
 <!--
        1.独占一行的标签：h1~h6,div
        2.在一行内显示的标签：span a
    -->

    <div class="top">
        <div class="container">
            <div class="top-info">
                <a href="#">小米商城</a>
                <span class="sep">|</span>
                <a href="#">loT</a>
                 <span class="sep">|</span>
                <a href="#">云服务</a>
                 <span class="sep">|</span>
                <a href="#">金融</a>
                 <span class="sep">|</span>
                <a href="#">有品</a>
                 <span class="sep">|</span>
                <a href="#">小爱开放平台</a>
                 <span class="sep">|</span>
                <a href="#">政企服务</a>
            </div>

            <div class="top-cart">购物车</div>
            <div class="top-login">
                <a href="#">登陆</a>
                <span class="sep">|</span>
                <a href="#">注册</a>
                <span class="sep">|</span>
                <a href="#">消息通知</a>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="container">
            <ul>
                <li class="item">1</li>
                <li class="item">2</li>
                <li class="item">3</li>
                <li class="item">4</li>
                <!--内墙法：在最后浮动的元素的后面加一个空的块级标签 设置该标签的属性clear:both;-->
                <li class="clearfix"></li>
            </ul>



        </div>
    </div>
    <!--<div class="uuu"></div>-->
    <!--<span class="ttt">个哈哈哈哈</span>-->

</body>
</html>
7. 伪元素清除法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html{
            font-size: 14px;
        }
        body,ul{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .top{
             100%;
            height: 40px;
            background-color: #333;
            line-height: 40px;
            /*color: #b0b0b0;*/
        }
        .container{
             1226px;
            height: 100%;
            /*两个值： 上下  左右*/
            /*三个值： 上 左右 下*/
            /*四个值： 上 右 下 左*/
            /*一个值： */
            margin: 0 auto;
        }
        /*高级选择器 后代选择器*/
        .top a{
            color: #b0b0b0;
        }
        .top .sep{
            color: #424242;
            margin: 0 6px;
        }
        .top-info{
            float:left;
        }
        .top-cart{
            float: right;
            color: red;
        }
        .top-login{
            float:right;
            margin-right: 20px;
             200px;
            height: 40px;
        }
        .content {
             100%;
        }
        .content ul{
            overflow: hidden;
        }
        .content ul .item{
            float: left;
             25%;
            height: 300px;
            background-color: grey;
        }
        .uuu{
             100px;
            height: 400px;
            background-color: red;
        }
        .clearfix1:after{
            content:'.';
            clear: both;
            display: block;
            visibility: hidden;
            height: 0;
        }



    </style>
</head>
<body>


    <div class="top">
        <div class="container">
            <div class="top-info">
                <a href="#">小米商城</a>
                <span class="sep">|</span>
                <a href="#">loT</a>
                 <span class="sep">|</span>
                <a href="#">云服务</a>
                 <span class="sep">|</span>
                <a href="#">金融</a>
                 <span class="sep">|</span>
                <a href="#">有品</a>
                 <span class="sep">|</span>
                <a href="#">小爱开放平台</a>
                 <span class="sep">|</span>
                <a href="#">政企服务</a>
            </div>

            <div class="top-cart">购物车</div>
            <div class="top-login">
                <a href="#">登陆</a>
                <span class="sep">|</span>
                <a href="#">注册</a>
                <span class="sep">|</span>
                <a href="#">消息通知</a>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="container">
            <ul class="clearfix">
                <li class="item">1</li>
                <li class="item">2</li>
                <li class="item">3</li>
                <li class="item">4</li>

            </ul>



        </div>
    </div>
    <!--<div class="uuu"></div>-->
    <!--<span class="ttt">个哈哈哈哈</span>-->

</body>
</html>
8.计算盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
             180px;
            height: 180px;
            background-color: green;
            /*padding: 20px;*/
            padding-top: 20px;
            padding-left: 20px;
            /*border: 1px double red;*/
            /*如果保持盒模型不变，加padding，就要减内容的宽高*/
            border-radius: 5px ;
            /*margin垂直方向会出现塌陷问题，避免问题的问题只设置一个标准文档流的盒子的垂直方向的margin*/
            margin-bottom: 100px;

            /*盒子的宽度= 内容的宽度+ 2*padding + 2*border*/
        }
        .box2{
             100px;
            height: 100px;
            background-color: yellow;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="box">alex</div>
    <div class="box2">wusir</div>
</body>
</html>
9. 表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
https://www.baidu.com/s?wd=%E8%B7%AF%E9%A3%9E%E5%AD%A6%E5gB6Wq%2F50ARfE%2BYyM
https://www.baidu.com/s?wd=%E8%B7%AF%E9%A3%9E%E5%AD%A6%E5%9F%8E


server
bind(127.0.0.1,8080)
http://127.0.0.1:8080



-->

<form action="https://www.baidu.com/s"  ="get">
    <input type="text" name="wd" value="路飞学城">
    <br>
    <input type="submit">

</form>

</body>
</html>

相关阅读:
Java线程--LockSupport使用
 Java线程--Callable使用
 Java线程--BlockingQueue使用
 Java线程--CopyOnWrite容器使用
 Java线程--ReentrantLock使用
 Java线程--Atomic原子类使用
 Java线程--ThreadPoolExecutor使用
 Java线程--ForkJoinPool使用
 自己动手搭建SSM
为什么选择SSM+Redis框架开发模式？
原文地址：https://www.cnblogs.com/junyingwang/p/9488870.html