python web 基础开发 day14

　　　　　　内容概要：　　　　　　　　　

　　　　　　　　　　HTML

　　　　　　　　　　　　- 标签

　　　　　　　　　　　　1、分类块级行内

　　　　　　　　　　　　2、符号

　　　　　　　　　　　　3、p,br,h

　　　　　　　　　　　　4、input系列

　　　　　　　　　　　　5、form -action -method -enctype--->上传文件

　　　　　　　　　　　　6、select, textarea

　　　　　　　　　　　　7、ur/ol/dl

　　　　　　　　　　　　8、table

　　　　　　　　　　　　9、iframe,fieldset

　　　　　　　　　　　　10、div,span

　　　　　　　　　　CSS　　　　　　　　　　　　

　　　　　　　　　　　　存放位置：单独css文件（优先级最低）

　　　　　　　　　　　　　　　　　 html头部　　

　　　　　　　　　　　　　　　　　标签属性（优先级最高）

　　　　　　　　　　　　- 效果

　　　　　　　　　　　　color:red;

　　　　　　　　　　　　display: none;隐藏

　　　　　　　　　　　　　　　　 inline;内联标签

　　　　　　　　　　　　　　　　 block;块级标签

　　　　　　　　　　　　inline-block：具有内联和块级标签的属性

　　　　　　　　　　　　边距：

　　　　　　　　　　　　　　　　margin 外边距（本身不增加）

　　　　　　　　　　　　　　　　padding 内边距（本身增加）

　　　　　　　　　　　　漂浮：

　　　　　　　　　　　　　　　　float:left;

　　　　　　　　　　　　position:

　　　　　　　　　　　　　　　　relative

　　　　　　　　　　　　　　　　absolute --固定窗口滚动移动

　　　　　　　　　　　　　　　　fixed --固定，窗口

HTML

HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。

浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！(例：djangomoan模版引擎)

Meta(metadata information)

提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

Title

网页头部信息

Link

css

< link rel="stylesheet" type="text/css" href="css/common.css" >

icon

< link rel="shortcut icon" href="image/favicon.ico">

Style

在页面中写样式

例如：

< style type="text/css" > 
.bb{ 
       
   } 
< /style>

Script

引进文件

< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >

写js代码

< script type="text/javascript" > ... </script >

常用标签

标签一般分为两种：块级标签和行内标签

a、span、select 等
div、h1、p 等

各种符号

http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

p 和 br

p表示段落，默认段落之间是有间隔的！

br 是换行

a标签

< a href="http://www.autohome.com.cn"> </a>

1、target属性，_black表示在新的页面打开

2、锚

H 标签

H1

H2

H3

H4

H5

H6

<!DOCTYPE html>
<html lang="en">
<head>
    <!--自闭和标签-->
    <meta charset="UTF-8">
    <meta http-equiv="Refresh" Content="5"/>
    <!--2秒后跳转到页面-->
    <!--<meta http-equiv="Refresh" Content="2; Url=http://www.autohome.com.cn"/>-->
    <!--标签属性 name = 'alex-->
    <link rel="shortcut icon" href="image/favicon.ico">
    <title name = 'alex'>哈哈</title>
</head>
<body>
<!--内联和块级-->
        <div style="background-color: red;">12</div>
        <span style="background-color: green;">12</span>
        <!--符号-->
        <a b>
<!--段落和换行-->
        <p>asdfuo<br />iuasdkfjlkjasdfkj<br />alskdjfas;dlfj</p>
        <p>asdfuoiuasdkfjlkjasdfkjalskdjfas;dlfj</p>
        <p>asdfuoiuasdkfjlkjasdfkjalskdjfas;dlfj</p>
        <!--标题-->
        <h1>a</h1>
        <h2>a</h2>
        <h3>a</h3>
        <h4>a</h4>
        <h5>a</h5>
        <h6>a</h6>
        <h6 style="font-size: 65px;">a</h6>
        <!--a标签-->
        <a href="http://www.baidu.com">跳转1</a>
        <a href="http://www.baidu.com" target="_blank">跳转2</a>
        <!--<div href="http://www.baidu.com">阿萨德发送到</div>-->

        <!--寻找页面中id=i1的标签，将其标签放置在页面顶部-->
        <a href="#i1">第一章</a>
        <a href="#i2">第二章</a>
        <a href="#i3">第三章</a>
        <!--id没有一个标签的id属性值不允许重复；id属性可以不写-->
        <div id="i1" style="height: 500px;">第一章内容</div>
        <div id="i2" style="height: 500px;">第二章内容</div>
        <div id="i3" style="height: 500px;">第三章内容</div>


</body>
</html>

