网页设计与制作一、HTML 基本语言:1.HTML 基本语法:(如图)<html>....</html>:表示HTML 文档的开始和结束<head>…</head>:表示HTML 文档的头部。
最常用的标记是<title>…</title>,<title>标记中的容对应浏览窗口标题的信息。
<body>…</dody>:<body>标记之的容对应的是浏览器中的容。
2.<body>标记的使用:(如图)Bgcolor="颜色":设置页面背景色。
Background="图像文件的名字及路径":设置背景文件。
Text="颜色":设置页面文字默认颜色。
标记属性用来对标记之间的容修饰,标记其属性必须放到“..........................< >..”.中,各属性间必须用空..........格隔开。
....色彩的表示方法有两各种:1.RGB 模式,用16进制的红(Red)、绿(Green)、蓝(Blue)的值来表示,格式为“#RRGGBB”,字符包括数字0~9和字母A~F,如红色为“#FF0000”2.用英文单词表示彩色,如红色“red”。
二、常用的HTML标记及其属性制作网页①:1.页面属性、排版标志⑴.标题标记:格式:<h#>...<h#>, 其中“#”的取值国为1(字体最大)~6(字体最小)。
作用:设置文档的各级标题。
常见属性:align,用于定义标题的对齐方式,默认为左对齐,标题标记属性:(如表)⑵.版面格式标记①.分段与换行:(如表)①.以下标记都出现在<body>中出现,标记必须以成对出现,如<body>...</dody>.②.文本对齐标记可以在<p>标记中使用align属性指定文本对齐方式。
另外,居中对齐可以通过居中对齐方式进行设置。
格式:<center>…<center>作用:使标记间的容以居中对齐方式显示。
③.水平线标记格式:<hr>作用:在文档中插入水平线。
常用水平线标记属性:(如表)④.字体标记格式:<font>…</font>作用:设置标记间文体的字体、大小、颜色等。
常用字体标记属性:(如表)⑤.字体修饰标记作用:设置标记间文本的样式,如粗体、斜体、下划线等。
字体修饰标记(如表)⑥.特殊字符作用:在页面上显示特殊符号。
特殊字符(如表)⑶项目符号标记作用:在HTML页面中,合理地使用列表标记,可以起提纲和格式排序文作用。
列表分为无序列表和有序列表两类无序列表的主要标记为<ul>和<li>.作用:生成没有编号的列表,每一个列表前使用<li>标签区分。
(格式如右)<ul>标记的主要属性为type(如表)注意:项目符号标记在网页中的应用比较广泛,它能清楚地标注文本的层次结构,使用户浏览网页时能对该网页的架构一目了然。
其中,项目符号标记使用<ul>…</ul>时,必须是成对出现的,并且其中,项目插入多对<li>…<li>列表项标记组成完整的列表。
例:结果图为:2.超标记格式:<a>...</a>作用:把当前位置的文本或图像连接到其他的页面、文本或图像。
常用超标记属性(如表)属性名称属性含义示例target 属性绝对路径与相对路径:在网页文档中引用一个文件时,需要给出该文件的路径,这个可以是网络资源,也可以是本地计算机上的文件资源。
HTML 有两种路径:绝对路径与相对路径。
1.绝对路径:从协议开始的URL 地址或从驱动名称开始的本地文件路径都称为绝对路径。
如.sina..或d:\1\1.html2.相对路径:从文件存储位置开始的路径叫相对路径。
在描述相对路径时,需要注意:..............⑴...如果源文件和引用的文件在同一级目录里,直接写引用文件名即可。
..............................⑵...“......./.”表示源文件所在目录的上一级,“....................../......./.”.表示源文件所在目录的上上级目录,以.................此类推。
....⑶...引用下级的文件,直接写下级目录文件的路径即可。
例如,站点文件夹中有主页文件.....................................index.html ..........和图像文件夹......images,index.html .................文件中使用了......i .mages .....文件夹中的.....01.jpg ......图.像文件,那么图像........01.jpg ......相对于...index.html ..........的相对路径就是.......imges .....\.01.jpg ...... 3.图像标记 格式:<img>作用:在页面中插入图像或视频文件,图像格式可以是:GIF 、JPG 、PNG 。
常用图像标记属性(如表)当取值为left、right时,可以实现图像文字左右绕排的效果4.表格标记①表格的几种标记作用表格是最基本的网页布局的技术表格的主要标记(如表)标记描述<table>...</table> 表示整个表格的开始、结束<caption>...</caption> 用来设置整个表格的名称,表格中可不用此标记<tr>...</tr> 代表表格中一行<td>...<td> 代表单个普通的单元格,此标记必须放在一对<tr>标记<th>...</th> 用于定义表头单元格,单元格中的文字将以粗体显示,此标签必须放在一对<tr>标记,在表格中也可以不用此标记格式(如图)<table>标记的主要属性(如表)属性名称属性含义border 表格边框的宽度(以像素为单位);若不设置此属性,则边框的宽度默认为0,即不显示边框<tr>标记属性<td>和<th>标记主要属性属性名称属性含义align 单元格容的水平对齐方式;取值为:left、right、center;默认为左对齐(若与<tr>标签的属性冲突时,以单元格自身的设置为主valign 单元格容的垂直对齐方式;取值为:top、middle、bottom;默认为垂直居中(若与<tr>标签的属性冲突时,以单元格自身的设置为主)(续表)属性名称属性含义width 单元格的宽度,可用像素值或表格宽度的百分比来表示height 单元格的高度,可用像素值或表格高度的百分比来表示bgcolor 单元格的背景颜色bordercolor 单元格的边框颜色nowrap 单元格容不能自动换行rowspan 单元格所占的行数colspan 单元格据占的列数②合并单元格若需要建立不规则表格,就要用到<td>标记的rowspan属性和colspan属性来合并单元格。
如实现下图①到下图②的转化。
进行单元格合并时,需要遵循如下几条原则:⑴.整个表格中,每行的列数要相同。
⑵.若某个单元格中,设置了属性colspan="2",表示该单元格在横向占据了两个单元格的位置,所以,在当前行<tr>中,就需要少写一个<tr>标签(如B3单元格).依此类推,若设置了属性colspan="3",当前行<tr>中,就需要少写两个<td>标签(如C2单元格)。
⑶.若某个单元格中,设置了属性rowspan="2",表示该单元格在纵向占据了两个单元格的位置,所以,在下一个<tr>中,该列处就需要少写一个<td>标签(如A2单元格)。
若设置了属性rowspan="3"在下两行<tr>中,该列处都需要少一个<td>s标签,依此类推。
合并后的表格代码为:5.框架标记框架的主要标记有:<frameset>和<frame>,分别表示整个框架和单个框架。
⑴框架集标记<frameset>的几种常用属性有cols、row s、frameborder.cols:创建纵向分割框架时,通过该属性指定各框架的列宽,取值可以是“像素”和“%”,分割左右窗口,用“*”表示剩余部分。
rows:创建横向分割框架时,通过该属性指定各框架的行高,取值可以是“像素”和“%”,分割左右窗口,用“*”表示剩余部分。
Frameborder:指定框架周围是否显示边框,取值为“0”或“no ”表示不显示边框,取值为“1”或“yes ”则表示显示边框(默认值)。
边框无法调整粗细。
⑵.框架标记<frame>的几种常用属性有src 、name 、frameborder 、scrolling. src:设置此框架中要显示的网页的文件名(路径),每个框架对应一个网页。
name:设置该框架的名称,当有超指定要打开的页面在此框架中显示时,需要使用到target="框架",此时如果省略了框架名就无法了。
frameborder:指定框架周围是否显示边框,“0”是不显示,“1”是显示。
Scrolling:设置是否显示滚动条,“yes ”表示显示,“no ”表示不显示,“auto ”表示自动调整(默认值)。
在包含框架.....HTML ....文档中...,要使用框架标记........<frameset>..........取代..<body>s .......标记,然后通......过框架标记.....<frame>.......定义单个框架。
.......除了以上所学到的标记之外,HTML 中还包含可以让文本移动的标记<marquee>...</marquee>;用于在网页中插入音乐、视频和动画的标记<embed>;背景音乐标记<bgsound>等,如果要实现页面之间的过渡效果,可以通过<meta>标记的属性来实现。