python第14天

 

　　Python之前端web:

　　　　　　　　HTML

　　　　　　　　 CSS

 

一. 什么是HTML：

　　　　　　　html为超文本语言，使用标签来描述网页。

　　

html标签格式：

  • HTML 标签是由尖括号包围的关键词，比如 <html>
  • HTML 标签通常是成对出现的，比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签

html标签所描述的网页：

　　也叫html文档，即浏览器读取html文档，并以网页的形式呈现出来，通过标签解析也没内容。

例如：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Web</title>
 6     <style type="text/css" >
 7 .bb{
 8       background-color: red;
 9    }
10     </style>
11     <link rel="stylesheet" type="text/css" href="mystyle.css" />
12     <base href="http://www.fuckyou.com/images/" />
13 </head>
14 <body>
15     Python之Web前端html
16 </body>
17 </html>

标签描述:

　　　　<head>定义关于文档的信息。

　　　　<title>定义文档标题。

　　　　<base>定义页面上所有链接的默认地址或默认目标。

　　　　<link>定义文档与外部资源之间的关系。

　　　　<meta>定义关于 HTML 文档的元数据。

　　　　<style>定义文档的样式信息。

常用html元素：

　　html标题：

　　　　通过<h1>-<h6>等标签定义。

1 <h1>a</h1>
2     <h2>b</h2>
3     <h3>c</h3>

 

　　html段落：

　　　　通过 <p></p> 标签进行定义的。

<!--&lt;!&ndash;<p>段落和换行</p>&ndash;&gt;<br />-->
    <p>随便的什么那日哦那个<br />电风扇广泛大使馆岁的法国</p>
    <p>的是根深蒂固的是法国豆腐干大师傅个</p>

 

　　html链接：

　　　　通过 <a> 标签进行定义的。

1 <!--<a href=""：链接-->
2     <a href="http://www.baidu.com">百度</a>
3     <!--寻找页面中id=i1的标签，将其标签防止在页面顶部-->
4     <a href="#i1">第一章</a>
5     <a href="#i2">第二章</a>
6     <!--id没有一个标签的id属性值不允许重复；id属性可以不写-->
7     <div id="i1" style="height: 800px">第一章内容</div>
8     <div id="i2" style="height: 800px">第二章内容</div>

　　html图像：

　　　　通过 <img> 标签进行定义的。

1 #加入图片，class为引用CSS属性
2 <img class="img" src="logo.png">

　　html块级：

　　　　通过<div> 标签进行定义，占用的是一整行。

　　html内联：

　　　　通过<span> 标签进行定义，占用的是它所使用的实际块大小

1 <!--内联和块及-->
2     <div style="background-color: red;">123</div>
3     <span style="background-color: green;">123</span>

 

　　input标签：

　　　　input：text&password

　　　　　　　用来做用户名，密码的输入框

1 <!--text：标准的文本输入框，password:密码输入框，内容是加密用*号表示-->
2         用户：<input type="text" name="user"/>
3         密码：<input type="password" name="pwd"/>

 

　　input:radio

　　　　　　标签用来实现单选框：

1 <br> 男：<input type="radio">
2         <br> 女：<input type="radio">
3         <!--对于input标签来说只要，radio的name值相同，那么他们就会互斥，只能选择一个-->
4 
5         <br>男：<input type="radio" name="gender"/>
6         <br>女：<input type="radio" name="gender"/>

　　input:checkbox标签-复选框

1  <!--这里加一个标识checked="checked，为默认选择"-->value不同，name相同。

2         <p>爱好：
3             篮球<input name="favor" type="checkbox" value="1" />
4             足球<input name="favor" type="checkbox" value="2" />
5             乒乓球<input name="favor" type="checkbox"value="3">
6         </p>

　　input:button & submit &reset

　　　　　　　　　　提交按钮和备注

 

1 <p>
2                 <input type="submit" value="提交">　　#提交当前form表单
3                 <input type="button" value="提交字段空">　　#无效果，空字段
4                 <input type="reset" value="重置">　　#重置当前form表单
5             </p>
6             <p>
7                 备注：<textarea name="extra"></textarea>x
8             </p>

　

　　file标签

　　　　　用来提交文件时使用

1 <!--点击选择文件可以上传文件-->
2             <input type="file" />

 

 　　slect标签：

　　　　　　下拉选择框

1 <p>
2       <select name="city">
3              <option value="1">上海</option>
4               <option value="2">北京</option>
5               <option value="3">广州</option>
6       </select>
7  </p>

 

设置默认值（默认值）：

属性添加checkted="checkted"，selected="selected"

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <!--#输入框默认显示内容123-->
 9     输入：<input value="123"/>
