Day14 html简介

初识html

<!DOCTYPE html>
<html lang="en">
<head>
    <!--自闭合标签-->
    <meta charset="UTF-8" />
    <!--标签属性-->
    <title name="wang">配置管理</title>
    <!--对title添加图标-->
    <link rel="shortcut icon" href="favicon.ico">
    <!--5秒自动刷新-->
    <!--<meta http-equiv="refresh" content="5" />-->
    <!--10秒自动跳转-->
    <!--<meta http-equiv="refresh" content="10; url=http://www.bing.com.cn" />-->
    <!--关键字-->
    <meta name="keywords" content="软件配置管理" />
    <!--描述-->
    <meta name="description"  content="介绍软件配置管理" />
    <!--专门针对兼容IE使用,表示使用最新的IE浏览器去执行-->
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge" />
</head>
<body>
    <!--块级标签(div,h1,p等),默认占一行-->
    <div style="background: blue">加载</div>
    <!--内联标签(span,select,a等),内容有多少就占多少-->
    <span style="background: red">继续加载</span>
    <!--大于、小于、空格特殊符号显示-->
    &lt;a&nbsp;&gt;a
    <!--段落p标签,换行br标签-->
    <p>我的家在湖北,洞庭湖旁<br>我的家在湖北,洞庭湖旁</p>
    <p>我的家在湖北,洞庭湖旁</p>
    <!--a标签中的跳转,不会新建窗口-->
    <a href="http://www.baidu.com">跳转到百度</a>
    <!--a标签中的跳转,会新建窗口-->
    <a href="http://www.bing.com.cn" target="_blank">跳转到必应</a>
    <!--设置高度-->
    <!--<div style="height: 500px";>我的家乡</div>-->
    <!--锚点-->
    <!--寻找页面中id=i1的标签,将其标签放置在页面顶部-->
    <a href="#i1">第一章</a>
    <a href="#i2">第二章</a>
    <a href="#i3">第三章</a>

    <!--页面中id属性值不允许重复,可以不写-->
    <div id="i1" style="height: 500px";>第一章内容</div>
    <div id="i2" style="height: 500px";>第二章内容</div>
    <div id="i3" style="height: 500px";>第三章内容</div>

    <!--标题标签h,默认从大到小-->
    <h1>企业级软件配置管理</h1>
    <h2>企业级软件配置管理</h2>
    <h3>企业级软件配置管理</h3>
    <h4>企业级软件配置管理</h4>
    <h5>企业级软件配置管理</h5>
    <h6>企业级软件配置管理</h6>

    <!--定制标题大小-->
    <h6 style="font-size: 65px;">企业级软件配置管理</h6>
</body>
</html>
View Code

input系列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        <div style="border: 1px solid red;">
        <p>用户名:<input type="text" /></p>
        <p>密码:<input type="password" /></p>
            <!--email只对最新的浏览器有效,需要自己实现-->
        <p>邮箱:<input type="email" /></p>
        <p>性别:
            <!--单选name相同互斥-->
            <br /><input type="radio" name="gender" />
            <br /><input type="radio" name="gender" />
        </p>
        <p>爱好:
            <!--复选框-->
            <br />看书<input type="checkbox" />
            <br />看电影<input type="checkbox" />
            <br />听音乐<input type="checkbox" />
        </p>
        <p>城市:
            <select>
                <option>西安</option>
                <option>武汉</option>
                <option>合肥</option>
            </select>
            <!--multiple支持多选,size最多看见几个-->
            <select multiple size="5">
                <option>北京</option>
                <option>上海</option>
                <option>深圳</option>
                <option>深圳</option>
                <option>深圳</option>
                <option>深圳</option>
                <option>深圳</option>
                <option>深圳</option>
                <option>深圳</option>
                <option>深圳</option>
            </select>
            <select>
                <optgroup label="一线城市">
                    <option>北京</option>
                    <option>上海</option>
                </optgroup>
                <optgroup label="二线城市">
                    <option>大连</option>
                    <option>汉口</option>
                    <option>厦门</option>
                </optgroup>
            </select>
        </p>
        <p>上传文件:<input type="file" /></p>
        <p>备注:<textarea></textarea></p>
            <!--submit提交当前表单,button普通按钮,reset重置表单-->
        <input type="submit" value="submit"/>
        <input type="button" value="button"/>
        <input type="reset" value="reset"/>
    </div>
    </form>
