HTML+CSS从入门到精通

1、木章目标追熟悉HTML的各种标签巻熟练设置HTML各标签的属性巻熟练使用CSSVpitJi Ininrmalinn bcrfici?WWW简介WWW,是World Wide Web （万维网）的缩写。万维网 通常也简称为Web,它是由无数的商业、教育、娱乐 等资料组成的一个庞大的信息空间。我们在这个信息 空间中遨游、浏览、搜寻资料，最终呈现在浏览器中 的信息，就是Web页面。辿Web页面绝大多数都是由HTML所编写的。HTM L文件的基木结构吐 HTML (Hypertext Markup Language)超文本标记语言VHTML网页标题J_JvTITLE我的第一个网更/TITLE Hell

2、o World!网页内容，可以Jl .是文本、图像等HTML网页这部分包括标题和其他说明信息。包括在VHEADV/HEAD标签内VpitJi Ininrmalinn bcrfici?Ini a rma linn bcrfici?页面背景色或背景图像网页背景色彩网页背景图像BODY bgcolor=,#FFCCFF Hello World! Hello World!为了使页面美丽大方，网页背景要尽量地浅文木控制标签Mb* Q Aflft辿标题标签，表示文章的标题- v/H标签辿文木字体标签- 控制文本的大小、颜色、字体憑段落标签一 标题标签vH农字体、字号Iiiinrmalinn bcrfici

3、?. #=1,2, 3, 4, 5,6一级标题三级标翹四钱标题3K级标黑亠：| | | | | H我葩电猗说明：vH1到vH6字体大小依次递减VH：L级标题 V/H1VH2 二级标题 V/H2三级标题V/H3四级标题VH5五级标题V/H5 六级标题V/H6 jH1到H6标签用于指定不同级别的标题VpitJi Ini a rma linn bcrfici?字体标签v font- .4a4.*3衣FONT标签字体的 夫小值1字体的类型劲文本相关标记的应用特殊字符转义码空格 引号(“”)"小于(v)<大于>版权号()©文件(日编辑查看-不同轡色的字 耳7手机

4、充值、IP卡/电话卡移动丨100 |聯通丨50Copyright007 淘宝网All rights. je殊符号VpitJi Ininrmalinn bcrfici?段落标签vp、换行标签VBR衣段落标签-段（Paragraph） （ nJ*以看作是空行）衣换行标签勺只妬亍箜文丰相怎掾的应用 Microsoft InternetI v严aign二center；甸宝集市欢迎您！ v/p | vp align=”lefT淘宝网首届翠友会丄vBR|值、IP卡100 I联逋I淘宝集市次迎您文件（巳编辑（或查看（町收喊（4 工具（目D：l使用HTML语吉开发简亚站点廿二| 0转到换行了我的电胞字体、字号

5、相关标签示例Ini a rma linn bcrfici? 手机充值、IP卡/电话 移动&n sp;| Copyright © P007 "- 文件查蒼言文本记的应用-MiDNTxBR /Inbsp;联通 |  50 l" All rights工具（D帘龙100TP卡/电话卡50Copyright 2007 淘宝期M1 rights.完毕文字布局标签VpitJi Ini a rma linn bcrfici?辿内容分隔小只标签衣文字列表和编号-有序列表vOL-无序列表箜沟宝冋主頁Microsoft lnt文件(E) SaeiD古石0-IDIXI

6、一 出詁水平分隔线O吧 A M咗” 地址) |电J D；l連用HTMLig言芳*注珊步唏:辿预格式文本标签/1. 埴哥信也2. 收电子邮件3. 注册成功新人上路扌自南有序列表O如何激活会员名？o如何注册淘宝会员？O注册时密码迅誉有仆么要求?O支付宝认证无序列表用了预先定 义好的格式鳶讯7Q币/QQ幻想-30元卡一口釦 26.4S元运夷，卖眾念担运贷 引氽时间，趺 宝贝共型，全新免主声用，令到付秋.可试用10天I内容分隔标签语线的颜色线的厚度值线的宽度Iiiiarmalinn bcrfici? 22：标签用于在页面上绘制水平线文字列表和编号标签vOL、vUL标签 无序列表语法列表项内容有序列表语

