《网页设计与制作(代码介绍)》由会员分享，可在线阅读，更多相关《网页设计与制作(代码介绍)（9页珍藏版）》请在金锄头文库上搜索。
1、网页设计与制作一、HTML基本语言：1. HTML基本语法：（如图）H 丁茁L基本语言:网 页閒 杯题、:血朮网贡正文Jhtml./html:表示HTML文档的开始和结束head/head:表示HTML文档的头部。最常用的标记是title/title，title 标记中的内容对应浏览窗口标题的信息。body/dody：body标记之内的内容对应的是浏览器中的内容。2. body标记的使用：（如图） 网页正文Bgcolor=颜色:设置页面背景色。Background?图像文件的名字及路径：设置背景文件。Tex t=颜色：设置页面文字默认颜色。标记属性用来对标记之间的内容修饰,标记其属性必须放到叮
2、”中,，各属性间必须用 空格隔开。.色彩的表示方法有两各种：1.RGB模式，用16进制的红（Red）、绿（Green）、蓝（Blue） 的值来表示，格式为“#RRGGBB”，字符包括数字09和字母AF,如红色为“#FF0000” 2. 用英文单词表示彩色，如红色“red”。二、常用的HTML标记及其属性制作网页1.页面属性、排版标志（1）.标题标记：格式：h#.h#，其中“#”的取值范国为1 （字体最大）6 （字体最小）。作用：设置文档的各级标题。常见属性：align,用于定义标题的对齐方式，默认为左对齐，.以下标记都出现在body中出现，标记必须以成对出现，如body./dody.标题标记属
3、性：（如表）值表示的对方试示例lef t左对齐hl align二lef t文字内容hlrigh t右对齐hl align二righ t文字内容hlcenter居中对齐标记中使用align属性指定文本对齐方式。另外，居中对齐可以通过居中对齐方式进行设置。格式：vcenter. vcenter 作用：使标记间的内容以居中对齐方式显示。 水平线标记 格式：vhr 作用：在文档中插入水平线。常用水平线标记属性：（如表）属性名称属性含义示例align定义水平线的对齐方式，默认为“center”右对齐水平线:vhr align=rightcolor定义水平线的颜色绿色水平线：vhr color=green
4、noshade定义水平线为无阴影无阴影水平线：vhr noshade color=greensize定义水平线的宽度，单位默认为像素宽度为4像素的水平线:vhrsize=4width定义水平线的长度，单位为像素或百分比 （相于页面宽度）占页面宽度80%的水平线：vhrwidth=80% 字体标记 格式：vfont. v/font 作用：设置标记间文体的字体、大小、颜色等。 常用字体标记属性：（如表）属性名称属性含义示例face设置标记间文本的字体vfont face=隶书 文字内容v /fontsize设置标记间文本的大小，取值范围为17vfont size=2 文字内容v /fontcolo
5、r设置标记间文本的颜色vfont color=red 文字内容v/fonttitle设置鼠标指向文本时，出现的提示信息vfont title=信息 文字内容v/font 字体修饰标记 作用：设置标记间文本的样式，如粗体、斜体、下划线等。字体修饰标记（如表）功能格式粗体vb.v/b 或者 vstrong.v/strong斜体vi.v/i下划线vu.v/u上标vsup.v/sup下标vsub.vsub删除线vs.v/s 或者 vstrike.v/strike大字体vbig.v/big小字体vsmall.v/small特殊字符作用：在页面上显示特殊符号。特殊字符（如表）字符名称显示结果 空
6、格< （小于号）>；（大于号）&q uot;（双引号）©®& times;X （乘号）项目符号标记作用：在HTML页面中，合理地使用列表标记，可以起提纲和格式排序 心 文作用。列表分为无序列表和有序列表两类无序列表的主要标记为u卜和 li.作用：生成没有编号的列表，每一个 - 列表前使用vli标签区分。（格式如右）/uivul标记的主要属性为type （如表）值代表disc实心加点（默认）circle空心圆square实心小方块。注意：项目符号标记在网页中的应用比较广泛，它能清楚地标注文本的层次结构，使用户浏览网页时能对该网页的架构一目了然。其中，项目符号标记使用v
7、u卜v/ul时，必须是成 对出现的，并且其中，项目插入多对vli.vli 列表项标记组成完整的列表。例：备严标记的主要属性为typX/ti血 默认的无序列表加“实心圆亠JjA无序列表叩吨加方块祐无序列表品血加空心圆* 结果图为：2超链接标记格式：va.v/a作用：把当前位置的文本或图像连接到其他的页面、文本或图像。常用超链接标记属性（如表）属性名称属性含义示例href指定链接的目标地址，可以是站内 的文件，也可以某个网站.v/a.vatarget指定链接的目标窗口，其值是一个 窗口的名称，也可以是_blank、 parent、self、top,默认为 selftitle鼠标指向链接时，所显示的
8、信息target属性target取值作用blank在新窗口中打开parent在上一级窗口中打开self在当前窗口中打开，此项为默认值top在浏览器的整个窗口中打开，忽略任何框架绝对路径与相对路径：在网页文档中引用一个文件时，需要给出该文件的路径，这个可以是网络资源，也可以是本地计算机上的文件资源。HTML有两种路径：绝对路径与相对路径1.绝对路径：从协议开始的 URL 地址或从驱动名称开始的本地文件路径都称为绝对路 径。如 http:/或 d:ll.html2相对路径：从文件存储位置开始的路径叫相对路径。 在描述相对路径时，需要注意：）:如果源文件和引用的文件在同一级目录里,直接写引用文件名即
9、卩可。.“./”表示源文件所在目录的上一级，“././”表示源文件所在目录的上上级目录，以此 类推。 .引用下级的文件，直接写下级目录文件 的路径即可。 例如，站点文件夹中有主页文件index.html和图像文件夹imagesjndex.html文件中使用了 images文件夹中的01.jpg图像文件, 那么图像01.jpg相对于index.html的相对路径就是imges01.jpg 3.图像标记格式： 作用：在页面中插入图像或视频文件，图像格式可以是： GIF、JPG、PNG。常用图像标记属性（如表）属性名称属性含义示例src指定插入图像名称或路径 或者 vimg src=imagesa.
10、gifalt替换文本，当浏览器不能显示图像时、在 鼠标指向图像时、或图像加载时间过长 时，所要显示的文本使标记后面的文字进行换行显示width指定图像宽度，单位是像素vimg src= imagesa.gif width= 100 height= 200 height指定图像咼度，单位疋像素border指定图像边框，默认为0hspace指定图像左右两侧与其他对象（如文本） 之间的距离，单位为对象vimg src= imagesa.gif hspace= 30 vspace= 20 vspace指定图像上下两端与其他对象（如文本） 之间的距离，单位为像素align指定图像与文本的对齐方式，取值有
11、:top、 middle、bottom、left、righto 当取值为 left、 right时，可以实现图像文字左右绕排的效 果vimg src= imagesa.jpg align=left 4.表格标记表格的几种标记作用表格是最基本的网页布局的技术表格的主要标记（如表）标记描述vtable.v/table表示整个表格的开始、结束vcaption.v/caption用来设置整个表格的名称，表格中可不用此标记vtr.v/tr代表表格中一仃vtd.vtd代表单个普通的单兀格，此标记必须放在一对tr 标记内vth.v/th用于定义表头单元格，单元格中的文字将以粗体显示，此 标签必须放在一对tr 标记内，在表格中也可以不用此标记格式（如图）capirLijj 卷榕标题Ai第-列标:题口迫i 加第二标怒仙Atr如第一f J旳第一卜单旺格g 氓第二疔转第二个第元格如 jtrvtable 标记的主要属性（如表）属性名称属性含义border表格边框的宽度（以像素为单位）；若不设置此属性，则边框的宽度默认为0， 即不显示边框bordercolor表格边框颜色background设置表格的背景图像bgcolor设置表格的背景颜色width表格宽度；其值可用像素表示，也可用占窗口的百分比表
