HTML技术.ppt

《HTML技术.ppt》由会员分享，可在线阅读，更多相关《HTML技术.ppt（44页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、HTML技术基 础 部 分概述典型的商业网站笔者编写的HTML网站HTML语言的特点问题提出概述 HTML（Hypertext Markup Language），是用于描述网页文档的一种标记语言。是标准通用标记语言下的一个应用。起源于1990年，Tim -Berners-lee和欧洲物理实验室的研究人员得到了一个从Internet服务器上取回并显示文档的有效办法，这些文档采用超文本规则，这就是最初的HTML。1993年，marc Andresson领导的美国国家计算机运用中心的一个开发组开发出真正的www的web浏览器，名为mosaic。marc Andresson后来建立了netscape公

2、司，后来不断的改造，成为了Microsoft公司的前身，今天的IE浏览器，就是在Mosaic的基础上开发的。 从1995年到1999年，HTML依次不断更新，先后经过了HTML1.0到HTML4.0,1997年，HTML3.2的问世，解决了不同浏览器浏览同一个HTML的时候造成以不同的格式显示的问题，1999年，HTML4.0将原来的语言扩展到了一些新的领域，如表单、脚本语言（JavaScript和VBScript）、帧结构、内嵌对象、动态文本等。 如今HTML技术已经发展到了HTML5.1，HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于

3、2007年被W3C接纳，并成立了新的 HTML 工作团队。2013年5月6日， HTML 5.1正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言（HTML）。在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素互操作性。CSS技术技术VBScript技术技术HTML技术技术前端前端前端前端前端前端前端前端JavaScript技术技术PHP（后台）服务端和服务端和PC端的关系端的关系主页hao123，以发布信息、提供索引为主，囊括了生活、服务、科技、影音、游戏等为一体的索引页面，内容十分丰富，在现实生活中，有了这样的索引页面，再也不像以前

4、那样要进入特定的网站必须知道网址的缺陷。我们从右面的索引分类，很容易找到我们需要浏览的网站，而在自己的电脑上所看到浏览器给我们展示的，正是以HTML语言为主的展示效果，普通的点击文字或者是图标就能进入相应的网站，正是HTML很灵活的一个功能“超链接”典型的商业网站：典型的商业网站：这是一个运用HTML4.0为基础编写的一个模拟滇池保护HTML程序，页面展示有登录界面，这是用了HTML4.0的一个新功能表单，以及有一个跳转菜单“友情链接”，昆明学院的首页，也同样使用了这样的功能。笔者编写的笔者编写的HTML网站网站运行运行HTML的基本结构为：的基本结构为： 在在HTML语言中，所有的命令由元素

5、构成，所有的元素必需包语言中，所有的命令由元素构成，所有的元素必需包含在含在”内，如内，如a元素写成元素写成,有的元素必需有开头语有的元素必需有开头语和结束于，如开头和结束于，如开头，结束必需标记，结束必需标记,有的元素有的元素也不需要有结束语，如也不需要有结束语，如、，这样的元素称，这样的元素称为空元素。为什么有的元素需要标记结束而有的就不用？这为空元素。为什么有的元素需要标记结束而有的就不用？这是约定俗成的标记习惯是约定俗成的标记习惯.HTML语言的基本特点：语言的基本特点：1.HTML技术有什么用？技术有什么用？2.如何编写设计一个精美的网页？如何编写设计一个精美的网页？3.HTML涉及

6、哪些技术？涉及哪些技术？4.如何来编写如何来编写HTML语言？语言？编写我的第一个网页 新建一个记事本，在记事本中输入文字，并把格式保存为.html，然后再双击打开记事本，看看有什么变化。 把标准语言放入记事本中，对字体实现控制。我的第一个网页你好，欢迎参加技风行动网站建设！1.2.关于属性 在上述的简单案例中，我们已经运用了元素的color属性，所以我们看到了字体是红色的，大多数元素都有自己的属性，所谓属性，是用来对元素具有修饰作用的集合，又如块元素的background属性使用来定义元素的背景为图片。 注释：注释的作用是将某一段代码在浏览器加载中告诉浏览器不翻译的标记，在html语言中，注

7、释用“”结束，在书写代码的时候，也常用注释来说明每一段代码的意思。各级标题元素在网页中分别用元素来定义文本不同级别大小的标题。标号越大，则字体越小。如下列实例： 这是一号标题 这是二级标题 这是三号标题 这是四号标题 这是五号标题 这是六号标题预览效果程序代码1.21. p元素的使用 元素用来表示网页的段落标记，当段落结束时用元素来标记，跟其他元素一样。段落的对齐方式align属性来表示，取值为：align=“center”/left/justify/right分别表示居中、多对齐、分散对齐、右对齐。效果预览图：元素p的使用方法和居中对齐元素p的justify的对其方式元素p的左对齐效果元素p

