python和html和css什么关系什么区_python学习-day14-前端之html、css

一、Html

1、本质：一个规则，浏览器能认识的规则

2、开发者：

学习Html规则

开发后台程序：

- 写Html文件(充当模板的作用) ******

- 数据库获取数据，然后替换到html文件的指定位置(Web框架)

3、html固定格式介绍

类似html这种格式()，称之为标签，html标签，head标签等,标签内部可以写属性

#指定编码

html、head、body是固定格式，不可变

，注释

4、标签

1、标签分类

标签可以嵌套

标签存在的意义：用于定位，通过标签+标签里面的属性(如id=“1”，name=“xx”等)，定位后，用于css、js操作

- 自闭和标签   如：  后面不需要再跟个这样的叫做自闭和标签。为了方便查看自闭和标签需要在后面加个/,例:

- 手动闭合标签 如：

行内标签(内联标签)：所有标签占据一个行。

块级标签：无论内容有多少，一个标签就占据一行

2、head标签

1、meta标签

属性：编码、刷新、设置页面编码、关键词(针对搜索引擎)，跳转，描述

页面编码(告诉浏览器是什么编码)：< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>

刷新： #每过10秒刷新一次

跳转： #过3秒跳转到www.baidu.com

关键词： #设置关键词，用于爬虫爬，百度搜索引擎搜索这些关键词的时候，将页面(网站)加入搜索结果

描述：描述网站是做什么的

2、title标签

网页头部信息

3、link标签

css

< link rel="stylesheet" type="text/css" href="css/common.css" >

icon

< link rel="shortcut icon" href="image/favicon.ico">    #浏览器上的图片

3、body标签

1、各种符号

http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

空格   大于号> 小于号&lt

lw   #俩个空格

2、p标签和br标签

p标签：段落，默认2个段落段落之间是有间距的

br标签：换行

1111
ggggggg

123

#第一个段落(p标签)和第二个段落在浏览器打开的时候是有间隔的(2行)，第一个段落加上br换行后，变成2行，但是没有间距，是属于一个段落

3、h标签

标题标签，h1到h6，从大到小

4、span标签

span标签，白板一个，什么属性都没有，行内标签，所有标签都是一行。通过css可使其变成任何特性的标签

5、div标签

块级标签，也是白板，没有任何属性，因为是块级标签，一个div就是一行，但是行直接没有间距，也是可以通过css使其变成任何标签

1、div标签中可以加属性，js通过属性查找div标签中的内容及css装饰

6、input输入框标签

get和post区别：

http请求的时候会有2部分，一部分是请求头，一部分是请求内容

get提交方式，请求的数据是在请求头中，也就是在url中可以直接看到，

post方式，请求的数据在请求内容中(body)，url中看不到

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标签的text属性：文本

#type属性：password属性，输入的时候是加密的

#button，按钮，button仅仅是按钮，并不能提交

#submit，提交

注：仅仅是这样并不能提交，需要在外面加入一个form标签(表单)，上面点击按钮，即将表单提交到form属性里面定义的地方(action)。

例：

#后台根据name属性“user”去匹配值，后台程序里面定义根据user获取(后台去获取什么值，这里就写什么)

例：

#value后面的东西是默认值，就是打开浏览器在输入框中默认存在的值

选框：

请选择性别

男： #name属性，互斥，就是只能选择一个，通过value判断选择的是哪一个

女: #name后面的东西可以随意，只有和后台程序中写的程序获取的一致即可

爱好

篮球： #多选框，可以选择多个,还是通过value判断选择了哪些

足球：

台球：

网球：

7、textarea

多行文本输入:

8、select标签

选择标签，下拉框选择

#提交到后台后根据name(city)获取，size：显示多少，默认显示一个，即size=1；multiple：多选(可以选择多个)

#optgroup分组：下面的选项在这个分组中，分组不能选，只能显示

北京 #根据value获取选择的是哪个

河北

南京 #selectd默认选择哪一个

9、a标签

跳转

百度 #href 超链接，必须加http，否则出错

百度 #target="_blank"表示在新的标签页打开

锚：

第一章 -- #id和下面的id对应

第二章

第三章

第一章的内容

第二章的内容

第三章的内容

注：锚：当一个页面很长的时候，在点击第一章的时候会跳转到第一章的内容处；

10、img标签

图片标签

#--src后面直接跟图片的路径，style后面可以设置图片的尺寸！

注：title：将鼠标放到图片上方时将出现文字：博客园

alt：当这张图片不存在的时候，图片位置显示文字：啦啦图。

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

可以点击图片，查看这张图片

11、列表--ul，ol，dl

不常用，一般通过css改造

代码、效果：

• #ul、ol和li对应，配对的
• test1
• test2
• test3

1. test4
2. test5
3. test6

www

test7

test8

www2

test9

test10

效果：

12、table表格标签

tr表示行

td表示列

第一行，第一列	第一行，第二列	第一行，第三列
第二行，第一列	第二行，第二列	第二行，第三列

上面代码效果：

表头都单独的标签

表头1表头2表头3

1.1.1.180查看详细2.2.2.280

查看详细 #可以点击查看详细

合并单元格：

表头1表头2表头3

11 #相当于合并单元格，占两列，但是第三列需要删掉，否则就挤出单元格了。22 #相当于合并丹阳，占两行，下面一行的相对应得列需要删掉，否则就挤出单元格233

13、lable

用户名： #label就是一个普通的文本，和form一起使用

和下面的id=username联系起来，在点击用户名的时候，光标就会到下面input的输入框中！

二、CSS

做html的时候先分为3块(3个div)

在标签上面设置style属性

一般css文件单独写在css的文件中，在html中导入：

css文件注释：/*     */

一个标签可以应用2个样式，如果不一样，就全部应用，如果一样，就按顺序往下设置

选择器：

id选择器：

#i1,#i2,#i3{

background-color: #dddddd;

}

1

2

3

#对应id

class选择器：

.c1{

background-color: #dddddd;

}

4

点.对应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;

}

CSS单独文件例子：

#引入css

1

2

3

4

#css里面定义的c1和c2样式

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