超链接
路径
1.绝对路径 地理
2.相对路径： 相对某一个物。。
1.从服务器 根据目录开始表达资源所在位置（不利于网站迁移）
2.相对与当前网页位置所表示的路径
代表当前网页位置
./(可省略)images/bc.jpg
../当前位置的上一层
没三个点 上上个位../../
a href="#">连接- -</a>
<! - - #代表空链接 - ->
href 连接地址
1.target=" " 打开方式
<a href="#" target=" ">...
打开新网页的方式→——self 本身容器（当前窗口打开）
——blank 在新窗口打开（空白）
一、锚点连接
1.建立锚点 <a name="e3"></a>
2.创建连接指向地点 <a href="#e3">定位到e3</a>
3.如何指向另一个网页的锚点 <a href="exq.html#3">另一页锚点</a>
一、超链接
1.连接到外部网页--如：
友情链接（抱团取暖，访问最增高）
<a href="http:// www.baidu.com">百度一下</a>
2.连接到E-mail--如：联系我们
<a href="mail to:xzpe @sina.cn">联系我们</a>、
3。连接到ftp服务器 - - ftp服务器是提供大量资源下载的地方
<a href="ftp://156.15.615.12">ftp服务器</a>
4.连接到资源文件 - - 如：附件下载
<a href="123/xxx.xxx"点击下载</a> (123和.html一个夹里)
二、使用列表（有序(order)，无序列表(unorder)）
定义(define) 列表(list)
1.有序列表（ol）
<ol><li>
<ol>可用属性有type（类型） start （开始）
<ol type="" start="②">→定数值表示
<li>张三</li> ↓
<li>李四</li> ↓
<li>王五</li>→ → B xx
C xx
D xx
</ol>
2.无序列表
<ul><li>
<ul type="disc circle square">
↓ <li>跑步</li>
↓ <li>踢球</li>
↓ <li style="float:left;margin:15px;">
↓ <a href="#">首让</a></li>
<ul style="list-style-image:url(images/001.jpg);">
<ul style="list-style-type:none;">
↓
就没拉
3.自定义列表
<dl><dt><dd>
1-list t-term 术语 d-description 描述
<dl>
<dt>张三</dt>→（定义的标题）
<dd>张三是坏人，不要和他玩！</dd>
<dt>李四</dt>
<dd>李四是秦国丞相<dd>→（定义的数据）
<ul style="list-style-image:url(images/2.jpg);">
<li>拉</li>
<li>拉</li>
<li>拉</li>
</ul>
<dl>
<dt sttyle="font-family:微软雅黑">李四</dt>
<dd>李四是个人</dd>
</dl>
调试图片的大
①选择图片，右击
②选择打开方式里的画图，打开
③找到左上的重新调试大小
④调试完，保存
图像操作
一、a)图像格式（网页中常用的图像格式）
i.JPEG格式(*.jpeg,*jpg)
有损压缩格式：图像在进
行压缩处理时，图像信息
有所损坏，但是人眼察觉不到，图像大小比较小
ii.适合显示照片等连续色调（渐变色）的大图像，支持160万种颜色
iii.不支持动态图和透明颜色[图像都是方的（桌面)]边边透明
b)GIF格式（*。gif）
i.无损图像格式：图片很大（在显示照片时）
ii.支持256种颜色
适合显示颜色不连续，大面积单一色。如：导航，按钮图标，LoGo标志。
iii.可制作动图，支持背景透明颜色。
c)png格式（*.png）
i.无损图像格式
图像可大可小
（png-32,png-24,png-8）
图像较大 图像变小
清晰 色差
ii.支持动态图像，支持（透明颜色）
iii.也可显示照片大图
二、插入图标
a)格式：<img src=" " alt=" "/>
i 图像资源所在的路径和名称
ii.Alt图像的替换文字；当图像显示不出来的时候，就显示该文字。
[ <a href="http://www.baidu.com">
<img src="https://www.baidu.com/img/bd_logoI.png" alt="百度图标" width="100"/></a>]→</li>*
↓
height：根比例变
三、图像超链接
<h3>友情链接</h3>
<ul>
<li>...
四、图像大小的调整
a)设置图像的宽和高本身并不能该变图像本身的大小
b)应根据网页中图像需要的尺寸使用图像编辑软件，更改图像大小以减少网络传输的负担
如何在网页中使用图像
1、根据图像内容选择适当的格式
2、根据实际使用的大小用图像编辑软件改变
表格的使用
创建表格
基本组成标签<table><tr><td><table>
<caption>课程表</caption>
<tr>
<td>..</td>
</tr>
</table>
<th>定义标题行中的标题格，级别类似<td>,都包含在<tr>中
边框 表格属性 border
表格的width和height
对齐方式 align:代表表格在它所在容器中的对齐方式
bordercolor 边框颜色
cell(格)spacing(空白)（间距空白）
表格中的各个格的距离
cellpadding 内间距 单元格里的内容 单元格内线的距离
bgcolor 表格的背景颜色
background="tablebg.png"
Css的使用
css的思想使用：
css分为布局的css设置,(以后再讲)
修饰的css设置.
使用方法：
①内嵌式：将css样式设置嵌入到需要的html标签里（一般不使用）<tr style="background-color:blue;">
②页面时：将本页中用到所有css集中写在文件的<head>标签中
③外链式：将网页中用到的所有css集中写在单独的css文件中（*.css）
<head>
②例：<style>
tr{background-color:green}
</style>
</head>
③例<link rel="stylesheet"
type="text/css"
href="css/table.css"/>
css的写法和html属性写法的区别
例：width="800"(html)写法 跟在html标签名的后面，>的里面
width=800px;(css)写法
写在style规定的格式里
table{border:1px(粗细) solid（大小） red（颜色）;}→一个属性的设置
px代表像素
margin:0 auto//上下外边距为0，左右随机
上下左右 只写一个
上下，左右 写2个
上，左右，下 写3个
上，右，下，左 4个
例：margin:1 上下左右的边距为1
margin:1 2 1 上为1,左右为2，下为1
<td ROWSPAN="2">//占用上下格2格
colspan// 左右格2格
border-collapse:collapse; 边框合并
padding 内部边距
text 对文本内容的对齐方式
line-height 行高
background-repeat:no-repeat 不全铺，只会显示一张图
x： repeat-x
y： repeat-y
一、form的作用
是前台向后台发送数据的窗口。
html←form←是服务器通过网页采集数据的窗口
浏览器 Browsor
B/s 软件开发模式
二、
基本写法及表单的基本属性
1、<form></form>
2.<name 属性：在一个网页中区分多个表单的凭证
3.action 属性：指定数据传送到的后台页面的名称
4.method 属性：是向后台页面传递数的方式
a)get 明文方式
b)post 密文打包方式
5.enctype 编码方式：在表单中需要上传文件时（图像，doc，rar）
必须设置
enctype="multipart/form-data"其他时不需要
三、插入表单对象
1、文本字段 text
name 标识当前文本字段的名称
type 字段类型
size 显示的文本框的大小长度
用户名：<input type="text" name="text"输入控件（可控制的组件）
密码：<imput type="password"
name="sx" size="15px"/>
性别：<imput type="radio"(单选按钮) name="sex" checked="checked"(初始选中的) value="nan"(传过去的值是什么)/>男.
<input type="radio" name="sex"(写同一个是一伙的，只会选其中一个)/>女
兴趣爱好：<imput type="checkbox" name="aihao"/>羽毛球
xn可以写多个
按钮
<input type="submit" value="提交"/>
<input type="reset" value='充值'/>
<input type=“tmage” src="time.jpg" width="20" height="20"
<input type="file" name="file1"/>
<input type="tidden"(隐藏) value="pang" name="nnn"/>(用户看不到的
下拉菜单
<select>
<cption>张三</option>
<optiion>王五</option>
<option>--</option>
</select>
文本域(文章内容)：
<textarea cols="20" row="20" rows="10"></textarea>
<embed src="....*.swf动画"
"....*.mp3音乐"
"....*.mp4视频"
/>
第四章
一、设置滚动效果
滚动标记<marquee></m..>
左键+Ctrl选中拖，复制粘贴
2、滚动方向的设置divection
up↑ down↓ left← right→
3、滚动方式 behavior
⑴Scroll 循环滚动(默认行为)
⑵slide 只滚动一次停止
⑶alternate(交替)来回交替滚动
4、滚动速度:scrollamout(滚动的量)
5、滚动延迟：scroll delay(延迟滚动)
以毫秒为单位，滚动延迟：scroll delay（延迟滚动）
以毫秒为单位，滚动之间的间隔
1000毫秒=1秒
6、滚动循环次数 loop循环
7、滚动的范围 width height
8、滚动的背景颜色：bgcolor
9、插入多媒体文件
<embed>
1、flash(*.swf)
2、music(*.mp3)
3、video(*.mp4)*.ai(手机)
(一般扩展名不能随意更改)
第五章 css的使用
1、语法格式：选择器{属性：1：值1;属性2：值2;属性3：值3;}
选择器
标签名：body{}h1、table...
作用：是对所有标签都起作用的主要用处：
一般对整个网站中的多个页面进行统一标签设置，并处理多浏览器兼容性 比如：
body{margin:0px;}
ul{list-style-type:none;}
a{text-decoration:none;(无下划线)}
囚服版
注：在网页的style中，一般第一行即是清除浏览器的默认样式的css
b)class类选择器：
+自定义名称
针对其类共用效果设置的样式，一般针对部分通用的样式使用class类
商场版
c)id选择器：样式声明：#+自定义名称
ID的名称在整个网页是唯一的（不可重名）
声明的样式只针对当时的ID用法。在一个网页中，不能重用多次
(2)四种引用css的方式。
二 、字体属性的设置
1、字体 font-family.
语法：font-family:"字体1"“字体2”"字体3"
含义：首选字体1，没有字体2.以此类推，直到默认格式
注意：一般网页不设专用字体
2、自豪 font-size。
语法 font-size=可能的值
百分比 150%是本来应该大小的150% 固定值:36px;(常用大小 12px 14px 16、18)
显示是17寸 17*2.54cm=43.18cm 4:3
kuan*`kuan+9/16*kuan*kuan=43.18*43.18
kuan=34cm:340mm
1024px/340mm:3px/mm
常量值选择：相对字体大小：larger small(相对于所在容器更大或更小)
绝对大小：xx-small x-small
small medium large
x-large xx-large
注意：一般网页中的字体尺寸
常规字体：12px 14px 16px
标题字体：14px 16px 18px
超大标题：16px 18px 20px
导航字体：14px 16px 20px (且加粗或和ps图一样)
3、字体的风格（样式）
font-style
取值：normal(正常字体-默认)
italic(半倾)
oblique（半斜）
umderline(下划线)
4、加粗 font-weight
5、小写字母转换大写. font-variomt:normal
6、font:bold italic"宋体"
三、颜色和背景设置
1、color：属性（）
语法：color:值
取值：颜色的英语单词或#开头16进制
说明：#ffffff
rgb(255,255,255) (16775)
网页安全色#23a=>#ww33aa
16*16*16（4096种颜色）
2、背景色：background-color:
注意：可以设置在大多数的HTML元素上（布局调试也常用）
3、背景图像
语法：background-image:url(路径/名称)
注意：图像路径和名称不要
问：什么图像不适合作背景图片？
背景图不能影响前面的内容
4、背景的重复
background-repeat:值
取值：repeat:（平铺满整个区域，默认）
repeat-x（背景图像只在水平方向上平铺）;
repeat-y 垂直平铺
no-repeat 表示不重复
注意：背景图片尽量少用大图，
尽量用小图设置Css的kepeat属性实现
5、positon:位置的计算方式
absolute（绝对定位）
relative（相对定位）
fixed（固定定位）
fix(fdsdsa)