《HYLI5教程课件》-《HYLI5教程课件》-第一章 HYLI5初识_第1页
《HYLI5教程课件》-《HYLI5教程课件》-第一章 HYLI5初识_第2页
《HYLI5教程课件》-《HYLI5教程课件》-第一章 HYLI5初识_第3页
《HYLI5教程课件》-《HYLI5教程课件》-第一章 HYLI5初识_第4页
《HYLI5教程课件》-《HYLI5教程课件》-第一章 HYLI5初识_第5页
已阅读5页，还剩35页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

部门：XX汇报人：xx项目一初识HTML5“互联网+”时代下，网络技术飞速发展，其魅力是无处不显，各行各业都离不开网络，而不同类型的行业都创建了形式各样的网站，既而各式各样的网页层出不穷，那么如何制作这些各式各样的网页，我们该从何入手呢？问题引入：03HTML5新特性02HTML基础标记与属性01Web时代的迁移目录CONTENTWeb时代的迁移011.1HTML5概述

在HTML5之前，由于各个浏览器之间的标准不统一，给网站开发人员带来了很大的麻烦。统一的互联网通用标准显得尤为重要！1.1HTML5概述

HTML5视频音频图像动画为标准化!!!1.1HTML5演变历史HTML2.01995年11月作为RFC1866发布，在RFC2854于2000年6月发布之后被宣布过时。超文本标记语言（第一版）在1993年6月作为互联网工程工作小组（IETF）工作草案发布。HTML3.21997年1月14日，W3C推荐标准。HTML4.01997年12月18日，W3C推荐标准。HTML4.011999年12月24日，W3C推荐标准。HTML5第一份正式草案已于2008年1月22日公布。2014年10月29日，万维网联盟宣布，HTML5标准规范终于制定完成。【总结】HTML5将会逐渐取代HTML4.01、XHTML1.0标准，以期能在互联网应用迅速发展的同时，使网络标准达到符合当代的网络需求，为桌面和移动平台带来无缝衔接的丰富内容。1.1HTML5优势1解决了跨浏览器问题2新增了多个新特性3用户优先的原则4化繁为简的优势1.1HTML5浏览器支持情况HTML基础标记与属性021.2.1创建一个HTML5页面1.2.2超链接标记

传智播客：传智播客教育科技有限公司是一家专门致力于高素质软件开发人才培养的高科技公司。此致敬礼

传智播客学员【结论】(1)href:用于指定链接目标的url地址,当为<a>标记应用href属性时,它就具有了超链接的功能。(2)target:用于指定链接页面的打开方式,其取值有_self和_blank两种,其中_self为默认值,意为在原窗口中打开,_bank为在新窗口中打开。1.2.2超链接标记【结论】(1)使用“<ahref="#id名">链接文本</a>”创建链接文本;(2)使用相应的id名标注跳转目标的位置。1.2.3HTML5标记图像和设置动画<img/>标记的属性属性属性值描述srcURL图像的路径alt文本图像不能显示时的替换文本title文本鼠标悬停时显示的内容width像素设置图像的宽度height像素设置图像的高度border文字设置图像边框的宽度vspace像素设置图像顶部和底部的空白（垂直边距）hspace像素设置图像左侧和右侧的空白（水平边距）alignleft将图像对齐到左边alignright将图像对齐到右边top将图像的顶端和文本的第一行文字对齐，其他文字居图像下方middle将图像的水平中线和文本的第一行文字对齐，其他文字居图像下方bottom将图像的底部和文本的第一行文字对齐，其他文字居图像下方1.2.3常用图像格式GIFPNGJPGGIF最突出的地方就是它支持动画，同时GIF也是一种无损的图像格式，也就是说修改图片之后，图片质量几乎没有损失。再加上GIF支持透明（全透明或全不透明），因此很适合在互联网上使用。GIF格式常常用于Logo、小图标及其他色彩相对单一的图像。1.2.3常用图像格式GIFPNGJPGPNG包括PNG-8和真色彩PNG（PNG-24和PNG-32）。相对于GIF，PNG最大的优势是体积更小，支持alpha透明（全透明，半透明，全不透明），并且颜色过渡更平滑，但PNG不支持动画。IE6是可以支持PNG-8，但在处理PNG-24的透明时会显示灰色。1.2.3常用图像格式GIFPNGJPGJPG所能显示的颜色比GIF和PNG要多的多，可以用来保存超过256种颜色的图像，但是JPG是一种有损压缩的图像格式，这就意味着每修改一次图片都会造成一些图像数据的丢失。小图片考虑GIF或PNG-8，半透明图像考虑PNG-24，类似照片的图像则考虑JPG。1.2.3属性

在当前HTML网页文件所在的文件夹中放入文件名为img.jpg的图像,并且通过src属性插入图像,通过alt属性指定图像不能显示时的替代文本,效果如图alt文本属性1.2.3属性

在当前HTML网页文件中的图像不能正常显示时，把鼠标移动到未正常显示的图像上，则会显示title属性值的内容。其实,title属性除了用于图像标记<img/>外,还常常和超链接标记<a>及表单元素一起使用,以提供输入格式和链接目标的信息,将在后续内容详细介绍。title属性1.2.3属性

本图利用了图像的宽度属性width、高度属性height、边框属性border1.2.3属性

使用hspace和vspace属性为图像设置了水平边距和垂直边距。为了使水平边距和垂直边距的显示效果更加明显,同时给图像添加了1像素的边框,并且使align=“left”使图像左对齐。1.2.4HTML其他常用标记

