您好,欢迎访问三七文档
当前位置:首页 > 电子/通信 > 综合/其它 > Web应用开发――网页设计基础
Web应用开发——网页设计基础第2章网页设计基础2.1HTML与XML2.2利用CSS布局网页2.3JavaScript客户端编程2.1HTML与XML超文本标记语言(HyperTextMarkupLanguage,简称HTML)是Web页面的标记性语言,通过一定的格式标记文本及图像等元素,使之在浏览器中显示出不同内容和风格的网页。2.1.1HTML文档的基本结构HTML文档拥有一种“嵌套”结构4html标签定义一个网页head标签定义网页的头部body标签定义网页的主体p标签启动一个段落title标签定义网页的标题HTML文档的基本结构5htmlhead…/headbody…/body/html头部主体页面标记文字和段落标记超链接标记列表标记表格标记表单标记2.1.2HTML文档的主要标记(1)页面标记HTMLHEADtitle.../titlelink.../linkmeta.../metascript.../script/HEADBODYbackground=#bgcolor=#text=#link=#alink=#vlink=#....../BODY/HTML背景色彩和文字色彩bodybgcolor=#text=#link=#alink=#vlink=#bgcolor---背景色彩text---非可链接文字的色彩link---可链接文字的色彩alink---正被点击的可链接文字的色彩vlink---已经点击(访问)过的可链接文字的色彩#=rrggbb色彩是用16进制的红-绿-蓝(red-green-blue,RGB)值来表示。16进制的数码有:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.(2)文字和段落标记标题字体<h#>...</h#>HTMLheadingsaredefinedwiththeh1toh6tags.#=1~6;h1为最大字,h6为最小字字体标记<font>...</font>(1)字体大小<fontsize=#>...</font>(2)文字颜色<fontcolor=#rrggbb>...</font>(3)粗体字<b>...</b>(4)斜体字<i>...</i>颜色名称和对应的十六进制数码Black=#000000Green=#008000Silver=#C0C0C0Lime=#00FF00Gray=#808080Olive=#808000White=#FFFFFFYellow=#FFFF00Maroon=#800000Navy=#000080Red=#FF0000Blue=#0000FFPurple=#800080Teal=#008080Fuchsia=#FF00FFAqua=#00FFFF给文本设置一些特殊格式,如粗体、斜体、下划线、上下标等。(3)字体样式标记物理样式标记属性说明属性说明B…/B黑体字SUP…/SUP上标I…/I斜体字SUB…/SUB下标U…/U加下划线SMALL…/SMALL小字体S…/S加删除线BIG…/BIG大字体出逻辑样式标记属性说明EM…/EM输出需要强调的文本(通常是斜体加黑体)STRONG…/STRONG输出加重文本(通常也是斜体加黑体)CITF…/CITF输出引用方式的字体,通常是斜体DEL…/DEL为文本加上删除线(4)文字布局分段和换行标记p段落(可以看作是空行)br换行例如:你好吗?p很好。你好吗?br很好。文字的对齐(Alignment)palign=#.../pcenter.../center#=left,center,rightDIV标记DIV标记用于为文档分节,以便为文档的不同部分应用不同的段落格式,其标记为DIV和/DIV。单独的DIV标记不能完成任何工作,必须与align属性联合使用。位于DIV标记符中的多段文本将被认为是一个节,可为它们设置一致的对齐格式。DIValign=left|center|right文本或图像/DIV水平线标记水平线标记hr在网页中添加一条水平线,将不同的信息分开。hralign=对齐方式color=颜色size=粗细width=长度noshade内部链接ahref=”1.htm”请单击查看1.htm中的内容/a外部链接ahref=链接到主页/aahref=telnet://bbs.xatu.edu.cn远程登录/a书签链接(1)在同一页面中,要使用书签名:ahref=#书签名超链接标题名称/a(2)在不同页面之间,要使用链接的URL地址:ahref=URL地址#书签名超链接标题名称/a(5)超链接标记(Link)(6)列表标记(ListTags)无序列表无序列表使用的一对标签是ul/ul,每一个列表项前使用li。其结构如下:ultype=符号类型li第一项li第二项li第三项/ululliTodayliTommorow/ulTodayTommorow有序列表有序列表使用的一对标签是ol/ol,每一个列表项前使用li。其结构如下所示:oltype=符号类型start=起始编号li第一项li第二项li第三项/ol有序列表的type属性取值取值说明type=1列表项用数字编号(1,2,3...),默认值type=A列表项用大写字母编号(A,B,C...)type=a列表项用小写字母编号(a,b,c...)type=I列表项用大写罗马数字编号(Ⅰ,Ⅱ,Ⅲ...)type=i列表项用小写罗马数字编号(i,ii,iii...)定义列表(Definitionlists)定义性列表可以用来给每一个列表项再加上一段说明性文字,说明独立于列表项另起一行显示。列表项使用DT标明,说明性文字使用DD表示。DLDT第一项DD叙述第一项的定义DT第二项DD叙述第二项的定义DT第三项DD叙述第三项的定义/DL例2-1列表标记的使用示例htmlheadtitle列表标记示例/title/headbodyoltype=1liu无序列表/uultype=circleliPhotoshopliIllustratorliCorelDraw/ulliu有序列表/uoltype=aliPhotoshopliIllustratorliCorelDraw/olliu定义列表/udldtPhotoshopddAdobe公司的图像处理软件dtIllustratorddAdobe公司的矢量绘图软件dtCorelDrawddCorel公司的图形图像软件/dl/olbody/html(7)表格标记(TableTags)表格的基本语法定义表格table.../table定义表格的标题caption…/caption定义表格行tr.../tr定义表头th.../th定义表的单元格td.../td设定表格的属性【1】设定边框的宽度<tableborder=#>【2】设定边框的颜色<tablebordercolor=#rrggbb>【3】调整表格宽度,高度<tablewidth=#height=#>【4】设定表格的背景色<tablebgcolor=#rrggbb>一个最简单的带边框的表格tablebordertrthFood/ththDrink/ththSweet/th/trtrtdA/tdtdB/tdtdC/td/trtrtdX/tdtdY/tdtdZ/td/tr/tableFoodDrinkSweetABCXYZ表格---跨多行、多列的表元(TableSpan)(1)跨多列的表元thcolspan=#tablebordertrthcolspan=3MorningMenu/thtrthFood/ththDrink/ththSweet/thtrtdA/tdtdB/tdtdC/td/table(2)跨多行的表元throwspan=#tablebordertrthrowspan=3MorningMenu/ththFood/thtdA/td/trtrthDrink/thtdB/td/trtrthSweet/thtdC/td/tr/table(9)表单标记(FormTags)表单是用户和Web应用程序、Web数据库进行交互的界面。#=text,password,checkbox,radio,submit,resetFORMaction=脚本URLMethod=Get/Postinputtype=#name=##value=………/FORMaction属性指明处理数据的程序的URL地址method属性指明数据提交的方法表单信息传递给服务器的两种方式:GET/POSTGET方法:将信息封装在一个URL中提交给Server(数据长度受限)。=v1&password=v2POST方法:将信息封装在一个MessageBody中提交给服务器(表单大小不受限)。复选框inputtype=checkboxname=名称value=值checked单选框inputtype=radioname=名称value=值checked文本域单行文字输入inputtype=textname=名称value=初值密码输入inputtype=passwordname=名称value=初值多行文本域textareaname=名称rows=文本域行数cols=文本域列宽textarea选择域selectname=菜单名称size=选项个数multipleoptionvalue=选项值1selected显示内容1/optionoptionvalue=选项值2显示内容2/option……optionvalue=选项值n显示内容n/option/select按钮域(1)提交按钮:单击提交按钮,可以实现表单内容的提交。inputtype=submitname=名称value=提交”(2)重置按钮:单击重置按钮,可以清除表单中已经输入的内容。inputtype=resetname=名称value=”重置”(3)普通按钮:使用普通按钮可以通过调用函数完成其他操作。inputtype=buttonname=名称value=文本菜单和列表域例:表单的综合应用htmlheadTITLE表单的综合应用/TITLE/headbodyformaction=method=post您的姓名:inputname=″name″size=10type=textbr您的个人主页地址:inputname=”URL”size=50type=textvalue==JianYiclos=20rows=5您的建议/textareabr您的密码:inputtype=passwordname=″pass
本文标题:Web应用开发――网页设计基础
链接地址:https://www.777doc.com/doc-3594166 .html