8、的右对齐效果代码：1.31. img元素 元素用来在网页中显示图片，该元素为空元素，不需要结束语，无论是html5.2或者是xhtml都一样，其表达式为： 其中src是img的路径属性，要在网页中显示一张图片，必须要告诉浏览器图片所在的位置，图片可以使本地的，也可以是在网络中的；而width和height属性用来定义图片的宽和高；alt属性表示如果图片不能显示所替代的提示文本。img元素显示图片的实例：程序代码：这是一个使用img来显示图片的实例，其中使用了简单的CSS样式，将在后面进行介绍1.40. 、元素 元素能实现的功能是在网页上画一条横向，用来分割区域，比如标题和正文，其属性常用的属性

9、有size（线宽）、width（长度）、align、color（颜色）。 元素是对文本进行换行，相当于word里面的换行（shift+enter）。运用运用/元素的一个实例：元素的一个实例：hr/br元素的运用实例这是一个使hr元素的用法，当一段很长的文本出现的时候，在网页的设计中常为了排版或者是美观，使用br属性来将文本断开，以便达到文本的美观！理解hr元素很有用哦！程序代码：程序代码：1.50. 元素和元素 div块元素：div元素是块元素，块的概念就是可以实现包含多个内容，来实现网页的某一部分或者是功能，现在多流行用div+css来布局网页，原因是使用CSS可以实现网页的修饰部分和主体部

10、分被分开，这样网站的维护就灵活简便得多，而且使用CSS+div元素布局的网页代码清晰易读，加快了浏览器加载网页的时间，再者是CSS有精确定位的优点，所以广大大型的程序书写者对这样的布局方式爱不释手，当然，也有缺点：不同的浏览器对CSS的部分元素解释不一样，就造成了同一个html浏览器解释的显示界面不一样。关于的布局将在后面进行介绍。元素归类为内联元素，和这样的元素不同的地方是块元素具有继承性、而内联元素则没有，它相当于一个内容器，一般放在、元素中使用。的属性、属性在中经常用到。下面我们用网页的布局形式来创作一个下面的信息调查下面我们用网页的布局形式来创作一个下面的信息调查表表1.61.简单简单

11、 表格表格分析：分析： 创建一个表格在中要使用创建一个表格在中要使用d d元素，三者是包含和被包含的关系，即：创建一个表格。必须有这三元素，三者是包含和被包含的关系，即：创建一个表格。必须有这三个元素（可以没有，但是为了统一的调整，最好使用该元素个元素（可以没有，但是为了统一的调整，最好使用该元素来包含），这里的表示行，表示列，而必须来包含），这里的表示行，表示列，而必须要包含在中才可以表现出来要包含在中才可以表现出来。 元素是一个表格的开始，镶嵌在元素是一个表格的开始，镶嵌在元素中使用，也可以元素中使用，也可以在一个总的在一个总的元素中镶嵌多个子元素中镶嵌多个子来对网页进行控制，比如来对网页

12、进行控制，比如下面的程序代码就是使用了镶嵌的下面的程序代码就是使用了镶嵌的元素来布局，在传统的元素来布局，在传统的html4.0html4.0中，使用中，使用来对网页的布局是一种流行的方式。来对网页的布局是一种流行的方式。 /*一级表格*/ /*二级镶嵌表格*/ /*二级镶嵌表格结束*/ /*二级镶嵌表格*/ /*二级镶嵌表格结束*/ /* 一级表格结束 */ 程序表达的内容： 分析完以后，我们得出的基本构架应该是这样的：分析完以后，我们得出的基本构架应该是这样的： 接下来的工作就是书写代码。接下来的工作就是书写代码。 养成良好的书写代码适量的空出镶嵌的空格，有利于代码的阅读养成良好的书写代码

13、适量的空出镶嵌的空格，有利于代码的阅读和理解和理解效果图：效果图：实现代码：表格控制 学校 学院 专业 姓名 性别 学号 昆明学院 信息技术学院 软件 张三 男 20112 注：后两行的代码省略，其格式是一样的，依据这样的格式改一下文字和背景即可在上述的案例中，我们实现了用html来制作简单的表格，在现实中，往往是需要一系列的复杂表格来表达我们需要的内容，比如有这样一个表格：分析：上述是一个三行三列的表格，在左边的“元素名称”的单元格实质上是合并两行的内容，在“学习元素，认识他们的基本用法”是合并了两列，那么在html中合并行和列用什么属性来实现呢？1.62.复杂表格复杂表格在html中，合并

