首页 > 代码库 > python学习-day14-前端之html、css

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="http://www.mamicode.com/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方式,请求的数据在请求内容中bodyurl中看不到

    

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="http://www.mamicode.com/登录"/>  #button,按钮,button仅仅是按钮,并不能提交
<input  type="submit" value="http://www.mamicode.com/登录"/>   #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="http://www.mamicode.com/登录1"/>
            <input  type="submit" value="http://www.mamicode.com/登录2"/>
        </form>

 

  例:

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

   <div>
                <p>爱好</p>
                篮球:<input type="checkbox" name="favor" value="http://www.mamicode.com/1"/>  #多选框,可以选择多个,还是通过value判断选择了哪些
                足球:<input type="checkbox" name="favor" value="http://www.mamicode.com/2"/>
                台球:<input type="checkbox" name="favor" value="http://www.mamicode.com/3"/>
                网球:<input type="checkbox" name="favor" value="http://www.mamicode.com/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="http://www.mamicode.com/1">北京</option> #根据value获取选择的是哪个
    <option value="http://www.mamicode.com/2">河北</option>
<option value="http://www.mamicode.com/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="http://www.mamicode.com/#i1">第一章</a>   -- #id和下面的id对应
    <a href="http://www.mamicode.com/#i2">第二章</a>
    <a href="http://www.mamicode.com/#i3">第三章</a>
    <div id="i1">第一章的内容</div>
    <div id="i2">第二章的内容</div>
    <div id="i3">第三章的内容</div>


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

   图片标签

    

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

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

  

 <a href="http://www.xxx.com/1.jpg">
    <img src="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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

   

 

 

 

 

 

 

 

 

 

    

 

 

 

 

 

 

  

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