Web前端开发实例教程-HTML5+CSS3+JavaScript+jQuery（第2版） 课件 第1章 HTML5基础_第1页
Web前端开发实例教程-HTML5+CSS3+JavaScript+jQuery（第2版） 课件 第1章 HTML5基础_第2页
Web前端开发实例教程-HTML5+CSS3+JavaScript+jQuery（第2版） 课件 第1章 HTML5基础_第3页
Web前端开发实例教程-HTML5+CSS3+JavaScript+jQuery（第2版） 课件 第1章 HTML5基础_第4页
Web前端开发实例教程-HTML5+CSS3+JavaScript+jQuery（第2版） 课件 第1章 HTML5基础_第5页
已阅读5页，还剩38页未读， 继续免费阅读

下载本文档

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

文档简介

高等学校规划教材Web前端开发实例教程（第2版）——HTML5+CSS3+JavaScript+jQuery第1章HTML5基础目录1.1Web的基本概念1.2网站与网页1.3Web标准1.4认识HTML5+CSS3+JavaScript技术组合1.5HTML5语法基础1.6元素的分类1.7HTML的颜色表示和字符实体1.8编辑HTML文件1.9注释1.10案例—制作鲜品园页面摘要和版权信息1.1Web的基本概念1.1.1WWW1.1.2Browser1.1.3URL1.1.4HTML1.1.5HTTP1.1.1WWW WWW是WorldWideWeb的缩写，又称3W或Web，中文译名为“万维网”。WWW是Internet的最核心部分，它是Internet上支持WWW服务和HTTP的服务器集合。WWW在使用上分为Web客户端和Web服务器。用户可以使用Web客户端（浏览器）访问Web服务器上的页面。1.1.2Browser Browser（浏览器）是在客户端浏览Web服务端的应用程序，其主要作用是显示网页和解释脚本。浏览器种类很多，目前常用的有Google的Chrome、Microsoft的Edge、Mozilla的Firefox、Opera、Apple的Safari浏览器等。 浏览器最重要的核心部分是RenderingEngine（渲染引擎），一般称为“浏览器内核”，负责对网页语法（如HTML、JavaScript）进行解释并渲染（显示）网页。1.1.3URL URL（UniversalResourceLocator）是“统一资源定位器”的缩写，URL就是Web地址，俗称“网址”。Internet上的每个网页都具有唯一的名称标识，通常称之为URL地址。这种地址可以是本地磁盘，也可以是局域网上的某一台计算机，更多的是Internet上的站点。URL的基本结构为：

通信协议：//服务器名称[:通信端口编号]/文件夹1[/文件夹2…]/文件名1.1.4HTML 网页是WWW的基本文件，它是用HTML（HyperTextMarkupLanguage，超文本标记语言）编写的。HTML严格来说并不是一种标准的编程语言，它只是一些能让浏览器看懂的标记。当网页中包含正常文本和HTML标记时，浏览器会“翻译”由这些HTML标记提供的网页结构、外观和内容的信息，从而将网页按设计者的要求显示出来。1.1.5HTTP HTTP（HyperTextTransferProtocol，超文本传输协议）是用于从WWW服务器传输超文本到本地浏览器的传送协议，用于传送WWW方式的数据。当用户想浏览一个网站时，只要在浏览器的地址栏里输入网站的地址就可以了，如输入，在浏览器的地址栏里面出现的却是/。

1.2网站与网页1.2.1网站、网页和主页1.2.2静态网页和动态网页1.2.1网站、网页和主页 网站（WebSite，也称站点）被定义为已注册的域名、主页或Web服务器。网站由域名（也就是网站地址）和网站空间构成。网站是一系列网页的组合，通过浏览器，可以实现网页的跳转，从而浏览整个网站。 网页（WebPage）是存放在Web服务器上供客户端用户浏览的文件，可以在Internet上传输。网页是按照网页文件规范编写的一个或多个文件，这种格式的文件由超文本标记语言创建。