10     备注：<textarea>123</textarea>
11     <!--下拉菜单默认显示地址名，默认为上海，指定北京为默认则用selected属性-->
12     <select>
13         <option>上海</option>
14         <option selected="selected">北京</option>
15         <option>广州</option>
16         <option>山西</option>
17         <option>深圳</option>
18     </select>
19     <!--单选框默认选择-->
20     男： <input type="radio" name="g1">
21     女:  <input type="radio" name="g1" checked="checked">
22     <!--多选框默认选择-->
23     <input type="checkbox" name="c1" checked="checked">
24     <input type="checkbox" name="c1">
25     <input type="checkbox" name="c1" checked="checked">
26 </body>
27 </html>

 

　　不点击下拉可自定义默认显示几项内容

 1 <p>
 2             <select name="city" size="3">
 3                 <option value="1">上海</option>
 4                 <option value="2">北京</option>
 5                 <option value="3">广州</option>
 6                 <option value="3">山西</option>
 7                 <option value="3">天津</option>
 8                 <option value="3">深圳</option>
 9                 <option value="3">海南</option>
10             </select>
11  </p>

　　　　select标签,按上“shift”键可以多选-

 

 1 <select multiple="multiple" size="4">
 2         <!--按上“shift”键可以多选-->
 3         <option value="1">上海</option>
 4         <option value="2">北京</option>
 5         <option value="3">广州</option>
 6         <option value="3">山西</option>
 7         <option value="3">天津</option>
 8         <option value="3">深圳</option>
 9         <option value="3">海南</option>
10 </select>

 　　

　　select标签，分组形式

 1  <!--分组  label 选项不能选择，只起到显示分组效果-->
 2         <select>
 3             <optgroup label="北京">
 4                 <option>朝阳区</option>
 5                 <option>海淀区</option>
 6                 <option>昌平区</option>
 7             </optgroup>
 8             <optgroup label="山西省">
 9                 <option>朔州市</option>
10                 <option>太原市</option>
11                 <option>大同市</option>
12             </optgroup>
13         </select>
14

　　form表单

　　　　包含了所有的标签

 1 <form action="http://192.168.11.88:8000/index/" method="post" enctype="multipart/form-data">
 2         
 3         <select>
 4             <optgroup label="北京">
 5                 <option>朝阳区</option>
 6                 <option>海淀区</option>
 7                 <option>昌平区</option>
 8             </optgroup>
 9             <optgroup label="山西省">
10                 <option>朔州市</option>
11                 <option>太原市</option>
12                 <option>大同市</option>
13             </optgroup>
14         </select>
15              <!--点击选择文件可以上传文件-->
16             <input type="file" />
17 
18             <p>
19                 <input type="submit" value="提交">
20                 <input type="button" value="提交字段空">
21                 <input type="reset" value="重置">
22             </p>
23             <p>
24                 备注：<textarea name="extra"></textarea>
25             </p>
26         <!--text：标准的文本输入框，password:密码输入框，内容是加密用*号表示-->
27         用户：<input type="text" name="user"/>
28         密码：<input type="password" name="pwd"/>
29         男<input type="radio" name="gender" value="1" />
30         女<input type="radio" name="gender" value="0" />
31         第一中情况不互斥
32 
33         <br> 男：<input type="radio">
34         <br> 女：<input type="radio">
35         <!--对于input标签来说只要，radio的name值相同，那么他们就会互斥，只能选择一个-->
36 
37         <br>男：<input type="radio" name="gender"/>
38         <br>女：<input type="radio" name="gender"/>
39         <!--这里加一个标识checked="checked，为默认选择"-->
40         <p>爱好：
41             篮球<input name="favor" type="checkbox" value="1" />
42             足球<input name="favor" type="checkbox" value="2" />
43             乒乓球<input name="favor" type="checkbox"value="3">
44         </p>
45 
46         <p>
47             <select name="city" size="3">
48                 <option value="1">上海</option>
49                 <option value="2">北京</option>
50                 <option value="3">广州</option>
51                 <option value="3">山西</option>
52                 <option value="3">天津</option>
53                 <option value="3">深圳</option>
54                 <option value="3">海南</option>
55             </select>
56         </p>
57         size:设置默认几项
58             <select multiple="multiple" size="4">
59                 <!--按上“shift”键可以多选-->
60                 <option value="1">上海</option>
61                 <option value="2">北京</option>
62                 <option value="3">广州</option>
63                 <option value="3">山西</option>
64                 <option value="3">天津</option>
65                 <option value="3">深圳</option>
66                 <option value="3">海南</option>
67             </select>
68         
69     </form>

