HTML格式
1.<html>
<head>
<title></title>
</head>
文字
</html>
2.meta标签
//设置html内容的文档内容格式和编码方式.
<meta http-equvi="Content-Type"
comtent="text/html;charset=gb2312"/>
<meta name="keywords content="内容"/>
3.h标签(标题标签)
<h1>-<h6>
4.br标签(换行标签)
<br/>
5.hr标签(水平线标签)
<hr/>
6.strong(加粗)
7.em(倾斜)
8.特殊: 空格 >(>)
<(<) &qout(“) ©:(版权符号)
9.图片
图片标签(img)<img src="" alt= title="" width="" height=""/>
width宽度 height高度
src:图片的地址(路径+图片名称)
alt:图片找不到的提示信息。
title:当鼠标停留在图片上的提示信息
注意:怎么找图片
1:先确定当前html的位置
2:如果图片在同级目录直接写图片名称
如果在上级目录就用../图片名称
如果在下级目录就用目录名称/图片名称
10.超链接
<a href="" target="">跳转到***</a>
href:要跳转的文件路径名称
target: _self(目标页面覆盖当前的页面)
_blank(目标页面弹出新的框来显示)
11.锚链接
创建步骤:
1创建锚点:<a name="head">顶</a>
2访问锚点链接 : <a href=#"head">访问锚点</a>
12.功能性作用 <a href="mailto:邮箱地址"></a>
第二章:
1.无序列表
<ul>---声明无序列表
<li></li>---列表项
</ul>
补充:type属性 circle squear...
2.有序列表
<ol>---声明有序列表
<li></li>---列表项
</ol>
补充:type属性 I a/A 1
3.定义列表
<dl>---声明定义列表
<dt></dt>---列表项内容声明
<dd></dd>---列表项内容
</dl>
4.表格
<table>----表格标签
<tr>----行标签
<td></td>----单元标签
</tr>
</table>
table的属性:align,valign,width,border,
bgcolor,cellspancing,cellpadding.
cellspancing:单元格与单元格边界的距离,
cellpadding:单元格边界和单元格文字的距离。
td的属性:colspan(这个单元格占几列)
rowspan(这个单元格占几行)
5.框架
<frameset> ------<框架标签>
<frame src="html的路径+名称"></frame>(引用html标签)
</frameset>
刷新指定区域(1:在指定的frame中指定name属性值)框架.html
(2:在超链接部分指定target的值为第一步的属性值)left.html
6.内联框架<iframe>
<iframe src="html路径+名称" frameborder="0/1" scrolling="yes/no">
</iframe>
frameborder:0:表示无边框 1:表示有边框
scrolling: yes表示有滚动条 no表示无滚动条
刷新内联框架步骤
第一步:在指定的iframe中指定name属性值
第二步:在超链接部分指定target的值为第一步的属性值
第三章:表单
1.语法:
<form action=""(跳转地址) method="get/post"(提交方式)>
<input type="" name="" value="">
</form>
2.type属性的值
text:表示输入框(文本框)
password:表示密码框
submit:表示提交按钮
reset:表示重置按
radio:表示单选按钮
checkbox:表示复选按钮
3.下拉框(列表框)
<select name""> 下拉框
<option value=""></option> 下拉框的选项
</select>
注意:a.默认选中<option selected="selected"></option>
bradio,checkbox的默认选中是checked="checked"
4.图片按钮
<input type="image" src="图片路径+名称"/>
5.文件域
<input type="file"/>
注意:提交方式是post,并且在form中指定enctype="multipart/form-data"
6.<textarea cols="多列" rows="多行" ></textarea>
7.域
<fieldset> ----- 域标签
<legend>xxx</legend> ----域标题
<input type="xx"/>
<fieldset>
8.表单元素标注
<label for="id属性值"></label>标注
步骤:
1.给指定的标签加上id属性
2.在label中加上for="id属性的值"
9.只读和禁用
1.只读:readonly="readonly"
2.禁用:disabled="disabled"
第四章CSS
1.css的语法
位置
<head>
<style type="text/css">
css代码
</style>
</head>
2.选择器{
属性名1:属性值1;
属性名2:属性2:;
}
列:
h1{font-size:12px;}---字体大小
color:red; ---字体颜色
}
注意多个属性用分号分隔
3.标签选择器
语法:
标签名{
...
}
4.类选择器
语法:
.class属性值{
...
}
步骤:
第一步:给指定的html标签加上class属性
第二步:在style中写
.class属性值{
...
}
5.id选择器
语法:
#id属性值{
...
}
6.行内样式
使用style属性值引入样式
列:<h1 style="font-size:10px;color:red;">xx</h1>
7.内部样式表
在head中写style
列:h1{
xxx
}
8.外部样式表
把css代码保存在以css结尾的文件中(层叠样式文件)
吧css文件引入html中
引入方式两种:
1:链接方式
<link rel="stylesheet" href="文件路径" type="text/css"/>
2:<style >
@import url("文件路径");
</style>
9.优先级
行内样式>内部样式>外部样式(就近原则)
id选择器>class选择>标签选择器
10.高级选择器
后代选择器
外层标签(父)内层标签(子)
11.并集选择器
选择器1,选择器2,选择器3,...选择器n{
...
}
第五章
字体样式
font-family:字体类型
font-size:字体大小
font-weight:字体的粗细(bold)
font-style:字体的倾斜(italic)
font:倾斜 粗细 大小 类型 transp(背景)
文本样式
color:颜色
text-align:文本对其方式(left/right/center)
line-height:行高/距
text-decoration:装饰(underlin/overline)
text-indent 首行缩进
verti-align:垂直对齐方式
注意:vertical-align通常适用于td中
超链接转换器
a:link 表示没有访问 a:visited 被访问后 a:hover 鼠标悬浮 a:active 未松开
背景样式
background-color 背景颜色
background-image:ulrl(图片路径)背景图片
background-repeat:图片平铺方式(no-repeat,repeat,repeat-x,repeat-y)
background-position:图片的位置(x,y|x%,y%center,left,right|top,center,bottom)
简单写法:background:yanse,图片,位置,平铺方式
列表样式
list-style-type:列表样式
list-style-image:url(图片路径)
list-style-position:位置(inside|outside)
list-style:样式 图片 位置
第六章
盒子模型
属性
width 宽
height 高
border 边框
padding 内边框
margin 外边框
边框
border 简写
border-color 颜色
border-width 边框宽度
border-style 边框风格
注意:边框 可以分为上 下 左 右四个,可以分别设置数值
列:border-color:red green blue yellow;
外边距
margin:外边距
margin-top:上外边距
margin-left:左外边距
margin-right:右外边距
margin-bottom:底外边距
内边距
padding:内边距
padding-top:上内边距
padding-left:左内边距
padding-right:右内边距
padding-bottom:底内边距
display属性
display:none;表示的隐藏元素
display:block;块级元素(显示)
display:inline;内联元素(显示)
第七章 浮动
float:left;左浮动
float:right;右浮动
float:none;
注意:
a.浮动元素会把当前的块级元素变成内联元素
b.不在标准文档流中(不会按普通的元素排版)
清除浮动
clear:both;清除左右浮动
clear:left;清除左浮动
clear:right;清除右浮动
溢出处理
overflow:none;(默认)
overflow:hidden;(隐藏)
overflow:scroil;(滚动)
overflow:auto;自动 滚动
注意:可以通过overflow:hidden设置浮动元素的父元素的高度,使它包裹整个浮动元素
第八章 元素定位(position)
static:mor
relative:相对定位
absolute:绝对定位
fixed:固定(建议不要使用,部分浏览器不兼容)
注意:
a.相对布局和决定布局如果它的直接父标签是body,那么相对位置和绝对位置的起始点不同,如果他们的直接父标签是div 那么他们的起始点都在父标签的左上角。
b.绝对布局都是从父标签的左上角开始的. 而绝对布局是遵循标准文档流格式。
c.绝对布局一定要设置top或者left才会生效
层叠关系(z-index)
默认为0
值可以是如何整数
值越大,位置在越前面
透明值
opacity:0-1值越小越透明