html网页设计总结Word格式.docx
《html网页设计总结Word格式.docx》由会员分享，可在线阅读，更多相关《html网页设计总结Word格式.docx（12页珍藏版）》请在冰豆网上搜索。
u>
下划线<
br>
换行<
sup>
下标<
sub>
上标
hr>
水平线<
hn>
标题
10.font字体标签
fontcolor=“”>
字体内容<
/font>
Face:
字体的风格size：
设置字体的大小
11.当开始标签与结束标签中间有内容时使用
标签名>
内容<
/标签名>
当开始标签与结束标签中间没有内容时使用<
标签名/>
例：
br/>
1.1.2第二课段落及超链接
1.<
p>
段落标签
多个段落之间会自动换行，并且每个段落中间会空一行。
span>
行级层标签：
多个span之间没有换行。
div>
块级层标签：
多个div之间会自动换行，但是没有空行。
pre>
预格式化段落标签：
在代码写的内容，在显示时完全相同。
2.特殊符号的处理：
空格：
&
nbsp;
:
lt;
>
gt;
3.属性：
对标签的描述称为属性。
属性的说法:
属性的名称="
值"
属性所写的位置：
要写到开始标签的里面，每个属性之间用空格隔开。
4.<
body>
标签的属性
bgcolor:
设置背景色
text:
设置文字的颜色
5.超链接
链接分类：
外部链接：
在多个页面之间使用的效果
内部链接（锚链接）：
只能在一个页面中的链接
邮件链接：
点击一个地址，可以快速的写邮件。
6.链接的标签：
a>
标签：
ahref="
跳转页面的地址"
>
在点击的文字<
/a>
7.绝对路径和相对路径
绝对路径：
在链接地址中带有盘符的路径称为绝对路径
相对路径：
相对于某一个文件夹的路径称为相对路径
8.邮件链接
mailto:
邮件地址"
文字<
9.内部链接
aname=“标签a”>
书签内容<
ahref=“#标签a”>
单击此处使浏览器调到“标签a”<
1.1.3第三课设置背景图及图片
1.dw的运行网页的快捷键：
f12
2.设置网页的背景图片的属性：
background
bodybackground="
图片路径"
当路径中出现"
../"
时，代表是上一级的信息
3.在网页中添加图片
imgsrc="
width="
***px"
height="
border="
"
alt="
图片不存在时，显示的文字"
解释：
src:
图片的路径
width:
宽度
height:
高度
border:
边框的大小（0代表无边框）
alt:
图片不存在时，显示的文字
1.1.4第四课表格
1.表格标签：
table>
表格标签
tr>
代表行的标签
td>
代表列的标签
th>
使文字加粗并且居中
设置行的背景色：
bgcolor
trbgcolor="
#112200"
设置列的背景色：
tdbgcolor="
设置行的边框颜色:
bordercolor
trbordercolor="
#114400"
2.表格的合并
行合并：
在不同行中单元格的合并称为行合并
列合并：
在同一行中单元格的合并称为列合并
3.列合并单元格的属性：
colspan
行合并单元格的属性：
rowspan
4.表格中线的宽度属性：
cellspacing
这个属性必须写到table标签中
tablecellspacing="
表格中的文字到表格线的距离：
cellpadding
tablecellpadding="
5.设置表格中文字的位置：
（1）左（left），中（center），右（right）的属性align
（2）上（top），中（middle），下（bottom）的属性valign
6.表格镶嵌：
在表格中添加一个表格
1.1.5第五课hr属性、滚动字符、列表
1.hr标签的属性
hrcolor="
#121212"
100px"
align＝"
left"
/>
color:
可以设置水平线的颜色
width:
可以设置水平线的宽度
align:
可以设置水平线的位置，左，中，右
2.滚动字符：
marquee
marqueebgcolor="
#151515"
要滚动的字体<
/marquee>
属性：
滚动轨迹的颜色
direction:
设置内容滚动的方向
Behavior：
设置内容滚动的方式
Height：
Width:
scrolldelay：
设置二次滚动的时间间隔
Loop：
滚动的次数
3.列表
无序列表:
列表内容前面的符号是一样的
有序列表:
列表内容前面的符号是自动排列的
自定义列表:
自己设置列表内容前面的符号
无序列表的标签:
ul>
无序列表内容项的标签：
li>
在无序列表中有一个重要的属性：
type
ultype="
<
第一个<
/li>
第八个<
/ul>
type的值有：
circle：
空心圆
disc：
实心圆
square：
方块
有序列表的标签:
ol>
有序列表内容项的标签：
在有序列表中有一个重要的属性：
oltype="
a"
童年<
老年<
/ol>
自定义列表的标签：
dl>
设置自定义列表的图标标签：
dt>
自定义列表内容项的标签:
dd>
自定义图标内容<
/dt>
/dd>
/dl>
4.热点：
把一张图片分为多个区域进行超链接
1.2第二节
1.2.1第一课表单
1.表单标签：
form>
formid="
name="
标签的属性：
id:
编号（不能重复）
name:
名称（可以重复）
method:
数据提交的方式，只有二个值
get:
显示的提交数据
post:
隐式的提交数据
action:
提交的路径类似于<
2.输入标签：
input>
inputtype="
id="
分类：
文本框:
text"
maxlength="
value="
maxlength:
在文本框中可输入的最大长度
value：
文本框中的默认值
密码框：
password"
单选框：
radio"
checked="
/>
checked:
代表默认选中的选项，值truefalse
true:
选中，false代表不选中。
注意点：
要想多个单选框成为一组，必须把name的值设置为相同。
复选框：
checkbox"
1.2.2第二课按钮及下拉框
1.type="
button"
普通按钮
btnOk"
显示在按钮上面的文字"
2.type="
submit"
提交按钮
注意点：
当使用提交按钮时，需要把form表单标签中的action属性赋值。
3.type="
image"
图片提交按钮
src="
图片的路径"
宽度"
高度"
4.type="
reset"
重置按钮
作用：
把页面中所有用户输入的内容恢复到初始状态。
5.type="
file"
上传文件标签（可以选择要上传的内容）<
6.type="
hidden"
隐藏内容标签
需要隐藏的内容"
7.下拉框标签：
select>
option>
值<
/option>
/select>
selectid="
optionid="
sxs"
dym"
陕西省<
说明：
id是option的编号
一般去保持编号如（张三的编号是：
s10010）
optionvalue="
s10010"
张三<
8.多行文本框：
textarea>
标签
属性：
textareaid="
cols="
默认显示列的个数"
rows="
默认显示行的个数"
默认值<
/textarea>
1.2.3第三课框架，标签iframe
1.iframe的属性
iframe>
的属性：
iframeid="
100%"
默认显示的页面的路径"
/iframe>
当使用<
标签时，需要和<
一起使用。
在<
路径"
target="
iframe的name的值"
Target:
—blank显示一个新的窗口
—self显示在同一个窗口
—parent显示在iframe的前一份文件的窗口
—top显示整个浏览器
2.框架（混合排列多个窗口）必须写在head里面
framesetrows=“30%，*”>
framesrc=“路径”>
framesetcols=“20%，*”>
/frameset>
framesrtframeborder=“边框的设置”bordercolor=“边框的色彩”border=“边框的宽度”framespaing=“设置各窗口间的空白域”>
framescrouing=“滚动条”noresize=“设置不可变动的边框”marginwidht=“设置个窗口的上下左右边界宽度”>
1.2.4第四课背景音乐，多媒体
1.插入背景音乐
bgsoundsrc=“路径”loop=“循环次数”autostart=“是否自动播放”>
2.插入多媒体
1>
没有控制条的多媒体
imgdynsrc=“路径”loop=“循环次数”loopdelay=“循环延迟”start=“播放的方式”>
Start：
mouseover鼠标滑到文件时播放
Fileopen打开网页就播放
2>
有控制条的多媒体
embedsrc=“路径”autostart=“是否自动播放”loop=“循环次数”hidden=“是否隐藏”starttime“过多长时间开始播放”volume=“音量”with=“值”hight=“值”>
1.3第三节css
1.3.1第一课了解css
1.css写在<
head>
中
2.html样式
styletype=“text/css”>
P{属性：
值；
值;
}
/style>
3.类样式
以点开始后面随意起名字例如：
.red
1.3.2第二课属性
1.text—align文本对齐
font—size字体大小
font—family字体类型
font—style字体样式color设置或检索文本的颜色
2.背景的属性
Background—color设置背景颜色
Background—image设置背景图片
Background—repeat设置一个指定的图像如何被重复
3.方框属性
Padding—left设置内容与左边框之间的距离
Padding—right设置内容与右边框之间的距离
Padding—top设置内容与上边框之间的距离
Padding—bottom设置内容与下边框之间的距离
margin-top设置对象的上边距
margin-bottom设置对象的下边距
margin-left设置对象的左边距
margin-right设置对象的右边距
border-style设置边框的样式
border-width设置边框的宽度
border-color设置边框的颜色
4.特殊样式
a：
link{color：
#ff0000}未被访问的链接红色
visited{color：
#00ff00}已被访问的链接绿色
hover{color：
#ffcc00}鼠标悬浮在上的颜色橙色
active{color：
#0000ff}鼠标点中激活链接蓝色
1.3.3第三课样式表的三类应用方式
1.内嵌样式表
样式规则
/head>
2.行内（嵌入）样式表
pstyle=“属性：
”>
文字
/p>
/body>
行内样式适用范围小，只适用于某一个标签，对其他标签不起作用
3.外部样式表文件
需要在桌面新建一个css文件（1.新建文本文档2.该后缀名为css）
1）标签link
linkhref=“路径”rel=“stylesheet”type=“text/css”>
2）@import语句
@import路径；
升级会员 