Python 复习笔记 HTML CSS

HTML

1.网页的头 Doctype ：告诉游览器使用什么规范来解析html文档，如果没写，就默认是BackCompat
　　1.BackCompat：标准兼容模式未开启
　　2.CSSlCompat：标准兼容模式已开启

2.HTML（主体）
-标签
1.Meta(metadata information) 自闭合标签
　　1.页面编码：<meta charset="UTF-8">
　　2.刷新和跳转：
　　　　刷新：<meta http-equi="Refresh" Content="30"/>
　　　　跳转：<meta http-equi="Refresh" Content="30;Url=http://www.xx.com"/>
　　3.关键字和描述：
　　　　<meta name="keywords" content = '关键字'/>
　　　　<meta name="description" content = '描述'/>
　　4.X-UA-Compatible （用IE内核解析）、
　　　　<meta http-equi="X-UA-Compatible" content="IE=edge"/>
2.Title:就是页面的头部信息
3.Link：
　　1.css
　　2.icon
　　<link rel="shortcut icon" href="image/favicon.ico">
4.div 标签
　　本身没有什么效果，只是显示，默认是块级标签，占一整行（div,h1,p）
5.span 标签
　　本身没有什么效果，只是显示，默认是内联标签，是什么就是什么（a,span,select）

　　PS:如果想要输入<h> 或<m等等的话，可以使用 &lt;h&gt; 这样就能显示了，不然会被当成特殊标签
　　　　空格是&nbsp;
6.p标签

　　代表一个段落，因为行与行之间有空隙 <br/>表示换行<hr/>表示分割线
7.input 标签
input输入类型：text，password，radio，checkbox，file，button，submit，reset，

　　radio，CheckBox:提交的时候，字典会以{name:'on/off'}显示，不知道提交的值，所以加上value，CheckBox同理

<p>性别（单选）：男<input type="radio" name="性别" value='男'>
　　　　　　　　　 女<input type="radio" name="性别" value='女'>
</p>

　　但是，submit，reset，button在form表单中

<input type="submit" value="提交"> <!-- 提交-->
<input type="button" value="提交"> <!-- 只是个按键，想实现功能需要联动-->
<input type="reset" value="提交"> <!-- 重置输入内容-->

8.form 标签：可以提交在本form的输入内容内容，默认是提交的本URL
　　1.可以用action指定提交的URL <form action="htt://www.baidu.com">
　　　　提交的时候，input需要有一个name，这样就可以以｛name:value｝ 提交给URL
　　　　如：<input type="text" name='a'> {'a':'内容'}
　　2.可以用method指定提交类型，默认是get <form method="get">
9.a标签
　　1.跳转页面
　　　　<a href = "http://www.baidu.com">百度1</a> 刷新掉原来标签页
　　　　<a href = "http://www.baidu.com" target = _blank>百度2</a> 新建一个标签页
　　2.锚点
　　　　把a标签和其他标签建立关系，使得可以用a标签跳转
<a href="#i1">点击</a>
　　　　<div id="i1" style="height: 500px">这里1</div>

10.h标签：
　　　　h1,h2,h3,h4,h5,h6 默认字体逐渐变小
11.file标签:需要经过处理才能把文件上传
　　1.<form action="http://www.baidu.com/s" method="post" enctype="multipart/form-data">
　　2.接收方也要做处理
12.select标签：选中哪个提交哪个，不过也可以用value来代指选定的值
　 　....................： 其他标签也一样，如果要提交就加name，然后用value来代替选定值
13.label标签：
把输入框与外面的文字关联起来，当点外面的文字时，就相当于点输入框

<label for="name">
     姓名：
    <input id="name" type="text">
</label>

14.ul ol dl
　　ul 会使内容前面加个点，相当于无序标号
　　　　ul.li————> <ul> <li>内容</lli> </ul>
　　ol 会使内容前面数字，相当于有序标号
　　　　ol.li 使用方法同理
　　dl
　　　　1.dl.dt 相当于标题
　　　　2.dl.dd 相当于内容
　　　　　效果为：DT
　　　　　　　　　　 dd
15.table标签： 也可以不用写thead和tbody，直接tr,td,th

