meta标签
<meta name="KEYWords" content+"">向搜索引擎说明你的网页的关键词;
<meta name="DEscription" content="">告诉搜索引擎你的站点的主要内容;
<meta charset="UTF-8"/>设置网页编码集
<meta http-equiv="Refresh" content="n;url=http://yourlink">定时让网页在制定的时间n内,跳转到页面http://yourlink;
表单元素
input
- text 文本框
- password 密码框
- radio 单选框
- checkbox 复选框
- hidden 隐藏表单
- file 文件表单
- submit 提交按钮
- reset 重置按钮
- image 图片提交按钮
- button 命令按钮
select
- 下拉框,列表框(multiple)
textArea 多行文本
什么是CSS
- CSS是层叠样式表(Cascading Style Sheets)的缩写,它用于定义HTML元素的显示形式,是一种个格式化网页内容的技术。
添加样式表
- 内联式:直接在元素中加入style属性,只能用于网页中的一个元素
<div style="border:1px solid #000;width:300px;height:200px"></div>
- 嵌入式:书写style标签,在标签中指明样式。可以用于网页中的不同元素。
<style>
div{
width:300px;
height:200px;
background-color:yellow;
border:2px solid #000;
}
</style> - 外联式:将样式规则书写到文件中,可以用于不同的网页,重用度最好。
<link rel="stylesheet"href="abc.css">
注意:层叠样式表的含义是:如果有多个规则来描述同一个元素,那么会根据样式表的优先级,来决定最终显示什么样式。
- 对于导入css方式的优先级:内联式>嵌入式>外联式(嵌入式和外联式由所在行数越大的那个覆盖所在位置行数较小的那个)
css选择器
- 元素选择器 div:利用元素的标签名称作用选择范围。div{}表示所有div元素均采用该样式。h1,h2{}表示所有的h1标签和h2标签均采用该样式。
- 类选择器 .:利用元素的class属性来引入类选择器的样式。可以用于多种元素。同一种元素也可以选择性使用。
.mm{} <div class="mm"></div>
- ID选择器 #:让拥有该ID属性的元素采用该样式。
<p id="p1"></p> #p1{} id号位p1的元素采用该样式
- 包含选择器:元素内的子元素采用该样式。
div id="mydiv"></div> #mydiv span{} id号为mydiv元素中所有的span标签采用该样式 div .aaa{}表示所有的div中,class属性为aaa的元素采用该样式
- 通配符 *:所有的元素均采用该样式。
#oneDiv *{} 表示id为oneDiv中,所有的元素均采用该样式。
- 伪类选择器:执行完某个动作的元素采用该样式。
`#data tr:hover{} 表示鼠标悬停在id为data下的tr元素时,采用该样式。
CSS属性单位
- 颜色单位:
使用0-255之间的整数值来设置,如 color:rgb(128,0,128);
使用十六进制数组定义颜色,如 #fc0eab;
为颜色取名:aqua,black,blue,fuchsia,gray,green等。
布局属性
margin属性:
- margin属性分为margin-top、margin-right、margin-bottom、margin-left和margin五个属性,分别表示盒模型里内容里边框的距离。
- 水平盒子的间距为两个盒子间距的和;
- 垂直盒子的间距为两个盒子间距的较大值;
- margin值可以设置为负值
padding属性:
- padding属性用来描述和模型的边框和内容之间插入多少空间 ,和margin属性类似,它也分为上右下左和一个快捷方式padding,属性名称包括padding-top、padding-right、padding-bottom、padding-left、padding;
- margin是当前元素和border的距离;padding是内容和border的距离
- margin是对外的,padding是对内的;
- margin只对块级元素有效。padding对所有元素都有效。
理解CSS 盒模型
在盒模型中,我们可以控制四个不同的分层属性:
- 内容:元素中的内容;
- 外边距:代表元素外边的空间,这个控件将元素相互分开。
- 边框:位于元素的边距内和元素的边框距外之间的可配置的线;
- 内边距:元素内容和元素边框之间的空间。
注意:盒模型均可以用“上右下左”方式设置。如果仅给出两个或三个值,那么缺失边的属性值取与对边相同的值
标准文档流
所谓标准流,就是指在不使用其他与排列和定位相关的特殊css规则时,各种元素的排列规则。
- 文本元素按照从上到下、从左到右的格式布局;
- 块级元素按照从上到下依次排列;
- 内嵌元素按照从左到右依次排列。
定位属性
display:none和visibility:hidden的区别
- 这两个样式都可以隐藏元素。
- display:none元素看不见,同时元素不占用位置。
- visibility:hidden元素看不见,但元素会占用位置。
内嵌元素和块级元素的相互转换
- 内嵌元素—->块级元素 display:block
- 块级元素—->内嵌元素 float:left