文件jquery下拉菜单

第章HTML5概述(视频讲解:26分钟)在浏览网站时,会看到许多丰富多彩的文字、图片、动画,这些内容都是通过一种名为HTML的语言表现出来的.
对于网页设计和制作人员,尤其是开发动态网站的编程人员来讲,制作网页时一定会涉及HTML语言.
可见,学习并掌握HTML就显得尤为重要.

本章能够完成的主要范例(已掌握的在方框中打勾)了解HTML的标签构成掌握HTML文件的编写方法熟悉如何使用浏览器浏览HTML文件1.
1HTML5简介HTML语言(HypertextMarkupLanguage,超文本标记语言)是一种文本类、解释执行的标记语言,也是Internet上用于编写网页的主要语言.
HTML5是下一代HTML,将会取代HTML4.
0和XHTML1.
1,成为新一代的Web语言.
HTML5自2010年正式推出以来,就以一种惊人的速度被迅速推广,世界各知名浏览器厂商也对HTML5有很好的支持.
例如,微软就对下一代IE9做了标准上的改进,使其能够支持HTML5.
而且HTML5还有一个特点是在老版本的浏览器上也可以正常运行.

要把信息发布到全球,就必须使用能够被大众接受的语言,也就是使用一种大多数计算机能够识别的出版语言.
在WWW上,通常使用的发布语言是HTML,即超文本标记语言.
HTML语言是一种简易的文件交换标准,用于物理的文件结构,旨在定义文件内的对象和描述文件的逻辑结构,但并不定义文件的显示.
由于HTML所描述的文件具有极高的适应性,所以特别适合于WWW的出版环境.

HTML是纯文本类型的语言,使用HTML编写的网页文件也是标准的纯文本文件,可以用任何文本编辑器,例如,Windows的"记事本"程序打开,查看其中的HTML源代码,也可以在用浏览器打开网页时,通过相应的"查看/源文件"命令查看网页中的HTML代码.
HTML文件可以直接由浏览器解释执行,而无需编译.
当用浏览器打开网页时,浏览器读取网页中的HTML代码,分析其语法结构,然后根据解释的结果显示网页内容,正是因为如此,网页显示的速度同网页代码的质量有很大关系,保持精简和高效的HTML源代码是十分重要的.

1.
2HTML的发展历程HTML的历史可以追溯到很久以前.
1993年HTML首次以因特网草案的形式发布.
20世纪90年代HTML取得大幅发展,从2.
0版,到3.
2版和4.
0版,再到1999年的4.
01版,一直到现在正逐步普及的HTML5.
随着HTML的发展,W3C(万维网联盟)掌握了对HTML规范的控制权.

在快速发布了HTML的前4个版本之后,业界普遍认为HTML已经"无路可走"了,对Web标准的焦点也开始转移到了XML和XHTML,HTML被放在次要位置.
不过在此期间,HTML体现了顽强的生命力,主要的网站内容还是基于HTML的.
为能支持新的Web应用,同时克服现有的缺点,HTML迫切需要添加新功能,制定新规范.

致力于将Web平台提升到一个新的高度,一小组人在2004年成立了WHATWG(WebHypertextApplicationTechnologyWorkingGroup,Web超文本应用技术工作组).
他们创立了HTML5规范,同时开始专门针对Web应用开发新功能——这被WHATWG认为是HTML中最薄弱的环节.
Web2.
0这个新词也就是在那个时候被发明的.
Web2.
0实至名归,开创了Web的第二个时代,旧的静态网站逐渐让位于需要更多特性的动态网站和社交网站——这其中的新功能数不胜数.
2006年,W3C又重新介入HTML,并于2008年发布了HTML5的工作草案.
2009年,XHTML2工作组停止工作.
因为HTML5能解决非常实际的问题,所以在规范还没有具体订下来的情况下,各大浏览器厂家就已经按捺不住了,开始对旗下产品进行升级以支持HTML5的新功能.
这样,得益于浏览器的实验性反馈,HTML5规范也得到了持续的完善,HTML5以这种方式迅速融入到了对Web平台的实质性改进中.

