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>
注意:伪元素选择器,仅仅适用于块级标签.
最新文章
- T-SQL Recipes之Organizing and Archiving Data
- [WCF编程]11.错误:错误契约
- 容器--TreeMap
- No space left on device 解决Linux系统磁盘空间满的办法
- 关于J-LINK升级最新固件后无法连上的一点分析
- PHP面向对象基础知识总结
- Cloud Engine
- springMVC servlet 静态资源加载
- 对于python的__name__=";__main__";的含义的理解
- HTML状态码大全(301,404,500等)
- 获取NVIDIA显卡的温度
- Matlab绘图基础——给图像配文字说明(text对象)
- js怎么实现继承?
- ES6躬行记(3)——解构
- Fruit HDU - 2152 -上下界生成函数
- 已安装nginx动态添加模块
- UI5-学习篇-18-云端UI5应用部署到Fiori Launchpad
- [iOS] 输入框高度随输入内容变化
- Microsoft Dynamics CRM 2011 常用JS 按F12 改动窗体上数据的方法
- 并发基础(九) java线程的终止与中断