1.2.2静态网页和动态网页 1．静态网页 静态网页是指客户端的浏览器发送URL请求给WWW服务器，服务器查找需要的超文本文件，不加处理直接下载到客户端。静态网页通常由纯粹的HTML/CSS语言编写。 2．动态网页 采用动态网站技术生成的网页都称为动态网页，其本质主要体现在交互性方面。动态网页根据程序运行的区域不同，分为客户端动态网页与服务器端动态网页。 1.3Web标准1.3.1Web标准简介1.3.2建立Web标准的优点1.3.3网页的表现和结构相分离1.3.1Web标准简介 Web标准不是某一种标准，而是一系列标准的集合。网页主要由3部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分为3类：结构化标准语言，主要包括HTML、XML和XHTML；表现标准语言，主要为CSS；行为标准语言，主要包括对象模型DOM、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制定的，如ECMA（EuropeanComputerManufacturersAssociation）的ECMAScript标准。1.3.2建立Web标准的优点 对于网站设计和开发人员来说，遵循网站标准就是建立和使用Web标准。建立Web标准的优点如下。1）提供最大利益给最多的网站用户。2）确保任何网站文件都能够长期有效。3）简化代码，降低建设成本。4）让网站更容易使用，能适应更多不同用户和更多网络设备。5）当浏览器版本更新或出现新的网络交互设备时，确保所有应用能够继续正确执行。1.3.3网页的表现和结构相分离 1．内容 内容就是页面实际要传达的真正信息，包含数据、文件或图片等。注意，这里强调的“真正”是指纯粹的数据信息本身，不包含任何辅助信息。 2．结构 可以看到，文本信息本身已经完整，但是混乱一团，难以阅读和理解，必须将其格式化。把其分成标题、段落和列表等。1.3.3网页的表现和结构相分离 3．表现 所有这些用来改变内容外观的东西，称为“表现”。 4．行为 行为是对内容的交互及操作效果。 所有HTML页面都由结构、表现和行为3个方面的内容组成。内容是基础层，然后是附加上的结构层和表现层，最后再对这3个层做些“行为”。1.4认识HTML5+CSS3+JavaScript技术组合1.4.1HTML5简介1.4.2CSS3简介1.4.3JavaScript简介1.4.1HTML5简介 HTML是HyperTextMarkupLanguage（超文本标记语言）的缩写，是构成Web页面、表示Web页面的符号标签语言。 1．HTML的发展历史 HTML最早源于SGML，最著名的就是HTML

4.0，这是一个具有跨时代意义的标准。XHTML1.0是一种在HTML4.0基础上优化和改进的新语言，不过XHTML并没有成功，而HTML5便因此孕育而生。2012年12月17日，W3C宣布凝结了大量网络工作者心血的HTML5规范正式定稿，确定了HTML5在Web网络平台奠基石的地位。1.4.1HTML5简介 2．HTML代码与网页结构 网页内容是通过HTML标签（图中带有“<>”的符号）组织的，网页文件其实是一个纯文本文件。 3．HTML5的特性 HTML5实现Web应用程序和用于更好的呈现内容。 （1）实现Web应用程序 （2）更好地呈现内容1.4.2CSS3简介 CSS（CascadingStyleSheets，层叠样式表单）简称为样式表，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS是目前最好的网页表现语言之一，所谓表现就是赋予结构化文件内容显示的样式，包括版式、颜色和大小等，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。现在几乎所有漂亮的网页都用了CSS，CSS已经成为网页设计必不可少的工具之一。1.4.3JavaScript简介 在Web标准中，使用HTML设计网页的结构，使用CSS设计网页的表现，使用JavaScript制作网页的特效。CSS样式表可以控制和美化网页的外观，但对网页的交互行为却无能为力，此时脚本语言提供了解决方案。 JavaScript是一种由Netscape公司的LiveScript发展而来的客户端脚本语言，JavaScript的开发环境很简单，不需要Java编译器，而是直接运行在浏览器中，JavaScript通过嵌入或调入到HTML文件中实现其功能。1.5HTML5语法基础1.5.1HTML5语法结构1.5.2HTML5文件结构1.5.3HTML5开发人员编码规范1.5.1HTML5语法结构 HTML文件由元素构成，元素由标签、内容和属性3部分组成。 1．标签 HTML用标签来规定网页元素在文件中的功能。标签是用一对尖括号“<”和“>”括起来的单词或单词缩写。 2．内容 HTML

