python第14天

　　Python之前端web:

　　　　　　　　HTML

　　　　　　　　 CSS

一. 什么是HTML：

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

html标签格式：

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

html标签所描述的网页：

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

例如：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Web</title>

     <style type="text/css" >

 .bb{

       background-color: red;

    }

     </style>

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

     <base href="http://www.fuckyou.com/images/" />

 </head>

 <body>

     Python之Web前端html

 </body>

 </html>

标签描述:

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

　　　　<title>定义文档标题。

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

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

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

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

常用html元素：

　　html标题：

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

 <h1>a</h1>

     <h2>b</h2>

     <h3>c</h3>

　　html段落：

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

<!--&lt;!&ndash;<p>段落和换行</p>&ndash;&gt;<br />-->

    <p>随便的什么那日哦那个<br />电风扇广泛大使馆岁的法国</p>

    <p>的是根深蒂固的是法国豆腐干大师傅个</p>

　　html链接：

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

 <!--<a href=""：链接-->

     <a href="http://www.baidu.com">百度</a>

     <!--寻找页面中id=i1的标签，将其标签防止在页面顶部-->

     <a href="#i1">第一章</a>

     <a href="#i2">第二章</a>

     <!--id没有一个标签的id属性值不允许重复；id属性可以不写-->

     <div id="i1" style="height: 800px">第一章内容</div>

     <div id="i2" style="height: 800px">第二章内容</div>

　　html图像：

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

 #加入图片，class为引用CSS属性

 <img class="img" src="logo.png">

　　html块级：

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

　　html内联：

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

 <!--内联和块及-->

     <div style="background-color: red;">123</div>

     <span style="background-color: green;">123</span>

　　input标签：

　　　　input：text&password

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

 <!--text：标准的文本输入框，password:密码输入框，内容是加密用*号表示-->

         用户：<input type="text" name="user"/>

         密码：<input type="password" name="pwd"/>

　　input:radio

　　　　　　标签用来实现单选框：

 <br> 男：<input type="radio">

         <br> 女：<input type="radio">

         <!--对于input标签来说只要，radio的name值相同，那么他们就会互斥，只能选择一个-->

         <br>男：<input type="radio" name="gender"/>

         <br>女：<input type="radio" name="gender"/>

　　input:checkbox标签-复选框

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

         <p>爱好：

             篮球<input name="favor" type="checkbox" value="1" />

             足球<input name="favor" type="checkbox" value="2" />

             乒乓球<input name="favor" type="checkbox"value="3">

         </p>

　　input:button & submit &reset

　　　　　　　　　　提交按钮和备注

 <p>

                 <input type="submit" value="提交">　　#提交当前form表单

                 <input type="button" value="提交字段空">　　#无效果，空字段

                 <input type="reset" value="重置">　　#重置当前form表单

             </p>

             <p>

                 备注：<textarea name="extra"></textarea>x

             </p>

　　file标签

　　　　　用来提交文件时使用

 <!--点击选择文件可以上传文件-->

             <input type="file" />

　　slect标签：

　　　　　　下拉选择框

 <p>

       <select name="city">

              <option value="1">上海</option>

               <option value="2">北京</option>

               <option value="3">广州</option>

       </select>

  </p>

设置默认值（默认值）：

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

     <!--#输入框默认显示内容123-->

     输入：<input value="123"/>

     备注：<textarea>123</textarea>

     <!--下拉菜单默认显示地址名，默认为上海，指定北京为默认则用selected属性-->

     <select>

         <option>上海</option>

         <option selected="selected">北京</option>

         <option>广州</option>

         <option>山西</option>

         <option>深圳</option>

     </select>

     <!--单选框默认选择-->

     男： <input type="radio" name="g1">

     女:  <input type="radio" name="g1" checked="checked">

     <!--多选框默认选择-->

     <input type="checkbox" name="c1" checked="checked">

     <input type="checkbox" name="c1">

     <input type="checkbox" name="c1" checked="checked">

 </body>

 </html>

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

 <p>

             <select name="city" size="3">

                 <option value="1">上海</option>

                 <option value="2">北京</option>

                 <option value="3">广州</option>

                 <option value="3">山西</option>

                 <option value="3">天津</option>

                 <option value="3">深圳</option>

                 <option value="3">海南</option>

             </select>

  </p>

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

 <select multiple="multiple" size="4">

         <!--按上“shift”键可以多选-->

         <option value="1">上海</option>

         <option value="2">北京</option>

         <option value="3">广州</option>

         <option value="3">山西</option>

         <option value="3">天津</option>

         <option value="3">深圳</option>

         <option value="3">海南</option>

 </select>

　　select标签，分组形式

  <!--分组  label 选项不能选择，只起到显示分组效果-->

         <select>

             <optgroup label="北京">

                 <option>朝阳区</option>

                 <option>海淀区</option>

                 <option>昌平区</option>

             </optgroup>

             <optgroup label="山西省">

                 <option>朔州市</option>

                 <option>太原市</option>

                 <option>大同市</option>

             </optgroup>

         </select>

