资源描述
单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,Html,的发展历史,这节将简单介绍,HTML,。,全称:,HyperText,Mark-up Language,译称:超文本标记语言。简意:一种为普通文件中某些字句加上标识的语言,其目的在于运用标记(,tag,),合文件 达到预期的效果。,1,、,HTML,作 为定义万维网的基本规则之一,最初由蒂姆,本尼斯李(,Tim,Berners,-Lee,),于,1989,年在,CERN,(,Conseil Europeen,pour la,Recherche Nucleaire,),研制出来。,HTML,的设计者是这样考虑的:,HTML,格式将允许科学家们透明地共享网络上的信息,即使这些科学家使用的计算机差别很大。,2,、,1995,年,11,月,在,IETF,(,Internet engineering task force,),主持下,在瑞士日内瓦举行的第一次,WWW,会议上成立了一个,HTML,工作小组。它的主要任务是把,HTML,形式化成为一种,SGML DTD,,,称之为,HTML Level 2,(,HTML 2.0,,,由本尼斯李最初设计的,HTML,被定,html 1.0,)。,3,、,从此,,html,最作为万维网的基石,一发不可收拾。在网站开发,软件开发兴旺的今天,隐藏在,b/s,架构中的,一个简单而不简单,重视而不重视的的核心,就是,html,,,无论何种,web,开发语言,,html,都是最为重要的一个基础。,Html1.0 html2.0 html4.0(,广泛应用,),xhtml,html5(,最新版本,),html,与,xhtml,什么是,XHTML?,更先进难懂的技术?,简单点说:,X,是吓唬人的,其实,XHTML,就是严谨而准确的,HTML,。,如故说,HTML,是汉语,那么,XHTML,就是标准普通话。对于现在才刚刚开始学习网页设计的朋友,直接学习,XHTML,是最佳的选择。,复杂点说:,XHTML,是,HTML,的”升级“产品。事实上它也属于,HTML,家族,对比以前各个版本的,HTML,,,它具有更严格的书写标准、更好的跨平台能力。由于某些需要,,XHTML,将以前版本的,HTML,能够实现的一些功能交给了,CSS,,,这意味着你将需要学习两种技术。但是这确实是,Web,未来发展的潮流。,X,代表“可以扩展的”。,Html,的基本结构,html,包括两部分:页面头,标签中部分。网页体,中部分。,主要用来指定网页的编码(用何种语言)、网页标题、文档类型、包括要引用的样式表、,js,文件等。,是网页的内容区,网页的内容都在此区域中编辑完成。可以说是开发网页的主战场。,html,标记,(,tag),的特点:,1,、成对出现。,2,、可以相互包含。,3,、理论上,无限嵌套的。,Html,的基本结构,2,标签的属性:,设置背景颜色。,红色背景,设置文本颜色。,蓝色文本,设置链接颜色。,链接为蓝色,设置已使用的链接的颜色。,设置正在被击中的链接的颜色。,以上各个属性可以结合使用,如,。,引号内的,rrggbb,是用六个十六进制数表示的,RGB(,即红、绿、蓝三色的组合,),颜色,如,#,ff0000,对应的是红色。此外,还可以使用,Html,语言所给定的常量名来表示颜色:,Black,、,White,、,Green,、,Maroon,、,Olive,、,Navy,、,Purple,、,Gray,、,Yellow,、,Lime,、,Agua,、,Fuchsia,、,Silver,、,Red,、,Blue,和,Teal,,,如,表示,标志对中的文本使用蓝色显示在浏览器的框内。,是,Html,文档的主体部分,在此标志对之间可包含,、,、,、,、,、,等等众多的标志,它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标志必须一块使用。,Code,:,ex 01first.,htm,Html,格式,段落标签,换行,有序列表,列表前附有序号数据,如,1,2,3,a,bc,无序列表,列表前有圆、方框。,div,布局中,主要使它。,div,这个标签,是最新网页布局思想,用来替换表格布局。,示例:,有序列表:,中国城市,北京,上海,广州,无序列表:美国城市,华盛顿,芝加哥,纽约,Code,:,ex01second.,htm,Html,文本,1.,对文本进行预处理操作,2.,标题标签,h1,为最大,,h6,为最小,3.,加粗、斜体、下划线标签,4.,同上,,tt,为打印风格字体,,cite,为引用方式,,em,强调风格,,strong,加重。这几个很少用。,5.,字体标签,可以指定所用字体、大小、颜色。,示例:,最大的标题,使用,h3,的标题,最大的标题,黑体字文本,斜体字文本,下加一划线文本,打字机风格的文本,引用方式的文本,强调的文本,加重的文本,size,取值“,+1”,、,color,取值“,red”,时的文本,Code:ex 01/three.,htm,ex_02/song.html,Html,图像,1.,img,img,标志并不是真正地把图像给加入到,Html,文档中,而是将标志对的,src,属性赋值,从而显示了,html,中。,src,路径可以是相对路径,绝对路径。,src,属性在,标志中是必须赋值的,是标志中不可缺少的一部分。除此之外,,标志还有,alt,、,align,、,border,、,width,和,height,属性。,align,是图像的对齐方式,border,属性是图像的边框,可以取大于或者等于,0,的整数,默认单位是像素。,width,和,Height,属性是图像的宽和高,默认单位也是象素。,alt,属性是当鼠标移动到图像上时显示的文本,举例:,定义一个图象,大小采用图片的原始大小。,定义一个大小为,500,x200,的图像,让图像左对齐,图像的边框为,1,。,浏览器识别的图片一般为,JPG,,,GIF,,,PNG,,,分辨率:,72,万像索,2.,标志是在,Html,文档中加入一条水平线,它可以直接使用,具有,size,、,color,、,width,和,noshade,属性。,size,是设置水平线的,厚度,,而,width,是设定水平线的,宽度,,默认单位是像素。想必大家对,color,属性已经很熟悉了,在此就不再用多讲。,noshade,属性不用赋值,而是直接加入标志即可使用,它是用来加入一条,没有阴影,的水平线,(,不加入此属性水平线将有阴影,),。,Code:ex 02/image.,htm,Html,链结,链结,实现了多个页面之间的相互流转。定义格式如下:,中间是文字或者图片,href,表示页面的地址:分为相对路径和绝对路径,href,=“index.,htm,”,表示,相对路径,href,=,例:,你好,图像,Code:ex 02/link.,htm,Html,表格,在网页的设计中,表格是最常用的布局方式之一。表格的定义:,单元格,内容,表格的常用属性:,align=“left”,对齐方式,align=“left”,width=“778“,宽度,height=“100“,高度,border=“1”,边框,bgcolor,=“#F0F0F0“,背景色,background=“images/,bj,.gif“,背景图片,cellpadding,=“2“,表格的填充距,指表格内容和表格之间的距离,cellspacing,=“3“,表格的间距,指表格单元格与单元格之间的距离,title=“,鼠标经过时,显示的文字”,Code:ex 02/table.,htm,Html,表格的应用:布局,Html,表格的应用:布局,Html,表格的应用:布局,Html,表格的应用:信息列表,Code:ex 02/table_list.,htm,Code:ex 02/table_in.,htm,作业:制作边框为一像索的表格?步聚:,1,、将表格的,table,标签,border=0,cellspacing,=1,bgcolor,=,边框色,2,、将各单元格的背景色设为白色或相应色即可。,筛子的思想。,code:ex02/table01.,htm,Html,综合运作,我的个人主页:,1,、要求建立:首页、介绍、相册、简历、留言五个页面。,2,、要求有头、尾、导航,各页面风格统一。,教学生制作。,
展开阅读全文