内容回顾:
1.h1~h6:加粗,数字越大级别越小,自动换行
2.br:换行;hr:分割线; (特殊符号,空格)
3.p:与前边和后边内容之间有间距
4.a标签的href:本地文件连接;网络连接;锚链接
target:_blank另起页面,默认是自己页面
name:主要为了设置锚链接的锚点
5.img图片,src:本地文件地址和网络地址
alt:图片损坏时给的提示
align:图片的对齐方式
title:鼠标悬浮时提示的文字
宽度
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
是块儿级标签,
行内标签
,
其他:不在上边三类里的
f
id选择器:常涛
* {
100px;
height: 100px;
margin: 0;
padding: 0;
}
标签选择器层级一致的时候,从上往下,以下边的为准
类的选择器的优先级大于标签选择器
通过id找到的具有唯一性,优先级最高
行内样式的设置优先级最高
继承的样式优先级是最低的s
/* 后代选择器 */
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>
注意:伪元素选择器,仅仅适用于块级标签.