python web 基础开发 day14

时间：2016-08-08 17:09:42 阅读：242 评论：0 收藏：0 [点我收藏+]

标签：

　　　　　　内容概要：　　　　　　　　　

　　　　　　　　　　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="width: 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‘]{ width: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;*/
            width:500px;

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

    <div class="c1"></div>
    <div style="width: 500px; background-color: aquamarine">
        <div style="width: 20%;background-color: blueviolet">sssss</div>
        <div style="width: 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;
            width: 150px;
            background-repeat: no-repeat;
        }
        .img2{
            background-image: url("ss.png");
            height:18px ;
            width: 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;width: 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{
            width: 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="width: 500px;height: 500px;border: 1px solid red;">
        <div style="width: 20%;background-color: aqua;float: left">f</div>
        <div style="width: 30%;background-color: blueviolet;float: right">a</div>
        <div style="width: 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;width: 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>

python web 基础开发 day14

标签：

原文地址：http://www.cnblogs.com/QL8533/p/5749812.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

python web 基础开发 day14

Meta(metadata information)

Title

Link

Script

常用标签

各种符号

p 和 br

a标签

H 标签

H1

H2

H3

H4

H5

H6

select 标签

Checkbox

redio

password

button

file

textarea

label

ul ol dl

table

fieldset

form 表单

标签选择器

class选择器

id选择器

关联选择器

组合选择器

属性选择器

background