网页设计与制作(代码介绍)
网页设计与制作
一、HTML基本语言:
1.HTML基本语法:(如图)
....:表示HTML文档的开始和结束
…:表示HTML文档的头部。最常用的标记是2.
标记的使用:(如图)Bgcolor="颜色":设置页面背景色。
Background="图像文件的名字及路径":设置背景文件。
Text="颜色":设置页面文字默认颜色。
标记属性用来对标记之间的内容修饰,标记其属性必须放到
...................................“.< >
..”.中,各属性间必须用
空格隔开。
.....
色彩的表示方法有两各种:1.RGB 模式,用16进制的红(Red)、绿(Green)、蓝(Blue)的值来表示,格式为“#RRGGBB”,字符包括数字0~9和字母A~F,如红色为“#FF0000”2.用英文单词表示彩色,如红色“red”。
二、常用的HTML标记及其属性制作网页①:
1.页面属性、排版标志
⑴.标题标记:
格式:
作用:设置文档的各级标题。
常见属性:align,用于定义标题的对齐方式,默认为左对齐,
①.以下标记都出现在
中出现,标记必须以成对出现,如....⑵.版面格式标记
①.分段与换行:(如表)
②.文本对齐标记
可以在
标记中使用align属性指定文本对齐方式。另外,居中对齐可以通过居中对齐方式进行设置。
格式:
作用:使标记间的内容以居中对齐方式显示。
③.水平线标记
格式:
作用:在文档中插入水平线。
常用水平线标记属性:(如表)
④.字体标记
格式:…
作用:设置标记间文体的字体、大小、颜色等。
常用字体标记属性:(如表)
⑤.字体修饰标记
作用:设置标记间文本的样式,如粗体、斜体、下划线等。
功能格式
粗体...或者...
斜体...
下划线...
上标...
下标...
删除线...或者...
大字体...
小字体...
⑥.特殊字符
作用:在页面上显示特殊符号。
特殊字符(如表)
字符名称显示结果
空格
< <(小于号)
> >(大于号)
" "(双引号)
© ?
® ?
× ×(乘号)
⑶项目符号标记
作用:在HTML页面中,合理地使用列表标记,可以起提纲和格式排序
文作用。列表分为无序列表和有序列表两类
无序列表的主要标记为
- 和
- .作用:生成没有编号的列表,每一个
列表前使用
- 标签区分。(格式如右)
- 标记的主要属性为type(如表)
- …
- 列表项标记组成完整的列表。
例:
结果图为:
2.超链接标记
格式:...
作用:把当前位置的文本或图像连接到其他的页面、文本或图像。
属性名称属性含义示例
href 指定链接的目标地址,可以是站内
的文件,也可以某个网站
target 指定链接的目标窗口,其值是一个
窗口的名称,也可以是_blank、
_parent、_self、_top,默认为_self
网络资源,也可以是本地计算机上的文件资源。HTML有两种路径:绝对路径与相对路径。
1.绝对路径:从协议开始的URL地址或从驱动名称开始的本地文件路径都称为绝对路
径。如https://www.360docs.net/doc/4b6193735.html,或d:\1\1.html
2.相对路径:从文件存储位置开始的路径叫相对路径。
在描述相对路径时,需要注意:
..............
⑴...如果源文件和引用的文件在同一级目录里,直接写引用文件名即可。
..............................
⑵...“......./.”.表示源文件所在目录的上一级,“
......................................./......./.”.表示源文件所在目录的上上级目录,以此
类推。
...
⑶...引用下级的文件,直接写下级目录文件
...........
......例.如.,.站点文件夹中有主页文件.................的路径即可。
index.html
......图像文件,
.....01.jpg
.....
......文件夹中的
......images
......images
......,index.html
..........和图像文件夹
...........文件中使用了
那么图像
.......imges
......
.....\.01.jpg
..........的相对路径就是
....01.jpg
......相对于
...index.html
3.图像标记
格式:
作用:在页面中插入图像或视频文件,图像格式可以是:GIF、JPG、PNG。
①表格的几种标记
作用表格是最基本的网页布局的技术
表格的主要标记(如表)
标记描述
...
表示整个表格的开始、结束... 用来设置整个表格的名称,表格中可不用此标记... 代表表格中一行... 代表单个普通的单元格,此标记必须放在一对 标记内 ... 用于定义表头单元格,单元格中的文字将以粗体显示,此标签必须放在一对
标记内,在表格中也可以不用此标记格式(如图) 属性名称属性含义
border 表格边框的宽度(以像素为单位);若不设置此属性,则边框的宽度默认为0,
即不显示边框
bordercolor 表格边框颜色
background 设置表格的背景图像
bgcolor 设置表格的背景颜色
width 表格宽度;其值可用像素表示,也可用占窗口的百分比表示
height 表格高度;其值可用像素表示,也可用占窗口的百分比表示
align 表格在页面的水平位置;取值为:left、right、center;默认为在对齐cellspacing 单元格之间的间距;其值可用像素来表示
cellpadding 单元格内容与单元格边界之间的距离;其值可用像素来表示
属性名称属性含义
align 行内容的水平对齐方式;取值为:left、right、center;默认为左对齐valign 行内容的垂垂直对齐方式;取值为:top、middle、bottom;默认为局中对齐height 行高;其值可用像素或表格高度百分比表示
title 鼠标指向该行时,显示的指示信息
bgcolor 行的背景颜色
bordercolor 行的边框颜色
nowrap 本行所有单元格内容不能自动换行
属性名称属性含义
align 单元格内容的水平对齐方式;取值为:left、right、center;默认为左对齐(若
与
标签的属性冲突时,以单元格自身的设置为主valign 单元格内容的垂直对齐方式;取值为:top、middle、bottom;默认为垂直居中 (若与
标签的属性冲突时,以单元格自身的设置为主) (续表)属性名称属性含义
width 单元格的宽度,可用像素值或表格宽度的百分比来表示
height 单元格的高度,可用像素值或表格高度的百分比来表示
bgcolor 单元格的背景颜色
bordercolor 单元格的边框颜色
nowrap 单元格内容不能自动换行
rowspan 单元格所占的行数
colspan 单元格据占的列数
②合并单元格
若需要建立不规则表格,就要用到
标记的rowspan属性和colspan属性来合并单元格。如实现下图①到下图②的转化。 进行单元格合并时,需要遵循如下几条原则:
⑴.整个表格中,每行的列数要相同。
⑵.若某个单元格中,设置了属性colspan="2",表示该单元格在横向占据了两个单元格的位置,所以,在当前行
中,就需要少写一个 标签(如B3单元格).依此类推,若设置了属性colspan="3",当前行 中,就需要少写两个 标签(如C2单元格)。 ⑶.若某个单元格中,设置了属性rowspan="2",表示该单元格在纵向占据了两个单元格的位置,所以,在下一个
中,该列处就需要少写一个 标签(如A2单元格)。若设置了属性rowspan="3"在下两行 中,该列处都需要少一个 s标签,依此类推。 合并后的表格代码为:
5.框架标记
框架的主要标记有:
值代表
disc 实心加点(默认)
circle 空心圆
square 实心小方块。
注意:项目符号标记在网页中的应用比较广泛,它能清楚地标注文本的层次结构,使用户浏览网页时能对该网页的架构一目了然。其中,项目符号标记使用
- …