版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
项目1制作HBuilder百科页面简述HTML5。HTML5是HTML的第5代版本，是构建及现联网内容的一种语言方式，是联网的核心技术之一。简述HTML5的优势。跨平台性HTML5显著的优势在于跨平台性，用HTML5搭建的站点与应用可以PC端与动端Windows与Linux安与i0S。它可以被轻易地植到各种不同的开放平台、应用平台上。这种强大的兼容性可以显著地降低开发与运营成本。(2)增加了新特性特殊内容元素。HTML5增加了许多特殊内容元素。例如，分组元素、结构元素、内容交互元素等，有助于网站开发人员定义重要的内容，其语义化元素增加了代码的可读性。智能表单。表单是实现用户与页面后台交万主要的组成部分，HTML5新增加的表单元素，使得原本需要使用JavaScript来实现的控件，可以直接使用HTMLS的表单来实现，另外，通过HTML5的智能表单属性标签也可以实现，如内容提示、焦点处理、数据验证等功能。绘图画布。HTML5的canvas元素可以实现画布功能，该元素通过自带的API结合JavaScript在网页上绘制图形。canvas元素使得浏览器无须使用Flash、Silverlight等插件就能直接显示图形或动画图像。多媒体。HTML5增加了audio元素和video元素来实现对多媒体中的音频、视频使用的支持，只要在网页中嵌入<audio>标记和<video>标记，而无须使用第三方插件(如Flash)就可以实现音频、视频的播放。地理定位HTML5引入了Geolocation的API通过GPS或网络信息可以实现用户的定位功能，使定位更加准确、灵活。数据存储HTML5相比传统的数据存储有自己的存储方式，允许在客户端实现较大规模的数据存储。多线程。HTML5利用WebWorker将Web应用程序从原来的单线中解放出来通过创建一个WebWorker对象就可以实现多线操作。(3)化繁为简HTML5循了“简单至上”的原则，主要体现在字符集声明、文档类型声明、简化而强大的HTML5API支持、以浏览器原生能力代复杂的JavaScript代码方面。简述如何创建第一个HTML5页面。HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE，是专为前端打造的开发工具。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder的主体是由Java编写的，它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提高了HTML、JavaScript、CSS的开发效率。下面利用HBuilder制作一个简单的HTML5页面，具体步骤如下。打开HBuilder，选择菜单栏中的“文件”一“新建”“We项目”命令，如图1-2所示打开“创建Web项目”窗口。在“创建Web项目”窗口的“项目名称”输入中输入“第一个HTML5”，并选择项目存储的位置，新建名为H5的文件夹，如图1-3所示。单击“完成”按在“项管理”中将看到刚刚创的Web项目选择“第一个HTML5”项目名，在弹出的下拉列表中双击“index.html”选项，此时将出现“index.html”的默认代码如图1-4所示。在body></body>标记之间添加“这是第一个HTML5页面”文本如图1-5所示按Ctrl+S快捷键保存页面。项目2制作化妆品展示列表页面如何应用class选择器。<!DOCTYPEhtml><html><head><metacharset="UTF-8><title></title><styletype-"text/css>.red{color:#fa0303;</style></head><body><hlclass="red">我是标题标记，我是红色的。</h1><pclass"red">我是段落标记，我也是红色的。<p>1z</body>18</html>伪元素选择器包括和。before选择器；after选择器。结构化伪类选择器包括哪些？结构化伪选择器是CSS3中新增加的选择器常用的结构化伪类选择器包括only-child选择器、:first-child选择器、:last-child选择器、:nth-child(n)选择器、nth-last-child(n)选择器、:nth-last-of-type(n)选择器、:nth-last-of-type(n)选择器、:target选择器。项目3制作电商主播排行榜页面简述样式分析。排行背景:通过最外层的大盒子对页面进行整体控制，需要对其设置宽度、高度、外边距、背景、圆角和边框样式。排行:使用<div>标记控制排行整体内容，需要对其设置宽度、外边距、外上边距、圆角和阴影样式;使用<h1>标记显示图片，需要对其设置背景、宽度、高度和圆角样式;使用<0>标记控制有序列表，需要对其设置内左边距、背景、宽度和圆角样式;设置3个列表项<li>标记的宽度、高度、行高、文字大小和多重背景图像样式如何制作页面结构。制作页面结构，代码如下。<divclass"container"<divclass-"container-1"><h1></h1><ol><liclass-"center">薇娅viya</li><liclass-"center">李佳琦Austin</li><liclass-"bottom>列儿宝贝</li></ol></div></div>如何定义排行背景的样式。.container{width:350px;height:350px;margin:20pxauto;background-image:radial-gradient(ellipseatcenter,#f87b00,#fe502d);border-radius:20%border:5pxsolid#e7e4e2;3通过一个大的盒模型对页面进行整体控制，根据效果图片为其添加相应的样式。.container-1fwidth:200px;margin:0pxauto;margin-top:50px;border-radius;20px;box-shadow:10px10px10px#000;由于主播排名部分有阴影、圆角样式并且位于最外层盒模型的水平居中位置，因此，按照效果图片为其设置宽度、外边距、圆角和阴影样式。项目4制作家装行业产品展示页面简述2D转换方法。translate0:平移方法；scale0:缩放方法；skew0:倾斜方法；rotate0:旋转方法；translate0方法。简述3D转换方法。rotateX（）rotateY（）如何绑定动画。在@keyframes属性中定义了动画之后，必须使用animation属性对动画进行捆绑，否则不会产生动画效果。animation属性的语法格式如下。animation:animation-nameanimation-durationanimation-timing-functionanimation-delayanimation·语法格式iteration-countanimation-direction；上述语法格式中，animation-name用于定义要应用的动画名称，为@keyframes属性定义的动画名称;animation-duration用于定义完成整个动画效果所需要的时间，以秒或毫秒为单位;animation-timing-function用于定义动画的速度曲线，与tansition-timig-function相同:animation-delay用于定义执行动画效果之前延迟的时间，即规定动画从什么时候开始;animation-iteration-count用于定义动画播放的次数;animation-direction用于定义当前动画播放的方向。需要注意的是，使用animation属性对动画进行捆绑，同时需要规定两项动画属性:动画名称、动画的时长。项目5制作旅游网站的导航栏和banner简述HTML元素。HTML元素分为两种:块元素(block)和行内元素(inline)块元素总是独占一行，能够设置其宽度、高度、padding、margin和border属性，默认宽度是离其最近的父元素宽度的100%。常用的块有divph1h6ullifo行内元素不能独占一行，要与其他元素在同一行显示，常用的行内元素有span、a、input、strong、em、img等，大多数行内元素的宽度、高度和上/下margin不能设置。简述制作导航栏的方法。<nav><ul><li><ahref="#>网站首页</a></li>sli><ahrcf"#企业简介</a>S/li><li><ahref"#”>新闻中心</a></li><li><ahref-"#招标平台</a></li><li><ahref-"#>联系我们</a></li><ul></nav>简述定义CSS样式。1.定义全局样式*{margin:0px;padding:0px;)ulliflist-style-type:none;aftext-decoration:none;/*初始化页面*//*定义全局样式，去掉列表前的小黑点*//*定义全局样式a，下画线*/2.定义导航栏的样式navfwidth:S50px;margin:0auto;navulliffloat:lcft;width:110px;height:30px;line-height:30px;text-align:center;background-image:linear-gradient(180deg,#b2d1dc,#346b7e);navulliaffont-size:14px;color:#MfE;font-weight:bolder;letter-spacing:2px;}简述定义文字描述部分的样式。#banner-info{width:160px;height:140px;background-color:#a9adac;opacity:0.7;position:absolute:left:50pxtop:25px;#banner-infop{font-family:楷体";font-size:30px;font-weight:bolder,color:#FFFFFF;margin:20px10px;}#banner-infogreen{font-family.”楷体”;font-size:22px;color:#104c06;margin:20px5px;text-align:right;}项目6制作信息注册页面简述表单元素及属性。常用的表单元素包含label、input、button等。元素描述labellabel元素表对用户面中个的说明inputinput元素用于为基于Web表单创建交式控件，以便接来自用户的数据buttonbutton元素表示一个可单击的按钮，可以用在表单或文档其他需要使用简单标准按的地方fieldsetfeldset元素可将表单内的相关元素分组legendlegend元素用于表示它的父元素eldset的内容的标题textareatextarea元素表示一个多行纯文本编辑控件selectselect元素表示一个控件，提供一个选项列表optionoption用于定义在select或datalist元素中包含的项简述表单校验。当用户访问一个带注册表单的网站时，如果提交的输入信息不符合预期格式，则注册页面会有一个反馈信息，比如“该字段是必填的”(意思是该字段不能为空)“请填写正确的手机号码”“请输入一个合法邮地址”“密码长度应该是6至20位的，且至少包含一个大写字母及一个数字”等，这就是表单校验。表单校验可以通过多种不同的方式实现。在实践中，一般都会使用客户端校验与服务器端校验相结合的方式，以保证数据的正确性与安全性。本书侧重于讲解客户端校验。客户端校验发生在浏览器端，指的是表单数据被提交到服务器之前的校验，这种方式能实时反债用户输入的校验结果。这种类型的校验可以有两种方式:一种是JavaScript校验，这是一种可以完全自定义的实现方式;另一种是HTML5内置校验这种方式不需要使用JavaScript，而且性能更好但是不能像JavaScript那样可自定义。本节着重讲解使用HTMLS内置校验的方式。简述定义表单校验的样式。input:focus;invalid//定义input元素未校验成功的样式*/background-color:#fe7e7;}input:valid{}/定义input元素校验成功的样式*/border:1pxsolidgreen;}textarea:focus:invalid{/*定义textarea元素未校验成功的样式*/background-color:#fe7e7:}textarea:valid/定义textarea元素校验成功的样式*/border:1pxsolidgreen;、}项目7制作视频播放页面简述多媒体的格式。1.视频格式在HTML5中可以入的视频格式有以下3种。Ogg:带有Theora视频编码和Vorbis音频编码的Ogg格式。MPEG4:带有H.264视频编码和AAC音频编码的MPEG4格式。WebM:带有VP8视频编码和Vorbis音频编码的WebM格式。2.音频格式在HTML5中可以入的音频格式有以下3种。Vorbis:类似AAC音频编码的另一种免费开源的音频编码，用于代MP3的下一代音频压缩格式。MP3:一种音频压缩格式，用来大幅度地减少音频数据量。WAV:在录音时使用的标准的Windows文件格式，属于一种无损的音乐格式。简述视频、音频中的source元素。1.使用source元素添加视频的语法格式如下。videocontrols-"controls"><sourcesrc="视频文件地”type-"媒体文件类型/格式><sourcesrc-"视频文件地址”type-"媒体文件类型/格式>..</video>2.使用source元素添加音频的语法格式如下<audiocontrols="controls">Ssourcesrc="音频文件地址”type="媒体文件类型/格式"式><sourcesrc"音频文件地”type"媒体文件类/格式式>...S/audio>简述制作视频放列表的方法。<divclass="videolist"><p>视播放列表:</p><ul><li><ahref-"#news1"><imgsrc-"img/1jpg</a</li><li><ahref-"#news2"<igsrc!ig/2jpg".</a></li><li><ahref-"#news3"-<imgsrc="img/3.jpg/a></li></ul></div>简述制作视频播放的方法。<divclass="mn"><divclass-"abc"id-"newsI"><videosrc="video/1mp4"controlsautoplayloop></video></diy><divclass="abc"id-"news2"><videosrc="video/2mp4"controlsautoplayloop2</video>/div><divclass="abc"id-'news3"><videosrc!video/3mp4"controlsautoplayloop></video></div></div>项目8制作垃圾分类页面简述什么是视口。视口是指网页的可视区域，它定义了浏览器能显示内容的屏幕区域。简述媒体查询。使用媒体查询可以根据不同的设备特征应用不同的样式，比如，设备的宽度、高度、像素比等使页面在不同终端设备下达到不同的渲染效果。媒体查询有两种方式。第一种是利用link元素添加media属性的方式。第二种是@media方式，这种方式的HTTP请求少一些，但HTML文件会变大。简述定义div.garbage-tips部分的样式。/*定义div.garbage-tips部分的样式*/garbage-tips{width:100%;clear:both;padding:lem;.tips-title>span{font-weight:500;line-height:24px;font-size:20px;color:#616161;}.feed{clear:both;margin:24px0;}.feed-thumbnail{fwidth:100px;float:left;margin-right:lem;}feed-title!font-size:1.5em;font-weight:bolder:}..feed-textffont-size:1em;..。.-.feed-titlea{text-decoration:none;color:#666;padding-top:1.5em;padding-bottom:1.5em;}.feed-titlea:hover,.feed-titlea:active{text-decoration:underline;}项目9制作个人信息页面简述justify-content属性。justify-content属性定义了项目在主轴上的对齐方式，也就是说，浏览器如何分配顺着父容器主轴的弹性元素之间及其周围的空间。使用方法如下。.container!{justify-content:flex-startflex-end|center|space-betweenspace-around;}justify-content属性的默认值为flex-stat，表示左对齐;flex-end表示右对齐center表示居中对齐;space-between表示两端对齐，即项目之间的间隔都相等;space-around表示每个项目两侧的间隔相等，即项目之间的间隔比项目与边框之间的间隔大一倍。下面通过例9-4对justify-content属性进行讲解。简述align-items属性。align-items属性用于定义项目在交叉轴上如何对齐align-items属性将所有直接子节点上的align-self属性的属性值设置为一组，align-self属性用于置项在其包含块中直方向上的对齐方式align-items属性的使用方法如下。Container{align-items:flex-start!flex-end!center!baselinestretch;}简述align-self属性。align-self属性允许单个项目有与其他项目不一样的对齐方式，可盖align-items属性。该属性的默认值为auto，表示继承父元素的aigu-items属性，如果没有父元素，则等同于stretch。其使用方法如下。item{align-self:autoflex-startflex-endcenterlbaseline|stretch;}注意:float、clear和vertical-align属性对伸缩项目没有作用。项目10制作物流公司响应式网站简述页面结构搭建的内容。完成视口的配置；完成自定义的CSS文件(index-styleess)和JavaScript文件(jquery.minjs)的引入；完成页面中模块的分配，即最外层的盒子。简述导航栏的页面结构的代码。1.在indexhtml文件中添加如下代码<!-导-><nav><divclass-"container"><inputtype="checkbox"id="togglebox"/>Sulliclass="onc"><ahref"indexhtml>网站首页</a></li><li>关于我们</li><li>服务案例</li><li><ahref="indexhtml>新闻中心</a></li><li><ahref"indexhtml>联系我们</a></li></ul><labelclass="mcnu"for-"togglebox"><imgsrc="img/iconpng"></label></div>2314</nav>上述代码中的第4行和第12行用于实现当网页在Pad上显示时，原导航栏消失显示汉堡菜单。在index-stylecss文件中添加如下样式代码。/导航栏的样式*/nav{position:relative;z-index:999;padding:15px0%;navli(display:inline-block;margin-left:30px;margin-right:30px;navullia(color:gray;font-size:lrem,navuloneafcolor:#1E50AEfont-weight:800navullia:hoverfcolor:#1E50AE;navinput[type-'checkbox"]menufposition:absolute;right:2%top:Opx;display:none;*当屏幕宽度小于或等于768px时，导航栏的样式*/@mediaonlyscreenand(max-width:768px)logo.c-rightidisplay:none;)menufdisplay:block;cursor:pointer;menuimg(max-width:100%navulfdisplay:none;navinput[type="checkbox"]:checked-ul[display:block;navullifwidth:100%;display:inline-block;text-align:center;margin:10px0px;/*当屏幕宽度小于或等于480px时，导航栏
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 铝合金门窗安装施工规范
- 新活素在餐饮行业的创新应用
- 西洋参在增强记忆力方面的作用
- 原发性脑出血患者营养支持效果探讨
- 秋季广告公司员工健康防护
- 中国房地产行业的可持续发展
- 物业管理品质管理的挑战与机遇
- 多重耐药菌：医院感染的严重挑战
- 高血压患者用药的口腔健康
- 专利申请代理服务发票承诺书
- 脑机接口技术在康复医学中的应用与展望
- 我用身体给儿子当生日礼物
- 2024新版公路养护技术标准
- 白雪公主童话故事分享
- 智能化车间规划与建设方案
- 2024事业单位岗位笔试题库答案
- 2024年福建鑫叶投资管理集团有限公司招聘笔试参考题库含答案解析
- 2024年古玩行业分析报告及未来发展趋势
- 中硼硅玻璃行业发展趋势
- 仓储物流部门的健康与安全管理
- 《食品安全事故案例》课件
评论
0/150
提交评论