python全栈开发 * 表格标签 表单标签 css 引入方式 * 180807
html部分
一.表格标签<table>
1.一个表格<table>由每行<tr>组成的,每行是由<td>组成的.
注意: 一个表格是由行组成的(行是由列组成的),而不是由行和列组成的.
2.<table>的属性:
border : 边框,像素为单位.
style="border-collapse : collapse ;" : 单元格的线和表格的边框线合并
width : 宽度. 像素为单位.
height : 高度. 像素为单位
bordercolor : 表格的边框颜色.
align : 表格的水平对齐方式,属性值( left ,right ,center)
注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签<td>进行设置）
cellpadding：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。如果设置属性dir="rtl"，那就指的是内容到右边那条线的距离
cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0
bgcolor="#99cc66"：表格的背景颜色。
background="路径src/..."：背景图片 ( 背景图片的优先级大于背景颜色。)注意 : 表格中很细表格变现的制作: border="1" style="border-collapse:clooapse;" css写法3.<tr> 行 属性: dir : 公有属性,设置这一行单元格内容的排列顺序 . ltr 从左到右 (默认) ,rtl 从右到左. bgcolor : 设置这一行的单元格的背景色. (背景图片需要css实现) height : 一行高度. align="center" 一行的内容水平居中显示.(left ,center, right) valign="middle" 一行内容垂直居中 (top ,middle ,bottom)4.<td> 单元格 属性 align : align：内容的横向对齐方式。属性值可以填：left right center (可用css) valign : 内容的纵向对齐方式。属性值可以填：top middle bottom width：绝对值或者相对值(%) height：单元格的高度 bgcolor：设置这个单元格的背景色 background：设置这个单元格的背景图片 5.单元格的合并: 如果想要将两个单元格合并,那肯定就要删除一个单元格. 相关属性: colspan : 横向合并 例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。 rowspan : 纵向合并. 例如rowspan="2"表示当前单元格在垂直方向上6.<th>标签 加粗的单元格 相当于 <td> + <b> 属性 align：内容的横向对齐方式。属性值可以填：left right center (可用css) valign : 内容的纵向对齐方式。属性值可以填：top middle bottom width：绝对值或者相对值(%) height：单元格的高度 bgcolor：设置这个单元格的背景色 background：设置这个单元格的背景图片 7.<caption> : 表格的标题 使用时和<tr>>标签并列8.表格的<thead>标签. <tbody>标签 <tfoot>标签 (1)、如果写了，那么这三个部分的代码顺序可以任意，浏览器显示的时候还是按照thead、tbody、tfoot的顺序依次来显示内容。如果不写thead、tbody、tfoot，那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。 (2)、当表格非常大内容非常多的时候，如果用thead、tbody、tfoot标签的话，那么数据可以边获取边显示。如果不写，则必须等表格的内容全部从服务器获取完成才能显示出来。示例 :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <table border="1" style="border-collapse: collapse;"> <caption>信息登录</caption> <tbody> <tr> <td>jay</td> <td>38</td> <td>男</td> <td rowspan="3">中国</td> </tr> </tbody> <thead> <tr> <td>jj</td> <td>35</td> <td>男</td> </tr> </thead> <tfoot> <tr> <td>jolin</td> <td>37</td> <td>女</td> </tr> </tfoot> </table> </body> </html>
二.表单标签<form>
用于与服务器的交互.表单就是收集用户信息的,就是让用户填写的,选择的
1.属性
name : 表单的名称,用于js来操纵或控制表单时使用;
id : 表单的名称,用于js来操纵或控制表单时使用;
action : 表单要提交到哪里.
method : 表单数据的提交方式,get(默认) 不安全 和 post 安全
2.get 和post 的区别:
get:
将表单数据，以"name=value"形式追加到action指定的处理程序的后面，两者间用"?"隔开，每一个表单的"name=value"间用"&"号隔开。
特点:只适合提交少量信息，并且不太安全(不要提交敏感数据)、提交的数据类型只限于ASCII字符
post:
将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。Action指定的处理程序可以获取到表单数据。
特点:可以提交海量信息，相对来说安全一些，提交的数据格式是多样的(Word、Excel、rar、img)。
3.Enctype：
表单数据的编码方式(加密方式)，取值可以是：application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。
Application/x-www-form-urlencoded：默认加密方式，除了上传文件之外的数据都可以
Multipart/form-data：上传附件时，必须使用这种编码方式
4.<input> 输入标签(文本框) (单闭合标签)
属性:
type="属性值" 文本类型
属性值可以是以下内容:
(1) text (默认)
(2) password :密码类型
(3) radio: 单选按钮 名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。
(4). checkbox :多选按钮,名字相同的按钮作为一组进行选择.
(5) checked: 将单选按钮或多选按钮默认处于选中状态.当<input>标签的type="radio"时，可以用这个属性。属性值也是checked，可以省略
(6)hidden：隐藏框，在表单中包含不希望用户看见的信息
(7)button：普通按钮，结合js代码进行使用
(8)submit：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。
(9)reset：重置按钮，清空当前表单的内容，并设置为最初的默认值
(10)image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。
(11)file：文件选择框
(12)提示：如果要限制上传文件的类型，需要配合JS来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。
(13)value="内容"：文本框里的默认内容
(14)size="50"：表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。
(15)readonly：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。
(16)disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写。
5.<select>:下拉列表标签
<select>标签里面的每一项用<option>表示。select就是“选择”，option“选项”。
属性:
multiple：可以对下拉列表中的选项进行多选。没有属性值。
size="3"：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。
<option>标签的属性：
selected：预选中。没有属性值
6.<textare>标签：多行文本输入框 text就是“文本”，area就是“区域”。
value：提交给服务器的值。
rows="4"：指定文本区域的行数。
cols="20"：指定文本区域的列数
readonly：只读。
7.<lable>标签
input元素要有一个id，然后label标签有一个for属性，和id相同，那么这个label和input就有绑定关系了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <form action="https://www.baidu.com" method='get'> <lable for="user">用户名</lable> <input id="user" type="text" name="username" value="" > <br> <lable for="pass">登陆密码</lable> <input id="pass" type="text" name="password" value=""> <br> <lable for ="gen">性别</lable> <input type="radio" name="gender" value="man" id="gen">男 <input type="radio" name="gender" value="women"checked="checked">女 <br> <lable for ="gen">爱好</lable> <input type="checkbox" name="love" value="eat">吃 <input type="checkbox" name="love" value="sleep">睡 <input type="checkbox" name="love" value="play">玩 <br> <input type="submit" value="登陆"> <br> <button type="submit" disabled>注册</button> <input type="reset"value="重置按钮"><br> <input type="file"value="文件选择框"><br> <select multiple="" size="3"> <option >小学</option> <option selected>中学</option> <option >大学学</option> <option >研究生</option> </select> <br> <textarea name="textinfo" rows="4" cols="10">多行文本输入 </textarea> </form> </body>
8.表单语义化
应用:
我们在注册一个网站的信息的时候，有一部分是必填信息，有一部分是选填信息，这个时候可以利用表单的语义化。
<form>
<fieldset>
<legend>账号信息</legend>
姓名：<input value="呵呵" >逗比<br>
密码：<input type="password" value="pwd" size="50"><br>
</fieldset>
<fieldset>
<legend>其他信息</legend>
性别：<input type="radio" name="gender" value="male" checked="">男
<input type="radio" name="gender" value="female" >女<br>
爱好：<input type="checkbox" name="love" value="eat">吃饭
<input type="checkbox" name="love" value="sleep">睡觉
<input type="checkbox" name="love" value="bat">打豆豆
</fieldset>
</form>
css部分
一.css简介
1.现在的互联网前端分三层:
html : 超文本标记语言. 从语义的角度描述页面结构.
css : 层叠样式表.从审美的角度负责页面样式.
js : JavaScript .从交互的角度描述页面行为.
2.CSS：
Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。
简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
3.html的缺点:
(1).不能适应多种设备
(2).要求浏览器必须智能化足够庞大.
(3).数据和显示没有分开.
(4).功能不够强大
4.css优点
(1).使数据和显示分开
(2).降低网络流量
(3).使整个网站视觉效果一致
(4).使开发效率提高了(耦合性降低,一个人负责html,一个负责写css)
比如说，有一个样式需要在一百个页面上显示，如果是html来实现，那要写一百遍，现在有了css，只要写一遍。现在，html只提供数据和一些控件，完全交给css提供各种各样的样式。
二.css的三种引入方式
(1).行内样式
1 <div> 2 <p style="color: green">我是一个段落</p> 3 </div>
(2).内接样式
<style type="text/css"> /*写我们的css代码*/ span{ color: yellow; } </style>
(3).外接样式
链接是
<link rel="stylesheet" href="./index.css">
导入式
<style type="text/css"> @import url('./index.css'); </style>