1.
3HTML5的新认识和新特性1.
3.
1HTML5的新认识虽然Web开发者普遍认为有了HTML5是比较好的,但是还是担心会出现一些问题,例如,新的HTML5在旧版本的浏览器上能否正常运行,会不会产生错误等.
HTML5是基于各种各样的理念进行设计的,这些设计理念体现了对HTML5的新认识,主要包括以下几个方面:1.
兼容性虽然到了HTML5时代,但并不代表现在用HTML4创建出来的网站必须全部要重建.
HTML5并不是颠覆性的革新.
相反,实际上HTML5的一个核心理念就是保持一切新特性平滑过渡.
尽管HTML5标准的一些特性非常具有革命性,但是HTML5旨在进化而非革命.
这一点正是通过兼容性体现出来的.
正是因为保障了兼容性才能让开发者毫不犹豫地选择HTML5开发网站.
2.
实用性HTML5规范是基于用户优先准则编写的,其主要宗旨是"用户即上帝",这意味着在遇到无法解决的冲突时,规范会把用户放到第一位,其次是页面的作者,再次是实现者(或浏览器),接着是规范制定者,最后才考虑理论的纯粹实现.
因此,HTML5的绝大部分是实用的,只是有些情况下还不够完美.
实用性是指要求能够解决实际问题.
HTML5内只封装了切实有用的功能,不封装复杂而没有实际意义的功能.

3.
简化性HTML5要的就是简单、避免不必要的复杂性.
HTML5的口号是"简单至上,尽可能简化".
因此,HTML5做了以下改进:以浏览器原生能力替代复杂的JavaScript代码.
新的简化的DOCTYPE.
新的简化的字符集声明.
简单而强大的HTML5API.
1.
3.
2HTML5的新特性HTML5具有如下一些优点和新的特性:新特性应该基于HTML、CSS、DOM和JavaScript.
减少了对外部插件的需求(例如Flash).
更优秀的错误处理.
更多取代脚本的标记.
HTML5应该独立于设备.
用于绘画的canvas元素.
用于媒介回放的video和audio元素.
对本地离线存储的更好的支持.
新元素和表单控件.
这些新特性正在如今最新版本的浏览器中得到越来越普遍的实现,越来越多的开发者开始学习和使用这些新特性.
1.
4无插件方式过去,很多功能只能通过插件或者复杂的hack(本地绘图API、本地socket等)来实现,但在HTML5中提供了对这些功能的原生支持.
插件的方式存在很多问题:插件安装可能失败.
插件可能被禁用或者是屏蔽.
插件自身会成为被攻击的对象.
插件不容易与HTML文档的其他部分集成(因为插件边界、剪裁和透明度问题).
虽然一些插件的安装率很高,但在控制严格的公司内部网络环境中经常会被封锁.
此外,由于插件经常弹出广告,一些用户也会选择屏蔽此类插件.
如果这样做的话,一旦用户禁用了插件,就意味着依赖该插件显示的内容也无法表现出来了.

在已经设计好的页面中,要想把插件显示的内容与页面上其他元素集成也比较困难,因为会引起剪裁和透明度等问题.
插件使用的是自带的模式,与普通Web页面所使用的不一样,所以当弹出菜单或者其他可视化元素与插件重叠时,会特别麻烦.
这时,就需要HTML5应用原生功能来解决,它可以直接用CSS和JavaScript的方式控制页面布局.
实际上这也是HTML5的最大亮点,显示了先前任何HTML版本都不具备的强大能力.
HTML5不仅仅提供新元素支持新功能,更重要的是添加了对脚本和布局之间的原生交互能力,由此可以实现以前不能实现的效果.

以HTML5中的canvas元素为例,有很多非常底层的功能以前是没办法实现的(例如,在HTML4的页面中就难画出对角线),而有了canvas就可以很容易地实现了.
更为重要的是新API释放出来的潜能,以及仅需寥寥几行CSS代码就能完成布局的能力.
基于HTML5的各类API的优秀设计,用户可以轻松对其进行组合应用.
HTML5的不同功能组合应用为Web开发注入了一股强大的新生力量.

1.
5HTML的标签构成1.
5.
1HTML标签概述HTML标签一个HTML文件是由一系列的元素和标签组成的.
元素是HTML文件的重要组成部分,例如title(文件标题)、img(图像)及table(表格)等.
元素名不区分大小写.
HTML用标签来规定元素的属性和它在文件中的位置.

