HTML,CSS,JAVASCRIPT-基础篇

1====================================================================================================================================-=--网页设计HTML+CSS+JAVASCRIPT2HTML的基本标签3HTML文件的基本结构HTML文档的结构HTMLHEADTITLE我的第一个网页/TITLE/HEADBODYHelloWorld!/BODY/HTMLHTML网页HEAD头部部分BODY主体部分HTML…/HTML标签标记HTML文档的开始和结束网页标题网页内容，可以是文本、图像等这部分包含文本、图像和链接。它包括在BODY…/BODY标签内查看源代码这部分包括标题和其他说明信息。包括在HEAD…/HEAD标签内4使用记事本创建网页使用记事本创建网页的步骤：1、打开记事本2、输入HTML代码3、保存为*.html或*.htm文件，注意格式问题4、打开网页预览效果使用记事本创建网页5META标签HEADMETAhttp-equiv=Content-Typecontent=text/html;charset=utf-8TITLE网页标题/TITLE/HEAD使用META标签6页面背景色或背景图像BODYbgcolor=#FFCCFF“background=back_image.GIFHelloWorld！/BODY为了使页面美丽大方，网页背景要尽量地浅……BODYbgcolor=#FFCCFF“HelloWorld!/BODY……查看源代码网页背景色彩网页背景图像7文本相关标签字体、字号标题标签H1－H6FONT标签特殊符号行的控制段落标签P换行标签BR使用了H2…H2换段了设置了字体的大小和颜色换行了特殊符号8字体、字号相关标签标题标签H#.../H##=1,2,3,4,5,6说明：H1到H6字体大小依次递减……BODYH1一级标题/H1H2二级标题/H2H3三级标题/H3H4四级标题/H4H5五级标题/H5H6六级标题/H6/BODY……H1到H6标签用于指定不同级别的标题查看源代码9FONTsize=“+2”color=“red”face=“律书”.../FONT字体、字号相关标签FONT标签特殊符号特殊字符转义码空格 引号(“”)"小于()<大于()>版权号(©)©字体的大小值字体的颜色字体的类型10字体、字号相关标签查看源代码......BODYPFONTsize=+2color=red手机充值、IP卡/电话卡/FONTBR/移动 | 100| 联通| 50/PCopyright©2007"淘宝网"Allrights./BODY……空格效果11…….Palign=center淘宝集市欢迎您！/PPalign=left淘宝网首届翠友会！BR……/P……行的控制相关标签段落标签P段(Paragraph)(可以看作是空行)p换行标签BR换行br查看源代码换段了换行了12图像标签常见的图片格式介绍图像类型优点缺点适用场合制作工具*.jpg体积小，比较清晰有损压缩、画面失真网页图片Photoshop*.gif支持Internet标准,支持无损耗压缩和透明度，很流行支持有限的透明度,效果不如别的图像网页图片Photoshop*.swf体积小,便于网络传输制作麻烦网页动画Flash*.bmp支持24位颜色深度，兼容性好不支持压缩容量大桌面墙纸photoshop13图像标签图像的基本语法IMGsrc=images/adv_2.jpgwidth=300“height=150“alt=明星演唱会开幕……BODYIMGsrc=images/adv_2.jpgalt=明星演唱会开幕width=300height=150/BODY……查看源代码鼠标移到图像上，出现的提示性文字图像的位置图像的宽度图像的高度为图像添加的提示性文字14图像标签图像与文本的对齐方式IMGalign=middle图像与文本居中对齐,还可以取top,bottom值….BODYAhref=star.htmlIMGalign=middlesrc=images/adv_2.jpgwidth=180height=95border=0//A请点击广告进入明星专区/BODY……查看源代码图像和文本居中对齐15文字布局水平分隔线HR有序列表无序列表用了预先定义好的格式16如何使用内容分隔HR标签HRsize=5color=redwidth=300……BODYHRsize=5color=redwidth=300HRsize=10color=blackwidth=200HRsize=5color=#0000FFwidth=50%/BODY……线的厚度值线的宽度查看源代码HR标签用于在页面上绘制水平线线的颜色17如何使用列表无序列表语法ULLI列表项内容/LI……/UL有序列表语法OLLI列表项内容/LI/OL查看源代码H4注册步骤：/H4OLtype=1LI填写信息/LILI收电子邮件/LILI注册成功/LI/OL新人上路指南ULtype=circleLI如何激活会员名？/LILI如何注册淘宝会员？/LILI注册时密码设置有什么要求？/LILI支付宝认证/LI/UL18预格式文本PRE标签如何实现如下图所示的页面中的文字效果？使用PRE标签可以实现19如何使用预格式文本PRE标签PREIMGsrc=images/QQ.JPGwidth=159height=133align=LEFT腾讯-QQ币/QQ幻想-30元卡一口价：26.45元运费：卖家承担运费剩余时间：5天宝贝类型：全新卖主声明：货到付款，可试用10天！/PREHTML中代码格式与浏览器中显示效果一样20页面链接A标签链接到其他页面Ahref=register/register.html[免费注册]/A链接内容链接的地址HTMLHEADTITLE链接到其他页面/TITLE/HEADBODYAhref=register/register.html[免费注册]/AAhref=login/login.htm[登录]/A/BODY/HTML单击”[免费注册]”之后链接到的页面21页面链接A标签链接到其他页面相对路径指定从根目录到文件的完整路径。绝对路径指定相对于当前文件的文件位置。在同一个文件夹下有两个html文件，从一个文件超链接到另一个文件的路径有几种方式？两种方式：相对路径和绝对路径22页面链接A标签要链接到同一目录(C:\HTML)下的页面，可编写AHREF=“Doc1.htm”或AHREF=“C:\html\Doc2.htm”相对路径名绝对路径名23页面链接A标签要实现如下图所示的超链接效果，怎么办？演示示例3：演示锚链接的例子使用锚记标签24页面链接A标签链接到本页面锚记标签用于使用户“跳”到文档的某个部分HTML的NAME属性用于创建锚标记ANAME=“marker”主题名称/A为达到这种跳转效果，请在HREF参数中使用该标记AHREF=“#marker”主题名称/AHTMLHEADTITLE链接到其他页面/TITLE/HEADBODYAhref=#helpme[新人上路]/A……Aname=helpme新人上路指南/A……/BODY/HTML1、定义锚标记2、链接到锚标记所在位置25页面链接A标签电子邮件链接要链接电子邮件，可在链接标签中插入”mailto:邮箱地址”Ahref=mailto:[e-mail]站长信箱/A演示示例5：演示电子邮件链接HTMLHEADTITLE电子邮件链接/TITLE/HEADBODY……Ahref=mailto:[e-mail]站长信箱/A……/BODY/HTML单击”站长信箱”链接后的输出结果任何正确的电子邮箱地址均可26滚动MARQUEE标签MARQUEEscrolldelay=“100”direction=“up滚动文字或图像/MARQUEE滚动延迟时间滚动对象的方向说明：scrolldelay：表示滚动延迟时间，默认值为90。direction：表示滚动的方向，默认为从右向左。27查看源代码滚动MARQUEE标签MARQUEEscrolldelay=100水平滚动/MARQUEEMARQUEEscrolldelay=200direction=up垂直滚动/MARQUEEMARQUEEscrolldelay=300direction=uponmouseover=this.stop()onMouseOut=this.start()Ahref=#IMGsrc=images/scroll/1.gifborder=0align=middleAvon化妆品/ABRAhref=#IMGsrc=images/scroll/2.gifborder=0align=middle雅诗兰黛/ABR……/MARQUEE水平向左移动垂直向上移动图片和文字同时垂直向上移动声明滚动文字结束声明滚动文字“水平滚动”开始，并且将会以默认方式从右向左滚动28为什么使用表格表格应用场合论坛门户网站购物网站论坛中应用表格门户网站应用表格购物网站应用表格29表格的基本结构行列单元格在HTML文档中，广泛使用表格来存放网页上的文本和图像30表格的基本语法TABLEborder=1TRTD单元格内容/TD……/TR……/TABLETABLE.../TABLE定义表格TD…/TD定义列TR…/TR定义行border用来设置表格边框尺寸大小31如何创建表格TABLEborder=2TRTD移动/TDTD联通/TDTD铁通/TD/TRTRTDIBM/TDTD惠普/TDTD华硕/TD/TR/TABLE查看源代码32什么是跨行跨列的表格跨3列跨3行下图中的表格哪里用了跨行？哪里用了跨列？跨了几行几列?33跨多列的表格TABLEborder=2TRTDcolspan=3学生成绩表/TD/TRTRTD英语/TDTD数学/TDTD语文/TD/TRTRTD95/TDTD98/TDTD89/TD/TR/TABLECOLSPAN=“n”属性表示跨多少列？查看源代码34跨多行的表格TABLEborder=1TRTDrowspan=“3”早上菜谱/TDTD食物/TDTD鸡蛋/TD/TRTRTD饮料/TDTD牛奶/TD/TRTRTD甜点/TDTD开心粉/TD/TR/TABLErowspan=“n”属性表示跨多少行？查