　　form表单

　　　　包含了所有的标签

 <form action="http://192.168.11.88:8000/index/" method="post" enctype="multipart/form-data">

         <select>

             <optgroup label="北京">

                 <option>朝阳区</option>

                 <option>海淀区</option>

                 <option>昌平区</option>

             </optgroup>

             <optgroup label="山西省">

                 <option>朔州市</option>

                 <option>太原市</option>

                 <option>大同市</option>

             </optgroup>

         </select>

              <!--点击选择文件可以上传文件-->

             <input type="file" />

             <p>

                 <input type="submit" value="提交">

                 <input type="button" value="提交字段空">

                 <input type="reset" value="重置">

             </p>

             <p>

                 备注：<textarea name="extra"></textarea>

             </p>

         <!--text：标准的文本输入框，password:密码输入框，内容是加密用*号表示-->

         用户：<input type="text" name="user"/>

         密码：<input type="password" name="pwd"/>

         男<input type="radio" name="gender" value="1" />

         女<input type="radio" name="gender" value="0" />

         第一中情况不互斥

         <br> 男：<input type="radio">

         <br> 女：<input type="radio">

         <!--对于input标签来说只要，radio的name值相同，那么他们就会互斥，只能选择一个-->

         <br>男：<input type="radio" name="gender"/>

         <br>女：<input type="radio" name="gender"/>

         <!--这里加一个标识checked="checked，为默认选择"-->

         <p>爱好：

             篮球<input name="favor" type="checkbox" value="1" />

             足球<input name="favor" type="checkbox" value="2" />

             乒乓球<input name="favor" type="checkbox"value="3">

         </p>

         <p>

             <select name="city" size="3">

                 <option value="1">上海</option>

                 <option value="2">北京</option>

                 <option value="3">广州</option>

                 <option value="3">山西</option>

                 <option value="3">天津</option>

                 <option value="3">深圳</option>

                 <option value="3">海南</option>

             </select>

         </p>

         size:设置默认几项

             <select multiple="multiple" size="4">

                 <!--按上“shift”键可以多选-->

                 <option value="1">上海</option>

                 <option value="2">北京</option>

                 <option value="3">广州</option>

                 <option value="3">山西</option>

                 <option value="3">天津</option>

                 <option value="3">深圳</option>

                 <option value="3">海南</option>

             </select>

     </form>

　　fieldset标签

 <fieldset>

             <legend>协议</legend>

             请仔细阅读协议内容：

 </fieldset>

　　列表ul/ol/dl

 <ul>

         <li>line1</li>

         <li>line2</li>

         <li>line3</li>

     </ul>

     <ol>

         <li>line1</li>

         <li>line2</li>

         <li>line3</li>

     </ol>

　　表格的定义：

 <table border="1">

         <tr>

             <th>标题一</th>

             <th>标题二</th>

             <th>标题三</th>

         </tr>

         <tr>

             <td>内容一</td>

             <td>内容二</td>

             <td>内容三</td>

         </tr>

         <tr>

             <td>内容一</td>

             <td>内容二</td>

             <td>内容三</td>

         </tr>

         <tr>

             <td>内容一</td>

             <td>内容二</td>

             <td>内容三</td>

         </tr>

         <tr>

             <td>内容一</td>

             <td>内容二</td>

             <td>内容三</td>

         </tr>

     </table>

　　表格合并：

 <table border="1">

         <tr>

             <th colspan="2">标题一</th>

             <th>标题二</th>

             <!--<th>标题三</th>-->

         </tr>

         <tr>

             <td>内容一</td>

             <td>内容二</td>

             <td>内容三</td>

         </tr>

         <tr>

             <td rowspan="2">内容一</td>

             <td>内容二</td>

             <td>内容三</td>

         </tr>

         <tr>

             <td>内容一</td>

             <td>内容二</td>

             <!--<td>内容三</td>-->

         </tr>

         <tr>

             <td>内容一</td>

             <td>内容二</td>

             <td>内容三</td>

         </tr>

     </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: 边框

 <body>

     <!--第一种：设置一个线粗2像素、实线、红色、框高20像素（不写框高线就重叠了）、框里面的内容为hello-->

         <div style="border: 2px solid red;height: 20px">hello</div>

         <!--第二种：设置线粗2像素、点形式的线、黑色、框高20像素，框里面的内容为hello2-->

         <br /><div style="border: 2px dotted black;height: 20px">hello2</div>

         <!--第三种：设置线粗2像素、虚线、蓝色、框高20像素，框里面的内容为hello3-->

         <br/><div style="border: 2px dashed blue;height: 20px">hello3</div>

 </body>

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

border-left :左

border-right：右

border-top ： 上

