python学习-day14-前端之html、css

一、Html

1、本质：一个规则，浏览器能任务的规则

2、开发者：
        学习Html规则
        开发后台程序：
            - 写Html文件（充当模板的作用） ******
            - 数据库获取数据，然后替换到html文件的指定位置（Web框架）

3、html固定格式介绍

<!DOCTYPE html>               <!--  #doctype指定统一规范：html -->
<html>类似html这种格式（<html></html>），称之为标签，html标签，head标签等,标签内部可以写属性
<head lang="en">      #lang="en" 内部属性，
    <meta charset="UTF-8">   #指定编码
    <title></title>
</head>
<body>
</body>
</html>html、head、body是固定格式，不可变<!--  注释内容-->，注释

　4、标签

　　1、标签分类

　　　　标签可以嵌套

　　　　标签存在的意义：用于定位，通过标签+标签里面的属性（如id=“1”，name=“xx”等），定位后，用于css、js操作

　　　- 自闭和标签   如：<meta>  后面不需要再跟个</meta>这样的叫做自闭和标签。为了方便查看自闭和标签需要在后面加个/,例: <meta />

　　   - 手动闭合标签 如：<html> </html>

  • 　行内标签（内联标签）：所有标签占据一个行。
  • 块级标签：无论内容有多少，一个标签就占据一行

　　2、head标签

　　　　1、meta标签

　　　　　　 属性：编码、刷新、设置页面编码、关键词（针对搜索引擎），跳转，描述
      • 刷新：<meta http-equiv="Refresh" content="10"> #每过10秒刷新一次
      • 跳转：<meta http-equiv="Refresh" content="3;Url=http://www.baidu.com"> #过3秒跳转到www.baidu.com
      • 关键词：<meta name="keywords" content="老男孩，博客，小游戏"> #设置关键词，用于爬虫爬，百度搜索引擎搜索这些关键词的时候，将页面（网站）加入搜索结果
      • 描述：描述网站是做什么的
　　　　2、title标签

　　　　　　网页头部信息

　　3、body标签

　　　　1、各种符号

　　　　http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

　　　　空格&nbsp;  大于号&gt; 小于号&lt

　　　　

<a href="www.baidu.com">lw  </a>    #俩个空格
　　　  2、p标签和br标签

　　　　p标签：段落，默认2个段落段落之间是有间距的

　　　　br标签：换行

　　　　

   <p>1111<br />ggggggg</p>
    <p>123</p> 

    #第一个段落（p标签）和第二个段落在浏览器打开的时候是有间隔的（2行），第一个段落加上br换行后，变成2行，但是没有间距，是属于一个段落

　　

3、h标签

　　　　标题标签，h1到h6，从大到小

　　 4、span标签

　　　　span标签，白板一个，什么属性都没有，行内标签，所有标签都是一行。通过css可使其变成任何特性的标签

　　5、div标签

　　　　块级标签，也是白板，没有任何属性，因为是块级标签，一个div就是一行，但是行直接没有间距，也是可以通过css使其变成任何标签

　　6、input输入框标签

　　     get和post区别：

　　　　　http请求的时候会有2部分，一部分是请求头，一部分是请求内容

　　　　　get提交方式，请求的数据是在请求头中，也就是在url中可以直接看到，

　　         post方式，请求的数据在请求内容中（body），url中看不到

　　　　

input type=‘text’   name属性，value （默认）
input type=‘password’ name属性
input type=‘submit’    #提交表单
input type=‘button’    #按钮（可以通过css修饰属性）input type=‘radio’     #单选框，value，check=“checked”，name属性（name相同则互斥）input type=‘checkbox’  #复选框，value，checked=“checked” （默认就可以），name属性（批量获取数据）input type=‘file’      #上传文件属性，依赖form表单中的一个属性，chctype=“multipart/form-data”  #如果没有这个属性，则不会传输文件，只有加了这个属性，点击上传的时候才会一点点的将文件传输过去input type=‘rest’      #重置，点击后会重置输入（或选择）的东西

后台只能拿到input中的内容

