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模块和时间本身是没有 ...

随机推荐

C#基础系列——再也不用担心面试官问我“事件”了
前言:作为.Net攻城狮,你面试过程中是否遇到过这样的问题呢:什么是事件?事件和委托的区别?既然事件作为一种特殊的委托,那么它的优势如何体现?诸如此类...你是否也曾经被问到过?你又是否都答出来了呢? ...
viewport就是这回事
前言对于移动webapp开发人员来说,viewport是个很重要的东西,容易用但很多时候都是不明白的,于是我决心去弄清楚它. <meta name="viewport" c ...
HTML5 屏蔽触屏滚动
开发移动的html应用时常常需要将网页触控事件屏蔽掉.代码如下: //屏蔽全局触控事件 document.ontouchmove = function(e){ e.preventDefault();} ...
图片加载框架Fresco与V4包冲突解决方法
js兼容获取元素的样式
js获取元素的样式的兼容性处理: function getStyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComp ...
Python3 基本数据类型
Python中的变量不需要声明,每个变量使用前必须赋值,变量赋值后才会被创建,在Python中变量就是变量,它没有类型.我们所说的"类型"是变量所指的内存中对象的类型. 等号(=) ...
ARM学习之如何在向内核写入系统调用
本文主要介绍两个例子:1-系统调用打印“hello kernel” 2-驱动开发板的蜂鸣器使用的是友善之臂(Friendly ARM)的开发板,三星2440 =================== ...
js jquery 选择器总结
js jquery 选择器总结一.原始JS选择器. id选择器:document.getElementById("test"); name选择器:document.getElem ...
bootstrap做了一个表格
花了一下午做了一个表格: 大致是这样: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf ...
添加删除表格append或 createElement
方法一: js代码:增加一行五列的表格 function AddList(){ $len= document.getElementsByName('goods_name[]').length; obj ...

python第14天

标签选择器

class选择器

id选择器

关联选择器

组合选择器

属性选择器

border: 边框

margin：外边距

padding:内边距

python第14天的更多相关文章

随机推荐

热门专题

　　border: 边框

　　margin：外边距