border-buttion： 下

　　margin：外边距

 <h2>margin</h2>

     <div style="border: 1px solid red;height: 70px">

         <div style="background-color: green;height: 50px;margin-top: 20px">

         </div>

     </div>

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

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

padding:内边距

python第14天的更多相关文章

十四. Python基础(14)--递归
十四. Python基础(14)--递归 1 ● 递归(recursion) 概念: recursive functions-functions that call themselves either ...
python day 14: 作业：开发一个能够多用户上传文件的FTP脚本
目录 python day 14 1. 要求 2. 自己写的程序目录 3. models模块 4. settings模块 5. tcp_server模块 6. client模块 7. 后记 pytho ...
尚学python课程---14、python中级语法
尚学python课程---14.python中级语法一.总结一句话总结: var[1:5] 访问模式:比如字符串,比如列表元祖,字典等 del 删除模式:比如列表.元祖.字典 1.Python的N ...
Python 的 14 张思维导图汇总
本文主要涵盖了 Python 编程的核心知识(暂不包括标准库及第三方库,后续会发布相应专题的文章). 首先,按顺序依次展示了以下内容的一系列思维导图:基础知识,数据类型(数字,字符串,列表,元组,字典 ...
【转载】一文总结学习 Python 的 14 张思维导图
本文主要涵盖了 Python 编程的核心知识(暂不包括标准库及第三方库,后续会发布相应专题的文章). 首先,按顺序依次展示了以下内容的一系列思维导图:基础知识,数据类型(数字,字符串,列表,元组,字典 ...
一文总结学习 Python 的 14 张思维导图
本文主要涵盖了 Python 编程的核心知识(暂不包括标准库及第三方库,后续会发布相应专题的文章). 首先,按顺序依次展示了以下内容的一系列思维导图:基础知识,数据类型(数字,字符串,列表,元组,字典 ...
python爬虫14 | 就这么说吧，如果你不懂python多线程和线程池，那就去河边摸鱼！
你知道吗? 在我的心里你是多么的重要就像恩请允许我来一段 freestyle 你们准备好了妹油你看这个碗它又大又圆就像这条面它又长又宽你们在这里看文章觉得很开心就像我 ...
python基础--14大内置模块(上)
python的内置模块(重点掌握以下模块) 什么是模块常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类 ...
python基础--14大内置模块(下)
(9)正则表达式和re模块(重点模块) 在我们学习这个模块之前,我们先明确一个关系.模块和实际工作的关系. 1)模块和实际工作时间的关系 1.time模块和时间是什么关系?time模块和时间本身是没有 ...

随机推荐

2016年iOS笔试题
收集了一些ios面试的一些基础的试题,其中也有一些较难的 1.请简述UIView与CALayer有什么不同.2.Block什么情况下会保留实体内引用到外部对象,什么时候要用__block或__weak ...
K - 迷宫问题
/*定义一个二维数组: int maze[5][5] = { 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, ...
JavaScript中map函数和filter的简单举例(转)
js的数组迭代器函数map和filter,可以遍历数组时产生新的数组,和python的map函数很类似1)filter是满足条件的留下,是对原数组的过滤:2)map则是对原数组的加工,映射成一一映射的 ...
shell浅谈之九子shell与进程处理
转自:http://blog.csdn.net/taiyang1987912/article/details/39529291 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] ...
[日常训练]yayamao的神题
Description $yayamao$是数学神犇,一天他在纸上计算起了$1/P$, 我们知道按照模拟除法可以得到准确解,例如$1/7=0.(142857),1/10=0.1(0)$.$yayama ...
Python 面向对象基础
编程范式概述:面向过程和面向对象以及函数式编程面向过程:(Procedure Oriented)是一种以事件为中心的编程思想. 就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现 ...
node 常用命令
nvm nvm list 列出安装的node npm install -g cnpm --registry=https://registry.npm.taobao.org 安装cnpm npm i ...
线程间通信 GET POST
线程间通信有三种方法:NSThread GCD NSOperation 进程:操作系统里面每一个app就是一个进程. 一个进程里面可以包含多个线程,并且我们每一个app里面有且仅有一 ...
海思h264解码库
海思的dll,解码h264 解码后转出yuv12 dll自己百度下载 hi_h264dec.dll hi_h264dec_w.dll 调用方法: if (H264Dec.Hi264DecA ...
iis搭建FTP服务器
win7下如何开启iis请参考前一篇使用iis并搭建 iis 图片服务器 ftp登陆格式 : ftp://[帐号]:[密码]@[IP]:[端口] ftp://用户名:密码@FTP服务器IP或域名: ...

python第14天

标签选择器

class选择器

id选择器

关联选择器

组合选择器

属性选择器

border: 边框

margin：外边距

padding:内边距

python第14天的更多相关文章

随机推荐

热门专题

　　border: 边框

　　margin：外边距