<input type="text" />     #input标签的text属性：文本
<input type="password" />  #type属性：password属性，输入的时候是加密的
<input  type="button" value="登录"/>  #button，按钮，button仅仅是按钮，并不能提交
<input  type="submit" value="登录"/>   #submit，提交
注：仅仅是这样并不能提交，需要在外面加入一个form标签（表单），上面点击按钮，即将表单提交到form属性里面定义的地方（action）。
例：
<form action="http://localhost:8888/index">
            <input type="text" name="user" />     #后台根据name属性“user”去匹配值，后台程序里面定义根据user获取（后台去获取什么值，这里就写什么）　　　　　　　<input type="text" email="email"/ >　　　　　　　<input type="password" password="pwd"/>
            <input  type="button" value="登录1"/>
            <input  type="submit" value="登录2"/>
        </form>

　　例：

<body>
    <form action="http://192.168.16.35:8888/index" method="POST">
        <input type="text" name="user" /  value=“默认”>   #value后面的东西是默认值，就是打开浏览器在输入框中默认存在的值
        <input type="text" name="email"/>
        <input type="password" name="pwd"/>
        <!--{‘user‘: ‘用户输入的用户‘,‘email‘: ‘xx‘, ‘pwd‘: ‘xx‘ }-->
        <input type="button"  value="登录1"/>
        <input type="submit"  value="登录2"/>
    </form>
    <br/>
    <form>
        <input type="text" />
        <input type="password" />
        <input type="button"  value="登录1"/>
        <input type="submit"  value="登录2"/>
    </form>
</body>
　选框：
 <form>
            <div>
                <p>请选择性别</p>
                男：<input type="radio" name="gender" value="1"/>    #name属性，互斥，就是只能选择一个，通过value判断选择的是哪一个
                女: <input type="radio" name="gender" value="2"/>    #name后面的东西可以随意，只有和后台程序中写的程序获取的一致即可
            </div>
        </form>

   <div>
                <p>爱好</p>
                篮球：<input type="checkbox" name="favor" value="1"/>  #多选框，可以选择多个,还是通过value判断选择了哪些
                足球：<input type="checkbox" name="favor" value="2"/>
                台球：<input type="checkbox" name="favor" value="3"/>
                网球：<input type="checkbox" name="favor" value="4"/>

            </div>

　　

　　　7、textarea

　　　　多行文本输入:

　　　　<div style="height: 50px;width: 100px;background-color: #dddddd"></div>

　　　8、select标签

　　　　选择标签，下拉框选择

<select name="city"size="3" multiple="multiple"> #提交到后台后根据name（city）获取，size：显示多少，默认显示一个，即size=1；multiple：多选（可以选择多个）

<optgroup label="中国城市">   #optgroup分组：下面的选项在这个分组中，分组不能选，只能显示
　　<option value="1">北京</option>   #根据value获取选择的是哪个
    <option value="2">河北</option>    <option value="3" selected="selected">南京</option>  #selectd默认选择哪一个
</optgroup>
 
</select>

　　

　　9、a标签

　　跳转

<a href="http://www.baidu.com">百度</a>  #href 超链接，必须加http，否则出错
<a href="http://www.baidu.com" target="_blank">百度</a>  #target="_blank"表示在新的标签页打开

　　锚：

<a href="#i1">第一章</a>   -- #id和下面的id对应
    <a href="#i2">第二章</a>
    <a href="#i3">第三章</a>
    <div id="i1">第一章的内容</div>
    <div id="i2">第二章的内容</div>
    <div id="i3">第三章的内容</div>

注：锚：当一个页面很长的时候，在点击第一章的时候会跳转到第一章的内容处；
　　10、img标签

　　图片标签

　　　　

<img src="1.jpg" style="height: 200px;width: 200px">   #--src后面直接跟图片的路径，style后面可以设置图片的尺寸！
<img src="1.jpg" title="博客园" style="height: 200px;width: 200px" alt="啦啦图">
注：title：将鼠标放到图片上方时将出现文字：博客园　　alt：当这张图片不存在的时候，图片位置显示文字：啦啦图。

　　点击图片跳转，可以将img标签放到a标签里面

　　

 <a href="http://www.xxx.com/1.jpg">
    <img src="1.jpg" style="height: 200px;width: 200px">
    </a>
可以点击图片，查看这张图片

　　

　11、列表--ul，ol，dl

不常用，一般通过css改造

　　代码、效果：