select 标签

Checkbox

password

button

file

提交文件时： enctype='multipart/form-data' method='POST'

textarea

label

姓名：婚否：
姓名：婚否：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--默认get方式提交 和post不同点就是数据格式不一样;enctype使文件上传成功-->
    <form action="http://192.168.11.88:8000/index/" method="get" enctype="multipart/form-data">
        <div style="border: 1px solid green">

        <p>用户名：<input type="text" name="user" />
        密码：<input type="password" name="pwd" />
        </p>
            <!--这里男和女的name设置成相同的值选择时就可以是互斥的-->
        <p>男<input type="radio" name="gender" value="1" />
            女<input type="radio" name="gender" value="2" />
        </p>
        <p>爱好：
            篮球<input name="favor" type="checkbox" value="1" />
        </p>
        <p>文件：
            <input type="file" name="fasongshuju" />

        </p>
        <hr/>
        <p>
            <select name="city">
                <option value="1">上海</option>
                <option value="2">北京</option>
            </select>
        </p>
        <input type="submit" value="提交"/>
        </div>
    </form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form>
        <input type="text" />
    </form>
    <form>
        <div style="border: 1px solid red;">
            <p>用户名：<input type="text" /> </p>
            <p>密码：<input type="password" /> </p>
            <!--<p>邮箱：<input type="email" /> </p>-->
            <p>性别(单选框)：
                <br /> 男<input type="radio" name="ee" />
                <br /> 女<input type="radio" name="ee"/>
            </p>
            <p>爱好（复选框）：
                <br /> 男1<input type="checkbox" />
                <br /> 男2<input type="checkbox" />
                <br /> 男3<input type="checkbox" />
                <br /> 男4<input type="checkbox" />
                <br /> 男5<input type="checkbox" />
            </p>
            <p>城市：
                <select>
                    <option>上海</option>
                    <option>北京</option>
                    <option>广州</option>
                </select>
                <select multiple size="10">
                    <option>上海</option>
                    <option>北京</option>
                    <option>广州</option>
                </select>
                <select>
                    <optgroup label="AAA">
                       <option>上海</option>
                        <option>北京</option>
                    </optgroup>
                    <optgroup label="BBB">
                       <option>广州</option>
                    </optgroup>
                </select>
            </p>
            <p>文件：<input type="file" /></p>
            <p>备注 ： <textarea></textarea> </p>
            <input type="submit" value="submit"/>
            <input type="button" value="button"/>
            <input type="reset" value="reset"/>
        </div>
    </form>
</body>
</html>

ul ol dl

ul.li
ul.li
ul.li

ol.li
ol.li
ol.li

河北省: 邯郸; 石家庄
山西省: 太原; 平遥

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <ul>
        <li>1asdfasdf1</li>
        <li>2asdfasdf</li>
        <li>2asdfasdf</li>
    </ul>

    <ol>
        <li>1asdfasdf1</li>
        <li>2asdfasdf</li>
        <li>2asdfasdf</li>
    </ol>

    <dl>
        <dt>DT</dt>
        <dd>dd</dd>
        <dd>dd</dd>
        <dd>dd</dd>
        <dt>DT</dt>
        <dd>dd</dd>
    </dl>

</body>
</html>

table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--不完整的写法也能实现相同效果-->
    <table border="1">

        <tr>
            <th colspan="2">标题一</th>
            <th>标题二</th>
            <th>标题三</th>
            <!--<th>标题四</th>-->
        </tr>
        <tr>
            <td>内容一</td>
            <td>内容二</td>
            <td>内容三</td>
            <td>内容四</td>
        </tr>
        <tr>
            <td rowspan="2">内容一</td>
            <td>内容二</td>
            <td>内容三</td>
            <td>内容四</td>
        </tr>
        <tr>
            <td>内容一</td>
            <!--<td>内容二</td>-->
            <td>内容三</td>
            <td>内容四</td>
        </tr>

    </table>
    <br/>
<!--完整的写法-->
    <table border="1">
        <thead>
            <tr>
                <th>第一列</th>
                <th>第二列</th>
                <th>第三列</th>
                <th>第四列</th>
            </tr>
        </thead>
        <tbody>
             <tr>
                <td>第一列</td>
                <td>第二列</td>
                <td>第三列</td>
                <td>第四列</td>
             </tr>
             <tr>
                <td>第一列</td>
                <td>第二列</td>
                <td>第三列</td>
                <td>第四列</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

fieldset

用户名：

密码：

form 表单

文件:enctype='multipart/form-data' method='POST'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>老男孩车之家</h1>
    <iframe style=" 100%;height: 2000px;" src="http://www.autohome.com.cn"></iframe>
