HTML5+CSS3移动Web开发实战(第2版).pptx

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2022/4/4 Monday,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2022/4/4 Monday,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2022/4/4 Monday,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2022/4/4 Monday,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2022/4/4 Monday,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2022/4/4 Monday,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2022/4/4 Monday,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2022/4/4 Monday,#,单元,1,跨平台的网站首页设计,HTML5,的语义化标签及属性可以让开发者非常方便地实现清晰的,Web,页面布局，加上,CSS3,的效果渲染，使快速创建丰富灵活的,Web,页面变得相对简单。,本单元通过对网站首页设计的探析与训练，重点介绍,HTML5,网页的基本结构及组成元素、,HTML5,的语义和结构标签、,声明等内容。读者应学会,CSS,样式的定义方法与样式表的插入方法，掌握网站首页的设计方法。,实例探析,任务,1-1,探析携程旅行网的首页,【效果展示】,携程旅行网首页,0101.html,的浏览效果如图,1-1,所示。,携程旅行网首页,0101.html,的主体结构包括,4,个组成部分，分别为顶部、中部、底部和侧边栏，顶部内容为广告图片，中部内容为多个图片超链接，底部包括多个导航链接，侧边栏为长形按钮。,【网页探析】,1,网页,0101.html,的,HTML,代码探析,携程旅行网首页,0101.html,的,HTML,代码如表,1-1,所示。,图,1-1,携程旅行网首页,0101.html,的浏览效果,序号,HTML,代码,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,酒店预订,机票预订查询,旅游度假,-,携程旅行网无线版官网,机票,火车票,用车,酒店,财富中心,攻略,旅游,门票,周末游,表,1-1,网页,0101.html,的,HTML,代码,序号,HTML,代码,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,下载客户端,我的携程,ENGLISH,电脑版,意见反馈,携程旅行,单击下方图标，选择“添加至主屏幕”,续表,网页,0101.html,主体结构的,HTML,代码如表,1-2,所示。该网页主体结构包括,4,个组成部分，分别为顶部、中部、底部和侧边栏，其中顶部结构使用,标签实现，中部结构使用,标签实现，底部结构使用,标签实现，侧边栏使用,标签实现。,序号,HTML,代码,01,02,03,04,05,06,07,08,表1-2网页0101.html主体结构的HTML代码,2网页0101.html的CSS代码探析,网页,0101.html,通用的,CSS,代码如表,1-3,所示。,序号,CSS,代码,序号,CSS,代码,01,02,03,04,05,html,body,nav,ul,li,h2,padding:0px;,margin:0px;,body,06,07,08,09,10,min-width:320px;,font:normal 14px/1.5em Tahoma,Lucida Grande,Verdana,Microsoft Yahei,STXihei,hei;,color:#000;,表1-3网页0101.html通用的CSS代码,序号,CSS,代码,序号,CSS,代码,11,12,13,14,15,16,17,18,19,20,21,background:#e8ff;,overflow-x:hidden;,html,body,height:100%;,li,list-style-type:none;,img,22,23,24,25,26,27,28,29,30,31,32,border:none,a,color:#000;,text-decoration:none;,h:link,h:visited,color:#fff;,续表,网页,0101.html,主体结构的,CSS,代码如表,1-4,所示。,序号,CSS,代码,序号,CSS,代码,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,header,position:relative;,width:100%;,min-height:50px;,overflow:hidden;,background:#e2fc,.nav-list,padding:10px 10px 5px 10px;,.nav-list:after,content:0020;,display:block;,clear:both;,height:0;,overflow:hidden;,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,footer,line-height:27px;,text-align:center;,font-size:12px;,.tool-box,margin:0 10px;,padding-bottom:5px;,.c_pop_wrap,position:fixed;,left:10px;,right:10px;,z-index:1000;,bottom:12px;,/*display:none;*/,表1-4网页0101.html主体结构的CSS代码,网页,0101.html,顶部内容的,CSS,代码如表,1-5,所示。,序号,CSS,代码,序号,CSS,代码,01,02,03,04,05,06,07,.img-item,height:100%;,overflow:hidden;,float:left;,margin:10px 0px 0px;,padding:0px;,08,09,10,11,12,13,14,.img-size,width:1280px;,height:110px;,.item img,width:100%;,表1-5网页0101.html顶部内容的CSS代码,序号,CSS,代码,序号,CSS,代码,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,.nav-list li,position:relative;,float:left;,margin-bottom:5px;,-webkit-box-sizing:border-box;,-moz-box-sizing:border-box;,-ms-box-sizing:border-box;,box-sizing:border-box;,.nav-list li:before,content:;,position:absolute;,-webkit-transform:translate(-50%,0);,-moz-transform:translate(-50%,0);,-ms-transform:translate(-50%,0);,transform:translate(-50%,0);,background-image:,url(./images/un_ico_home.png);,background-size:170px 160px;,background-repeat:no-repeat;,.nav-list h2,position:absolute;,left:8px;,top:8px;,font:500 14px/1 Microsoft Yahei;,color:#fff;,.nav-flight,.nav-train,.nav-car,.nav-trip,.nav-ticket,.nav-week,height:70px;,.nav-hotel,.nav-fortun,.nav-strategy,height:93px;,.nav-train,.nav-car,.nav-fortun,.nav-strategy,.nav-ticket,.nav-week,border-left:5px solid#fff;,.nav-flight,.nav-hotel,.nav-trip,width:40%;,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,.nav-train,.nav-car,.nav-fortun,.nav-strategy,.nav-ticket,.nav-week,width:30%;,.nav-flight,background-color:#368ff4;,.nav-train,background-color:#00ae9d;,.nav-car,background-color:#3;,.nav-hotel,background-color:#0fc4d9;,.nav-fortun,background-color:#e8ff;,.nav-strategy,background-color:#ff;,.nav-trip,background-color:#84d018;,.nav-ticket,background-color:#f3b613;,.nav-week,background-color:#78cdd1;,.nav-list.nav-fortun h2,.nav-list.nav-fortun h,color:#ff9913;,.nav-list.nav-fortun h2,top:66px;,表1-6网页0101.html中部内容的CSS代码,序号,CSS,代码,序号,CSS,代码,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,left:0;,width:100%;,text-align:center;,.nav-flight:before,top:24px;,left:60%;,width:60px;,height:35px;,background-position:0 0;,.nav-train:before,top:36px;,left:50%;,width:50px;,height:20px;,background-position:-70px 0;,.nav-car:before,top:30px;,left:50%;,width:35px;,height:31px;,background-position:-130px 0;,.nav-hotel:before,top:30px;,left:60%;,width:58px;,height:44px;,background-position:0-40px;,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,.nav-fortun:before,top:24px;,left:50%;,width:24px;,height:35px;,background-position:-60px-30px;,.nav-strategy:before,top:34px;,left:50%;,width:34px;,height:34px;,background-position:-120px-80px;,.nav-trip:before,top:25px;,left:60%;,width:40px;,height:34px;,background-position:0-90px;,.nav-ticket:before,top:32px;,left:50%;,width:50px;,height:26px;,background-position:-65px-70px;,.nav-week:before,top:32px;,left:50%;,width:49px;,height:26px;,background-position:-50px-100px;,续表,网页,0101.html,底部内容的,CSS,代码如表,1-7,所示。,序号,CSS,代码,序号,CSS,代码,01,02,03,04,05,06,.tool-cn,margin-bottom:3px;,padding:8px 0;,height:24px;,background-color:#fff;,line-height:24px;,07,08,09,10,11,12,text-align:center;,.tool-cn a,display:inline-block;,padding:0 5px;,line-height:1;,表1-7网页0101.html底部内容的CSS代码,序号,CSS,代码,序号,CSS,代码,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,color:#333;,.tool-cn.link-mc,position:relative;,margin-left:5px;,padding-left:35px;,border-left:1px solid#c4cbce;,.tool-cn a.link-tel,color:#0e68d5;,.tool-cn.link-mc:before,content:;,position:absolute;,top:-2px;,left:10px;,width:16px;,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,height:16px;,background:,url(./images/un_ico_home.png),no-repeat-30px-130px;,background-size:170px 160px;,.computer,margin-left:-4px;,.tool-ver a,padding:0 18px;,text-align:center;,color:#333;,footer p,margin:0;,line-height:18px;,color:#626262;,续表,网页,0101.html,侧边栏的,CSS,代码如表,1-8,所示。,序号,CSS,代码,序号,CSS,代码,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,.c_pop,position:relative;,z-index:9;,height:100%;,margin:0 10px;,border-radius:8px;,background:#000;,opacity:0.7;,filter:alpha(opacity:70);,.c_pop_trigon,position:absolute;,width:0;,height:0;,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,.c_pop_trigon,z-index:-1;,left:50%;,margin-left:-6px;,bottom:-8px;,border-top:8px solid#000;,border-left:8px solid transparent;,border-right:8px solid transparent;,.c_pop_cont,padding:10px;,font-size:600;,text-align:center;,color:#fff;,表1-8网页0101.html侧边栏的CSS代码,知识梳理,1HTML5印象,HTML5,是万维网的核心语言，它的第一份正式草案公布于,2008,年,1,月,22,日。,2012,年,12,月,17,日，万维网联盟（,World Wide Web Consortium,，,W3C,）正式宣布凝结了大量网络工作者心血的,HTML5,规范正式定稿。,W3C,的发言稿称：“,HTML5,是开放的,Web,网络平台的奠基石。”,2013,年,5,月,6,日，,HTML 5.1,正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言（,Hyper Text Markup Language,，,HTML,）。在这个版本中，新功能不断推出，以帮助,Web,应用程序的开发者努力提高新元素的交互操作性。,支持,HTML5,的浏览器包括,Chrome,（谷歌浏览器）、,Firefox,（火狐浏览器）、,IE9,及其更高版本、,Safari,、,Opera,等。傲游浏览器（,Maxthon,）以及基于,IE,或,Chromium,（,Chrome,的工程版或称实验版）所推出的,360,浏览器、搜狗浏览器、,QQ,浏览器、猎豹浏览器等国产浏览器同样具备支持,HTML5,的能力。,2CSS3印象,CSS,（,Cascading Style Sheet,）可译为层叠样式表或级联样式表，是一组格式设置规则，用于控制,Web,页面的外观。,在制作网页时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现精确控制。这时，只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者不同网页的外观和格式。,CSS3,是,CSS,技术的升级版本。,CSS3,语言开发是朝着模块化发展的。,CSS3,将完全向后兼容，网络浏览器也还将继续支持,CSS2,。,CSS3,可以使用新的可用的选择器和属性，可实现新的设计效果（例如渐变、交互和分栏）。,3HTML5的主要特性,（,1,）语义特性（,Class,：,Semantic,）,HTML5,赋予网页更好的意义和结构，更加丰富的标签将随着对,RDFa,、微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的,Web,。,（2）本地存储特性（Class：Offline&Storagf）,基于,HTML5,开发的网页,APP,拥有更短的启动时间和更快的联网速度。这得益于,HTML5 APP Cache,及本地存储功能。,（3）设备兼容特性（Class：Device Access）,自,Geolocation,功能的,API,（,Application Programming Interface,，应用程序编程接口）文档公开以来，,HTML5,为网页应用开发者们提供了更多功能上的优化选择。,HTML5,提供了前所未有的数据与应用接入开放接口，使外部应用可以直接与浏览器内部的数据相连，如视频影音可直接与,Microphones,及摄像头相连。,（4）连接特性（Class：Connectivity）,更有效的连接使得基于页面的实时聊天、更快速的网页游戏体验、更优化的在线交流得到了实现。,HTML5,拥有更有效的服务器推送技术，,Server-Sent Event,和,WebSockets,就是其中的两个特性。这两个特性能够帮助我们实现从服务器将数据“推送”到客户端的功能。,（,5,）多媒体特性（,Class,：,Multimedia,）,支持网页端的,Audio,、,Video,等多媒体功能，与各种,APPS,（,Application Service,，应用服务）相得益彰。,（,6,）三维、图形及特效特性（,Class,：,3D,Graphics&Effects,）,基于,SVG,、,Canvas,、,WebGL,及,CSS3,的,3D,功能，让用户惊叹于,HTML5,在浏览器中所能呈现的惊人视觉效果。,（,7,）性能与集成特性（,Class,：,Performance&Integration,）,没有用户会永远等待你的,Loading,（加载）,HTML5,会通过,XMLHttpRequest2,等技术，解决以前的跨域等问题，帮助你的,Web,应用和网站在多样化的环境中更快速的工作。,（,8,）,CSS3,特性（,Class,：,CSS3,）,在不牺牲性能和语义结构的前提下，,CSS3,中提供了更多的风格和更强的效果。此外，较之以前的,Web,排版，,Web,的开放字体格式（,Web Open Font Format,，,WOFF,）也提供了更高的灵活性和控制性。,4HTML5的主要变化,HTML5,提供了一些新的元素和属性，如,（网站导航块）和,。这种标签将有利于搜索引擎的索引整理，同时更好地帮助小屏幕装置和视障人士使用。除此之外，,HTML5,还为其他浏览要素提供了新的功能，如,和,标记。,（,1,）取消了一些过时的标记,（,2,）将内容和展示分离,（,3,）一些全新的表单输入对象,（,4,）全新的、更合理的,Tag,（,5,）本地数据库,（,6,）,Canvas,对象,（,7,）浏览器中的真正程序,5HTML5新增的标签和废除的标签,HTML5,中，新增加了多个标签元素，同时也废除了多个标签元素。,（,1,）,HTML5,新增的标签,HTML5,新增的标签及其功能说明如表,1-9,所示。,序号,新增标签名称,新增标签的功能说明,01,表示页面中的一个内容区块，如章节、页眉、页脚或页面的其他部分。可以和,、,等元素结合起来使用，表示文档结构,02,表示页面中一块与上下文不相关的独立内容，如一篇文章,03,表示,元素内容之外的并与,元素内容相关的辅助信息,04,表示页面中一个内容区块或整个页面的标题,05,表示对整个页面或页面中的一个内容区块的标题进行组合,表1-9HTML5新增的标签及其功能说明,序号,新增标签名称,新增标签的功能说明,06,表示页面或页面中一个内容区块的页脚,07,表示页面中导航链接的部分,08,表示一段独立的流内容，一般表示主体文档内容中的一个独立单元。使用,元素为,元素组添加标题,09,定义视频，如电影片段或其他视频流等,10,定义音频，如音乐或其他音频流,11,用来嵌入内容（包括各种媒体），格式可以是,MIDI,、,WAV,、,MP3,、,FLASH,等,12,主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字，典型应用搜索结果中高亮显示搜索关键字,13,表示运行中的进程，如等待中、请稍后等，可以使用,元素显示,JavaScript,中耗时函数的进程,14,表示日期或时间，也可以两者结合使用,15,由一个或多个字符（需要一个解释,/,发音）和一个提供该信息的,元素组成，还包括可选的,元素,16,定义字符（中文注音或字符）的解释或发音,17,在,注释中使用，以定义不支持,元素的浏览器所显示的内容,18,表示软换行。与,元素的区别：,br,元素表示此处必须换行；,表示浏览器窗口或父级元素足够宽时（没必要换行时）不换行，而宽度不够时主动在此处换行,19,定义图形，如图表和其他图像。,元素只是图形容器（画布），必须使用脚本来绘制图形,20,表示用户能够调用的命令。该标签可以定义命令按钮，如单选按钮、复选框或按钮。只有当,元素位于,元素内时，该元素才是可见的，否则，不会显示这个元素，但是可以用它规定键盘快捷键,21,用于定义命令的列表或菜单列表。该标签用于上下文菜单、工具栏以及用于列出表单控件和命令,22,用于描述文档或文档某个部分的细节，可以与,标签配合使用，,可以为,定义标题。标题是可见的，用户单击标题时，会显示出,标签定义的内容。,应该是,的第一个子元素。目前只有,Chrome,浏览器支持,标签,23,定义选项列表。与,元素配合使用该元素来定义,可能的值。,及其选项不会被显示出来，它仅仅是合法的输入值列表。使用,元素的,list,属性来绑定,24,定义可选数据的列表。,作为树列表来显示。如果把该元素的,multiple,属性设置为,true,，则可以在列表中选取一个以上的项目,25,规,定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器,26,定义不同类型的输出，如脚本的输出,27,该标签为媒介元素（如,和,）定义媒介资源,续表,（,2,）,HTML5,废除的标签,HTML5,废除的标签如表,1-10,所示。,序号,被废除的标签,替代方案,序号,被废除的元素,替代方案,01,、,、,、,、,、,、,、,使用,CSS,代替,02,、,、,使用,框架或服务器方创建的由多个页面组成的复合页面代替,表1-10HTML5 废除的标签,序号,被废除的标签,替代方案,序号,被废除的元素,替代方案,03,使用,替代,08,、,、,、,等标签,只有部分浏览器支持,04,使用,替代,09,使用,GUIDS,替代,05,使用,form,与,相结合的方式替代,10,使用,替代,06,使用,替代,11,使用“,text/plian,”,MIME,类型替代,07,使用,替代,续表,6HTML5新增和废除的标签属性,HTML5,中，在新增加和废除很多标签元素的同时，也增加和废除了很多属性。,（,1,）,HTML5,新增的属性,HTML5,新增的属性如表,1-11,所示。,序号,属性类型,新增的属性,属性说明,01,与表单相关的属性,对,（,type=text,）、,、,与,指定,autofocus,属性,以指定属性的方式让元素在画面打开时自动获得焦点,02,对,（,type=text,）、,指定,placeholder,属性,对用户的输入进行提示，提示用户可以输入的内容,03,对,、,、,、,、,与,指定,form,属性,声明属于哪个表单，然后将其放置在页面的任何位置，而不在表单之内,04,对,input,（,type=text,）、,textarea,指定,required,属性,表,示用户提交时进行检查，检查该元素内必定要有输入内容,05,为,标签增加几个新的属性：,autocomplete,、,min,、,max,、,multiple,、,pattern,与,step,还有,list,属性与,元素配合使用。,元素与,autocomplete,属性配合使用。,multiple,属性允许上传时一次上传多个文件。,pattern,属性用于验证输入字段的模式，其实就是正则表达式。,step,属性规定输入字段的合法数字间隔（假如,step=3,，则合法数字应该是,-3,、,0,、,3,、,6,，以此类推）。,step,属性可以与,max,及,min,属性配合使用，以创建合法值的范围,06,为,、,元素增加,formaction,、,formenctype,、,formmethod,、,formnovalidate,与,formtarget,属性,用户重载,元素的,action,、,enctype,、,method,、,novalidate,与,target,属性。为,fieldset,元素增加,disabled,属性，可以把它的子元素设为,disabled,状态,07,为,、,、,增加,novalidate,属性,可,以取消提交时进行的有关检查，表单可以被无条件地提交,08,与链接相关的属性,为,、,增加,media,属性,规定目标,URL,是为什么类型的媒介,/,设备而进行优化的。该属性可接受多个值，但只能在,href,属性存在时使用,09,为,增加,herflang,和,rel,属性,hreflang,属性规定在被链接文档中的文本语言。只有当设置了,href,属性时，才能使用该属性。,rel,属性规定当前文档与被链接文档,/,资源之间的关系。只有当使用,href,属性时，才能使用,rel,属性,表1-11HTML5新增的属性列表,序号,属性类型,新增的属性,属性说明,10,与链接相关的属性,为,增加,size,属性,size,属性规定被链接资源的尺寸。只有当被链接资源是图标时（,rel=icon,），才能使用该属性。该属性可接受多个值，并且值由空格分隔,11,为,增加,target,属性,主要是保持与,元素的一致性,12,其他属性,为,增加,reversed,属性,它指定列表倒序显示,13,为,增加,charset,属性,定义,HTML,文档的字符集,14,为,增加,label,和,type,属性,label,属性规定菜单的可见标签，,type,属性规定要显示哪种菜单类型,15,为,增加,scoped,属性,它允许我们为文档的指定部分定义样式，而不是整个文档。如果使用“,scoped,”属性，那么所规定的样式只能应用到,元素的父元素及其子元素,16,为,增加,manifest,属性,开发离线,Web,应用程序时，它与,API,结合使用，定义一个,URL,，在这个,URL,上描述文档的缓存信息,17,为,增加,sandbox,、,seamless,和,srcdoc 3,个属性,用来提高页面安全性，防止不信任的,Web,页面执行某些操作,续表,（,2,）,HTML5,废除的属性,HTML4,中的一些属性在,HTML5,中不再被使用，这些属性被其他属性或其他方式替代，如表,1-12,所示。,序号,在,HTML4,中使用的属性,使用该属性的元素,在,HTML5,中的替代方案,01,rev,、,rel,02,charset,、,在被链接的资源的中使用,HTTP Content-type,头元素,03,shape,、,coords,使用,元素代替,元素,04,longdesc,、,使用,元素链接到较长描述,05,target,多余属性，被省略,06,nohref,多余属性，被省略,07,profile,多余属性，被省略,08,version,多余属性，被省略,09,name,id,10,scheme,只为某个表单域使用,scheme,11,archive,、,chlassid,、,codebose,、,codetype,、,declare,、,standby,使用,data,与,type,属性类调用插件。需要使用这些属性来设置参数时，使用,param,属性,12,valuetype,、,type,使用,name,与,value,属性，不声明其,MIME,类型,13,axis,、,abbr,、,使用以明确简洁的文字开头、后跟详述文字的形式。可以对更详细内容使用,title,属性，来使单元格的内容变得简短,14,scope,在被链接的资源的中使用,HTTP Content-type,头元素,15,align,、,、,、,、,、,、,、,、,、,、,使用,CSS,样式表替代,表1-12HTML5废除的属性列表,序号,在,HTML4,中使用的属性,使用该属性的元素,在,HTML5,中的替代方案,16,alink,、,link,、,text,、,vlink,、,background,、,bgcolor,使用,CSS,样式表替代,17,align,、,bgcolor,、,border,、,cellpadding,、,cellspacing,、,frame,、,rules,、,width,使用,CSS,样式表替代,18,align,、,char,、,charoff,、,height,、,nowrap,、,valign,、,、,使用,CSS,样式表替代,19,align,、,bgcolor,、,char,、,charoff,、,height,、,nowrap,、,valign,、,width,、,使用,CSS,样式表替代,20,align,、,bgcolor,、,char,、,charoff,、,valign,使用,CSS,样式表替代,21,align,、,char,、,charoff,、,valign,、,width,、,使用,CSS,样式表替代,22,align,、,border,、,hspace,、,vspace,使用,CSS,样式表替代,23,clear,使用,CSS,样式表替代,24,compace,、,type,、,、,使用,CSS,样式表替代,25,compace,使用,CSS,样式表替代,26,compace,使用,CSS,样式表替代,27,width,使用,CSS,样式表替代,28,align,、,hspace,、,vspace,使用,CSS,样式表替代,29,align,、,noshade,、,size,、,width,使用,CSS,样式表替代,30,align,、,frameborder,、,scrolling,、,marginheight,、,marginwidth,使用,CSS,样式表替代,续表,7HTML5语义和结构标签实例代码探析,新建,example01.html,网页文件，该网页的浏览效果如图,1-2,所示。,网页,example01.html,对应的,HTML,代码如表,1-13,所示。,图1-2example01.html网页的浏览效果,序号,HTML,代码,01,02,03,04,05,06,07,08,09,10,11,12,HTML5,专题,header,nav,article,footer padding:5px,headerwidth:300px;border:solid 1px#666;,navfloat:left;width:70px;height:180px;border-left:solid 1px#666;,articlefloat:left;width:219px;height:180px;border-left:solid 1px#666;,border-right:solid 1px#666;,footerclear:both;width:300px;border:solid 1px#666;,表1-13网页example01.html对应的HTML代码,序号,HTML,代码,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,ul,lilist-style-type:none;margin:0;padding:0;,atext-decoration:none;color:black;,导航数据,导航菜单,Home,One,Two,Three,HTML5,教程,发布日期,:,2019-10-8 09:00,相关内容,Article Aside,地址,续表,下面对表,1-13,中的,HTML,代码的结构及组成进行解析。,（