轻松快速掌握html知识Word格式.docx
- 文档编号:16455365
- 上传时间:2022-11-23
- 格式:DOCX
- 页数:18
- 大小:116.74KB
轻松快速掌握html知识Word格式.docx
《轻松快速掌握html知识Word格式.docx》由会员分享,可在线阅读,更多相关《轻松快速掌握html知识Word格式.docx(18页珍藏版)》请在冰豆网上搜索。
“keywords”“你的关键字”
metaname=“description”content=“你的网页内容”>
“author”“作者署名”
“expires”“过期时间”
metahttp-equiv=“Pragma”content=“no-cache”>
“content-type”“字符集”
5)<
BODY是网页的主体,通过以下属性修饰网页:
(1)Link、Alink、Vlink:
未访问(正点击、已访问)链接文字颜色
(2)BGcolor、BackGround、BGProperties
(3)Text:
一般文本颜色
6)注释
!
--
注释内容。
。
-->
注释,可以进行单行、多行注释
4、文本字体控制元素
BASEFONT>
BASEFONT用于元素设置文档的基础字体,用法如下:
BASEFONT属性,…>
Color:
文本的颜色
属性Face:
文本的字体(通常不用)
Size:
文本字体的大小(1~7号,由小到大)
FONT>
/FONT>
FONT用于设置指定文本的字体,用法如下:
FONT属性,…>
文本内容<
属性:
Color,Face,Size。
其中:
size用于修改文本的字体的大小(1~7号,或与基础字体的对比值(+1,-2))
H#>
/H#>
H用于设置指定的标题,用法如下:
H#属性>
标题内容<
/H#>
#为1~6之间的数字,代表标题级数(从大到小)
align=(left,center,right)
5、文本格式控制元素
CENTER>
/CENTER>
:
使文本/图象居中
CITE>
/CITE>
以引用或参考的形式显示文本,一般以斜体显示
PRE>
/PRE>
:
使用等宽字体和保留空格与换行符来创建格式化文本,使其间文本按照源文件中的格式显示
P>
/P>
创建段落
BR>
在文本后设置一换行符
6、动态文本控制
MARQUEE>
…文本内容…<
/MARQUEE>
显示一个滚动的选取框,其间文本可以实现动态滚动。
(主要用于滚动新闻、公告等)
用法如下:
MARQUEE属性>
(1)BGColor:
滚动文本框的背景颜色
(2)height、width:
滚动文本框的大小(高、宽度)
(3)direction:
文本的滚动方向(left,right,up,down)
属(4)Loop:
循环次数,(=Infinite:
无穷次)
(5)ScrollAmount、ScrollDelay:
每次滚动的距离和时延(毫秒)
性(6)Behavior:
运动形式(=Scroll(滚动),=Slide(移动),=Alternate(来回运动))
(7)OnMouseOut=Start():
鼠标事件,离开则开始滚动
OnMouseOver=Stop():
鼠标事件,鼠标移入则停止滚动
7、插入图像
插入图像:
IMG属性…>
(1)Align:
图片对齐方式(top,middle,bottom,left,center,right)
属
(2)height、width:
图片的大小(高、宽度)
(3)Boder:
图片边界尺寸大小
性(4)Src:
图片所在路径(=“路径/文件名”)
(5)UseMap:
具有热区,给出热区名称(UseMap=“#name”)
8、插入背景音乐
背景音乐<
BGSOUND属性…>
属性
Src:
音乐所在路径(=“路径/文件名”)
Loop:
播放循环次数,(=Infinite:
无穷次)
支持文件:
mid、mp3。
9、插入多媒体
多媒体<
EMBED属性…>
(1)Src:
多媒体所在路径(=“路径/文件名”)
属性
(2)Loop:
(3)控制画面:
Hidden=true/false:
是否隐藏画面
Width、height:
画面的大小(高、宽度)
Controls:
控制画面风格ConsoleSmallConsolePlayButtonPauseButtonstopButtonvolumeLever等
支持文件格式:
mid、mp3、wav、avi等(不支持rm)
10、列表
1)无序列表
UL>
/UL>
无序列表的标识
无序列表又称项目符号列表,列表内容顺序任意,每一列表项前用一特定符号标识。
例:
Li>
abc<
def<
ghi
2)有序列表
OL>
/OL>
有序列表的标识
有序列表指在每一列表项前用连续的标号进行排列。
注意:
如果没有修改属性,Value将默认为前一项的Value+1;
Type将默认为1
11、超级链接
1)超级链接类型(分类)
(1)按照触发超级链接的对象分为
A、文本超级链接。
B、图象超级链接。
C、热区超级链接。
(2)按照超级链接的目标位置将链接分为
A、当前页。
B、新窗口。
C、目标框架页面。
D、书签(锚点)。
2)超级链接的标识
(1)一般超链标识符,用法如下:
a属性>
…文字图像…<
/a>
(用于创建HTML文件的链接。
)
(i)href属性,其值为
A、链接文件所在路径(=“路径/文件名”)
B、Email地址(=“mailto:
Email地址”)
(ii)target属性,其值具有:
a)当前页面(=“_top”)b)新窗口(=“_black”)
c)父框架(=“_parent”)d)当前框架(=“_self”)
e)其他框架(=“框架名”)
(2)创建书签标识符,分两步进行,用法如下:
A、在点击链接处(目录)设置书签,方法:
ahref=“#书签名”>
…标题文字…<
B、为要被链接到的部分起名字(书签名),方法:
aname=“书签名”>
…内容文字…<
(3)创建热区超级链接标识
A、首先,给定一张图片,并为他做一个热区并命名:
imgsrc=“路径名/文件名”…usemap=“#热区名”>
B、<
MAPname=“热区名”>
/MAP>
热区超级链接,指明客户端的图象地图,和标志符<
AREA>
一起使用。
可以有多个,必须放在<
map>
与<
/map>
之间。
“rect”“二顶点坐标”
C、<
Areashape=“circle”Coords=“X,Y,r”href=”目标地址”
“poly”“各顶点坐标”
target=”页面位置”>
12、表格
通过使用表格可以很方便有效地控制页面各元素的位置。
表格所包含的基本部分:
表格标题:
指明表格的含义;
表格标签:
也称表头,指明表中记录项的含义;
表格数据:
表格的具体内容;
表格单元:
表格中每个独立区域,其中可以存放表格标签,也可以存放具体数据。
1)创建表格
TABLE属性>
/TABLE>
创建表格,可用于数据表或者控制你网页的布局。
表格对齐方式(left,center,right)
表格的大小(高、宽度)
(3)Boder、BorderColor:
表格边框尺寸大小,颜色
性(4)Backgroud:
表格背景图片(=“路径/文件名”)BGColor:
背景颜色
(5)Cellspacing、Cellpadding:
单元格之间/之内的间距
2)设置表格标题
CAPTION属性>
/CAPTION>
设置表格的标题。
(放于<
TABLE>
之内)
(1)Align:
表格标题的水平对齐(L/C/R)
(2)VAlign:
设置的标题的垂直位置(T/B,表示处于表格之上/下)
3)设置表格的单元格
表格的每个单元格都由行和列构成。
(1)行标识:
TR属性>
/TR>
表示表中的一行的开始和结束。
之内,一个表格可以有很多行)
(1)Align:
该行的水平对齐方式(left,center,right)
(2)BGColor:
该行的背景颜色
(3)VAlign:
该行的垂直对齐方式(top,middle,bottom)
(2)列标识:
TD属性>
/TD>
表示表中的一个单元格。
TR>
之内,一行可以有多个列,从而构成多个单元格)
(1)Align、VAlign:
单元格对齐方式
单元格的大小(高、宽度)
属(3)BorderColor:
单元格边框的颜色
单元格背景图片(=“路径/文件名”)
BGColor:
(5)Colspan、Rowspan:
单元格所占的列/行的数目
(3)表格头标识:
TH属性>
/TH>
表示为表创建表头。
(相当于列标识<
TD>
,一般放于第一个<
之内),其属性也是于<
元素相同的,只是文字呈粗体显示。
15、框架
框架通过分割窗口,能使一个屏幕上出现多个页面。
1)创建框架:
FRAMESET属性>
…<
/FRAMESET>
指明框架集合,确定垂直和水平分割的数目和大小,可以嵌套(放于<
元素之前)。
(1)Cols、Rows:
框架的划分方式(列/行)(=“A,B”)
(2)FrameSpacing:
框架之间的间距
2)设置框架内容
FRAME属性>
为已经划分好的框架设置内容。
(放在<
FRAMESET>
元素之内)
(1)FrameBorder、BorderColor:
框架有无边框、颜色
属
(2)Marginheight、Marginwidth、Noresize:
框架与网页之间的高度、宽度;
框架不允许调整大小
(3)Name:
框架名称
(=“路径/文件名”)框架所装入网页地址
(5)Scrolling滚动条的设置(Auto/Yes/No)
3)框架的扩展处理
NOFRAMES>
/NOFRAMES>
使用此标识符用于为任何不支持框架结构的浏览器提供HTML脚本。
一般将网页的<
Body>
元素嵌入其中,以防不备。
16、常用网页修饰元素
1)水平线:
HR>
在页面上出现一条水平线。
使用方法:
HR属性>
水平线的对齐方式(l,c,r)
(2)Color:
水平线的背景颜色
(3)width、size:
水平线的宽度(%)/粗细
2)特殊符号的使用
特殊符号
表示方法
含义
&
lt;
小于符号
>
gt;
大于符号
amp;
转义、连接符号
“
quot;
引号
®
reg;
表示已注册
©
copy;
版权
™
trade;
商标
空格
nbsp;
不断行的空白
17、CSS技术
CSS就是一种叫做样式表(stylesheet)的技术。
也称之为层叠样式表(CascadingStylesheet)。
在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现统一样式设置,从而使页面格式控制更加容易,页面布局更加轻松,整个网站风格更加容易统一。
1)CSS的使用方法
(1)嵌入式
(2)链接式(3)单行式
(1)Embed(嵌入样式单)排版样式。
设定该网页的排版风格。
在<
Head>
元素内直接放入<
styleType="
text/css"
…内容…<
/Style>
(2)使用link(外部样式单)排版样式。
使一系列网页都使用一种排版风格。
将风格内容写在另外一个文件(*.CSS)中,让这一系列的网页用<
link>
标签链接他。
用法:
link属性>
元素之内。
(1)Rel:
(=StyleSheet)指当前Html与Href链接文档的关系
属
(2)Href:
*.CSS文件的地址
性(3)Type:
(=“text/css”)指StyleSheet的类型
LinkRel=StyleSheethref="
My.css"
Type="
2)几个CSS常用的属性
(1)字体与文本属性。
1)font-size文本字体大小
2)letter-spacing文本字符间距
3)font-height文本行高
4)text-align文本对齐方式
5)font-decoration文本的修饰(none/underline)
(2)颜色与背景色。
1)color文本颜色
2)background-color背景颜色
3)background-image背景图片
CSS属性和值之间用冒号“:
”连接,每个属性之间用分号“;
”连接,区别于元素的属性与值。
3)CSS中的对象
(1)页面元素直接被重定义。
直接定义网页中对象的样式,如h1,h2,p等元素。
H1{属性;
…}H2{属性;
…}
要求2号标题居中、20象素;
3号标题有下划线、红色。
H2{text-align:
center;
font-size:
20pt;
}
(2)类定义:
以“.”开头的人为定义的样式。
这种样式在使用时必须通过类引用方式,其语法为:
class=“样式类名”。
方法分两步:
A、在<
Style>
元素中定义类:
(.类名{属性;
…})
B、在网页中使用:
(<
Pclass=“类名”>
……<
/p>
(3)CSS选择器:
主要用来定义页面超级链接的色彩体系。
a{属性;
…}正常文本样式
a:
link{属性;
…}超级链接文本样式
visited{属性;
…}点击之后超级链接文本样式
hover{属性;
…}鼠标经过超级链接文本样式
active{属性;
…}正在点击超级链接文本样式
18、创建表单
FORM属性>
/FORM>
标识之间的内容属于表单的信息。
(1)Name:
(=“字符串”)表单名称
(2)Action:
(=“路径/文件名”)所要传递到的地方(网页)
(3)Method:
(=“get”/=“post”)传递方式,常用“Post”
19、创建表单输入域
Input属性>
是表单中用于提供用户输入信息的标识。
TYPE属性指出用户输入的信息的类型。
主要有以下类型:
1、文本框,TEXT类型,用于输入单行文本。
文本框
(1)Type=“text”
(2)Name=“命名”
(3)Size=数字:
文本框宽度,字符数
(4)MaxLength=数字:
最多输入字符数
(5)Value=”初始值”
******
2、密码框,PASSWORD类型,用于输入密码。
Type=“PASSWORD”,其他属性与Text相同。
3、复选框,CHECKBOX类型,用于多选信息。
(1)Type=“CheckBox”
(2)Name=“命名”,一类的名字必须相同。
(3)Value=”值”,
(4)checked:
选中
4、单选框,RADIO类型,用于单选信息。
Type=“Radio”,其他与CheckBox相同。
5、按钮,Button类型,用于产生某事件。
关闭
(1)Type=“Button”
(2)Name=“命名”,用于编程
(3)Value=”值”,按钮上面显示的文字。
确认
6、提交按钮,Submit类型,点击后会提交表单。
Type=“Submit”,其他属性与Button相同。
重填
7、重置按钮,ReSet类型,点击后会重置表单所有元素值为初始值。
Type=“ReSet”,其他属性与Button相同。
8、隐藏区域,Hidden类型,用户不可见,用于传递某些信息。
(1)Type=“Hidden”
(3)Value=”值”。
9、文件上传元素,File类型,用于输入要传递的文件名。
(1)Type=“File”
属
(2)Name=“命名”,用于编程。
性(3)size=数字:
文本框宽度,字符数。
(4)MaxLength=数字:
带路径文件名的最大长度
20、创建多行文本框(文本域)
TextArea属性>
…文本初始内容…<
/TextArea>
在浏览器窗口创建一个能够接受多行文本的输入。
其属性有:
COLS属性:
设置该多行文本框的列数;
ROWS属性:
设置该多行文本框的行数;
NAME属性:
确定该多行文本框的名称;
21、创建列表框(下拉菜单)
SELECT>
/SELECT>
使用可选择的选项来创建下拉式或滚动列表框或菜单。
(1)Name:
命名
(2)Size:
显示选项条数
(3)MulTiple:
允许多选
OPTION>
出现在<
select>
/select>
之间,有几个<
option>
,表示有几个选项,选项的具体内容写在<
标识符后面。
Select属性>
(1)Selected:
表示选中
(2)Value:
该选项的值
Option属性>
项1文字<
/Option>
选项2文字<
……
/Select>
1.3实验内容及要求
1、实验内容
实验利用HTML自带的元素,设计一个“三”型框架的网页,网页主要框架如下。
其中:
1)框架边框为1,灰色,里面嵌入了一张图片、2个网页,如图所示。
所有的链接使用相对路径,假设C:
\html为根目录。
2)1.html:
背景图片=C:
\html\img\2.jpg;
表单提交到网页:
C:
\html\asp\login.asp。
3)2.html:
左上角为浅绿色背景滚动文本框,左下脚为链接:
新闻1链接到网页:
\html\news\1.html;
新闻2链接到网页:
\html\news\2.html。
4)写一个cs.css文件,使1.html和2.html的风格都是:
超链在点击之前都为黑色;
鼠标移动上去都是蓝色、有下划线;
点击之后恢复原貌。
2、设计步骤:
(1)设计框架(index.html):
framesetrows=”___________”……>
framesrc=”______”……>
frame____________________________>
/frameset>
(2)设计1.html
body___________________>
--背景图片
formaction=”______”……>
用户名:
<
inputtype=”________”……>
/from>
--注意下端对齐
/body>
(3)设计2.html
table……>
tr……>
td……>
Marquee……>
/Marquee>
/td>
<
table>
/table>
--注意有表头
/tr>
……--第二行
(4)设计超链的css文件(cs.css)
……}
……}
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 轻松 快速 掌握 html 知识