</body>
</html>

CSS

css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。

存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。

语法：style = 'key1:value1;key2:value2;'

在标签中使用 style='xx:xxx;'
在页面中嵌入 < style type="text/css"> </style > 块
引入外部css文件

必要性：美工会对页面的色彩搭配和图片的美化负责，开发人员则必须知道是如何实现的。

标签选择器

div{ } 
<div > </div>

class选择器

.bd{ } 
<div class='bd'> </div>

id选择器

#idselect{ } 
<div id='idselect' > </div>

关联选择器

#idselect p{ } 
<div id='idselect' > <p> </p> </div>

组合选择器

input,div,p{ }

属性选择器

input[type='text']{ 100px; height:200px; }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--只在c1有效对以下所有内容有效-->
    <style>
        /*标签选择器*/
        div{
            background-color: red;
            color: white;
        }
        /*id选择器，id不能重复,不常用*/
        #i1{
            font-size: 56px;
            color: green;
        }
        /*class选择器，找是c1的标签，可以重复*/
        .c1{
            background-color: red;
        }
        /*层级选择器*/
        /*.c2 div p a{*/
            /*background-color: aqua;*/
        /*}*/
            /*和上面的结果一样，只是两种方法，优先使用下面这种*/
        .c2 div p .c3{
            background-color: red;
        }
        /*组合选择器*/
        .c4,.c5,.c6{
            background-color: green;
        }
    </style>

    <!--common.css其他文件可以共用的格式-->
    <!--<link rel="stylesheet" href="common.css" />-->
</head>
<body>
    <div class="c2">
        <div></div>
        <div>
            <p>
                <span>oo</span>
                <a class="c3">uu</a>
            </p>
        </div>
    </div>
    <div class="c4">1</div>
    <div class="c5">2</div>
    <div class="c6">3</div>
    <div style="background-color: rebeccapurple;color: white;"></div>

</body>
</html>

background

颜色写法三种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: red;
            /*rgb颜色 #FF69B4*/
            /*background-color: #FF69B4;*/
            background-color: rgb(25,180,10);
            /*background-color: red;*/
            500px;

        }
    </style>
</head>
<body>

    <div class="c1"></div>
    <div style=" 500px; background-color: aquamarine">
        <div style=" 20%;background-color: blueviolet">sssss</div>
        <div style=" 800%;background-color: blueviolet">aaaa</div>

    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .img{
            background-image: url("ss.png");
            height: 80px;
             150px;
            background-repeat: no-repeat;
        }
        .img2{
            background-image: url("ss.png");
            height:18px ;
             30px;
            background-position: 91px 19px;
        }
    </style>
</head>
<body>
    <div class="img"></div>
    <div class="img2"></div>
</body>
</html>

display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <span style="background-color: red;height: 50px; 200px;">asdfasdf</span>

    <span style="display: inline-block;height: 50px; background-color: red;">asdsfsdf</span>
</body>
</html>

margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="height: 70px;border: 1px solid red;">
        <div style="height: 30px;background-color: green;"></div>
    </div>

    <div style="height: 100px;background-color: #ddd;border: 1px solid red;">
        <div style="margin-top: 30px;margin-left: 100px;">
            <input />
            <input />
            <input />
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        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: blueviolet;
        }
        .pg-header{
            margin: 0;
            height: 44px;
            background-color: #2459a2;
            line-height: 44px;

        }
        .w{
             980px;
            margin: 0;
        }
    </style>
</head>
<body >
    <div class="pg-header"></div>
        <div class="w">
            <ul>
                <li>菜单一</li>
                <li>菜单二</li>
                <li>菜单一</li>
            </ul>
        </div>
    <div class="pg-body"></div>
    <div class="pg-end"></div>
</body>
</html>

float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style=" 500px;height: 500px;border: 1px solid red;">
        <div style=" 20%;background-color: aqua;float: left">f</div>
        <div style=" 30%;background-color: blueviolet;float: right">a</div>
        <div style=" 50%;background-color: chocolate;float: right">a</div>
        <div style="clear: both;"></div>

    </div>
</body>
</html>

position

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 500px;background-color: green;"></div>
    <div style="position: fixed; right:0;top:0;">返回顶部</div>
    <!--<div style="position: absolute; right:0;top:0;">返回顶部</div>-->


    <!--absolute 是跟relative一起用的它会找relative的区域-->
    <div style="height: 500px; 400px;border: 1px solid red;position: relative;">
        <div style="height: 200px;background-color: red;">
            <div style="position: absolute;bottom: 0;right: 0;">1111</div>
        </div>
    </div>

</body>
</html>