<ul>                           #ul、ol和li对应，配对的
        <li>test1</li>
        <li>test2</li>
        <li>test3</li>
    </ul>
    <ol>
        <li>test4</li>
        <li>test5</li>
        <li>test6</li>
    </ol>
    <dl>
        <dt>www</dt>
        <dd>test7</dd>
        <dd>test8</dd>
        <dt>www2</dt>
        <dd>test9</dd>
        <dd>test10</dd>
    </dl>

　　效果：

　　12、table表格标签

　　　　tr表示行

　　　　td表示列

　　　　

    <table border="1">  #border表示加上边框，不加则没有边框
        <tr>
            <td>第一行，第一列</td>
            <td>第一行，第二列</td>
            <td>第一行，第三列</td>
        </tr>
        <tr>
            <td>第二行，第一列</td>
            <td>第二行，第二列</td>
            <td>第二行，第三列</td>
        </tr>
    </table>

　　上面代码效果：　　

表头都单独的标签

<table border="1">
        <thead>
            <tr>
                <th>表头1</th>
                <th>表头2</th>
                <th>表头3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1.1.1.1</td>
                <td>80</td>
                <td>查看详细</td>
            </tr>
             <tr>
                <td>2.2.2.2</td>
                <td>80</td>
                <td>
                    <a href="s1.html">查看详细</a>  #可以点击查看详细
                </td>
            </tr>
        </tbody>
   </table>

　　

合并单元格：

<table border="1">
        <thead>
            <tr>
                <th>表头1</th>
                <th>表头2</th>
                <th>表头3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td colspan="2">1</td>     #相当于合并单元格，占两列，但是第三列需要删掉，否则就挤出单元格了。
            </tr>
             <tr>
                <td>2</td>
                <td rowspan="2">2</td>    #相当于合并丹阳，占两行，下面一行的相对应得列需要删掉，否则就挤出单元格
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>3</td>
            </tr>
        </tbody>
    </table>

　　13、lable

　　　　

 <label form="username">用户名：</label>   #label就是一个普通的文本，和form一起使用
        和下面的id=username联系起来，在点击用户名的时候，光标就会到下面input的输入框中！
        <input  id="username" type="text" name="user">

　二、CSS

　　　　做html的时候先分为3块（3个div）

　　　　在标签上面设置style属性

　　　　一般css文件单独写在css的文件中，在html中导入：<link rel="stylesheet"  href="commont.css" />

　　　　css文件注释：/*     */

　　　　一个标签可以应用2个样式，如果不一样，就全部应用，如果一样，就按顺序往下设置

　　　　选择器：

  • 　　　　　　id选择器：　　　　
#i1,#i2,#i3{
            background-color: #dddddd;
        }

<div id="i1">1</div>
    <div id="i2">2</div>
    <div id="i3">3</div>

#对应id
  • 　　class选择器：
.c1{
            background-color: #dddddd;
        }

<div class="c1">4</div>

点.对应class，上面用点定义，下面用class调用，class可以重复，c1是名称
  • 　　标签选择器 
    div{
            background-color: #dddddd;
        }

#下面所有div标签的全部设置上div标签选择器里面的样式。
  • 　　层级选择器
span div{
            ackground-color: #dddddd;
        }

#span div中间空格，下面span里面的div标签设置上上面的样式其他的一样，.c1 div span...下面可以写很多，但是很深了就不合适了。
  • 　　属性选择器
input[type=‘text‘]{
            width: 10px;
            height: 20px;
        }

#找到input标签，里面的text的属性，设置样式，中括号【】里面是属性，可以在input标签里面随意写 
input[n=‘eeee‘]{    width: 10px;    height: 20px;}
<input type="text" n="eee"/>

　　CSS单独文件例子：

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="zcss.css" />  #引入css
</head>
<body>
    <div id="i1">1</div>
    <div id="i2">2</div>
    <div id="i3">3</div>
    <div class="c1 c2">4</div>  #css里面定义的c1和c2样式
</body>

CSS文件zcss：
.c1{
    font-size: 50px;
    color: black;
}
.c2{
    background-color: red;
    color: white;
}

　边框

c3{
    border: 1px solid red;   #border：边框（四面全都有，想要一面有，使用border-top），1px，solid：实体的，还有虚线的等等（自己可以通过ptcharm试验）。 可以总结为：宽带，样式，颜色
}

　　属性介绍