HTML的标签分单独出现的标签和成对出现的标签两种.
单独标签的格式为,其作用是在相应的位置插入元素,例如,标签便是在该标签所在位置插入一个换行符.
大多数标签成对出现,是由首标签和尾标签组成的.
首标签的格式为,尾标签的格式为.
其完整语法如下:要控制的元素成对标签仅对包含在其中的文件部分发生作用,例如,和标签用于定义标题元素,也就是说,和标签之间的部分是此HTML文件的标题.
在每个HTML标签中,还可以设置一些属性,控制HTML标签所建立的元素.
这些属性位于所建立元素的首标签,因此,首标签的基本语法如下:标签的建立方式因此,在HTML文件中某个元素的完整定义语法如下:元素资料元素的概念当用一组HTML标签将一段文字包含在中间时,这段文字与包含文字的HTML标签被称为一个元素.
由于在HTML语法中,每个由HTML标签与文字所形成的元素内还可以包含另一个元素,因此,整个HTML文件就像是一个大元素,包含了许多小元素.
在所有HTML文件中,最外层的元素是由标签建立的.
在标签所建立的元素中,包含了两个主要的子元素,这两个子元素是由标签与标签所建立的.
标签所建立的元素的内容为文件标题,而标签所建立的元素内容为文件主体.

HTML文件结构在介绍HTML文件结构之前,先来看一个简单的HTML文件及其在浏览器上的显示结果.
下面开始编写一个HTML文件,使用文本编辑器(例如Windows自带的记事本)来编写如下代码:文件标题文件正文运行效果如图1.
1所示.
从上述代码中可以看出,HTML文件的基本结构如图1.
2所示.
图1.
1HTML示例图1.
2HTML文件的基本结构其中,与之间的部分是HTML文件的文件头部分,用以说明文件的标题和整个文件的一些公共属性.
与之间的部分是HTML文件的主体部分,下面介绍的标签,如果不加特别说明,均是嵌套在这一对标签中使用的.

1.
5.
2开始标签在任何一个HTML文件里,最先出现的HTML标签就是,用于表示该文件是以超文本标记语言(HTML)编写的.
是成对出现的,首标签和尾标签分别位于文件的开始和末尾,文件中的所有内容和HTML标签都包含在其中.
例如:文件的所有内容该标签不带任何属性.
事实上,现在常用的Web浏览器(例如IE)都可以自动识别HTML文件,并不要求有标签,也不对该标签进行任何操作.
但是,为了提高文件的适用性,使编写的HTML文件能适应不断变化的Web浏览器,还是应该养成使用这个标签的习惯.

1.
5.
3头部标签习惯上,把HTML文件分为文件头和文件主体两个部分.
文件主体部分就是在Web浏览器窗口的用户区内看到的内容,而文件头部分用来规定该文件的标题(出现在Web浏览器窗口的标题栏中)和文件的一些属性.

是一个表示网页头部的标签.
在由标签所定义的元素中,并不放置网页的任何内容,而是放置关于HTML文件的信息,也就是说它并不属于HTML文件的主体.
它包含文件的标题、编码方式及URL等信息.
这些信息大部分用于提供索引、辨认或其他方面的应用.

写在与中间的文本,如果又写在标签中,表示该网页的名称,并作为窗口的名称显示在这个网页窗口的最上方.
如果HTML文件并不需要提供相关信息时,可以省略标签.
1.
5.
4标题标签每个HTML文件都需要有一个名称.
在浏览器中,文件名称作为窗口名称显示在该窗口的最上方.
这对浏览器的收藏功能很有用.
如果浏览者认为某个网页对自己很有用,今后想经常阅读,可以选择IE浏览器"收藏"菜单中的"添加到收藏夹"命令将其保存,供以后调用.
网页的名称要写在和之间,并且标签应包含在与标签之中.

