html网页设计总结Word格式.docx
- 文档编号:18142374
- 上传时间:2022-12-13
- 格式:DOCX
- 页数:12
- 大小:20.37KB
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路径;
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- html 网页 设计 总结