height：高度，一般使用像素（px），也可以使用百分比
width：宽度，像素，百分比
text-align:center ：水平方向居中
line-height：根据标签高度居中
color：字体颜色
font-size：字体大小
font-weight：字体加粗

　　

　　背景

background-color: #dddddd
　　float

　　

　　　　

　　

时间： 2024-08-06 06:53:25

python学习-day14-前端之html、css的相关文章

python学习_day52_前端基础之CSS布局3

一.定位属性position 1.相对定位relative 相对定位是相对于该元素在文档流中的原始位置,即以自己原始位置为参照物.有趣的是,即使设定了元素的相对定位以及偏移值,元素还占有着原来的位置,即占据文档流空间.对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置.示例如下: 2.绝对定位absolute 设置为绝对定位的元素框从文档流完全删除,并相对于最近的已定位祖先元素定位,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块(即b

python学习_day50_前端之CSS渲染

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化. 一.CSS引入方式 1.行内引入方式 行内式是在标记的style属性中设定CSS样式.只能对本标签内的内容进行渲染,这种方式没有体现出CSS的优势,不推荐使用. 2.嵌入引入方式 嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></

python学习_day62_前端基础之Bootstrap全局CSS样式

一.布局容器 Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器.我们提供了两个作此用处的类.注意,由于 padding 等属性的原因,这两种 容器类不能互相嵌套.分别为: <div class="container"> //.container 类用于固定宽度并支持响应式布局的容器. ... </div> <div class="container-fluid"> //.container-flui

Python学习day14 BBS功能和聊天室

Created on 2017年5月15日 @author: louts 第1课 作业讲解及装饰器使用 28minutes def check(func): def rec(request,*args,**kargs): return func(request,*args,**kargs) return rec @checkdef index(request,): print request 第2课 自定义装饰器扩展使用 18minutes 第3课 第4课 BBS功能分析及介绍 37minute

Python开发【前端】：CSS

css样式选择器 标签上设置style属性: <body> <div style="background-color: #2459a2;height: 48px;">第一层</div> <div style="background-color: #2459a2;height: 48px;">第二层</div> <div style="background-color: #2459a2;hei

python学习_day54_前端基础之js（2）

在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象,也可以用创建对象的方法定义变量,String.Math.Array.Date.RegExp都是JavaScript中重要的内置对象,在JavaScript程序大多数功能都是基于对象实现的. 一.字符串String对象 1.字符串对象的创建 //方式一:变量 = "字符串" s="HEllo world"; //方式二:字串对象名称 = new String (字符串) a=n

python学习_day59_前端基础之jQuery入门2

一.样式操作 1.css样式 <body> <div class="c1">111</div> <script src="jquery-3.2.1.min.js"></script> <script> //css赋值操作 $(".c1").css("color","red"); $(".c1").css("

Python学习 Day14 python 类和元类(metaclass)的理解和简单运用

python 类和元类(metaclass)的理解和简单运用 (一) python中的类 首先这里讨论的python类,都基于继承于object的新式类进行讨论. 首先在python中,所有东西都是对象.这句话非常重要要理解元类我要重新来理解一下python中的类 class Trick(object): pass 当python在执行带class语句的时候,会初始化一个类对象放在内存里面.例如这里会初始化一个Trick对象 这个对象(类)自身拥有创建对象(通常我们说的实例,但是在python中

python学习-day14

一.HTML HTML(Hyper Text Markup Language)超文本标记语言,所谓的超文本就是指页面内可以包含图片.链接.甚至音乐,等非文字元素.HTML包含两部分内容:标记标签.文本内容.HTML 就是使用标记标签来描述网页. HTML中根据闭合方式可以将标签分为:主动闭合标签和自闭和标签.主动闭合标签要有开始标签和结束标签<标签名>文本内容</标签名>:自闭和标签<标签名/>. 1. HTML基本内容 <!DOCTYPE html> 声明

python学习_day55_前端基础之JS（3）

DOM(document object model)对象把 HTML 文档呈现为带有元素.属性和文本的树结构(节点树),定义了访问和操作HTML文档的标准方法. 一.查找标签 1.直接查找标签 总共有如下四种直接查找的方式: document.getElementById("idname") //通过id名 document.getElementsByTagName("tagname") //通过标签名 document.getElementsByName(&quo