HTML文件的标签是可以嵌套的,即在一对标签中可以嵌入另一对子标签,用来规定母标签所含范围的属性或其中某一部分内容,嵌套在标签中使用的主要有标签.
1.
5.
5主体标签标签是成对出现的.
网页中的主体内容应该写在和之间,而标签包含在标签里面.
1.
5.
6编写时注意事项在编写文件的时候,要注意以下事项:(1)""是任何标记的开始和结束.
元素的标记要用这对尖括号括起来,并且结束的标记总是在开始的标记前加一个斜杠.
(2)标记与标记之间可以嵌套,例如:HTML文件(3)在源代码中不区分大小写,如以下几种写法都是正确并且相同的标记:(4)任何回车和空格在源代码中不起作用.
为了代码清晰,建议不同的标记之间回车编写.
(5)HTML标签中可以放置各种属性,例如:你好HTML其中,align为属性,center为属性值,元素属性出现在元素的""内,并且和元素名之间有一个空格,属性值可以直接书写,也可以使用引号括起来.
如下面的两种写法都是正确的:你好HTML你好HTML(6)如果希望在源代码中添加注释,便于阅读,可以以""结束.
例如下面的代码:文件范例:1.
2.
html--!
>1.
6编写HTML文件1.
6.
1HTML文件的编写方法编写HTML文件主要有如下3种方法:手工直接编写由于用HTML语言编写的文件是标准的ASCII文本文件,所以可以使用任何文本编辑器来打开并编写HTML文件,例如Windows系统中自带的记事本.
使用可视化软件Microsoft公司的Frontpage、Macromedia公司的Dreamweaver以及Adobe公司的Golive等软件均可以可视化的方式进行网页的编辑制作.
由Web服务器一方实时动态生成这需要进行后端的网页编程来实现,如ASP、PHP等,一般情况下都需要数据库的配合.
1.
6.
2手工编写页面下面先使用记事本来编写第一个HTML文件.
步骤如下:(1)选择"开始/程序//记事本"命令,打开记事本程序,如图1.
3所示.
图1.
3记事本(2)在记事本中直接输入下面的HTML代码:简单的HTML文件你好HTML让我们开始学习HTML吧(3)输入代码后,记事本中显示出代码的内容,如图1.
4所示.
图1.
4显示了代码的记事本(4)选择记事本菜单中的"文件/保存"命令,弹出如图1.
5所示的"另存为"对话框.
图1.
5"另存为"对话框(5)在对话框中选择存盘的文件夹,然后在"保存类型"中选择"所有文件",在"编码"中选择ANSI,这里将"文件名"设置为index.
htm,然后单击"保存"按钮.

(6)最后关闭记事本,回到存盘的文件夹,双击如图1.
6所示的index.
htm文件,可以在IE浏览器中看到最终页面效果,如图1.
7所示.
图1.
6保存的index.
htm文件图1.
7页面效果1.
6.
3使用可视化软件制作页面AdobeDreamweaverCS5.
5是一个全面的专业工具集,可用于设计并部署极具吸引力的网站和Web应用程序,并提供强大的编辑环境以及功能强大且基于标准的WYSIWYG设计表面.
AdobeDreamweaverCS5.
5加入了多屏幕预览、jQuery集成、CSS3/HTML5支持、尖端的实时视图渲染、移动UI构件、FTPS支持、智能编码协助集成FLV内容等全新功能.
下面以AdobeDreamweaverCS5.
5中文版为例,说明使用可视化网页编辑软件制作页面的方法.
步骤如下:(1)选择"开始/所有程序/AdobeDreamweaverCS5.
5"命令,启动软件的主程序,其主界面如图1.
8所示.
(2)Dreamweaver工作区可以查看文档和对象属性.
工作区还将许多常用操作放置于工具栏中,可以快速更改文档.
DreamweaverCS5.
5工作区布局如图1.
9所示.
图1.
8AdobeDreamweaverCS5.
5主界面图1.
9DreamweaverCS5.
5工作区布局A应用程序栏:应用程序窗口顶部包含一个工作区切换器、几个菜单(仅限Windows)以及其他应用程序控件.
B文档工具栏:包含一些按钮,提供各种"文档"窗口视图(如"设计"视图和"代码"视图)的选项、各种查看选项和一些常用操作(如在浏览器中预览).
C文档窗口:显示当前创建和编辑的文档.
D工作区切换器:通过下拉列表可以选择不同的工作区,例如编辑器.
E面板组:帮助用户监控和修改工作.
例如,"插入"面板、"CSS样式"面板和"文件"面板.
若要展开某个面板,请双击其选项卡.
FCSLive:AdobeDreamweaverCS5.
5相关服务.
G标签选择器:位于"文档"窗口底部的状态栏中.
显示环绕当前选定内容的标签的层次结构.
单击该层次结构中的任何标签可以选择该标签及其全部内容.
H属性检查器:用于查看和更改所选对象或文本的各种属性.
每个对象具有不同的属性.
在"编码器"工作区布局中,"属性"检查器默认是不展开的.
I文件面板:用于管理文件和文件夹,无论它们是Dreamweaver站点的一部分还是位于远程服务器上.
"文件"面板还使用户可以访问本地磁盘上的全部文件,非常类似于Windows资源管理器(Windows)或Finder(Macintosh).

(3)如图1.
10所示,单击文档工具栏中的"拆分"按钮,在这种视图下,编辑窗口被分割成左右两部分,左侧显示的是源代码视图,右侧是可视化视图,这样可以在选择和编辑源代码时及时地在可视化视图中看到效果.
这两部分是互相联系、密不可分的,在代码视图中所做的任何修改都会影响设计视图,反之亦然.