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

随机推荐

JS组件系列——Form表单验证神器： BootstrapValidator
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
备份Mysql数据库BAT脚本
@echo off set "Ymd=%date:~,4%%date:~5,2%%date:~8,2%"c:cd C:\MySQL\bin\mysqldump -h 172.25. ...
easyui 汇总
1. easyui datagrid 表格组件列属性 formatter columns:{ { field:' product', title:'商品', align:'center', width ...
【Ural】1519. Formula 1
http://acm.timus.ru/problem.aspx?space=1&num=1519 题意:给一个n×m的棋盘,其中'.'是空白,'*'是障碍,求经过所有点的哈密顿回路的数目.( ...
bzoj1208
1208: [HNOI2004]宠物收养所 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 7589 Solved: 3009[Submit][Sta ...
BZOJ 4698: Sdoi2008 Sandy的卡片
4698: Sdoi2008 Sandy的卡片 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 106 Solved: 40[Submit][Stat ...
初步搭建RocketMQ环境
1. 去官网https://github.com/alibaba/RocketMQ/releases下载alibaba-rocketmq-3.2.6.tar.gz,这个是已经maven install ...
linux下常见解压缩命令
linux下常见的压缩文件格式有tar.gz.tar.gz.tar.bz2.zip等等.对于不同的压缩文件格式有对应的解压缩命令.下面就对此小结一下: 1.后缀为.tar 用 tar –xvf 解压 ...
【06-18】CentOS使用笔记
使用中文输入法搜狗输入法只支持Ubuntu sudo yum install "@Chinese Support" [系统]--->[首选项]--->[输入法]--& ...
AndroidStudio使用笔记
声明: 正式放弃Eclipse,投奔AndoidStudio大军,有些东西要从头摸索,特发此帖记录Android Studio的使用方法.本帖永久更新,不定时记录本人使用过程中的经验积累,给自己留一份 ...

python第14天

标签选择器

class选择器

id选择器

关联选择器

组合选择器

属性选择器

border: 边框

margin：外边距

padding:内边距

python第14天的更多相关文章

随机推荐

热门专题

　　border: 边框

　　margin：外边距