<hn>标题文本</hn>●1eft：设置标题文字左对齐(默认值)。

●center：设置标题文字居中对齐。

●right：设置标题文字右对齐1.2.4HTML其他常用标记

<palign=”对齐方式”>段落文本</p>该语法中align属性为<p>标记的可选属性,同样可以使用align属性设置段落文本的对齐方式。此案例分别使用align="left"、align="center"和align="right"设置了段落左对齐、居中对齐和右对齐。1.2.4HTML其他常用标记<hr属性=“属性值”>属性名含义属性值align设置水平线的对齐方式可选择left、right、center、三种值，默认为center,居中对齐size设置水平线的粗细以像素为单位，默认为2像素color设置水平线的颜色可用颜色名称、十六进制#RGB、rgb(r,g,b)width设置水平线的宽度可以是确定的像素值，也可以是浏览器窗口的百分比，默认为100%1.2.4HTML其他常用标记换行标记<br/>

在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后自动换行。如果希望某段文本强制换行显示,就需要使用换行标记<br/>,这时如果还像在word中直接敲Enter键换行就不起作用了【技能拓展】特殊符号描述字符的代码

空格符＆nbsp;<小于号＆Lt;>大于号＆gt;＆和号＆amp;￥人民币＆yen;©版权＆copy;®注册商标＆reg;°摄氏度＆deg;±正负号＆plusmn;*乘号＆times;÷除号＆divide;²平方2（上标2）＆Sup2;³立方3（上标3）＆Sup3;HTML5特性031.3.1HTML5浏览器支持1.3.2HTML文档基本格式对于升级后HTML5文档相对于HTML4.0和XHTML而言，不需要像以前那样进行声明，语言更为简洁，只需在HTML5文档第一行以<!DOCTYPEhtml>开头进行声明。使用

HBuilderX软件开发工具，新建一个HTML5页面文档时，系统会自带一些源代码,如下代码所示。<!doctypehtm1><html><head><metacharset="utf-8">

<tit1e>无标题文档</title></head><body></body></htm1>1.3.3HTML基本语法HTM5可以省略属性值的属性 属性描述checked表示是否被选中状态，省略属性值后,等价于checked="checked"readonly表示是否为只读模式，省略属性值后,等价于readonly="readonly"defer表示脚本将在页面完成解析时执行，省略属性值后,等价于defer="defer"ismap表示将图像定义为服务器端图像映射，省略属性值后,等价于ismap="ismap"noshade表示水平线颜色呈现纯色，无阴影效果，省略属性值后,等价于noshade="noshade"nowrap表示内容不换行，省略属性值后,等价于nowrap=“nowrap”selected表示下拉列表项，省略属性值后,等价于selected=“selected”multiple表示输入字段可选择多个值，省略属性值后,等价于multiple=“multiple”noresize表示无法调整框架大小，省略属性值后,等价于noresize=“noresize”【案列引入】标题内容请替换文字内容，点击添加相关标题文字041234此部分内容作为文字排版占位显示（建议使用主题字体）此部分内容作为文字排版占位显示（建议使用主题字体）此部分内容作为文字排版占位显示（建议使用主题字体）此部分内容作为文字排版占位显示（建议使用主题字体）此部分内容作为文字排版占位显示（建议使用主题字体）点击输入标题内容关键词关键词关键词标题文本预设此部分内容作为文字排版占位显示，

建议使用主题字体，以保持全文档文本格式的统一

此部分内容作为文字排版占位显示，

建议使用主题字体，以保持全文档文本格式的统一

点击输入标题内容此部分内容作为文字排版占位显示（建议使用主题字体）此部分内容作为文字排版占位显示（建议使用主题字体）标题文本预设此部分内容作为文字排版占位显示（建议使用主题字体）标题文本预设标题文本预设此部分内容作为文字排版占位显示（建议使用主题字体）标题文本预设点击输入标题内容标题文本预设标题文本预设标题文本预设标题文本预设标题文本预设此部分内容作为文字排版占位显示

（建议使用主题字体）标题文本预设此部分内容作为文字排版占位显示

（建议使用主题字体）标题文本预设此部分内容作为文字排版占位显示

（建议使用主题字体）标题文本预设此部分内容作为文字排版占位显示

（建议使用主题字体）点击输入标题内容01关键词02关键词05关键词06关键词03关键词04关键词07关键词09关键词08关键词关键词标题文本预设关键词标题文本预设关键词标题文本预设点击输入标题内容标题文本预设标题文本预设1此部分内容作为文字排版占位显示（建议使用主题字体）如需更改请在（设置形状格式）菜单下（文本选项）中调整标题文本预设2此部分内容作为文字排版占位显示（建议使用主题字体）如需更改请在（设置形状格式）菜单下（文本选项）中调整标题文本预设3此部分内容作为文字排版占位显示（建议使用主题字体）如需更改请在（设置形状格式）菜单下（文本选项）中调整标题文本预设4此部分内容作为文字排版占位显示（建议使用主题字体）如需更改请在（设置形状格式）菜单下（文本选项）中调整点击输入标题内容部门：XX汇报人：xx20XX演示完毕谢谢欣赏年终总结

新年计划

述职报告工作汇报版权声明感谢您支持原创设计事业，支持设计版权产品！感谢您下载千图网原创PPT模板。为了您和千图网以及原创作者的利益，请勿复制、传播、销售，否则将承担法律责任！千图网将对作品进行维权，

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论