</body>
</html>
View Code

form标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        <div style="border: 1px solid red;">
        <p>用户名:<input type="text" /></p>
        <p>密码:<input type="password" /></p>
            <!--email只对最新的浏览器有效,需要自己实现-->
        <p>邮箱:<input type="email" /></p>
        <p>性别:
            <!--单选name相同互斥-->
            <br /><input type="radio" name="gender" />
            <br /><input type="radio" name="gender" />
        </p>
        <p>爱好:
            <!--复选框-->
            <br />看书<input type="checkbox" />
            <br />看电影<input type="checkbox" />
            <br />听音乐<input type="checkbox" />
        </p>
        <p>城市:
            <select>
                <option>西安</option>
                <option>武汉</option>
                <option>合肥</option>
            </select>
            <!--multiple支持多选,size最多看见几个-->
            <select multiple size="5">
                <option>北京</option>
                <option>上海</option>
                <option>深圳</option>
                <option>深圳</option>
                <option>深圳</option>
                <option>深圳</option>
                <option>深圳</option>
                <option>深圳</option>
                <option>深圳</option>
                <option>深圳</option>
            </select>
            <select>
                <optgroup label="一线城市">
                    <option>北京</option>
                    <option>上海</option>
                </optgroup>
                <optgroup label="二线城市">
                    <option>大连</option>
                    <option>汉口</option>
                    <option>厦门</option>
                </optgroup>
            </select>
        </p>
        <p>上传文件:<input type="file" /></p>
        <p>备注:<textarea></textarea></p>
            <!--submit提交当前表单,button普通按钮,reset重置表单-->
        <input type="submit" value="submit"/>
        <input type="button" value="button"/>
        <input type="reset" value="reset"/>
    </div>
    </form>
</body>
</html>
View Code

form练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form练习</title>
</head>
<body>
    <!--<form action="https://www.sogou.com/web" method="get">-->
        <!--<input type="text" name="query"/>-->
        <!--<input type="submit" value="提交" />-->
    <!--</form>-->
    <!--需要上传文件时,加上enctype="multipart/form-data"-->
    <form action="http://127.0.0.1:8000/index/" method="post" enctype="multipart/form-data">
        <!--name-->
        <label for="name1">
        用户名:<input type="text" id="name1" name="user"/>
        </label>
        <label for="name2">
        密码:<input type="password" id="name2" name="pwd" />
        </label>
        <!--value--><input type="radio" name="gender" value="1"/><input type="radio" name="gender" value="0"/>
        <p>爱好:
            篮球<input name="favor" type="checkbox" value="1">
            足球<input name="favor" type="checkbox" value="2">
            排球<input name="favor" type="checkbox" value="3">
        </p>
        <p>文件:
            <input type="file" name="oldboy">
        </p>
        <p>
            <!--name和value-->
            <select name="city">
                <option value="1">北京</option>
                <option value="2">西安</option>
                <option value="3">郑州</option>
            </select>
        </p>
        <p>
            备注:<textarea name="extra"></textarea>
        </p>
        <ul>
            <li>计算机专业</li>
            <li>软件工程专业</li>
            <li>密码学专业</li>
        </ul>
        <ol>
            <li>计算机专业</li>
            <li>软件工程专业</li>
            <li>密码学专业</li>
        </ol>
        <dl>
            <dt>计算机专业</dt>
            <dd>网络</dd>
            <dd>计算机组成原理</dd>
            <dt>软件工程专业</dt>
            <dd>python</dd>
            <dd>java</dd>
            <dt>密码学专业</dt>
            <dd>加密算法</dd>
        </dl>
        <input type="submit" value="提交" />
    </form>
    <!--提交的格式:
    {'query':'输入的内容'}
    -->
    <hr/>
    <form>
        <input type="text" />
        <input type="submit" value="提交" />
    </form>
</body>
</html>
View Code