7、法列表项内容弓j 无标J3文若-Microsoft Internet注册步骤：v/H4注册歩黑文件（巳编辑（查看（苗收嶽（4”Jmru maiinn n.*h cvOLtype=W vLI填写信息vLI收电子邮件VLI注册成功v/OL新人上路指南VLI如何激活会员名？ VLI如何注册淘宝会员？ v/LI注册时密码设置有什么要求？ 支付宝认证1. 填写信息2. 收电子邮件3. 注册成功新人上路指南o如何徼:活会员名？o如何注册输至会员？O注册时密码设置有什么要求?O支符莹认症预格式文木VPRE标签v|MG src=QQ.JPG” width=”459“ height*33” align=”LEF

8、T”腾讯-QQ币/QQ幻想-30元卡- 口价：26.45元运费：卖家承担运费 剩余时间：5天宝贝类型：全新卖主声明：货到付款，可试用401召昱示預先已定义好格式的文本-Microsoft Internet Explorer文件:巳漏辑（查看（刃收粼工具（D帮肋Id）完毕Jnlxl-口价：26.45元运费：卖冢敢担运费別余时间：5天宝贝类型：全新卖主声明：货到时款，可试用W天！ 工我的电脑HTML中代码格式与 浏览器中显示效果一 、样超链接标签卷页面链接a标签 -链接到其他页面Ininrmalinn bcrfici? 免费注册链接的内容超链接标签A标签右务车接到其他页面链接到其他页面v /TIT

9、LE1|呂j琏摄到其他贝曲-Microsoft I.口1 x|文件（巳编揖 查看您啦辭o后退 因心免费注册登录vA href=register7registerhtmlA免费注册v/A y/我的电胞单击免费注册r之后链接到的页面va标签锚标记VpitJi Ini a rma linn bcrfici?招牟车挨标签vA标签要实现如下图所示的超链接效果，怎么办?icrosoft Internet Explorer|n| x|3 淘宝网主页-Microsoft Internet Explorer|n| x|您好,欢迎来淘宝!貝名？注册时密码谑审十么要求?o支付宝认证文件（E） 编辑（或查看（生收爾（

10、工具（D O后退因|戶搜亲贵收赢夹”KKA TrU昭里巴巴旗下网站免费注册發录新人上路站长信箱文件（巳编辑查看迪收藏工具（D 2 后退 y 回 |P搜索 收藏夹 新人上路指南腾讯-QQ币/QQF手机充值移动I 50IP卡/电话卡100 | 联通 |50 |丫我的电脑Akx C c诂厂lBlj-厂一 口价：26.运费：卖家耳二r工我的电脑点击超链接页面定位到相关位置使用锚记标签巻链接到本页面-锚记标签用于使用户“跳”到文档的某个部分- HTML的NAME属性用于创建锚标记主题名称v/A只定义NAME屈性相当于定义一个位置-为达到这种跳转效果，请在HREF参数中使用该标记主题名称

11、跳标签锚标记示例Ini a rma linn bcrfici?vA标签电子邮件链接选电子邮件链接-要链接电子邮件，可在链接标签中插入mailto:邮箱地址肆 站长信箱小结编写如下图所示效果对应的html代码3 J?目列表和I琏接的应用-Microsoft Internet Ewplorer 伺童文件（巳编辑（查看（收藏（工員（D帮助计沪 后退 冈ta c地址（b）|舀d：创 目鬲奇有序列表OL1. Windows Me2. Windows 2003无序列表UL I :Windows Windows Windows . WindowsServerServerServerServer2003200

