2.2 分割线、图片标签_第1页
2.2 分割线、图片标签_第2页
2.2 分割线、图片标签_第3页
2.2 分割线、图片标签_第4页
2.2 分割线、图片标签_第5页
已阅读5页,还剩3页未读 继续免费阅读

下载本文档

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

文档简介

单元二新闻页制作—HTML5常用标签软件技术专业SoftwareTechnologyWeb前端设计与开发

常见的网页中主要包含图片、文字、超链接。这些内容均是使用HTML5标签实现,本单元开始学习HTML的各类标签,掌握网页设计中的相关元素。主要包括:2.1文本标签2.2列表标签2.3分隔线标签2.4图片标签2.5超链接标签2.6多媒体标签-Web页面音视频播放2.7标签类型2.8meta标签课程导学知识点实战举例课程导学单元总结学习目标1.知识目标(1)掌握并熟练应用HTML文本标签;(2)掌握并熟练应用列表标签;(3)掌握并熟练应用图片标签;(4)掌握并熟练应用超链接标签;(5)掌握并熟练应用多媒体标签;(6)掌握并熟练应用头部标签。2.能力目标(1)能熟练使用HTML文本标签、列表标签、图片标签、超链接标签、多媒体标签和头部标签搭建基本静态网页;(2)能使用HTML语言设计一个网页并运行。3.素质目标(1)具有质量意识、安全意识、工匠精神和创新思维;(2)具有集体意识和团队合作精神;(3)具有界面设计审美和人文素养;(4)熟悉软件开发流程和规范,具有良好的编程习惯。课程导学知识点实战举例课程导学单元总结分隔线可以在HTML页面中创建一条水平线,水平线可以将文档分隔成若干个部分。分隔线标签是<hr>,其属性及说明见下表:属性说明align设置水平线的对齐方式,取值为left、center、rightnoshade设置水平线为纯色,无阴影size设置水平线的高度,单位为像素width设置水平线的宽度,单位为像素color设置水平线的颜色课程导学知识点实战举例2.2分隔线标签单元总结<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>加一条水平分割线</title></head><body><fontsize="5"color="black"><pre>

登鹳雀楼 <hr/>

白日依山尽,

黄河入海流。

欲穷千里目,

更上一层楼。

</pre></font></body></html>课程导学知识点实战举例2.2分隔线标签单元总结在HTML语言制作的网页文档中可以加载图像,可以把图像作为网页文档的内在对象(内链图像),也可以将其作为一个通过超链接下载的单独文档,或者作为文档的背景。在文档内容中加入图像:更加生动活泼,更加引人入胜,而且看上去更专业。HTML语言中没有规定图像的官方格式,但解释执行网页的浏览器规定了GIF(GraphicsInterchangeFormat)和JPEG(JointPhotographicExpertsGroup,联合图像专家组)图像格式作为网页的图像标准。在HTML语言中使用<img>标签在网页中嵌入图像,并设置图像的属性。其语法格式如下:<img

src="图片文件路径"

alt="提示文本"

height="图片高度"

width="图片宽度"/>其中,src属性是必需的;通过height属性和width属性可以调整图片显示的大小,如果不设置这两个属性值,则使用图片原始的属性值,另外这两个属性的属性值可以是像素,也可以是百分比,如果是百分比则值相对于浏览器窗口的一个比例。有时为了对网页上的图片做某方面的描述说明,或者当网页图片无法下载时能让用户了解图片内容,在制作网页是可以通过图片的alt属性对图片设置提示文本。课程导学知识点实战举例2.3图片标签单元总结<!DOCTYPEhtml><html><head><metacharset="UTF-8"> <title>图片标签</title></head><body> <h1>4.23|世界读书日</h1> <hr/> <imgsrc="img/dushuri.jpg"alt="reading"height="357"width="268"/></html>注意:

加载页面时,要注意插入页面图像的路径,如果不能正确设置图像的位置,浏览器无法加载图片,图像标签就

温馨提示

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

评论

0/150

提交评论