码迷,mamicode.com
首页 > 编程语言 > 详细

python开发Day11(前端)

时间:2016-07-25 12:58:34      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:

前端(html、css、js组成)

  • html标签:
    • <!DOCTYPE html> #定义这个页面是什么html规则解释(w3c标准模式)
      <head>
          <meta name=‘keywords‘ conntent="关键字,关键字2">  #网页关键字
          <meta name=‘description" content=‘介绍‘>  #描述网站内容
          <meta http-equiv="Refresh" content="2;URL=https://www.baodu.com"> #2秒后刷新网页,跳转到百度页面
          <meta charset="UTF-8">  #定义网站编码格式
          <meta http-equic="content-Type" content=""> #与上一个一样,只不过不是简写!
          <link rel="icon" href=‘链接或者路径‘> #设置标题图片
          <title>
          </title> #浏览器标题
      </head> #浏览器标题等设置
    • <body>
        <a></a> #链接
         <h1></h1>  #标签(他有h1-h6)
         <div></div>  #盒子
         <img />  #加载图片
         <hr /> #水平线
         <br /> #换行符
         <ul>    #无需列表
             <li>    #列表中的每一项
         </ul>
      
      
         <ol>    #有序列表
             <li>    #列表中的每一项
         </ol>
      
      
         <dl>    #定义列表
             <dt>    #列表标题
             <dd>    #列表项
         </dl>
      
      
         <table>  #表格
             <thead>#表头,简写不需要
                 <tr>#行
                     <td>aaa</td>#行名
                     <td>bbb</td>
                     <td>ccc</td>
                 </tr>
             </thead>
             <tbody>#内容,简写不需要
                 <tr>
                     <td>aa</td>
                     <td>bb</td>
                     <td>bb</td>
                 </tr>
             </tbody>
         </table>
      
      
         <form> #表单
             #最常用的事input元素
             <input \>#自闭和标签
        </form>
      
      </body>
    • 标签属性:
      • 普通标签属性:
        <img src=‘路径‘ height=‘高‘ width=‘宽‘ alt=‘加载失败提示什么‘ title=‘鼠标移动过去提示信息‘ />
        <a href=‘url或者#id跳到固定位置‘ name:‘定义页面书签‘ target:"_blank#重新生成一个页面">提示语</a>
      • table的属性:
        <table border=‘数字‘>     #定义表格样式
        <table cellpadding=‘数字‘>    #内边距
        <table cellspacing=‘数字‘>  #外边距
        <table width=‘px、%‘>   #表格的宽度
        <table stypl=‘height:‘px、%‘>   #表格的长度
        <td rowspan=‘一列占几行‘>1,2<td>
        <td colspan=‘一行占几列‘>1,2<td>
      • form表单属性:
        action=‘提交内容到那里‘
        enctype=‘multipart/form-data‘ #上传文件的时候必须声明
        method=‘提交方式默认是get‘(get:1.提交的键值对,放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制
                                    post:1.提交的键值对,不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.
                                )
        
        input属性:
            <input type=‘text‘ name=‘name‘ vlaue=‘用户不写默认为这里内容‘\> #以文本格式让用户输入内容,给服务端传的时候key是name
                type类型:
                    submit #按钮          value #按钮名称
                    password #密文        name #key名
                    radio #单选框         name  #key名有多个选择那么name需要一样用户只能选一个       value#传给服务端的值
                    checkbox #复选框       name #key名和radio一样用户可以多选        value#传给服务端的值
                    button #在html里没有意义就是一个按钮没有功能,加上JS便可以使用    value#和submit一样
                    file #提交文件     value #文件名
        select属性:
            <select name=‘key‘ multiple size=‘1‘>#下拉列表,发向服务器的时候keu,可多选(默认单选),默认显示几个。
                <optgroup label=‘内容‘>#它相当于将现在的内容分组
                    <option value=‘对应的值‘>1</option>#选项,发送给服务端key的value
                    <option>2</option>
                    <option>3</option>
                </optgroup>
            </select>
        textarea属性:他是多行输入,而input的text为单行输入,常用于写备注、签名等。。。
        
        label属性:
            组合input的文本使用,单机名称光标到文本位置
        
         fieldset属性:
            做一个框,将内容放到里面
    • 几个基本的特殊字符:
      • &lt  #小于
        &gt     #大于
        &quot   #引号
        &copy   #版权号
        &reg    #注册标志
  • CSS样式:
    • 几种使用css样式的方法:
      • 直接在标签后面style #行内式
      • 在head中添加style标签写样式 #嵌入式
      • 在head中添加style标签中写入@import "css文件名" #有数量显示     导入式
      • 在head中添加link标签中写入href="文件名" rel="stylesheet" type="text/css">#后面两个选择是声明导入的是css代码   链接式
    • 选择器:
      • 基本选择器:
        #:ID
        E:标签选择器,匹配所有使用E标签的元素E{ color:green; }
            或:标签,标签
        .:class
            或:标签.class名
                标签或class 标签    控制标签或class所有的后代标签
                标签或class>标签    控制标签或class的子标签
        *:通用元素选择器,匹配任何元素* { margin:0; padding:0; }
      • 属性选择器:
        属性名=‘属性值‘        #在定义css的时候需要[属性名]或者[属性名=属性值]
            |=‘boy‘        #用于这个属性名的值是以boy开头的,其格式必须是‘a-b‘
            ^=‘boy‘        #用于这个属性名的值是以boy开头的
            $=‘boy‘        #用于这个属性名的值是以boy结尾的
            *=‘boy‘        #用于这个属性名的值中包含boy的
            p:before      #在每个 <p> 元素的内容之前插入内容    p:before{content:"hello";color:red}
            p:after     #在每个 <p> 元素的内容之前插入内容    p:after{ content:"hello";color:red}
      • 伪类选择器:
        a:link        #没有接触过的链接
        a:hover    #鼠标放在链接上的状态
        a:active    #在链接上按下鼠标时的状态    在链接上按下鼠标时的状态
        a:visited       #访问过的链接        在链接上按下鼠标时的状态
        a:focus                #在获取焦点的时候!
      • 字体:
        fonut-size    #字体大小
        fonut-family    #字体
        <h1 style="font-style: oblique">老男孩</h1>        #斜体
      • 背景属性:
        background-image:url(图片地址)        #设置图片背景
        background-repeat: repeat-x; no-repeat;     一行,一张,
        backgrond-position: right center        #图片右侧居中
      • 文本属性:
        text-align=center        #文本居中
        line-height=100px            #100px的高度输入文字
        text-indent=30px          #实现文本开头缩进的功能
        letter-spacing: 10px;        #将文本内容每一个按照10px分割
        word-spacing: 20px;        #将文本每一个单词按照20px分割
        direction: rtl;        #把文本方向设置为“从右向左”
        text-transform: capitalize;lowercase;uppercase;    #文本中的每个单词以大写字母开头,定义无大写字母,仅有小写字母,定义仅有大写字母。
      • 边框属性:
        border:solid 2px rad    #边框实线,3像素,红色
               dashed          #虚线
      • 列表属性:
        list-style:none            #去掉无序列表的点
                      decimal-leading-zero;        #数字
                      circle;        #空心圆   
      • dispaly属性:
        dispaly:inline        #将块级标签改成内联标签
        dispaly:block    #将内联标签改成块级标签
        dispaly:none        #隐藏
        dispaly:inline-block   #将块级标签改成内联标签并且可以设定高宽
      • 盒子模型常用属性:
        padding    #控制盒子与内容之间的距离
        margin #控制盒子与盒子之间的距离
        float:left、right  #浮动盒子方向
        clear:left、right、botb    #清除左浮动、清除右浮动、清除所有浮动
      • 标签排版:
        position:static、fixed、relative、absolute
                 static(默认排版)、fixed(根据html定位)、absolute(根据relative来进行相对定位)relative(定位)
      • 其他属性:
        visibility:hidden        #隐藏并且占高度
                 visible            #显示
        dispaly:none        #隐藏不占高度    
        overflow:hidden         #将超出块大小大小的内容隐藏
                   auto    #超出后使用滚动条查看内容
            
        opacity:0.6        #透明度为60%
        !important    #后面的样式不可更改这里的样式
        z-index           #显示权重值

         

 

python开发Day11(前端)

标签:

原文地址:http://www.cnblogs.com/WuYongQi/p/5702903.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!