<table>
    <thead>   <!--标题-->
        <tr>  <!--行-->
            <th>第一列</th>  <!--th加粗字体-->
            <th>第二列</th>
            <th>第三列</th>
        </tr>
    </thead>
    <tbody>
        <tr>  <!--内容-->
            <td>第一列</td>
            <td>第二列</td>
            <td>第三列</td>
        </tr>
    </tbody>
</table>

　　左右合并：把<th>第一列</th> <th>第二列</th>，变成<th colspan=“2”>第一列</th>
　　上下合并：把第一行的<th>第一列</th> 和 第二行的<th>第一列</th>
　　　　　　 变成<th rowspan=“2”>第一列</th>
16.fieldest标签：创建一个带名字的边框

<fieldset>
    <legend>登陆</legend>
    <p>用户名：</p>
    <p>密码：</p>
</fieldset>

17.iframe标签：可以直接显示他人的页面：
　　<iframe style="width: 100%;height: 200px" src="http://www.baidu.com/"></iframe>

-CSS
1.style
　　1.直接<div style="background-color: black;color: white">白底黑字</div>
　　2.在head里写上<style>div{background-color: black;color: white}</style>，这样<div> 就都可以直接使用格式了
　　3.在文件中创建一个CSS文件，内容是div{background-color: black;color: white}，这样在创建html的时候只要引用CSS文件就可以直接使用格式了
　　　<link rel="stylesheet" href="（路径/）名称">当前文件就不用加路径
　　优先级：1>2>3 相同属性覆盖，不同属性依次保留
2.选择器
　　1.上面的第二点，就相当于标签选择器
　　2.ID选择器：寻找ID符合条件的，一般ID不能重复，但下面的选择器可以重复
　　 在head里写上<style>#i1{background-color: black;color: white}</style>
　　3. class选择器：寻找所有符合条件的标签,不管在哪或者是ID、class等，只要值是c1就符合
　　　<style>.c1{background-color: black;color: white}</style>
　　3.层级选择器：用空格来代表一层
　　　　比如:下面就可以通过 .c2 div p a{}或 .c2 div p .c3{}来设置,c3且最后一行不会改变

<div class="c2">
    <div></div>
    <div>
        <p>
            <a class="c3">a</a>
        </p>
    </div>
</div>
<div class="c3"></div>

　　4.组合选择器
　　　　 .c1,.c2,.c3{} 多个一起设置
　　 5.属性选择器
　　　　 div[name='haha']{}
3.基础样式
　　1.宽、高：
　　　　宽有100%，高没有。子级的百分比是根据父级的大小来继承的
　　2.颜色：
　　　　可以用red...来表示，也可以用rgb(0,0,0)或rgb的十六进制#ddd.....来显示
　　3.背景图片：（）
　　　　1.写入路径就可以把图片变成背景图片（记得加入宽、高，如果宽高大于图片，
　　　　 就会以填充的形式补充；低于同理）

.c2{
background-image:url("timg.gif");
height: 330px;
width: 440px;
}

　　　　2.但是如果在样式里面加入background-repeat: no-repeat; 那么就不宽高不匹配也不会填充
　　　　3.在样式里面加入background-position: 50px,60px; 可以改变图片的位置，移动第二图层，第一图层不变，挖出来的洞位置也不变
　　　　4.可以把background-等全部放在一起
　　　　　 　如：background : red url('image.jpg') 50px -50px no-repeat; 默认为div的宽高
　　　　5.普通图片用 <img src="">
　　4.边框：
　　　　border:4px(边框线的高度) solid（实线虚线） red（颜色),然后用height来设定整个边框的高度，也可以border-left: 只给左边的框加样式
　　5.显示：
　　　　1.display:none; 使得整个标签的内容和位置消失
　　　　2.display:block; 使内联标签显示成块级标签
　　　　3.display:inline;使块级标签显示成内联标签
　　　　4.display:inline-block; 使得纯内联标签具有内联和块级标签的属性，也能设定高度和宽度
　　　　5.visibility:hidden ;使得标签的内容消失，位置保留
　　6.cursor:
　　　　 改变鼠标放到标签上的样式
　　7.边距：
　　　　 padding-top:20px, 内边距，属于自己这个标签（本身增加）
　　　 　margin-top：20px，外边距，不属于自己这个标签（本身不增加）
　　8.漂浮：float:left...
　　　　1.这样子，还是显示两行