14、行用元素的 rowspan来表示， rowspan有一个取值，比如上例中“各级的子元素”所在的单元格合并两行，表达式为 合并表格的列用元素的colspan来实现，和rowspan一样，colspan属性同样有一个取值，取值多少是合并列的数值，如上例中表达式可以写为： 了解了这些，我们就可以开始写代码来实现它！程序效果图：实现代码： /*这里的border表示表格边框粗细*/ html课程学习 学习元素，认识它们的基本用法 /*合并列*/ 元素的子级元素 /*合并行*/ table元素 tr元素 tr元素 td元素 /*表格结束*/1.70 多媒体控制多媒体控制 在html中，可以调用各种声音、

15、视频、swf动画文件作为网页的多媒体部分，当调用声音或者视频的时候，不同的代码，浏览器会使用不同的播放器来打开它们（比如使用元素来调用网页的背景音乐事，在IE中使用windows的媒体播放器来播放背景音乐，但是使用来调用背景音乐时使用第三方浏览器来打开网页却没有任何的声音，这是因为第三方浏览器没有调用windows媒体播放器的功能，而是使用Adobe play来播放，也就失眠使用元素来调用音乐只适合于使用IE浏览器）；也可以调用各种文档（如word、PPT等文档），在调用这些文档的时候，文档的内容并不会显示在网页上，而是通过在网页上做好链接，当点击相应的链接后，会用相关的软件来打开相应的文档。

16、 首先来看看使用元素来定义IE的背景音乐，其属性有：src（所插入背景的URL、网址）loop（循环次数，当值是-1或者Infinite 的时候表示无限循环）。balance（左右声道，值为-1000到1000之间的值，负值将声音发送左声道，正值将声音发送右声道，0为立体声）.volume（音量，值为-10000到0之间，0是最大音量。）delay（是进行播放延时的设置）在上一节中我们已经讨论了元素来设置网页的背景音乐只适合于IE浏览器，但是如果要定义第三方浏览器的背景音乐那该怎么办呢？别急，等我一一道来。 使用标签 使用标签来添加音乐的方法并不是很常见，但是它的功能非常强大，如果结合一些播放

17、控件就可以打造出一个Web播放器。它不仅可以对声音具有和强大，而且还可以控制视频文件，在音乐的控制上基本用法和差不多，只是所具有的属性比多得多。往后的章节中会一一介绍。 下面将书写一个程序代码，分别来比较和的区别。 效果图：实现代码：多媒体控制 /*定义背景音乐为循环播放，偏左声道*/多媒体控制技术 */定义表格间的间距为0*/ /*定义播放控件为隐藏*/ 这是一个实现视频控制的例子：分析： 本案例由左右两张动态的gif动态图片组成，关于图片的插入在前面已经学习过，而对于常见格式的视频，要使用的dynsrc来是现，其表达式为： 这里的start是什么时候视频开始播放，比如start=“mous

18、eover”指鼠标滑过时开始播放。注意：并不是所有的视频格式的文件运用这样的方法都可以播放，比如：.FLV格式的就必须运用插件来支持。1.80. 表单先看一下下面的这个案例：由于本例中实现代码比较的繁琐，在本教程中不一一写出来，请参考由于本例中实现代码比较的繁琐，在本教程中不一一写出来，请参考本讲义的素材文件本讲义的素材文件“表单表单”。 input是form下极其有效的控件，利用input控件可以将在PC端填写的表单的内容发送给服务器，这些内容可以是文本、单选框、复选框、命令按钮、提交按钮、重置按钮等。这是一个极其有效的控件。 如果来要更改按钮的提示名字，可以使用value属性来更改，如果不

19、更改，系统将默认value为submit或reset来显示，比如value=“登录”则按钮的提示性文字将改成了登录，特别注意跟value的name属性的区别，在html4.0极其以前的版本，使用name属性来对一个元素进行命名，这样的属性不会在浏览器中展现出来，使用name属性是为了在程序调用的使用时进行检索。在html5.0以后，已经不常用name属性来定义，而是把name这个属性改成了ID属性，这是因为跟Javascript和CSS更好的接轨。input的的tapy属性属性1.90. 列表元素列表元素列表元素主要有： 1. 元素，下级元素为 2. 元素，下级元素为 3. 元素，下级元素为 4. 元素，下级元素为 本节主要介绍元素的用法，在用CSS+DIV来布局网页的时候，也常用此列表来制作网站的导航，其他元素类似，列表元素重点要掌握它的type属性。ul的type取值ul列表的一个实例： 这是空心圆 /*定义ul的type属性为空心圆*/ 昆明市 保山市 曲靖市 这是实心圆 /*定义ul的type属性为实心圆*/ 昆明市 保山市 曲靖市 这是方框 /*定义ul的type属性为实心方框*/ 昆明市 保山市 曲靖市 The E