12、320032003WebStandardEnterpriseDatacenter|主毕$我的电脑图像标签语像的基本语法-、MG src=Himages/adv_2.jpgH width=H300u height=H150wIiiiarmalinn bcrfici?滚动 V MARQUEE标签 衣滚动标签V MARQUEE齊 RQUEE scrolldelay =U100”direction=aup 滚动文字或图像,/v滚动延迟I滚动对象的|1时间 J方向J丿衣说明：- scrolldelay：表示滚动延迟时间，默认值为90。- direction：表示滚动的方向，默认为从右向左。VpitJi

13、Iiticirmalinn bcrfici?滚动V MARQUEE标签示例声明滚动文字“水平滚 动”开始，并且将会以 默认方式从右向左滚动严人-MtWiM. -Ar * ft UH Q声明滚动 文字结束/ MARQUEE scrolldelay 二”400” 氷平滚动*/MARQUEEa 垂直滚动v/MARQUEE IMG src=images/scrolAvon 化妆品 IMG src=images/scrol雅诗兰黛竺滾动丰算-Microsoft Internet Explorer(I水平向Q后退因昼I I 歹左移动 水平滚动、文件(E)編總查看(刃收藏(创垂直向|上移动图片和文字同时|

14、垂直向上移动Avon化妆品VpitJi Ininrmalinn bcrfici?表格的布局衣创建一个表格，使用. 标签 歹|JIni a rma linn bcrfici?在HTML文档中，广泛使用表格来存放网页上的文本和图像单元格Wj?pitJl Iitlormalinn Scrvjg表格表格*! ft UM Qfi论坛中应用表格论坛中应用表格文 M(E他価(E、n用聲凹q幺 II EJlUCD | Q 怜【9 vy5Oh5COV门户网站I 应用表格JK t - CAjn - f* Eff* - MM ww - ua ( x|环二(京方HBKTX化YEJ2U)曰幵JK ?F冋仝80* 寒运传

15、T iffi I 五JS1 會兄x *M07esuT HimriFKiv犯烷与刃3W対C *口1曲吃则轩 侵W席 恥内心8折IE0B弊缺饭 DonMHI BWdnW.HR 姜托疵*诲cma手&手孑nnr円 x*只ww、壬快两立心tw 纫 nwemorcTTdi*。用mj)oUt；CSL埒不却+*； tU?UJd：f4* EMca疝细am nrr 庄迟目立农二“僦百 -納QsffWfc竺一入JW松fUJW述平的兌血（HJ） igJKigiangHtiF逹（HJ、膀注士rm 主:g可o百完鼻c屁 . 畑圧3B中*曲干QH，E）蚣amagMHgE三占H （tn3kii=纽片 QQj屯千gj, 咅圧人

16、也一子、fjjgg0丄ABflai如他 /tuati1 -_人_席购“酬平 Wf BIUlzrL 龙 XXC1 +尢勻护 不.*宿龙_人31品 士公JBEHn MTET个力l人 5FJLt fgl 却表格应用场合-论坛-门户网站-购物网站购物网站 应用表格Ini a rma linn bcrfici?如何创建表格VIABLE border=”2” wTR 移动 v /TD 联通 v /TD 铁通 v /TD TR*|IBM vTD 惠普 v /TD vTD 华硕 v/TD v/TABLE务基丰表格- Micro. 1-Jn| 刈文件（已編辑（或血IIIA萍移动联通铁通霁IBM后;曰华硕1 32

17、我的电脑1创建跨行跨列的表格Wo pit JI Iitlormalinn bcnico vTD手机充值、IP卡v/TD办公设备、文具v/TD vTD rowspan二”2”各种卡的总汇v/TD 铅笔 v /TD 彩笔 v /TD 打印 v /TD 刻录 v /TD 手机* IP卡办公设备、文具各种卡的总j匚打印刻录Iiii a rma linn Scnicc设置表格的尺寸和边框width用来设置表格的宽度 height用来设置表格的高度border用来设置表格边框尺寸大小 品牌商城v/TD笔记本电脑v/TD办公设备、文具、耗材v/TD 华硕v/TD刻录盘v/TD  v/TRvTR |

18、bgcolor=”#EBEFFF|bgcolor属性用来设置表格、行、列 的背景色。“#EBEFFF”是用RGB表 示的一种颜色值，RGB指的是红绿 蓝，下图就是RGB颜色对照表。vTD colspan=”3” 笔记本电脑v/TDvTDcolspan二“3” bgcolor=yellow”办公设备、文具、耗材v/TDay集市品牌商城二手闲置笔记本电脑办翠殳备、文具、耗材IBM惠昔华硕打印机刻录盘墨盒设置对齐方式ILE width=,350M height=M100- border=M2n bacKground=images/type_backjpg align属性用来设置表 格、行、列的对齐方

19、式一  办公设备、文具、耗材v/TD 惠普v/TDa华硕v/TDloooi 笔记本电脑品牌商城二手闲置!办公设备、文具、耗材|惠普华硕打印机刻录盘打印机v/TD刻录盘v/TD使用表格进行布局入们为啥对电视咽叫淘宝网首届翠友会!比荃尼美女激惰瘪滩想做最闪亮的呱阳千亲中奖机会有你吗vTD width*285” v/TR人们为啥对电视吼叫 Ininrmalinn bcrfici?表格的边框、填充、间距属性border（边框的厚度）设置表格的边框、填充和间距VpitJi Ini a rma linn bcrfici?设置表格的边框、填充和间距屈性border属性用来设置表 格外框宽度 cel

20、lspacing属性用来设 置表格内框宽度 cellpadding属性用来 、设置表格内彊充距离丿LE |cellspacing=“5” cellpadding=X0” border=“4” |background=images/type_back.jpg   Ininrmalinn bcrfici?填充之后 的效果电齐 编写如下图所示效果对应的HTML代码表格的高度、宽 度、背景图像、 边框和填充属性Ininrmalinn bcrfici?宝贝类目集帀品牌商城二手闲置店舗阿里巴巴旗下找要买 找要买 我淘宝您好，欢迎来淘宝！行的背景色J单元格居中对齐IJMb* Q Aflft小结 屯

21、创建表格最少需要那三个标签?牲简述表格的基本结构。衣跨行跨列的表格，主要在什么情况下使用？ 选给你一个表格，你会从哪些方面进行美化?VpitJi Ini a rma linn bcrfici?f收集信息注册用户 回冷Q*处久.強血子伶令z街me芙总祖诅经化口战;十冊.电丹m.iRirg 子dPMv nww!Mtv4wnFa 审祝八.一Ge于ei4.FMM入一 上BiVxA7trM-t.:7人03PK；W.MKk-rX4Rr rstrixifimnSlliobJb .crjQbf文wn w uggeno io *vj trcAj r*fC；*l 祁祐人一連&的5-Or-eT .TbXH. . 个

22、4Mf,W甩TiTNlUg. t. &础 3-)&mt uirtt 八&gmxa：Hg.70yr*mia 二& Uk,PFW沏vn：力久常令d CWH表单的典型应用注册用户反馈信息isg*MFi r*craE位朋屯滋frw 谖綁”勺厅吋 rtmnixrM 的X症收集信息反馈信息为网站提供搜索工具厂尿ZV0豆b/JS:ErZJttiB也gEEmortt*gfJ表单的基木语法巻表单标签里面最基本也是最重要的两个属 个生：action 利J postZ1XFORM action=http: method二post7ACTIONVpitJi Ini a rma linn bcrf

23、ici?指定提交后，由服务器 上那个处理程序处理 -1ACTION = “URL指定向服务器提交的方法般为post或get方法，post方法比较安全METHOD =upost 或 get表单元素控件的名称控件的初始值/ /af、 控件的初始控件中输入的控件是否被宽度最多字符个数选中Jj v/fct /指定元素的类型，可 为TEXT、RADIO、SUBMIT 等 、Iiiiarmalinn bcrfici?表单元素表单元素屈于表单，在写的过程屮，一般将表单元素放入表单内单选按钮 (RADIO)复选框(CHECKBOX)单行文本输后退 0 凹团吵 入框(TEXT)丈件E) 编转 查看(也收藏(登录

24、名，I密码,再次输入密码；性别:出生日則：yyyy业站知HTMLhcpSr31FPTlch6二| S 转到(可包含a-z, 0-9和下划线二密码框至少包含6个字符)一一 (PASSWORD)厂聊天 厂玩游叱下拉列表(SELECT) J年| 选桂月粉1二月 dd日重置按钮 (RESET)垂 填 11同怠萨服务条款，販洼册信息 丄阿谟润宝网服务协议提交按钮(SUBMIT)IJ多行文本框(TEXTAREA)亩服务协谏取方为淘宝与淘宝网用户，牛服务协说只有台同效力。仝I淘主豹衩利和义务S淘宝有义务左现有枝术上维护整个网上交易平台的正常运行，并勢力提升和改进抄术，使 尸网上交易活动的顺利。2.对用户在洼

25、册使用淘宝网上交易平台中所退到的与交易前注删有关的问题茨反映的悄况，闰主应及时作出回复。“完毕/我的电脑VpitJi Ininrmalinn bcrfici?inputinputinputinputinputinputinputinputinput type= password / type= hiddenr, / type=radio / type=checkbox / type=fileH / type=button/ type=reset / type=submit / type=image /-v/一ZZTi 屯 表单元素一共有12个，包括10个i叩ut标签和2个其它标签FORM ac

26、tion二“” method二“post” ! -隐藏域- !单选框-!文件上传框一 !普通按钮 !表单提交按钮-,选综合以上知识点写一个注册页面VpitJi Ininrmalinn bcrfici?RADIO JTEXTAREA J申请表JXT姓有 IPASSWORDSELECTSUBMIT i童養”包挤薪*待謡一 T住地点等。二JCHECKBOX I密码：r感兴趣的职位：匕We匕设计 We匕幵发 其他要求：在网页设计中，表单的主要用途有哪些?框架框架集页面(FrameSet.htm) 11(文件(E)S(E)查看(刃收眈 工具ID XtO框架的边框导航栏

27、左侧框架(left.htm广告栏顶部框架(top.htm)3客户电心知识堂首页 注JW&认证知识堂AlfeWffiH 犒入用尸45系HIME输入萤证码占册&认证|买却助各KE茱庫面 Mutx-盂池黑羌注幕舌霍莹的鸟员且負体的躡如賢I网上用.支付宝认证(包括支付毎个人认饪和支付丑两态 -力什么稷验科m#明墓对馬,却礎示莪希入借窝厂a如何徼活合员名？.班1代辻曲祠建詡？.幹册讦鬲藹述告帛F么要求?您好，欢迎未漓宝!5宝阿里巴巴愼卞咖T详细内容页 面右侧框架 (main.htm)个人筮料修改r厂厂厂框架使用场合Ini a rma linn bcrfici?WopitJl Iitlo

28、rmalinn bcnico框架的基本结构框架页面的基本语法将窗口分割成左中右3个部分，可选frameset将窗口分割成上边框尺下2个部分，可选寸大小沧 50%,第二丁窗口要 显示的网页如何创建多个复杂的窗口实现如下图所示的窗口，该如何制作?耒更面-Microsoft Internet Explorer、成上下两个窗口2、把下面的窗口分成 左右两个窗口淘宝网您好, top1 窗 口客户中心知识堂注丿lpI宜丈傍曲个人支科修政知识堂首页 注册&认证辜受淘宝网免芬冏上女易乐挾.并且在松人气的社区尽晴交流誉旳网上慚经 验.您需要先注;W曲为曲宝的含员.耳体的步殊如下，I- (n ( ( -anAA*

29、ti：u 入用户幺和*i 入萤妊码 认嚴势眇议:Mfifk right窗口.年助吋密羽讲讶有ti么要平厂.十习手衣荷C靭扶交符卡不;I迖证和克讨雪冏衣认证.茹什7祓蚯無咱勇更对丽折提京较轿入暦快牛VpitJi Ini a rma linn bcrfici?Iitlormalinn Scrvi如何创建多个复杂的窗口创建多个复杂的窗口实现步骤如下:1创建一个HTML页面“top.html”top.html后退” 卫固 於 Q茬才二收效果图TP呵里巴巴核下闷沾您好.欢迎乘淘宝|*3 顶部广告貢-Microsoft Internet Explorer文件金收液(曲工且衲旳卜2、创建一

30、个 HTML 页面 “left.html”陶宝网客户中心3、创建一个 HTML 页面 Yight.html”left.html效果图些亦冊& 认证-MicrosoftlnternetExplorerright.html效果 J/牛(E 編辑查看(刃收藏(4工具(I) 帮助(H)彳整退 Q 凶虚I血|上搜索 收藏夹& |甌而知识堂首页 注册&认证享受淘宝网免费网上交易乐趣，并且在超人气的社区尽情交 流您的网上购物经验，您需要先注册成为淘宝的会员，具体 的步骤如下：点击免费注务转入用户名和邮箱輪入鑿证码确认巌务协议登录芫毕/我的电脑禁止调整 框架大小如何创建多个复杂的窗口4、新建多框架HTML页面

31、乍ame_Sets.html!/框架名称，便于超 文本链接锚标签 target属性所引用如何设置窗口链接的显示位置rw 如果在同一个页面中，要实现在一个框架窗口中的 超链接页面出现在另一个框架窗口中，如何实现？如何设置窗口链接的显示位置尙target 1标窗口属性target属性指定了所链接 的文件出现在名称为窗 k 口名”的框架窗口里。target属性指定了所链接的文件出现 | 在名称为“rightframe”的框架窗口里 V- name=M显示的窗口名” )href=Mright.html, target=MrightframeM zIni nrma linn Scnicc如何设置窗口链接

32、的显示位置r IMG src=images/buy.jpgM width=160M height=,32 Iiiiarmalinn bcrfici?小结编写如下图所示效果对应的html代码frame sets.htmlright1.html 或 right2.htmllefthtml Ji 1如馄虧力top.htmlVpitJi Ininrmalinn bcrfici?选表单中提交数据的方法有那两种及其区别？辿表单里有哪些常用的表单元素？辿创建一个框架页面至少需要哪两个标签?选t ar get设定目标资源所要显示的窗口,其取值可以为哪些？ 辿简述创建一个多框架页面所需的主要步骤。Ininrma

33、linn bcrfici?总结& HTML文档结构却网页描述标签vmeta遊控制文本标签一 一 -一 vp、- 却图像标签、滚动标签却表格标签、表格布局 却表单-表单的提交方式，提交处理路径 -10个表单元素、两个标签却页面框架WrpitJl Iitiormaiinn Sen-ice武汉微普信息服务有限责任公司CSSw * mJ I . g o mepull hiiomtion Scivicccss样式表农CSS样式表也叫级联样式表，它是HTML的美容师，可 以改变HTML页面的样式-会创建统一外观的字体文本-会创建无下划线的超连接样式-会创建个性化的表格-会创建个性化的表单Ininrmalinn bcrfici?为什么需要css样式表农HTML标签的外观样式比较单一-颜色只有黑白-字体类型和大小无变化农样式表的作用相当于华丽的衣服步舉龙辽 +內 承+Bng j不皿直好(*诫oen方裕刘n。0肚 :二；” 电Q |.二 Q 爲0