文件中的元素是指从开始标签到结束标签的所有代码。

3．属性

属性用来说明元素的特征。1.5.2HTML5文件结构 HTML5文件是一种纯文本格式的文件，文件的基本结构为：<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>页面标题</title></head><body>网页内容</body></html>1.5.3HTML5开发人员编码规范 1．HTML书写规范 2．标签的规范 3．属性的规范 4．元素的嵌套 5．代码的缩进1.6元素的分类1.6.1元信息元素1.6.2语义元素1.6.3无语义元素1.6.1元信息元素 元信息（Meta-information）或称元数据（Metadata）元素是指用于描述文件自身信息的一类元素，meta元素定义元信息，包含页面的描述、关键字、最后的修改日期、作者及其他元信息， meta元素的常用属性如下。1）charset：定义文件的字符编码，常用的是“UTF-8”。2）content：定义与name和http-equiv相关的元信息。3）name：关联content的名称（常用的有keywords关键字、author作者名、description页面描述）。1.6.2语义元素 语义元素分为块级元素、行内元素、行内块元素等。 1．块级元素（block）块级元素是指本身属性为display:block的元素。因为它自身的特点，通常使用块级元素进行大布局（大结构）的搭建。 2．行内元素（inline）行内元素也称内联元素，是指本身属性为display:inline的元素，行内元素可以和相邻的行内元素在同一行。1.6.2语义元素 3．行内块元素 还有一种元素结合行内元素和块级元素，不仅可以对宽和高属性值生效，还可以多个元素存在一行显示，称为行内块元素。行内块元素能和其他元素放在一行，可以设置宽、高。常用的行内块元素有img、input、textarea等。 4．可变元素 可变元素根据上下文关系确定该元素是块级元素还是行内元素，主要有applet、button、del、iframe、ins、map等。1.6.2语义元素 5．HTML5中新增的结构语义元素 HTML5增加的结构语义元素明确了一个Web页面的不同部分，如图1-13所示。1.6.3无语义元素 无语义元素无须考虑其内容，有两个无语义元素div和span。div是块级元素，span是行内元素。 常用div元素划分区域或节，div元素可以用作组织工具，而不使用任何格式。所谓DIV+CSS的网页布局，就是用div元素组织要显示的数据（文字、图片、表格等）结构，用CSS显示数据的样式，从而做到结构与样式的分离，这种布局代码简单，易于维护。1.7HTML的颜色表示和字符实体1.7.1HTML的颜色表示1.7.2字符实体1.7.1HTML的颜色表示 在HTML中，颜色有两种表示方式：一种是用颜色的英文名称表示，如blue表示蓝色，red表示红色；另一种是用十六进制的数表示RGB值。 RGB颜色的表示方式为#rrggbb。其中，rr、gg、bb三色对应的取值范围都是00～FF，如白色的RGB值是（255，255，255），用#ffffff表示；黑色的RGB值是（0，0，0），用#000000表示。1.7.2字符实体 一些字符在HTML中拥有特殊的含义，例如，大于号“>”和小于号“<”已作为HTML的语法符号。因此，如果希望在浏览器显示这些特殊字符，就需要在HTML源码中插入相应的HTML代码，这些特殊符号对应的HTML代码称为字符实体。 字符实体由三部分组成：以一个符号（&）开头，一个实体名称，以一个分号（;）结束。例如，要在HTML文件中显示小于号，输入“<”。1.8编辑HTML文件1.8.1常见的网页编辑工具1.8.2HTML文件的创建1.8.1常见的网页编辑工具 网站制作前端开发软件是指用于制作HTML网页的工具软件。1．Dreamweaver2．HBuilderX3．VisualStudioCode4．SublimeText3汉化版5．Notepad++6．记事本1.8.2HTML文件的创建 下面使用HBuilderX创建一个只

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

温馨提示

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

最新文档

评论

0/150

提交评论