HTML+CSS从入门到精通

本章目标熟悉HTML的各种标签熟练设置HTML各标签的属性熟练使用CSS，是WorldWideWeb（万维网）的缩写。万维网通常也简称为Web，它是由无数的商业、教育、娱乐等资料组成的一个庞大的信息空间。我们在这个信息空间中遨游、浏览、搜寻资料，最终呈现在浏览器中的信息，就是Web页面。Web页面绝大多数都是由HTML所编写的。HTML文件的基本结构HTML(HypertextMarkupLanguage)超文本标记语言HTMLHEADTITLE我的第一个网页/TITLE/HEADBODYHelloWorld!/BODY/HTMLHTML网页HTML网页HEAD头部部分HEAD头部部分BODY主体部分BODY主体部分HTML…/HTML标签标记HTML文档的开始和结束HTML…/HTML标签标记HTML文档的开始和结束网页标题网页标题网页内容，可以是文本、图像等网页内容，可以是文本、图像等这部分包含文本、图像和链接。它包括在BODY…/BODY标签内这部分包含文本、图像和链接。它包括在BODY…/BODY标签内这部分包括标题和其他说明信息。包括在HEAD…/HEAD标签内这部分包括标题和其他说明信息。包括在HEAD…/HEAD标签内META标签HEADMETAhttp-equiv=Content-Typecontent=text/html;charset=gb2312TITLE网页标题/TITLE/HEAD网页页面中出现乱码，那如何消除乱码使其正常显示？使用META标签META标签常用来描述网页，定义页面的一些基本信息使用META标签META标签常用来描述网页，定义页面的一些基本信息简体中文：gb2312繁体中文：big5纯英文网页：iso-8859-1简体中文：gb2312繁体中文：big5纯英文网页：iso-8859-1可以避免页面中的乱码可以避免页面中的乱码设置页面标题设置页面标题页面背景色或背景图像BODYbgcolor=#FFCCFF“background=back_image.GIFHelloWorld！/BODY为了使页面美丽大方，网页背景要尽量地浅为了使页面美丽大方，网页背景要尽量地浅……BODYbgcolor=#FFCCFF“HelloWorld!/BODY……网页背景色彩网页背景色彩网页背景图像网页背景图像文本控制标签标题标签，表示文章的标题–H……/H标签文本字体标签–FONT控制文本的大小、颜色、字体段落标签–p换行标签–BR标题标签H字体、字号H#.../H##=1,2,3,4,5,6……BODYH1一级标题/H1H2二级标题/H2H3三级标题/H3H4四级标题/H4H5五级标题/H5H6六级标题/H6/BODY……H1到H6标签用于指定不同级别的标题H1到H6标签用于指定不同级别的标题说明：H1到H6字体大小依次递减说明：H1到H6字体大小依次递减FONT标签特殊符号字体标签fontFONTsize=“12”color=“red”face=“律书”.../FONT"引号(“”)©版权号(©)>大于()<小于() 空格转义码特殊字符字体的大小值字体的大小值字体的颜色字体的颜色字体的类型字体的类型特殊符号特殊符号不同颜色的字不同颜色的字段落标签P、换行标签BR…….Palign=center淘宝集市欢迎您！/PPalign=left淘宝网首届翠友会！BR……/P……段落标签P–段(Paragraph)(可以看作是空行)p换行标签BR–换行br换段了换段了换行了换行了字体、字号相关标签示例......BODYPFONTsize=+2color=red手机充值、IP卡/电话卡/FONTBR/移动 | 100| 联通| 50/PCopyright©2007"淘宝网"Allrights./BODY……文字布局标签内容分隔HR标签文字列表和编号–有序列表OL–无序列表UL预格式文本PRE标签水平分隔线HR水平分隔线HR有序列表有序列表无序列表无序列表用了预先定义好的格式用了预先定义好的格式内容分隔标签HRHRsize=5color=redwidth=300……BODYHRsize=5color=redwidth=300HRsize=10color=blackwidth=200HRsize=5color=#0000FFwidth=50%/BODY……线的厚度值线的厚度值线的宽度线的宽度HR标签用于在页面上绘制水平线HR标签用于在页面上绘制水平线线的颜色线的颜色文字列表和编号标签OL、UL标签H4注册步骤：/H4OLtype=1LI填写信息/LILI收电子邮件/LILI注册成功/LI/OL新人上路指南ULtype=circleLI如何激活会员名？/LILI如何注册淘宝会员？/LILI注册时密码设置有什么要求？/LILI支付宝认证/LI/UL无序列表语法ULLI列表项内容/LI……/UL有序列表语法OLLI列表项内容/LI……/OL预格式文本PRE标签PREIMGsrc=QQ.JPGwidth=159height=133align=LEFT腾讯-QQ币/QQ幻想-30元卡一口价：26.45元运费：卖家承担运费剩余时间：5天宝贝类型：全新卖主声明：货到付款，可试用10天！/PREHTML中代码格式与浏览器中显示效果一样HTML中代码格式与浏览器中显示效果一样超链接标签页面链接a标签–链接到其他页面Ahref=register/register.html[免费注册]/A链接的地址链接的地址链接的内容链接的内容超链接标签A标签链接到其他页面HTMLHEADTITLE链接到其他页面/TITLE/HEADBODYAhref=register/register.html[免费注册]/AAhref=login/login.htm[登录]/A/BODY/HTML单击”[免费注册]”之后链接到的页面单击”[免费注册]”之后链接到的页面超链接标签A标签要实现如下图所示的超链接效果，怎么办？使用锚记标签点击超链接页面定位到相关位置点击超链接页面定位到相关位置A标签锚标记链接到本页面–锚记标签用于使用户“跳”到文档的某个部分–HTML的NAME属性用于创建锚标记ANAME=“marker”主题名称/A–为达到这种跳转效果，请在HREF参数中使用该标记AHREF=“#marker”主题名称/A只定义NAME属性相当于定义一个位置跳转到本文档中相应锚标记位置A标签锚标记示例HTMLHEADTITLE链接到其他页面/TITLE/HEADBODYAhref=#helpme[新人上路]/A……Aname=helpme新人上路指南/A……/BODY/HTML1、定义锚标记1、定义锚标记2、链接到锚标记所在位置2、链接到锚标记所在位置A标签电子邮件链接电子邮件链接–要链接电子邮件，可在链接标签中插入”mailto:邮箱地址”Ahref=mailto:[e-mail]站长信箱/AA标签电子邮件链接示例HTMLHEADTITLE电子邮件链接/TITLE/HEADBODY……Ahref=mailto:[e-mail]站长信箱/A……/BODY/HTML单击”站长信箱”链接后的输出结果单击”站长信箱”链接后的输出结果任何正确的电子邮箱地址均可任何正确的电子邮箱地址均可小结有序列表OL有序列表OL无序列表UL无序列表UL编写如下图所示效果对应的html代码图像标签图像的基本语法–IMGsrc=images/adv_2.jpgwidth=300“height=150“alt=明星演唱会开幕……BODYIMGsrc=images/adv_2.jpgalt=明星演唱会开幕width=300height=150/BODY……鼠标移到图像上，出现的提示性文字鼠标移到图像上，出现的提示性文字为图像添加的提示性文字为图像添加的提示性文字滚动MARQUEE标签MARQUEEscrolldelay=“100”direction=“up滚动文字或图像/MARQUEE滚动延迟时间滚动延迟时间滚动对象的方向滚动对象的方向说明：–scrolldelay：表示滚动延迟时间，默认值为90。–direction：表示滚动的方向，默认为从右向左。滚动标签MARQUEE滚动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水平向左移动水平向左移动垂直向上移动垂直向上移动图片和文字同时垂直向上移动图片和文字同时垂直向上移动声明滚动文字结束声明滚动文字结束声明滚动文字“水平滚动”开始，并且将会以默认方式从右向左滚动声明滚动文字“水平滚动”开始，并且将会以默认方式从右向左滚动表格的布局创建一个表格，使用table…/table标签行列单元格在HTML文档中，广泛使用表格来存放网页上的文本和图像在HTML文档中，广泛使用表格来存放网页上的文本和图像表格论坛中应用表格论坛中应用表格门户网站应用表格门户网站应用表格表格应用场合–论坛–门户网站–购物网站购物网站应用表格购物网站应用表格表格的基本语法TABLEborder=1TRTD单元格内容/TD……/TR……/TABLETABLE.../TABLE定义表格TABLE.../TABLE定义表格TD…/TD定义列TD…/TD定义列TR…/TR定义行TR…/TR定义行border用来设置表格边框尺寸大小border用来设置表格边框尺寸大小如何创建表格TABLEborder=2TRTD移动/TDTD联通/TDTD铁通/TD/TRTRTDIBM/TDTD惠普/TDTD华硕/TD/TR/TABLE创建跨行跨列的表格TABLEborder=1TRTD手机充值、IP卡/TDTDcolspan=2办公设备、文具/TD/TRTRTDrowspan=2各种卡的总汇/TDTD铅笔/TDTD彩笔/TD/TRTRTD打印/TDTD刻录/TD/TR/TABLE设置表格的尺寸和边框TABLEwidth