合并单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table练习</title>
</head>
<body>
<!--表格-->
    <table border="1">
        <!--写标题-->
        <thead>
        <!--tr表示一行-->
            <tr>
                <!--th在head中,左右合并单元格,colspan占位-->
                <th colspan="2">第一列</th>
                <th>第二列</th>
                <th>第三列</th>
            </tr>
        </thead>
        <!--写内容-->
        <tbody>
            <tr>
                <!--td表示列-->
                <td>第一列</td>
                <td>第二列</td>
                <td>第三列</td>
                <td>第四列</td>
            </tr>
        <tr>
                <!--td表示列-->
                <td>第一列</td>
                <td>第二列</td>
                <td>第三列</td>
                <td>第四列</td>
            </tr>
        <tr>
                <!--td表示列-->
                <td>第一列</td>
                <td>第二列</td>
                <td>第三列</td>
                <td>第四列</td>
            </tr>
        </tbody>
    </table>
    <hr />
    <table border="1">
        <!--写标题-->
        <thead>
        <!--tr表示一行-->
            <tr>
                <!--th在head中-->
                <th>第一列</th>
                <th>第二列</th>
                <th>第三列</th>
                <th>第四列</th>
            </tr>
        </thead>
        <!--写内容-->
        <tbody>
            <tr>
                <!--td表示列-->
                <td>第一列</td>
                <!--上下合并单元格-->
                <td rowspan="2">第二列</td>
                <td>第三列</td>
                <td>第四列</td>
            </tr>
        <tr>
                <!--td表示列-->
                <td>第一列</td>

                <td>第三列</td>
                <td>第四列</td>
            </tr>
        <tr>
                <!--td表示列-->
                <td>第一列</td>
                <td>第二列</td>
                <td>第三列</td>
                <td>第四列</td>
            </tr>
        </tbody>
    </table>
    <hr />
    <table border="1">
        <!--写标题-->
        <thead>
        <!--tr表示一行-->
            <tr>
                <!--th在head中-->
                <th>第一列</th>
                <th>第二列</th>
                <th>第三列</th>
                <th>第四列</th>
            </tr>
        </thead>
        <!--写内容-->
        <tbody>
            <tr>
                <!--td表示列-->
                <td>第一列</td>
                <td>第二列</td>
                <td>第三列</td>
                <td>第四列</td>
            </tr>
        <tr>
                <!--td表示列-->
                <td>第一列</td>
                <td>第二列</td>
                <td>第三列</td>
                <td>第四列</td>
            </tr>
        <tr>
                <!--td表示列-->
                <td>第一列</td>
                <td>第二列</td>
                <td>第三列</td>
                <td>第四列</td>
            </tr>
        </tbody>
    </table>
    <hr />
    <table border="1">
        <!--写标题-->
        <thead>
        <!--tr表示一行-->
            <tr>
                <!--th在head中-->
                <th>第一列</th>
                <th>第二列</th>
                <th>第三列</th>
                <th>第四列</th>
            </tr>
        </thead>
        <!--写内容-->
        <tbody>
            <tr>
                <!--td表示列-->
                <td>第一列</td>
                <td>第二列</td>
                <td>第三列</td>
                <td>第四列</td>
            </tr>
        <tr>
                <!--td表示列-->
                <td>第一列</td>
                <td>第二列</td>
                <td>第三列</td>
                <td>第四列</td>
            </tr>
        <tr>
                <!--td表示列-->
                <td>第一列</td>
                <td>第二列</td>
                <td>第三列</td>
                <td>第四列</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
View Code

fieldset、iframe

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不常用标签</title>
</head>
<body>
    <h1>fieldset</h1>
    <fieldset>
        <legend>登录</legend>
        <p>用户名:</p>
        <p>密码:</p>
    </fieldset>
    <h1>老男孩Python培训</h1>
    <iframe style="width: 100%;height: 2000px" src="http://autohome.com.cn"></iframe>
</body>
</html>
View Code

CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <link rel="stylesheet" href="common.css" />
    <!--标签选择器-->
    <!--<style>-->
        <!--div{-->
            <!--background-color: red;-->
            <!--color: blue;-->
        <!--}-->
    <!--</style>-->