　　fieldset标签

1 <fieldset>
2             <legend>协议</legend>
3             请仔细阅读协议内容：
4 </fieldset>

　　列表ul/ol/dl

 1 <ul>
 2         <li>line1</li>
 3         <li>line2</li>
 4         <li>line3</li>
 5     </ul>
 6     <ol>
 7         <li>line1</li>
 8         <li>line2</li>
 9         <li>line3</li>
10     </ol>

　　表格的定义：

 

 1 <table border="1">
 2         <tr>
 3             <th>标题一</th>
 4             <th>标题二</th>
 5             <th>标题三</th>
 6         </tr>
 7         <tr>
 8             <td>内容一</td>
 9             <td>内容二</td>
10             <td>内容三</td>
11         </tr>
12         <tr>
13             <td>内容一</td>
14             <td>内容二</td>
15             <td>内容三</td>
16         </tr>
17         <tr>
18             <td>内容一</td>
19             <td>内容二</td>
20             <td>内容三</td>
21         </tr>
22         <tr>
23             <td>内容一</td>
24             <td>内容二</td>
25             <td>内容三</td>
26         </tr>
27     </table>

 

 　　表格合并：

 1 <table border="1">
 2         <tr>
 3             <th colspan="2">标题一</th>
 4             <th>标题二</th>
 5             <!--<th>标题三</th>-->
 6         </tr>
 7         <tr>
 8             <td>内容一</td>
 9             <td>内容二</td>
10             <td>内容三</td>
11         </tr>
12         <tr>
13             <td rowspan="2">内容一</td>
14             <td>内容二</td>
15             <td>内容三</td>
16         </tr>
17         <tr>
18             <td>内容一</td>
19             <td>内容二</td>
20             <!--<td>内容三</td>-->
21         </tr>
22         <tr>
23             <td>内容一</td>
24             <td>内容二</td>
25             <td>内容三</td>
26         </tr>
27     </table>

 

　　

　　CSS

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

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

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

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

注： 提高优先级使用： style里标签添加：！important

例如：color:red !important

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

标签选择器

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>
    <link href="css/glyphicons.css" rel="stylesheet" />

<style>
         *{
            margin: 0;
             padding: 0;
        }
        .pg-header{
             background-color: whitesmoke;
        }
        .w{
            width: 90%;
            height: 25px;
            line-height: 25px;
            margin: 0 auto;
        }

        ul{
            margin: 0;
            list-style: none;
        }
        ul li{
            float: left;
            font: 15px/150% Arial,Verdana,"\5b8b\4f53";
            padding: 0 8px 0 8px;
            color: Black;
            cursor: pointer;
        }
        .f1{
            float: left;

        }
        .f2{
            float: right;
        }
        ul li:hover{
            background: whitesmoke;
            color: red;
        }

<body>
    <div class="pg-header">
        <div class="w" >
            <ul class="f1">
                <li >*收藏本站</li>
            </ul>
            <ul class="f2" >
                <li>登陆</li>
                <li>注册</li>
                <li>我的订单</li>
                <li>我的收藏</li>
                <li>VIP会员俱乐部</li>
                <li>客户服务</li>
                <li>关注</li>
                <li>手机版</li>
            </ul>

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

　　

　　border: 边框

 1 <body>
 2     <!--第一种：设置一个线粗2像素、实线、红色、框高20像素（不写框高线就重叠了）、框里面的内容为hello-->
 3         <div style="border: 2px solid red;height: 20px">hello</div>
 4 
 5         <!--第二种：设置线粗2像素、点形式的线、黑色、框高20像素，框里面的内容为hello2-->
 6         <br /><div style="border: 2px dotted black;height: 20px">hello2</div>
 7 
 8         <!--第三种：设置线粗2像素、虚线、蓝色、框高20像素，框里面的内容为hello3-->
 9         <br/><div style="border: 2px dashed blue;height: 20px">hello3</div>
10 </body>

边框可以自定义上下左右： 

border-left :左
border-right：右
border-top ： 上

border-buttion： 下
　　

　　margin：外边距

1 <h2>margin</h2>
2     <div style="border: 1px solid red;height: 70px">
3         <div style="background-color: green;height: 50px;margin-top: 20px">
4         </div>
5     </div>

Margin延伸（单独设置四边间距属性单词）

margin-left 对象左边外延边距 
margin-right 对象右边外延边距 
margin-top 对象上边外延边距 
margin-bottom 对象下边外延边距 　　

    padding:内边距

　　

 

 

 

posted @ 2016-08-09 15:18  浮光掠影转瞬间  阅读(232)  评论(0)  编辑  收藏  举报