<div style="width: 500px;background-color: #00b0e8">
    <div style="width: 20%;background-color: red">1</div>
    <div style="width: 80%;background-color: black;color: white">2</div>
</div>

　　　　2.这样子就不会，每一个子级尽量往左飘，如果到边缘就往上下移动,如果合起来超过一行就不行，但是这样子相当于去掉父级图层

<div style="width: 500px;background-color: #00b0e8">
    <div style="width: 20%;background-color: red;float: left">1</div>
    <div style="width: 80%;background-color: black;color: white;float: left">2</div>
</div>

　　　　3.这样子当子级图层不覆盖父级图层时，还是会显示父级图层

<div style="width: 500px;background-color: #00b0e8">
    <div style="width: 20%;background-color: red;float: left">1</div>
    <div style="width: 70%;background-color: black;color: white;float: left">2</div>
    <div style="clear: both"></div> <!--放在最后-->
</div>

　　9.positon:
　　　　1.relative:单写没用，但是如果父级是relative，子级是absolute，就absolute就会根据父级的大小来固定位置，如果上一级没有relative就一级一级往上找
　　　　2.absolute:固定在XX位置，滚动滑轮看起来位置就变了

<div style="height: 2000px;background-color: red"></div>
<div style="position: absolute;height: 20px;bottom:0;right:0">返回顶部</div>

　　　　 3.fixed:固定在当前页面的xx位置，滚动滑轮看起来位置也不变

<div style="height: 2000px;background-color: red"></div>
<div style="position: fixed;height: 20px;bottom:0;right:0">返回顶部</div>

　　　　4.一般使用方式
　　　　　　relative+absolute、absolute、fixed

　　10.z-index:
　　　　可以用z-index的大小来判断优先级
　　11.opacity:透明度
　　　　透明 0-1 不透明
　　PS：一些其他补充
　　　　1.line-height:50px; 按照给的像素，让字体居中
　　　　2.list-style-type; 去掉ul,ol前面的特殊标号
　　　　3.XX:hover; 可以使标签在鼠标移动过去的时候变色
　　　　4.用inline-block 如果左右标签不对齐可以适当使用float和上下左右移动3px
　　　　5.关于float的补充使用（背景色）
　　　　　　XX:hover ：当鼠标移动到标签，更改样式
　　　　　　XX:after ：在标签后面加内容
　　　　　　XX:before ：在标签前面加内容

当做网页的时候几乎都需要背景色，但如果在背景上面加多个div那么父级就会被隐藏起来，看不到背景色，而且不好设置高度，因为不知道内容有多少
当然也可以使用 <div style="clear: both"></div> 来使背景颜色显示，不过最好设置一个样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .clearfix:after{
            content: '.';
            clear: both;
            display: block;       
            visibility: hidden;   /*把.隐藏*/
            height: 0;        /*把多出来的高度变为0*/
        }
        .c2{
            float: left;
        }
    </style>
</head>
<body>
    <div style="background-color: red;" class="clearfix">
        <div class="c2" style="background-color: green;height: 50px">11</div>
        <div class="c2">22</div>
<!--        <div style="clear: both"></div>-->
    </div>
</body>
</html>

 

 

小尖角的创建和使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            display: inline-block;
            border-right: 15px red solid;
            border-top: 15px green solid;
            border-left: 15px blue solid;
            border-bottom: 15px yellow solid;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
</body>
</html>

效果如下：其实是由多个三角形组成的，如果哪一部分不想要，可以把颜色设置成透明（transparent）

滚动条

在内容样式中加上overflow: auto;就会在内容超出页面时为内容创建一个滚动条，位置都不改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .pg-header{
            height: 48px;
            background-color: #2e6ab1;
        }
        .pg-body .body-menu{
            position: absolute;
            top: 48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: red;
        }
        .pg-body .body-content{
            position: absolute;
            top: 48px;
            right: 0;
            bottom: 0;
            left: 200px;
            background-color: green;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="pg-header"></div>
    <div class="pg-body">
        <div class="body-menu"></div>
        <div class="body-content"></div>
    </div>
    <div class="pg-footer"></div>
</body>
</html>