用Python 操作Web 前端 基础

一,目录

  1. HTML : html就是一套浏览器认识的规则,主要用20个左右的标签

   对于开发者来说:学习html规则 

    1. 本地测试:(1)找到html文件,直接浏览器方式打开,不用socket;(2),pycharm可以直接打开html

    2. 编写html文件:

                   ---doctype对应关系

                   ---HTML 标签<html>XXXXX</html>,内部可以添加属性

                   ---Lang="XXX",标签内部属性

                3. 标签分类:

                    ---自闭和标签  <meta charset="UTF-8"> 比较少

                     ---主动闭合标签 title>网页名</title>

    4. Head标签:

                      ---<meta ->编码,跳转,刷新,关键字,描述,IE兼容

       ---title标签

      --- <link /> 标签图标

                        ---<style />

                        ---<script>    

                  7. <body>标签:

                        ---图标,&nbsp; &gt; &lt

                         ---P标签(段落),段落之间有间距

       ---Br标签,用来换行

       ---<H>标签, 设置字体大小

                         ---<span> 行内标签(区别于块级标签) 只能选择字体范围,不能选择整行

                         ---<div> 块级标签,用的最多。

                         ---标签之间可以嵌套;标签存在的意义,可以用CSS,JS操作。 

                          ---input 系列 + form标签

                               input type = "text" -name属性; ‘value = XXX默认值

                               input type = ‘password’ -name属性

           input type = ‘submit’ - value=‘提交’ 提交按钮

            input type = ‘button’   -value=‘登录’按钮

                                 input type = 'radio'      -单选框value,name属性(name属性互斥)

          input type = 'checkbox' -复选框 Value, name属性,可以获得列表

                      input type = 'file'   上传文件,依赖form表单的属性‘’

            input type = ‘reset’ 重置

                                 <textarea>默认值</textarea> 输入比较多的内容

                                 <select><option> 下拉框选择 select = selected 默认选项;multiple = multiple可以多选;

                         8. a 标签

                                ---跳转

                                ---锚,就是点击目录可以跳转; herf = ‘#某个标签的ID’, 标签的ID 不允许重复

                          9.  img标签:

                                ---src  

          ---alt

           ---title

                  10. list列表标签: 

                                         ---UL   ==> LI 一个列表,前面都是点。 

                                         ---OL ==> LI  一个列表,前面用数字排序

                                         ---DL ==DT,DD  DT是上层目录,dd是下层目录

                          11. table表格标签: 

                                  ---tbody 表身

                                  ---thead 表头

                                  --- colspan = X,行合并X行; rowspan= X, 列合并X行

                           12. label 标签 用于电子文字,是的关联的标签获取光标

                            13. fieldset标签: legend 在外围添加一个方框;

                             14. <div>

                             15. <h>

                             16. <span>

           开发后台程序:

                         1,写HTML文件(充当模板的作用)

                          2, 去数据库获取数据然后替换到html的指定位置(web框架)

 

  2. CSS :颜色,位置之类的相关操作。。。

           ----标签的style属性

           ---写在head里面,style标签中写样式

                ----id选择器,ID可以给标签设置属性

                ---class选择器,选择其他的标签并class复制

                ---标签选择器: div{...}, 所有的div都会设置成此样式;

                ---层级选择器(空格)==》.c1,.c2 div{}

                ---组合选择器(逗号) ==》 c1,.c2,div{}

                 ---属性选择器: 对选着到的标签通过属性再进行一次筛选;

                ---css样式可以单独写在css文件中,然后<link rel='stylesheet' herf= 'css样式文件'>

         3。 注释 /* */

         4. 边框 ==》boarder: 1px solid color; 宽度,样式,颜色

         5. 背景

         6.float 让标签漂浮,块级标签可以堆叠

         7. display: display: inline 标签都变成行内标签;

                          display: block 块级标签;

                          display:inline-block,默认行内标签属性,但是可以设置;

                          displasy:none, 可以显示可以关闭,类似视频网站开灯关灯

                         行内标签无法设置宽度和高度,padding,margin;块级标签可以设置;

         8. padding, margin(0,auto),内边距,外边距

                         margin(0,auto):代表div模块顶边处理,距离上下的边距为0,左右是auto居中

         9. text-align

         10. height, width, line-height,color,font-size, font-weight(字体加粗),text-align 水平居中

 

猜你喜欢

转载自www.cnblogs.com/spencersun/p/9402563.html
今日推荐