</head>
<body>
    <!--除非单独需要设置,不建议放到div中-->
    <div style="background-color: aqua; color: #000;;">CSS样式</div>
    <div>CSS样式</div>
    <div>CSS样式</div>
    <div>CSS样式</div>
</body>
</html>
View Code

common.css

div{
            background-color: red;
            color: blue;
}
View Code

CSS选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <!--标签选择器-->
    <style>
        div{
            background-color: red;
            color: blue;
        }
        /*找id为i1的标签*/
        #i1{
            font-size: 32px;
            color: blue;
        }
        /*class选择器*/
        .c1{
            background-color: blueviolet;
        }
        /*层级选择器*/
        /*.c2 div p a{*/
            /*background-color: black;*/
        /*}*/
        .c2 div p .c3{
            background-color: black;
        }
        /*逗号为组合,组合选择器*/
        .c4,.c5,.c6{
            background-color: chocolate;
        }
    </style>
</head>
<body>
    <!--除非单独需要设置,不建议放到div中-->
    <!--<div style="background-color: aqua; color: #000;;">CSS样式</div>-->
    <a id="i1">配置管理</a>
    <div>CSS样式</div>
    <div>CSS样式</div>
    <div>CSS样式</div>
    <!--class可以重复-->
    <span class="c1">配置管理</span>
    <span class="c1">配置管理</span>
    <span class="c1">配置管理</span>

    <div class="c2">
        <div>
            <p>
                <span>00</span>
                <a class="c3">11</a>
            </p>
        </div>
    </div>
    <div class="c3">哈哈</div>

    <div class="c4">哈哈</div>
    <div class="c5">哈哈</div>
    <div class="c6">哈哈</div>
</body>
</html>
View Code

color、height、width

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS样式</title>
    <style>
        .c1{
            color: red;
            /*颜色的三种表示*/
            background-color: blue;
            /*background-color: #dddddd;*/
            /*background-color: rgb(25,18,20);*/
            font-size: 32px;
            /*高度不能100%*/
            height: 60px;
            /*宽度可以100%,也可以设置像素*/
            width: 500px;
        }
    </style>
</head>
<body>
    <div class="c1">配置管理</div>
    <div style="width: 500px;">
        <div style="width: 20%; background-color: darkmagenta">哈哈</div>
        <div style="width: 80%; background-color: blue">呵呵</div>
    </div>
</body>
</html>
View Code

小图片显示处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS样式</title>
    <style>
        .img{
            background-image: url("4.gif");
            height: 150px;
            width: 400px;
            /*不重复填充*/
            background-repeat: no-repeat;
        }
        .img2{
            background-image: url("1.jpg");
            height: 50px;
            width: 50px;
            /*移动图片位置*/
            background-position: 95px 145px;
        }
    </style>
</head>
<body>
    <!--没有加高度和宽度看不见图片-->
    <div class="img"></div>
    <div class="img2"></div>
</body>
</html>
View Code

小图标显示实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS样式</title>
    <style>
        .img{
            background: #dddddd url("jd2015img.png") 5px -140px no-repeat;
            height: 20px;
            width: 25px;
        }
    </style>
</head>
<body>
    <div class="img"></div>
</body>
</html>
View Code

border、display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS样式</title>
</head>
<body>
    <!--边框solid表示四周都是实线-->
    <div style="border:4px solid red; height: 10px;"></div>
    <!--左边框,顺时针顺序(top,right,bottom,left)-->
    <div style="border-left:4px solid red; height: 20px;"></div>
    <!--虚线-->
    <div style="border:2px dotted red; height: 10px;"></div>
    <!--虚线-->
    <div style="border:1px dashed red; height: 10px;"></div>
    <!--隐藏标签并且位置消失-->
    <div style="display:none;background-color: blue">CSS样式</div>
    <!--位置保留,内容消失-->
    <div style="visibility:hidden;background-color: blue">CSS样式</div>
    <!--display: inline块级标签变成内联标签-->
    <div style="display: inline;background-color: brown">CSS样式</div>
    <!--display:block内联标签变成块级标签-->
    <span style="display:block;background-color: darkviolet">哈哈</span>
    <!--内联标签默认不能设置高度和宽度-->
    <span style="background-color: greenyellow; height: 50px;width: 200px;">配置管理</span>
    <!--当设置display:inline-block时,可以对内联标签设置高度和宽度-->
    <span style="display:inline-block;background-color: greenyellow; height: 50px;width: 200px;">配置管理</span>

    <!--display:none在弹窗时使用;左侧菜单-->
    <!--cursor:定制鼠标展示方式-->
