第一章 HTML基础
一、基本结构:
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html; charset=gb2312"/>
//声明网页字符编码，防止乱码。
<title></title>
</head>
<body>
</body>
</html>
二、基本标签:
<p></p>段落标签
<br/>换行标签
<hr/>水平线标签
<strong></strong>加粗体字标签
<em></em>斜体字标签
<img src="图片地址" alt="图像的替代文字" title="鼠标悬停的文字"
width="图片宽" height="图片高度"/>图像标签
<h1></h1>一级标题
<h2></h2>二级标题
<h3></h3>三级标题
<h4></h4>四级标题
<h5></h5>五级标题
<h6></h6>六级标题
数字越小,字号越大
三、特殊符号:
空格
> > 大于号
< < 小于号
" "" 引号
© @ 版权符号
四、图像标签的基本语法:
<img src="图片地址" alt="图像的替代文字" title="鼠标悬停的文字"width="图片宽" height="图片高度"/>
οnerrοr="this.οnerrοr=null;this.src='$imgs/nopic-detail.png';" onerror属性用于图片加载错误时。
五、超链接的基本语法:
<ahref="链接地址"target="目标窗口位置">链接文本或图像</a>
Target:_self,_blank,目标窗体名
<ahref="#"></a>-表示空链接
超链接三大类别:页面间链接、功能性链接、锚链接
1.页面间链接:<a href="链接地址" target="目标窗口位置">
2.锚链接:
(1)同一页的a位置跳到b位置
<a href="#marker">a位置</a>
<a name="marker">b位置</a>
(2) 某页的a位置跳到另一页的b位置
<a href="目标页面的名称.html#marker">a位置</a>
<a name="marker">b位置</a>
3.功能性链接:<ahref="mail to:邮箱地址"></a>
第二章 列表，表格与框架
一、列表
1.无序列表:
基本语法:<ul><li></li></ul>
修改符号:type = ”disc(默认值,实心圆),circle（空心圆),square(方实心)”
2.有序列表:
基本语法:<ol><li><li></ol>
修改符号:type = ”1(默认值)，A(a)(英语字母)，I(i)(罗马数字)”
3.定义列表：
基本语法:<dl><dt><dd></dd></dt></dl>
dt与dd是平级关系
二、表格:
表格是由行和单元格组成的，本身没有列的概念，列是由多个单
元格组成的。
特点:简单通用，结构稳定
1.基本语法:<table><tr><td></td></tr></table>
2.创建步骤:
(1)创建表格标签<table>……</table>
(2)在表格标签中创建行标签<tr></tr>
(3)在行标签<tr></tr>中创建单元格标签<td></td>
3.表格属性:
align属性(表格在水平方向的对齐方式):center(居中)、left(居左)、rignt(居右)
bgcolor="背景颜色";
border="边框宽度";
width="表格宽度";
height="表格高度";
cellspacing:框与框的距离;
cellpadding:元素与框的距离;
4.单元格属性:
align水平对齐方式:center(居中对齐)、left(居左对齐)、rignt(居右
对齐)
valign垂直对齐方式：middle(居中对齐),top(顶端对齐),bottom(低
端对齐),baseline(基线对齐)
rowspan = “跨行 ”;
colspan = “跨列”;
三、常用框架
（1）frameset框架:用于整个页面都用框架实现时，frameset不能
写在body里面
框架优点: （1）可以在同一个窗口显示多个页面
（2）可以实现页面复用，增加代码的重用性
（3）使整个页面结构清晰易懂
1.基本语法: <frameset>
<frame></frame>
</frameset>
分割几个窗口就有几个<frame></frame>
2.frameset属性:
framesetboreder:边框
bordercolor:边框颜色
cols:横向分割窗口为几列cols="20%,*"
rows:纵向分割窗口几行rows="20%,*"
scrolling:是否显示滚动条"yes/no"
noresize:限制用户修改框架大小noresize="noresize"
3.frame的属性:
frameborder:是否显示框架周围的边框frameborder=""
Name="边框名称"
src="页面地址"
scrolling:是否显示滚动条"yes/no"
noresize:限制用户修改框架大小noresize="noresize"
4.frameset实现页面间的关联:
(1)frame的name属性
(2)在页面跳转窗口,添加target属性，target="name的值"
（2）iframe内联框架:用于显示一个页面的部分内容，IFrame
要写在body标签中
<iframe src="页面地址" name="框架标识名" frameborder="边框"
scrolling:是否显示滚动条"yes/no"bordercolor="边框颜色"
noresize:限制用户修改框架大小noresize="noresize">
</iframe>
1.iframe实现页面间的关联:
(1).iframe的name属性
(2).在页面跳转窗口,添加target属性，target="name的值"
2.区别:frameset不能写在<body>中;<iframe>可以
第三章 表单
一、表单
将用户信息组织起来的容器
<form>:一个表单只能有一个<form>标签
<form action="页面提交地址"method="页面提交方式">存放表单元素
</form>
Method两种提交方式：
Get(默认值):会将用户的信息暴露在地址栏,安全性低，有字符数限制
Post:不会暴露信息,安全性高,无字符数限制
二、表单元素
<input>:添加表单元素
(1)文本框:type="text",name(名称),value(默认值),size(文本框大小),
Maxlength(最大字符数)
(2)密码框:type="password",name(名称),value(默认值),size(文本框大
小),Maxlength(最大字符数)
(3)单选按钮:type="radio",name(名称,几个单选按钮的name必须要一
致),value(提交值),checked="checked"(默认选中)
(4)复选框:type="checkbox",name(名称),value(提交值),
checked="checked"(默认选中)
(5)下拉列表:<select><option></option></select>
一个select中至少有 一个option
select属性:name:列表指定名称,size:行数
option属性:value:可选项的值,selectd="selected":默认选中
(6)图片按钮:type="image",src="图片地址",图片按钮可代替submit的提
交功能
(7)普通按钮:type="button",结合onclick事件使用
(8)提交按钮:type="submit",结合form的action属性完成表单提交
(9)重置按钮:type="reset"
(10)文件域:type="file"
(11)多行文本域:<textarea cols="跨几列" rows="跨几行"></textarea>
(1２)隐藏域:type="hidden",用来存放用户的ID信息
三、只读与禁用:
只读:readonnly="readonly",表示对内容不能修改
禁用:disabled="disabled",表示对元素禁用,控制会变灰
四、语义化:通过代码能够知道标签所代表的意思,使代码变得有自
己的意义
五、语义化表单
域:<fieldset></fieldset>是写在form标签里面,用来给表单划分区域的
域标题:<legend></legend>是写在fieldset标签里面,给指定区域命名标题
第四章 初识CSS
1.选择器{声明}
声明就是属性，属性1:属性值1；属性2:属性值2；
<style>标签:用于引入CSS样式,位于<head>标签
<style>标签中,type属性是必须的,唯一值:text/css.
2.标签选择器:
标签名{声明}eg:p{color:red;}
3.类选择器:在同一个页面可重复使用
.类选择器名{声明},在标签中定义class属性,class="类选择器名"
4.ID选择器:
#id名{声明}
ID选择器名字唯一,并且只能用一次,类选择器可以用多次。Id="#id名 "
5.CSS样式:
(1)行内样式:<标签名style="声明"></标签名> 注:这种方式不能使内容与表现分离；
(2)内部样式:借助<style>标签在<head>中。注:这种方式代码复用性高,内容和样式在一定程度分离。但不利于在多页面间共享复用代码及维护,对内容与样式的分离也不够彻底；
(3)外部样式:将<style>内的值放在.css文件中,从外部引用；
6.外部样式分为:
(1)链接式:
<link href="文件名.css"rel="stylesheet"type="text/css"/>
注:<link>必须放在<head>中
(2)导入式:
使用@import url{"文件名.css"}
注:@import url必须放在<style>标签中
(3)区别:
<1>: <link>标签属于XHTML范畴
<2>: 使用<link>标签的效果比导入式好
<3>: 导入式的兼容性不好
(4)优点:内容和样式彻底分离，可在多个页面同时使用，用来统一页面风格，
方便修改
7.优先级:
行内样式 > 内部样式 > 外部样式
ID选择器 > 类选择器 > 标签选择器
8.复合选择器
(1)后代选择器
特点:由两个包含与被包含关系的标签组成，后代选择器的样式会应用到它
的子集标签。Eg:h3strong{font-size:20px;}
(2)交集选择器:
特点:由两个标签组成,第一个标签必须是标签选择器,样式会应用到两个
标签的公用部分。Eg:p.txt{font-size:20px;}
(3)并集选择器:
特点:有多个标签组成,样式会应用到所有的标签,标签之间用逗号隔开
Eg：h3,p,.txt,strong{font-size:20px;}
9.继承
(1)继承是包含与被包含的关系,由两组以上的标签组成。
(2)继承的语法与后代选择器一样,父级标签包含着子级标签
(3)特点:子级标签继承父级标签样式,但不会改变父级标签样式,子级标签可
以有自己的样式。
第五章 CSS美化网页元素
<span>标签:将文字凸显出来。
一、字体样式
1.字体风格font-style设置:选择器{font-style:字体值;}
字体包括:normal(默认)、italic(斜体)、oblique(倾斜)
2.字体粗细font-weight设置:标签选择器{font-weight:粗细值;}
粗细包括:bold(粗体)、bolder(加粗)、lighter(加细)
3.字体大小font-size设 置:选择器{font-size:数字+像素大小;}
4.字体类型font-family设置:选择器{font-family:英文字体,"中文字体";}
如果写表示中文字体的样式,必须写英文在前面
简写:font:风格 粗细 大小类型；
二、网页排版
1.文本属性
文本颜色 color;
文本水平对齐 text-align: left(左),center(中),right(右)
文本首行缩进 text-indent: 像素；单位:像素(px)
文本的行高line-height: 像素; 单位:像素(px) 行高必须大于字体
大小。行高设置成与标签的height等高时,可以达到垂直居中的效果
文本的装饰text-decoration: none(默认值)、underline(下划线)、
overline(上划线)、line-through(删除线)
2.图片与文本居中对齐: img{vertical-align:middle;}
3.CSS超链接:
(1)超链接伪类:不用于<a></a>超链接标签
a:link 未单击访问时超链接样式
a:visited 单击访问后超链接样式
a:hover 鼠标悬停超链接时的样式
a:active 鼠标单击未释放时超链接样式
(2)优先级:
四个都用时，顺序不能调错
link > visited > hover> active 设置顺序
4.背景样式:
(1)背景颜色: background-color:颜色值用英文单词或十六进制;
(2)背景图像: background-image:url(图片路径);
(3)背景定位: background-position:Xpx Ypx
X为水平方向 Y为垂直方向 原点(左上角)、左负右正、上负下正
(4)背景平铺: background-repeat:平铺方式;
平铺方式:no-repeat不平铺(默认)
Repeat 在水平和垂直方向平铺
Repeat-X 水平方向平铺
Repeat-Y 垂直方向平铺
(5)背景简写: background: 颜色,url(图片地址),定位,平铺;
5列表样式:
(1)list-style-type ：none(无),disc(●),circle(○),square(■),decimal；
(2)list-style-image：url(图片地址);
(3)list-style-position:inside(位于文本以内)、outside(位于文本左侧)
第六章 盒子模型
一、边框属性:
1.border-color:四边边框颜色
2.border-top-color(上边框颜色)、border-bottom-color(下边框颜色)、border-left-color(左边框颜色)、border-right-color (右边框颜色)。
3.border-width(四边边框粗细)：thin(细),medium(中),thick(粗),像素值
4.border-top-width(上边框粗细)、border-bottom-width(下边框粗细)、border-left-width(左边框粗细)、border-right-width (右边框粗细)。
5.border-style(边框样式):none(无边框)、dotted(点线边框)
dashed(虚线边框)、solid(实线边框);
6.border-top-style(上边框样式)、border-bottom-style(下边框样式)、border-left-style(左边框样式)、border-right-style (右边框样式)。
二、盒子模型
盒子模型组成:border边框,padding内边距,margin外边距
<div>标签 语法:<div>网页内容</div>
1.外边距:margin
(1).margin:盒子与盒子之间的距离。Margin:2px1px 0px 0px; 上外边增加2px,右外边距增加1px
(2).margin-top(上外边距)、 margin-bottom(下外边距)、
margin-left(左外边距)、margin-right(右外边距)。
Margin:0px auto 盒子居中，上下不移 ,0px表示不移动
2.内边距:padding
(1)padding:内容与边框之间的距离。0px表示不移动
(2)padding-top(上内边距)、padding-bottom(下内边距)、padding-left(左内边距)、padding-right(右内边距)。
3.盒子模型尺寸:
盒子模型尺寸:border-width+内边距+外边距+内容宽度
border-width:边框的宽度
三、标准文档流:网页元素从左到右从上到下的显示方式
1.块级元素:独占一行的元素 (例如:<h1>~<h6>、<p>、<div>、<li>、<hr> 等等)
2.内联元素:一行可以放多个的元素 ( <a>、<img>、<strong>、<br/>、<span>
等等)
行级标签可以写在块级标签里，但反过来不可以。
3.display属性:用于指定HTML标签的显示方式，可以改变标准文档流。
Display:block:块级元素的默认值,元素会被显示为块级元素；
Display:inline:内联元素的默认值,元素会被显示为内联元素；
Display:none:设置元素不会隐藏;
考虑到浏览器的兼容性，可以将块级元素变行级元素Display:inline-block;
第七章 浮动
浮动是用来改变标准文档流中元素的显示方式的
1.网页布局
通常为 1-2-1布局(头部导航、主体部分、版权)
1-3-1布局(头部导航、主体部分、版权)
2．浮动(float)属性:
Float:left;元素向左浮动；
Float:right;元素向右浮动；
Float:none;元素不浮动,并会显示在其文本中出现的位置
3.清除浮动(clear)属性:
Clear:left;在左侧不允许浮动元素。
Clear:right;在右侧不允许浮动元素。
Clear:both;在左、右两侧不允许浮动元素。
Clear:none;默认值,允许浮动元素出现在两侧。
借助一个空div,设置Clear:both;可以扩充盒子高度。
4.溢出处理(overflow)属性:
Overflow:visible;默认值,内容不会被修剪,会呈现在盒子之外。
Overflow:Hidden;内容会被修剪,并且其余内容是不可见的。
Overflow:Scroll;内容会被修剪,但是浏览器会显示滚动条以便查看其
余内容。
Overflow:Auto;如果内容被修剪,则浏览器会显示滚动条以便查看其余
的内容。
在父标签设置Overflow:Hidden;并结合width，可扩充盒子高度
第八章 定位网页元素
1.定位position属性:结合left,top,right,bottom进行偏移
static:默认值,没有定位,元素按照标准流进行布局。
relative:相对定位,与原位置做对比,使盒子在标准文档流中进行指定
距离的偏移。
absolute:绝对定位,使盒子脱离标准文档流进行移动。根据上一级父容
器的边框进行平移,无父容器时以浏览器边框为基准。
fixed:固定定位,跟随浏览器滚动条的的移动而移动。
2.z-index属性:用于调整元素定位时重叠层的上下位置。必须设置了
取值为整数，默认为0，可以为负数，值大的显示在上方。
3.透明度
opacity:x; x值为0-1,值越小越透明。
filter:alpha(opacity=x):x值为0-100,值越小越透明。
296
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
