【025】Python全栈日记-WEB前端基础(二)

【025】Python全栈日记-WEB前端基础(二)_第1张图片

昨天还是有很多人搞不清楚为啥学Python要学前端,也有人搞不清楚了啥是后端工程师

先说一下啥是后端工程师:

会写Java、python、php、c++等系列的一种语言代码,会写SQL语句,能做简单的数据库设计,会Spring和iBatis,懂一些设计模式等。
主要做的就是网站或者软件,手机app后台的交互和互动,以及数据库体系;让其展现在前台;

 

然后再看一下项目各部分人员职责:

【025】Python全栈日记-WEB前端基础(二)_第2张图片

可以看到后端和前端需要进行联调的,而在日常体现就是,当你在页面输入密码,你输入密码的界面为前端,当你输入完毕后,你的数据传入服务器,服务器会验证你的账号密码是否正确,这就是后端的一部分。

那你在单位,总不能看不到前端的东西吧,那你如何合作进行接口的调试。

 

 

进入正题:

 

本次代码:(http://note.youdao.com/noteshare?id=e19fc655d30d625b978436e18c738725)

课上精华全在代码中,虽然文中我会摘出,难免有遗漏。

 

今天内容为html+css,因为在日常网页制作中,这两个是不能分开的。

 

先学习一下html里的列表标签:

一、列表标签

什么是列表?

把内容制成表,以表显示

容器里面装载着文字或图表的一种形式,叫列表。

列表最大的特点就是 整齐 、整洁、 有序

 

1、无序列表 ul

无序列表的各个列表项之间没有顺序级别之分,是并列的。其基本语法格式如下:

【025】Python全栈日记-WEB前端基础(二)_第3张图片

比如下面这些,新闻是没有顺序的,不用排队,先到先得,后发布先显示。

【025】Python全栈日记-WEB前端基础(二)_第4张图片

注意:

 1.

    中只能嵌套
  • ,直接在
      标签中输入其他标签或者文字的做法是不被允许的。
       2.
    • 之间相当于一个容器,可以容纳所有元素。
       3. 无序列表会带有自己样式属性.

      【025】Python全栈日记-WEB前端基础(二)_第5张图片

       

      2、有序列表 ol

      有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,有序列表的基本语法格式如下:

      【025】Python全栈日记-WEB前端基础(二)_第6张图片

      所有特性基本与ul 一致。

      正常的有序长这样:

      【025】Python全栈日记-WEB前端基础(二)_第7张图片

      但是我们可以通过修改代码改变前面序号的样式和开始:

      变成这样:

      【025】Python全栈日记-WEB前端基础(二)_第8张图片

       

      3、自定义列表

      定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。其基本语法如下:

      【025】Python全栈日记-WEB前端基础(二)_第9张图片

      一般网站最下面的服务都用无序编写的:

      【025】Python全栈日记-WEB前端基础(二)_第10张图片

      【025】Python全栈日记-WEB前端基础(二)_第11张图片

       

      4、通过style来修饰我们的列表

      【025】Python全栈日记-WEB前端基础(二)_第12张图片

      效果

      【025】Python全栈日记-WEB前端基础(二)_第13张图片

      通过style我们可以修改列表的背景颜色,列表的长度宽度,还有border边框,也可以修改每一行的颜色,但是我们发现这样非常的繁琐,而且混合在一起看着非常的乱,这时候css就应运而生。

       

      二、CSS

      1、CSS的发展历程

       

      从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。

       

      可以说CSS 是网页的美容师。我们用京东作为例子,当京东首页去掉CSS后:

      【025】Python全栈日记-WEB前端基础(二)_第14张图片

       

      2、CSS初识

      CSS(Cascading Style Sheets) 美化样式

       

      CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。

       

      CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。

       

      3、引入CSS样式表

      CSS可以写到那个位置? 是不是一定写到html文件里面呢?

       

      (1)内部样式表(用的最多)

      内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下:

      【025】Python全栈日记-WEB前端基础(二)_第15张图片

      语法中,style标签一般位于head标签中title标签之后,也可以把他放在HTML文档的任何地方。

       

      type="text/CSS" 在html5中可以省略, 写上也比较符合规范, 所以这个地方可以写也可以省略。

       

      (2)、行内式(内联样式)

      内联样式,又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式,就是我们之前的例子用的style方法,其基本语法格式如下:

      语法中style是标签的属性,实际上任何HTML标签都拥有style属性,用来设置行内式。其中属性和值的书写规范与CSS样式规则相同,行内式只对其所在的标签及嵌套在其中的子标签起作用。

       

      (3)、外部样式表(外链式)

      链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中,其基本语法格式如下:

      注意: link 是个单标签哦!!!

      该语法中,link标签需要放在head头部标签中,并且必须指定link标签的三个属性,具体如下:


      href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。
      type:定义所链接文档的类型,在这里需要指定为“text/CSS”,表示链接的外部文件为CSS样式表。
      rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。

       

      (4)、三种样式表总结

      CSS样式规则

      使用HTML时,需要遵从一定的规范。CSS亦如此,要想熟练地使用CSS对网页进行修饰,首先需要了解CSS样式规则,具体格式如下:

       

      在上面的样式规则中:
      1.选择器用于指定CSS样式作用的HTML对象,花括号内是对该对象设置的具体样式。
      2.属性和属性值以“键值对”的形式出现。
      3.属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等。
      4.属性和属性值之间用英文“:”连接。
      5.多个“键值对”之间用英文“;”进行区分。

       

       

       

      三、选择器(重点)

      要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器(选择符)。

       

      CSS基础选择器

      1、标签选择器(元素选择器)

      标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其基本语法格式如下:


      标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 
      元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

      【025】Python全栈日记-WEB前端基础(二)_第16张图片

      我们把整个html里所有的ol有序列表都去掉了前面的序号,一般我们只需要取消特定的,而不是全部取消。

       

      标签选择器最大的优点是能快速为页面中同类型的标签统一样式,同时这也是他的缺点,不能设计差异化样式。

       

       

      2、类选择器

      类选择器使用“.”(英文点号)进行标识,后面紧跟类名,其基本语法格式如下:


      .类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }


       标签调用的时候用 class=“类名”  即可。

      【025】Python全栈日记-WEB前端基础(二)_第17张图片

      这样只有调用了类选择器的才会被修饰:

      【025】Python全栈日记-WEB前端基础(二)_第18张图片

      类选择器最大的优势是可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签

      小技巧:


      1.长名称或词组可以使用中横线来为选择器命名。
      2.不建议使用“_”下划线来命名CSS选择器。

      ​ 输入的时候少按一个shift键; 浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的) 能良好区分JavaScript变量命名(JS变量命名是用“_”)
      3.不要纯数字、中文等命名, 尽量使用英文字母来表示。

       

      练习:

      让我们用类选择器来模拟谷歌的图标

      【025】Python全栈日记-WEB前端基础(二)_第19张图片
      ​首先我们在头中写CSS

      【025】Python全栈日记-WEB前端基础(二)_第20张图片

      然后在body中使用类

      【025】Python全栈日记-WEB前端基础(二)_第21张图片

      效果:

       

       

      3、多类名选择器

      我们可以给标签指定多个类名,从而达到更多的选择目的。

      亚瑟使用了3个类选择器。

       

      注意:
      1. 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
      2. 各个类名中间用空格隔开。

      多类名选择器在后期布局比较复杂的情况下,还是较多使用的。
       

       

      4、id选择器

      id选择器使用“#”进行标识,后面紧跟id名,其基本语法格式如下:
      #id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

      【025】Python全栈日记-WEB前端基础(二)_第22张图片

      该语法中,id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性,元素的id值是唯一的,只能对应于文档中某一个具体的元素。

      用法基本和类选择器相同。

      id选择器和类选择器最大的不同在于使用次数上,class能无限次调用,id理论上只能用一次,但是由于html的运行时,会自动修复这个问题,所以并不会报错。

      Id和class同时修改同一个标签时,优先使用id的修改。

       

      5、全局选择器

      全局选择器用“*”号表示,他是所有选择器中作用范围最广的,能匹配页面中所有的元素。其基本语法格式如下:


      * { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

      【025】Python全栈日记-WEB前端基础(二)_第23张图片

      所有的都会修改的

      注意:

      别用!!!

       

      四、CSS字体样式属性

      1、font-size:字号大小

      font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。

       

      2、font-family:字体

      font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等,例如将网页中所有段落文本的字体设置为微软雅黑,可以使用如下CSS样式代码:

      p{ font-family:"微软雅黑";}

      可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体。

       

      常用技巧:
      1. 现在网页中普遍使用14px+。
      2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
      3. 各种字体之间必须使用英文状态下的逗号隔开。
      4. 中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前。
      5. 如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号,例如font-family: "Times New Roman";。
      6. 尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。

       

      3、font-weight:字体粗细

      字体加粗除了用 b 和 strong 标签之外,可以使用CSS 来实现,但是CSS 是没有语义的。


      font-weight属性用于定义字体的粗细,其可用属性值:normal、bold、bolder、lighter、100~900(100的整数倍)。

       

      小技巧: 
      数字 400 等价于 normal,而 700 等价于 bold。  但是我们更喜欢用数字来表示。  

       

      4、font-style:字体风格

      字体倾斜除了用 i 和 em 标签之外,可以使用CSS 来实现,但是CSS 是没有语义的。

      font-style属性用于定义字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下:

      normal:默认值,浏览器会显示标准的字体样式。

      italic:浏览器会显示斜体的字体样式。

      oblique:浏览器会显示倾斜的字体样式。

       

       

      5、font:综合设置字体样式 (重点)

      font属性用于对字体样式进行综合设置,其基本语法格式如下:


      选择器{font: font-style  font-weight  font-size/line-height  font-family;}

      【025】Python全栈日记-WEB前端基础(二)_第24张图片
      使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。

      注意:其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。

       

       

      五、CSS外观属性

      1、color:文本颜色

      color属性用于定义文本的颜色,其取值方式有如下3种:

      1.预定义的颜色值,如red,green,blue等。

      2.十六进制,如#FF0000,#FF6600,#29D794等。实际工作中,十六进制是最常用的定义颜色的方式。

      3.RGB代码,如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

      需要注意的是,如果使用RGB代码的百分比颜色值,取值为0时也不能省略百分号,必须写为0%。

       

      2line-height:行间距

      【025】Python全栈日记-WEB前端基础(二)_第25张图片

      line-height属性用于设置行间距,就是行与行之间的距离,即字符的垂直间距,一般称为行高。line-height常用的属性值单位有三种,分别为像素px,相对值em和百分比%,实际工作中使用最多的是像素px

      我们一般使用行高来设置垂直居中。

      一般情况下,行距比字号大7.8像素左右就可以了。

       

       

      3、text-align:水平对齐方式
      text-align属性用于设置文本内容的水平对齐,相当于html中的align对齐属性。其可用属性值如下:

      left:左对齐(默认值)

      right:右对齐

      center:居中对齐

      text-indent:首行缩进

      text-indent属性用于设置首行文本的缩进,其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%,允许使用负值, 建议使用em作为设置单位。

      1em 就是一个字的宽度 如果是汉字的段落, 1em 就是一个汉字的宽度

      text-decoration 文本的装饰

       

       

      六、CSS注释
      CSS规则是使用     /*  需要注释的内容  */  进行注释的,即在需要注释的内容前使用 “/*” 标记开始注释,在内容的结尾使用 “*/”结束。

       

       

      七、标签显示模式(display)

       

      标签的类型(显示模式)

      HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素。具体如下:

       

      1、块级元素(block-level)

      每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。

      【025】Python全栈日记-WEB前端基础(二)_第26张图片

      显示:“

      【025】Python全栈日记-WEB前端基础(二)_第27张图片

      即使空白很多,div还是分成了上下两个。
       

      常见的块元素有

      ~

        1. 等,其中
          标签是最典型的块元素。

          块级元素的特点:

          (1)总是从新行开始

          (2)高度,行高、外边距以及内边距都可以控制。

          (3)宽度默认是容器的100%

          (4)可以容纳内联元素和其他块元素。

           

           

           

          2、行内元素(inline-level)

          行内元素(内联元素)不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本的样式。

          【025】Python全栈日记-WEB前端基础(二)_第28张图片

          样式:

          常见的行内元素有等,其中标签最典型的行内元素。

          当我们用css修改span的大小你会发现:

          【025】Python全栈日记-WEB前端基础(二)_第29张图片

          效果:

          大小并没有发生改变

           

          行内元素的特点:

          (1)和相邻行内元素在一行上。

          (2)高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。

          (3)默认宽度就是它本身内容的宽度。

          (4)行内元素只能容纳文本或则其他行内元素。(a特殊)

          注意:

          只有文字才能组成段落,因此p里面不能放块级元素,同理还有这些标签h1,h2,h3,h4,h5,h6,dt,他们都是文字类块级标签,里面不能放其他块级元素。

          链接里面不能再放链接。

           

          3、块级元素和行内元素区别

          块级元素的特点:

          (1)总是从新行开始

          (2)高度,行高、外边距以及内边距都可以控制。

          (3)宽度默认是容器的100%

          (4)可以容纳内联元素和其他块元素。

           

          行内元素的特点:

          (1)和相邻行内元素在一行上。

          (2)高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。

          (3)默认宽度就是它本身内容的宽度。

          (4)行内元素只能容纳文本或则其他行内元素。

           

          4、行内块元素(inline-block)

          在行内元素中有几个特殊的标签——、,可以对它们设置宽高和对齐属性,有些资料可能会称它们为行内块元素。

          行内块元素的特点:

          (1)和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。

          (2)默认宽度就是它本身内容的宽度。

          (3)高度,行高、外边距以及内边距都可以控制。

           

          5、标签显示模式转换 display

          块转行内:display:inline;

          行内转块:display:block;

          块、行内元素转换为行内块: display: inline-block;

          此阶段,我们只需关心这三个,其他的是我们后面的工作。

          【025】Python全栈日记-WEB前端基础(二)_第30张图片

          【025】Python全栈日记-WEB前端基础(二)_第31张图片

           

           

          八、CSS优先级

          定义CSS样式时,经常出现两个或更多规则应用在同一元素上,这时就会出现优先级的问题。

          在考虑权重时,初学者还需要注意一些特殊的情况,具体如下:

          继承样式的权重为0。即在嵌套结构中,不管父元素样式的权重多大,被子元素继承时,他的权重都为0,也就是说子元素定义的样式会覆盖继承来的样式。

           

          行内样式优先。应用style属性的元素,其行内样式的权重非常高,可以理解为远大于100。总之,他拥有比上面提高的选择器都大的优先级。

           

          权重相同时,CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。

           

          CSS定义了一个!important命令,该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近,!important都具有最大优先级。

           

           

          九、表格 table

           

          表格的现在还是较为常用的一种标签。

          在HTML网页中,要想创建表格,就需要使用表格相关的标签。创建表格的基本语法格式如下:

          【025】Python全栈日记-WEB前端基础(二)_第32张图片

          效果:

          在上面的语法中包含三对HTML标签,分别为 

          中包含几对中只能嵌套

          2.

          标签,他就像一个容器,可以容纳所有的元素

           

          !!!!!!!!!表格可以用来布局!!!!!!!!!!

           

          1、表格属性

          (1)table标签属性

          我们上面展示了,一般表格的效果,但是每个格子之间好像有空隙,那如何取消这个空隙呢?

          Border :表格边框的粗细

          Cellspacing:单元格和单元格之间的距离

          cellspadding :内容与单元格边框的距离

          align:表格的位置 center居中、left靠左、right靠右

          bgcolor:表格背景颜色

           

           

          (2)表头标签

          表头一般位于表格的第一行或第一列,其文本加粗居中,如下图所示,即为设置了表头的表格。设置表头非常简单,只需用表头标签

          :用于定义表格的头部。
          必须位于
          ,通常还有表示表头,与一致的用法。

          ,就表示该行中有多少列(或多少个单元格)。

           

          注意:

          1.

          【025】Python全栈日记-WEB前端基础(二)_第33张图片

           

          (3)表格结构

          在使用表格进行布局时,可以将表格划分为头部、主体和页脚(页脚因为有兼容性问题,我们不在赘述),具体如下所示:

           标签中,一般包含网页的logo和导航等头部信息。

          【025】Python全栈日记-WEB前端基础(二)_第34张图片
          :用于定义表格的主体。
          位于

          标签中,一般包含网页中除头部和底部之外的其他内容。

          【025】Python全栈日记-WEB前端基础(二)_第35张图片

          虽然加不加thead和tbody并不会对表格产生影响,但是我们还是应该注意格式。

           

          (4)表格标题

          表格的标题: caption

          定义和用法

          caption 元素定义表格标题。

          caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

           

           

          (4)合并单元格(难点)

          跨行合并:rowspan 跨列合并:colspan

          【025】Python全栈日记-WEB前端基础(二)_第36张图片

          合并单元格的思想:

          ​将多个内容合并的时候,就会有多余的东西,把它删除。 例如把3个td 合并成一个, 那就多余了2个,需要删除。

          Rowspan = 2:就是合并两行的单元格,

          Colspan = 2 :就是合并两列的单元格

           

          表格第一行:

          【025】Python全栈日记-WEB前端基础(二)_第37张图片

          ​而在下面被合并的行就应该删除合并项

          表格第二行:

          【025】Python全栈日记-WEB前端基础(二)_第38张图片

          公式: 删除的个数 = 合并的个数 – 1

           

          2、总结表格

          表格提供了HTML 中定义表格式数据的方法。

          表格中由行中的单元格组成。

          表格中没有列元素,列的个数取决于行的单元格个数。

          表格不要纠结于外观,那是CSS 的作用。

          表格的学习要求: 能手写表格结构,并且能合并单元格。

           

           

          十、表单标签 form

          表单的目的是为了收集用户信息。

          在我们网页中,我们也需要跟用户进行交互,收集用户资料,此时也需要表单。

          在HTML中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。

          常用属性:

          Action :在表单收集到信息后,需要将信息传递给服务器进行处理,action属性用于指定接收并处理表单数据的服务器程序的url地址。

          method :用于设置表单数据的提交方式,其取值为get或post。

          name :用于指定表单的名称,以区分同一个页面中的多个表单。

          注意:每个表单都应该有自己表单域。

           

          1、表单控件:

          ​包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

          【025】Python全栈日记-WEB前端基础(二)_第39张图片

          提示信息:

          ​一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。

           

          表单域:

          ​他相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。

           

           

          2、input 控件(重点)

          在上面的语法中,标签为单标签,type属性为其最基本的属性,其取值有多种,用于指定不同的控件类型。除了type属性之外,标签还可以定义很多其他的属性,其常用属性如下表所示。

          然我们来学习如何做出上面那种输入账号密码的界面:

          (1)、text

          效果:

          一般我们账号使用text类型的input控件:

          Placeholder:是在输入框中显示文字

          Maxlength:是限制长度,防止无聊的人输入20位手机号码

           

          (2)、password

          效果:


           

          (3)、radio

          效果:

          一般这种选项我们只能选择一个,不可能又同意又不同意的,所以需要添加

          name这个属性,当多个radio的name相同时只能选择一个,

          checked是默认选择,你一打开网页就会默认选择的

           

          (4)checkbox

          效果:

          Check是同类型进行多选,当然你也可以单选,

          Name:代表类型

          Value:代表选项的值

          其实这就是我们python中的字典,当用户填写后,会用字典的方式传入服务器{hobby:book}

          然后由我们在后端进行处理。

           

          (5)、select-option

          【025】Python全栈日记-WEB前端基础(二)_第40张图片

          效果:

          这个太常见了,不解释干啥的了,背下来

          Name:代表选单的类别,可空

          Option:代表选项

          value可空

           

          (6)、file

          效果:

           

          (7)submit(重要)

          效果:

          Submit:会把你所有填写的东西进行提交,提交给谁呢?

          在你建立表单的时候,会有一个网址,提交给这个网址,也就是我们后台的服务器

          Method:分为post和get

          Post会隐藏用户信息

          Get会显示在地址栏

          7)textarea控件(文本域)

          如果需要输入大量的信息,就需要用到标签。通过textarea控件可以轻松地创建多行文本输入框,其基本语法格式如下:

           

           

          注意,所有的图标好不好看,样式美不美都可以通过css来修改,我们可以在input中添加style属性来来修改大小。

           

           

           

          十一、作业

          1、

          【025】Python全栈日记-WEB前端基础(二)_第41张图片

          制作一个居中的表格。

          答案(http://note.youdao.com/noteshare?id=d0b689317c4e73427a62c9a111155fd1)

           

           

          2、注册页(用表格来布局)

          【025】Python全栈日记-WEB前端基础(二)_第42张图片

          制作一个世纪佳缘登录页,要求点击已有账号立即登陆跳转到作业3

          答案:(http://note.youdao.com/noteshare?id=01541fba051b3cc26a01787804d9322c)

           

          3、登录页(用表格来布局)

          【025】Python全栈日记-WEB前端基础(二)_第43张图片

          点击不是会员?立即注册跳到作业2
          答案(http://note.youdao.com/noteshare?id=3e35dc13b0900b1bd6e28319752b0ae2)

           

      你可能感兴趣的:(web,Python,Python全栈日记)