</body>
</html>
View Code

margin、padding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边距</title>
</head>
<body>
    <!--外边距(本身不增加)margin-->
    <!--内边距(本身增加)padding-->
    <div style="height: 70px;border: 1px solid blue;">
        <div style="height: 30px;background-color: red;"></div>
    </div>
    <hr />
    <div style="height: 100px;background-color: #dddddd;border: 1px solid red;">
        <div style="margin-top: 30px;margin-left: 100px;">
            <input />
            <input />
            <input />
        </div>
    </div>

</body>
</html>
View Code

float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>漂浮</title>
</head>
<body>
    <div style="width: 500px;height: 500px;border:1px solid darkred">
        <!--float: left往左漂-->
        <div style="width: 30%;background-color: red;float: left;">开发</div>
        <div style="width: 30%;background-color: blue;float: right;">测试</div>
        <!--style="clear: both必须加在最后-->
        <div style="clear: both;"></div>
    </div>
</body>
</html>
View Code

position

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Position</title>
</head>
<body>
    <div style="height: 1000px;background-color: #dddddd"></div>
    <!--position根据窗口定位,fixed固定,不随着页面滚动而移动-->
    <div style="position: fixed;bottom:100px;right: 200px;">返回顶部(fixed)</div>
    <!--absolute随着页面滚动而移动-->
    <div style="position: absolute;bottom:100px;right: 200px;">返回顶部(absolute)</div>
</body>
</html>
View Code

absolute+relative

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Position</title>
</head>
<body>
    <!--relative需要和absolute结合使用,absolute定位根据父级标签中的relative定位,无论有多少个父级标签,它只会找relative定位-->
    <div style="height: 500px;width: 400px;border: 1px solid red;position: relative;">
        <div style="height: 200px;background-color: darkviolet">
            <div style="position: absolute;bottom: 0;right: 0">固定位置</div>
        </div>
    </div>
</body>
</html>
View Code

img

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image</title>
</head>
<body>
    <img src="1.jpg" style="height: 500px;width: 500px">
</body>
</html>
View Code

display应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        /*模态对话框*/
        .modal{
            width: 400px;
            height:300px;
            background-color: blue;
            position: fixed;
            top:50%;
            left:50%;
            margin-left: -200px;
            margin-top: -150px;
            /*优先级,值越大优先级越高*/
            z-index: 10;
        }
        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            /*background-color: black;*/
            /*!*透明度*!*/
            /*opacity: 0.6;*/
            background-color: rgba(0,0,0,.6);
            z-index: 9;
        }
    </style>
</head>
<body>
    <input class="hide" type="button" value="添加" />
    <div class="shadow"></div>
    <div class="modal">
        <input type="text"/>
        <input type="text"/>
        <input type="text"/>
        <input type="text"/>
    </div>
    <div style="height: 2000px;"></div>
</body>
</html>
View Code

页面布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网站</title>
    <style>
        /*去掉空白*/
        body{
            margin: 0;
        }
        ul{
            margin: 0;
            list-style-type: none;
        }
        ul li{
            float: left;
            padding: 0 8px 0 8px;
            color: white;
            cursor: pointer;
        }
        /*当鼠标移动到li标签时,自动应用样式*/
        ul li:hover{
            background-color: greenyellow;
        }
        .pg_header{
            height: 44px;
            background-color: #2459a2;
            /*居中*/
            line-height: 44px;
        }
        .w{
            width: 980px;
            margin: 0 auto;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="pg_header">
       <div class="w">
            <ul>
                <li>菜单一</li>
                <li>菜单二</li>
                <li>菜单三</li>
            </ul>
       </div>
    </div>

    <div class="pg_body">

    </div>

    <div class="pg_footer">

    </div>
</body>
</html>
View Code

 

转载于:https://www.cnblogs.com/icsnow/p/5877228.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值