第一章
一、HTML定义：超文本标签语言
作用：制作网页
二.结构：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>放网页标题</title>
<meta name="keywords" Content="搜索引擎关键字内容" />
<meta name="description" Content="搜索引擎描述内容" />
<meta http-equiv="Content-Type" Content="text/html; Charset=utf-8"><!-- 用 来设置字符编码 -->
<!-- utf-8国际通用的中英转码gb2312 也是中英转码，通用 性没有utf-8强 -->
<!--meta标签可以省略不写-->
</head>
<body>
网页的内容部分
</body>
</html> QQ：1416890750 电话：18873301563
三.标签
<>是标签，<>里的东西是标签名称
标签的种类
a.有主体的标签
<标签名>主体内容</标签名>
例：<html>.....</html>
<title>网页标题 </title>
b.无主体的标签 自身闭合
<标记名/> 例：<br/> <hr />
c.有主体有属性的标签
<标签名 属性1=“值1” 属性2=“值2”></标签名>
例：<table border="1"></table>
d.无主体有属性的标签
<标签名 属性1="值1" 属性2="值2"/>
例：<img src="....." />
1.网页标题标签：<title></title>
2.内容标题标签：<h1>-<h6>
3.段落标签：<p></p>
4.换行标签：<br/>
5.水平线：<hr/>
6.加粗 ：<strong></strong>
7.倾斜：<em></em>
8.下划线：<u></u>
9.注释： <!--注释的内容-->
四、网页中特殊符号的表现形式
1、空格:
2、<: <
3、>: >
4、&: &
5、版权符：© 6、双引号："
五、图片标签
<img src="图片的地址" align="水平对齐方式" hspace="水平间距" vspace="垂直间距" height="图片的高度" width="图片的宽度" alt="替代文本，图片无法正常显示的时候显示的文字" title="鼠标悬浮提示文字" />
注意：src:相对路径和绝对路径
1、相对路径:是从当前打开网页的目录开始查找。通过../找到上一级目录,有几个上 级目录就有几个../
2、绝对路径:盘符文件夹名称图片名 是从指定的盘符开始查找
六、链接
1.超链接：页面与页面间的链接
<a href="链接文件的路径" target="目标文件显示方式"></a>
target="_self" 打开自身的窗口
target="_blank" 新建窗口
2.锚链接
a.同一页面间的：
在目的地做标记：<a name="标记名">目的地</a>
在要点击的地方：<a href="#标记名">点击的地方</a>
b.不同页面间的：
在目的地做标记：<a name="标记名">目的地</a>
在要点击的地方：<a href="页面路径#标记名">点击的地方</a>
3.功能性链接
邮箱：<a href="mailto:邮箱地址">联系我们</a>
QQ:<a href="Tencent://Message//uin=QQ号">QQ</a>
4.伪链接（空链接）
<a href="#">内容</a>
第二章
列表
1.有序列表
<ol type="1">
<li></li>
<li></li>可以有多个li,所有的内容必须 放入li中
</ol>
type值：1 数字,
A/a 字母大小写
I/i罗马文
不设置type默认是数字模式
2.无序列表
<ul>
<li></li>
<li></li>可以有多个li,所有的内容必须 放入li中
</ul>
type值：disc实心圆形,（默认值）
circle空心的圆形,
square实心的正方形
3.定义列表：对某文字或图片进行描述的时候使用
<dl>
<dt>被描述的内容</dt>
<dd>描述的内容</dd>可以有多个
</dl>
4.列表嵌套
a.无序列表：在<li>标签中再嵌套其他的列表 ，嵌套时要先声明列表（不能直接嵌套li标签）
效果:无序列表与嵌套的列表成父子关系，子列表会有缩进效果，并且如果嵌套的是无序列表，那么列表的符号会递减（实心圆-空心圆-方形）
b.有序列表：和无序列表同理，只能在li标签中嵌套其他列表，并且嵌套时要先声明列表
效果：有序列表嵌套有序列表，子列表会缩进，，但是符号不会递减
表格
1.优点：结构清晰简单稳定，使用方便
2.表格结构
<table border="1" height="500" width="300" cellspacing="0" cellpadding="0">----------表格
<tr bgcolor="表格背景色">-----------行
<td></td>---单元格
</tr>
</table>
border:表格的边框；
height:设置表格的高度；
设置表格的宽度
3.注意：有多少行就有多少对tr,有多少单元格(列)就有多少对td
cellpadding：用于隔开单元格内容到单元格边框的距离
cellspacing:表示单元格与边框的距离
4.表格跨行:rowspan="跨行的数目" 跨行永远从上往下跨
跨列:colspan="跨列的数目" 从左往右跨
5.单元格对齐:align（水平对齐属性）：center居中 /left左对齐/right右对齐
valign(垂直对齐属性):top顶端对齐/middle 居中对齐/bottom底端对齐/baseline基线对齐
如果作用在table上，那整个table会根据设置的值而改变
6.设置单元格边框颜色：bordercolor="颜色"
7.表格背景图片：background="图片地址"
8.表格标题：
<caption>标题内容</caption>（放在<table>底下第一行）
框架：
1.为什么使用框架
使网页的头部和底部能重用，过多的使用框架不利于搜索，所以商用少，多用于企业管 理网站
注意：<frameset>和<body>不能同时出现
网页分割后每一块都是一个<frame>，每一个<frame>可以放一个独立的网页
2.语法：
<frameset rows="25%,50%,*"(纵向分割成25%,50%,25%) bordercolor="red" border="5" cols=""(横向分割)>
<frame src=".....the_first.html" name="top"/>
<frame src=".....the_second.html" name="middle"/>
.........
</frameset>
横向分割为cols 纵向分割为：rows
3.嵌套：
<frameset rows="50%,50%">
<frame src="xxxxx"/>
<frameset cols="xx,xx">
<frame src="xx"/>
<frame src="xx"/>
</frameset>
</frameset>
4.框架中的target属性
在框架需要打开网页的<frame>里设置name属性（name属性的设置需要有意义），然后 在我们链接目标的<a>标签中设置target=“框架name名字”
效果：可以在目标<frame>当中打开链接的目标网址
语法：
<frameset cols="50%,*">
<frame src="页面路径" name="path"/>
<frame src="页面路径" name="path2"/>
</frameset>
<a href="页面路径" target="path">打开第一个网页</a>
5.内联框架
<iframe>内联框架(页中页)</iframe>要在<body>里
<iframe src="path"(引用页地址)
name="框架标识名" frameborder="1/0(框架是否有边框)"
scrolling="yes/no"(框架是否有滚动条)
width="宽度" height="高度">
</iframe>
注意：如果要实现点击链接在内联框架中跳转页面，将链接
的target属性设置成内联框架的标识名。
表单
一.表单：用来提交信息
1.<form id="form1" method="get/post" action="提交地址"></form>
ID：表单标识（类似身份证）
get:显示提交方式，不安全，提交信息在地址栏上显示
提交的数据有限制，大小最大为1kb
post:隐式提交方式，安全，信息不会在地址栏上显示
提交的数据理论上没有限制
2.表单元素
1.文本框：<input type="text" />
name:定义单行文本框名称
size:定义单行文本框的宽度
maxlength:定义单行文本框可以输入的最大字 符/字节数
value:定义单行文本的初始值，上传给服务器的值
2.密码框：<input type="password" />属性和文本框一样
3.按钮：普通按钮:<input type="button" value="普通" />
提交按钮：<input type="submit" value="提交" />
重置按钮：<input type="reset" value="重置" />
图片按钮：<input type="image" src="路径" />
4.复选框：<input type="checkbox" checked="checked" /> (checked:设置默认选项)
注意：可以选择多个，也可以不选，但是同一组的复选框 name属性要一致
5.单选按钮：<input type="radio" name="" /> (name用来设 置选择其中某一个单选按钮)
6.文件域：<input type="file" />
在文件域之前的<form>标签里加上
<form method="post" action="XXXXX" nctype="multipart/form-data">
因为文件的信息量较大
7.下拉列表框：<select >(selected设置默认选项)
<option selected="selected">内容 </option>
</select>
8.多行文本域：<textarea cols="宽(字节数)" rows="高">
内容</textarea>
9.隐藏域：<input type="hidden" />
二.只读和禁用
1.只读(readonly)：颜色不会发生变化，只能读取，不能操作
2.禁用(disabled)：颜色变灰色，无法使用
三.语义化（把表单中的元素用框框起来）：
1.作用：结构合理代码简单
便于浏览器识别
便于搜索引擎搜索
符合W3C规范
2.域和域标题
<fieldset>--------域
<legend>标题</legend>----域标题
放其他内容
</fieldset>
3.文本标签：
<label for="标识名"></label>
注意：标识名要和按钮（单选/复选）中的id名相同，点击<label>标签中间的文本也可以选中按钮，增强鼠标的可用性
第四章 CSS样式
一、字体样式
font-style:字体风格：正常normal/倾斜oblique/意大利体italic
font-weight:字体粗细bold
font-size:字体大小
font-family：字体类型
font在一个声明中设置所有字体属性
font:italic bold 36px "宋体";
font设置顺序:风粗大类
字体风格-->字体粗细-->字体大小-->字体类型
二.CSS：层叠样式表
1.优势：使页面更加美观
页面和样式分离
使代码更加简洁
利于搜索引擎搜索
符合W3C的规范
2.选择器：
a.标签选择器：整个文档中所有的该标签内容都实现该样式
语法：标签名{样式1;
样式2;
}
b.类选择器：出现特殊情况，使用多次的样式
语法：.类名{样式1;
样式2;
}
c.ID选择器：只能使用一次的样式
语法：#id名{样式1;
样式2;
}
3.选择器的优先级：(有相同样式按优先级,没有相同样式都会使用)
ID选择器 > 类选择器 > 标签选择器
三.样式表
1.行内样式表：写在标签内
使用方便，不利于后期维护
2.内部样式表：写在<head></head>中
只设置一个网页的样式
3.外部样式表：新建一个CSS文件
多个网页可以共用一个css页面
<link href="css页面的路径" type="text/css" rel="stylesheet" />
<style type="text/css">
@import url("css页面的路径");
</style>
4.样式表的优先级：(就近原则)
行内样式表 > 内部样式表 > 外部样式表
第五章 美化网页元素
一.<span>范围标签</span>，本身不自带任何样式
<div></div>块级标签，独占一行
二.文本样式
color:文本颜色
line-height：行高，作用：垂直居中或设置行距
text-decoration:文本修饰，加下划线underline
中划线line-through(删除线）
上划线overline
闪烁blink（只在Firefox浏览器中有效）
不加线none
text-align:水平对齐方式,left:左 center:中 right:右
vertical-align：垂直对齐方式，居上top
居中middle
居下bottom
文本首行缩进设置：text-indent:2em;
长度单位：px,em(中文网页通常用em作为缩进单位)
文本不换行：white-space:nowrap;
三.超链接伪类样式
a:link 超链接未访问
a:visited 超链接访问后
a:hover 超链接悬浮
a:active 超链接单击未释放
四.鼠标形状样式：可以作用于任何标签
cursor: default:默认光标
pointer：超链接的指针(一只手)
wait：正忙(漏斗)
help：帮助(问号)
text：文本(光标)
crosshar：十字状
五、背景样式+div标签
<div></div>是一个块级标签，具有高度和宽度
经常使用div布局,div+table经典布局之一
background-color:设置背景色
background-image:url(图片名称.后缀名);
background-repeat:设置图片平铺方式
有4个值:
background-repeat：repeat //表示水平和垂
直两个方向平铺（水平和垂直方向图片都重复）
background-repeat：no-repeat//表示不平铺(只显示一次)
background-repeat:repeat-x //表示只沿水平方向平铺
background-repeat:repeat-y //表示只沿垂直方向平铺
background-position:背景定位两种方式
background-position :30% 30%;//通过百分比的方式定位第一个参数表示水平方向 ，第二个参数是垂直方向
background-position:left top;
水平方向有 left(左) right（右） center（中）
垂直方向有 top（上） middle bottom（下）
background:颜色 图片 位移 平铺;
简写：background:#c00 url(图片地址) 205px 10px no-repeat;
顺序：背景颜色-背景图片-背景定位-背景重复方式
六、列表样式
list-style-type
none无标记符号 disc实心圆（默认类型）
circle空心圆 square实心正方形
decimal数字
列表图片代替标记
list-style-image:url(图片地址)
列表图片定位
list-style-position
两个值：inside outside
inside：表示标记图片在文本以内，且环绕文本标记对齐
outside:是默认值，它保持在标记文本的左侧，列表项标记放置在文本外，且环绕文本不根据标记对齐。
第六章 盒子模型
一.盒子模型：包含border，padding，margin属性
二.border：边框（top、right、bottom、left)
1.border-宽度(border-top-上边框的宽度) 1px
thin:细的
medium:加粗
thick：更粗
2.border-style:样式(实线solid，虚线dashed,双线double,点dotted...)
3.border-color:颜色（四条边颜色不同，顺时针）
4.border:缩写,顺序可以打乱
例：border:1px solid red;
三.margin和padding
1.margin：设置盒子以外的间距(外间距)
2.padding：设置内容和盒子边框的间距(内间距)
3.缩写：margin和padding一样
padding:10px;（四个方向都是10px间距）
padding:10px 20px;（10px:上下 20px:左右）
padding:10px 20px 30px;(10px:上 20px:左右 30px:下)
padding:10px 20px 30px 40px(上 右 下 左)顺时针方向
四.display:
1.display:block;/*将内联元素转换为块级元素，显示元素内容*/
2.display:inline;/*将块级元素转换为内联元素*/
3.display:none;/*隐藏元素*/
浮动
一.浮动：float
float:left;向左浮动
right;向右浮动
none;不浮动
特性：脱离标准文档流
将块级元素转换为内联元素
文字将会环绕浮动元素显示
二.clear:清除浮动(不是去掉浮动，让后面的元素不受上面浮动元素的影响)
left:清除上一个浮动元素的左浮动
right:清除上一个浮动元素的右浮动
both:清除所有的浮动
三.overflow：溢出处理：它规定当内容溢出盒子时发生的事情，例如内容不会被修剪而呈现在盒子之外，内容会被修剪，修剪内容隐藏等
visible:默认的，超出的部分继续显示
hidden：超出部分不显示(隐藏)
scroll:显示滚动条(横向和纵向都会出现)
auto：自动调整滚动条的出现(纵向出现)
定位
一.定位方式position：
1.absolute;绝对定位：相对浏览器而言（上一级元素而言）
2.relative;相对定位：相对于自己原来的位置而言
3.fixed;固定定位：定位到一个位置，位置将不会发生变化，少用，很多浏览器不识别
4.static:静态定位，默认
5.注意：一个元素有绝对定位，它的上级有定位，则这个元素不再相对浏览器定位，而是相对于上级有定位的元素定位
二.z-index:处理层次
1.值越大越在上层，值越小越在下层
2.z-index结合定位用，如果没有定位的元素默认
z-index:0;（注：值为整数）
三.背景元素透明度（一般设置时前两种同时设置为了兼容不同版本的浏览器）
1.opacity:x x值为0-1 值越小越透明(ie9之前的版本不支持)
2.filter：alpha（opacity=x）x值为0-100值越小越透明
3.html5之后设置背景元素透明度
background:rgba(0,0,0,0.4) a为不透明度 值为0-1
rgb值可以设置颜色 值为0-255