day51 Pyhton 前端02

内容回顾:

　　1.h1~h6:加粗,数字越大级别越小,自动换行

　　2.br:换行;hr:分割线; (特殊符号,空格)

　　3.p:与前边和后边内容之间有间距

　　4.a标签的href:本地文件连接;网络连接;锚链接

　　　　target:_blank另起页面,默认是自己页面

　　　　name:主要为了设置锚链接的锚点

　　5.img图片,src:本地文件地址和网络地址

　　　　alt:图片损坏时给的提示

　　　　align:图片的对齐方式

　　　　title:鼠标悬浮时提示的文字

　　　　width:宽度

　　　　height:高度

　　6.ul:无序列表,内部能包裹li,type更改显示的样式,默认是实心圆,还可以更改为空心圆(circle)和正方块(square)

　　7.ol有序列表,内部能包裹li,type类型,默认是阿拉伯数字,可更改为大小写字母,还可以更改为罗马文字 start,序号起始位置

　　8.dl定义列表dt,dd*5 tab一下就出来了,pycharm帮我做的

　　9table表格标签,border:边框类型;bordercolor:边框颜色;bgcolor:背景颜色,background:被禁图片,宽高align:对齐方式;style='border-collapse:collapse''让表格的线条变成实心线.

　　tr代表一行

　　td代表一行内的一个单元格;rowspan:纵向合并;colspan:横向合并

　　10.form表单;action:对应要提交的网络地址;method:get和post两个方法,默认是get

　　　　input的类型们

　　　text普通文本输入框

　　　password密文文本输入框

　　　checkbox,多选框,多用来服务条款点那个对号

　　　radio 单选,多用于选择性别,name得统一才能实现单选

　　　file 文件上传按钮

　　　date,日期选择框

　　　submit:form表单提交数据时候用它

　　　button:普通按钮

　　　image:一个图片,自带submit,src(王瑞东)=图片地址

　　　select:下拉菜单,更改下拉菜单的多选multiple,size

　　　　　option 下拉的每一个选项,默认选中此选项用selected

　　　textarea:文本输入框,可改变大小

今日内容

　　HTML尾巴

　　CSS的引入方式

　　CSS的选择器

　　CSS选择器进阶

　　CSS选择器的优先级

　　CSS的伪类选择器

div

　　是块儿级标签,块级标签内的文本,超过了块的宽度则会自动换行,但是如果是长英文没分割的字符串,不会换行,会溢出

span

　　是行级标签,一个行内的宽高和背景大小由填充的内容决定,不管内容多少,都不会溢出

行内块

　　可以设置宽高,不自动换行.在一行内显示,而且可以设置宽高,一个底边对齐的现象img图片标签,input输入框,textarea文本输入区域

行内标签

　　不能设置宽高,不自动换行,同时具备,a标签,span标签,b加粗标签 strong与b一样都是加粗标签,em将字符变斜标签,i将字符变斜标签,u字体里加下划线标签,del字体中间加划线标签

块级标签

　　可以设置宽高,可以自动换行同时具备,p标签,h1~h6,table,列表:ol;ul;dl,div

其他:不在上边三类里的

　　form标签不算,它是一个容器,容器内放了很多标签,他自己有自己的属性,br,hr

CSS的简介

cascdaing style sheet 层叠样式表,简称CSS

层叠:通过CSS的属性等把页面层叠起来

样式:设置页面每一块的样式

表:页面排版

CSS的书写方式

方式一:行内式,在标签中直接书写

　　优点:肯定不会选错标签

　　缺点:代码冗余,且修改不方便

方式二:一个页面内接入的,称为内接式

　　书写在head里的style标签里

　　优点:修改方便,直观

　　缺点:关联性太强.如果写错变量名可能会酿成大祸

方式三:外接式

　　导入方式:利用link标签导入

　　优点:协同开发,不同类型的代码分文件存放

　　缺点,文件出问题或者丢了,页面就塌了

CSS基本选择器

基本选择器中的标签选择器

　　通过标签名直接就可以选择到标签,页面中所有符合选择条件的标签都会被选择

id选择器:常涛

　　通过#号找到id

　　id不能以数字开头

　　指哪打哪,因为id是唯一的

类选择器

　　通过.找到类名

　　类名可以重复

　　类一般值的同一群相同属性的统称

通配符选择器

　　用*号操作所有标签

　　使用场景:删除边框

* {

            width: 100px;

            height: 100px;

            margin: 0;

            padding: 0;

        }

CSS的优先级

　　标签选择器层级一致的时候,从上往下,以下边的为准

　　类的选择器的优先级大于标签选择器

　　通过id找到的具有唯一性,优先级最高

　　行内样式的设置优先级最高

　　继承的样式优先级是最低的s

CSS的高级选择器

后代选择器

/* 后代选择器 */

        body li {

            color: red;

        }

子代选择器

 /*!* 子代选择器 *!*/

        body ul > p {

            color: green;

        }

弟弟选择器

/*!* 弟弟选择器 *!*/

        h1 ~ h2 {

            color: pink;

        }

毗邻选择器

/*!* 毗邻选择器 *!*/

        h1 + h2 {

            color: #cc6600;

        }

组合选择器

/* 组合选择器 */

h1 ~ h2, li, h1 {

    color:darkviolet ;

    color: green;

}

伪类选择器

a标签的四个形态:爱恨准则  LoVe HAte

<style>

        /* 爱恨准则LoVe HAte */

        a:link {

            color: green;

        }

        a:visited {

            color: blueviolet;

        }

        a:hover {

            color: yellow;

        }

        a:active {

            color: red;

        }

    </style>

<body>

<a href="http://www.jd.com">a标签未被点击时的形态link</a><br>

<a href="#">a标签被点击时的形态</a><br>

<a href="#">a标签点击完毕时的形态</a><br>

<a href="#">a标签悬浮时的形态</a><br>

</body>

伪元素选择器

 　　<style>

        /* 在文本之前添加内容 */

        div:before {

            content: "SB";

        }

        /* 在文本之后添加内容 */

        div:after {

            content: "翔";

        }

        /* 文本的第一个字母发生变化 */

        div:first-letter {

            color: green;

        }

        /* 文本的首行发生变化 */

        div:first-line {

            color: #cc6600;

        }

    </style>

<div>alex吃...</div>

注意:伪元素选择器,仅仅适用于块级标签.