Web前端开发概述

第1章Web前端开发概述1.1Web前端开发“Web前端开发”这一名词起源于“网页设计”。网站开发“Web前端开发”是对“网页设计”的继承和拓展。浏览器端页面的制作服务器端程序的编写Web前端Web前端开发的种类网站微信公众号手机APP(application)NativeAPP（原生APP）WebAPPHybridAPP（混合APP）互联网产品的优缺点比较适用性便捷性开发难度推广成本网站宣传、展示能直接访问低微信公众号交互性、微信营销需要先关注开发成本低推广成本较低移动APP特定功能，需要先安装，才能使用开发成本高推广成本较高网站前端开发的3种语言前端开发的3种语言HTML5网页的结构CSS3网页的表现JavaScript网页的行为后端编程语言ASP、PHP、JSP等1.1.1网页的概念和本质Internet网站网页一个网页就是一个文件，存放在世界某处的一台Web服务器中网页及其本质查看源代码网页的本质：HTML代码1.1.2网页设计的两个基本问题网页设计是艺术与技术的结合。网页设计的本质是一种平面设计，对于平面设计需要考虑两个基本问题：布局和配色。布局配色HTML和网页的关系HTML：超文本标记语言(HyperTextMarkupLanguage)网页是用HTML编写的一种纯文本文件。网页中显示的图像、动画、声音等文件都是单独存放的。一个网页一般并不是一个单独的文件1.1.3HTML简介标记超文本语言HTML(HyperTextMarkupLanguage).•标记，就是作记号。让浏览器理解某段内容的含义•超文本，就是相比普通文本有超越的地方•语言是一种符号系统，具有自己的词汇（符号）和语法（规则）HTML的历史HTML是SGML（标准通用标记语言）在中的应用。目前最新版本是HTML5SGML(1985)HTML(1993)XML(1998)HTML5(2009)XHTML(2000)SGML:StandardGeneralizedMarkupLanguageXML:eXtensibleMarkupLanguage(可扩展标记语言)……HTML与编程语言的区别HTML语言与编程语言有明显不同，首先它不是一种计算机编程语言，而是一种描述文档结构的语言，或者说排版语言；其次HTML是弱语法语言，随便怎么写都可以，浏览器尽力去理解执行，不理解就按原样显示，而编程语言是严格语法语言，写错一点点就不能执行，报告错误；再次HTML语言不像大多数编程语言一样需要编译成指令后执行，而是每次由浏览器解释执行。1.1.4网页和网站制作软件DreamweaverSublimeText3VS•Dreamweaver具有“所见即所得”（whatyouseeiswhatyouget）的特点•可以不用手工书写代码，通过图形化操作界面插入各种网页元素•具有很好的代码提示和代码标注功能•具有强大的站点管理功能，能方便管理网站的所有文件1.2网站的创建和制作流程网站：网页的集合，形式上是一个文件夹。这个文件夹称为网站目录1.2.1网站的特征拥有众多的网页。拥有一个主题与统一的风格。有便捷的导航系统。分层的栏目组织。网站的作用网站有利于提升企业(或组织)形象网站宣传是低成本的广告网站宣传无限制网站可以提高公司的网络沟通能力丰富营销手段,扩大产品销售渠道1.2.2网站的开发步骤进行需求分析客户想要做的网站的类型是什么？风格是什么样的？有没有具体的要求？绘制网站草图（纸，笔）制作网站效果图（Photoshop）根据效果图制作静态页面（HTML，CSS）绑定动态数据和后台（ASP，PHP）购买域名和主机空间（淘宝、阿里云）上传网站（FTP工具）1.2.3在Dreamweaver中建立站点在DW中，“站点”一词既表示网站，又表示属于该网站的文件的本地存储位置建立站点的作用：①DW能使站点内的网页以相对URL的方式进行链接，使代码在上传到服务器后也无需更改；②新建网页时所有的网页文件都会自动保存在站点目录中，便于管理；③在预览动态网页时，DW还能使用已设置好的URL运行该动态网页。示范1.3Web服务器和浏览器网页被放置在Web服务器上用户在浏览器中输入网址发出访问某个网站的请求该网站的服务器就把用户请求的网页文件传送到用户的浏览器中，即将文件下载到用户计算机中浏览器再去解析并显示网页内容浏览器请求响应浏览器浏览器请求响应服务器浏览器Web服务器HTTP请求HTTP响应浏览器和Web服务器本质上是两个程序前端后端Web服务器和浏览器Web服务器的作用对于静态网页，web服务器仅仅是定位到网站对应的目录，找到每次请求的网页传送给客户端。对于动态网页，web服务器找到该网页后要先对动态网页中的服务器端程序代码进行执行，生成静态网页代码再传送给客户端浏览器。1.3.2浏览器的种类和作用ChromeIE(Edge)FirefoxSafariOperaWebkitWebkitTridentGeckoPresto1.3.2浏览器的种类和作用浏览器的本质：解释执行HTML代码生成我们看到的网页如果浏览器内核不同，则对HTML代码可能会有不同的解释，导致网页在不同浏览器中的显示效果会不同。常见浏览器及其内核如下内核名称典型浏览器CSS3私有属性前缀WebkitChrome、Safari-webkit-GeckoFirefox-moz-TridentIE-ms-PrestoOpera-o-1.4URL与域名URL（UniversalResourceLocator）统一资源定位器，每个站点或站点上的每个文件（网页及所有资源文件）都有唯一的地址(URL)，浏览器通过URL来定位目标文件的URL的一般格式为：协议名://主机名[:端口号][/文件夹名/文件名]协议名一般有：http（超文本传输协议，用于传送网页）；ftp（文件传输协议，用于传送文件）URL的举例表示信息存放在一台被称为的服务器上，hynu.cn是一个已被注册的域名。主机名、域名合称为主机头。/web/是服务器网站目录下的一个文件夹，这个一致资源地址将带你到这个文件，10172331484.html是网页的文件名1.6域名、ip和主机域名和主机的关系：多对一即在一台主机上可建立多个网站，这些网站的存放方式称为“虚拟主机”，通过web服务器上设置“主机头”进行区别。域名的作用一是将域名发送给DNS服务器解析得到web服务器的IP地址以进行连接，二是将域名信息发送给web服务器，通过域名与web服务器上设置的“主机头”进行匹配确认客户端请求的是哪个网站，若客户端没有发送域名信息给web服务器，例如直接输入ip，则web服务器将打开默认网站。域名的作用DNS服务器浏览器发送域名ec.hynu.cn返回IP地址59.51.24.36Web服务器连接59.51.24.36，发送域名信息ec.hynu.cn将主机头为ec.hynu.cn对应的网站发送给浏览器1.方便记忆IP地址2.作为主机头信息识别请求的网站复习题1.网页的本质是（）文件。A.图像B.纯文本C.可执行程序D.图像和文本的压缩2.对于采用虚拟主机方式的多个网站，域名和IP地址是（）的关系。A.一对多B.一对一C.多对一D.多对多3.常见的浏览器的内核有、、、。4.请解释的含义。5.简述Web前端与网页设计两个概念的异同。6.HTML是什么的缩写，它与程序设计语言有何区别。7.简述网站的制作步骤。HTML语言HTML语言的发展SGML(1985)HTML(1993)XML(1998)HTML5XHTML(2000)SGML:StandardGeneralizedMarkupLanguageHTML:HyperTextMarkupLanguageXML:eXtensibleMarkupLanguage……HTML文档的基本结构!DOCTYPEhtmlmetacharset=utf-8编写HTML网页文档的方法HTML文档是一个纯文本文件，可以使用任何文本编辑器编写保存使用记事本编辑一个html文件使用Dreamweaver新建一个html文件标记(Tags)和元素（Elements）标记是HTML文档中一些有特定意义的符号，这些符号指明内容的含义或结构。标记总是放在三角括号中，大多数标记都是成对出现的，表示开始和结束。b标记的内容/b标记名称起始标记结束标记带有属性的HTML元素的结构/例2找出下面html代码的错误下列HTML元素的写法错在什么地方？1.imgbirthday.jpg/2.iCongratulations!i3.alinkedtext/ahref=file.html4.pThisisanewparagraph\p5.liThelistitem/liHTML标记的分类（2）为便于记忆，可将标记按出现的情况分为：1.单标记：br/，hr/，img/，input/，meta/，link/2.配对标记：大部分标记都是配对标记3.成组标记：table，form，ul,ol,dl,frameset，fieldset及其子标记等，配对标记中很多都是成组标记HTML标记的分类1)头部标记：title,meta,link,style2)文本标记：font,b,i,u,strong,3)段落标记：p,hn,pre,marquee,br,hr4)列表标记：ul,ol,li,dl,dt,dd5)超链接标记：a,map,area6)图像及媒体元素标记：img,embed,object7)表格标记：table,tr,td,th,tbody8)表单标记：form,input,textarea,select,option,fieldset,legend10)容器标记：div,span常见的html标记的属性公共属性：align（对齐方式），border（边框），title（提示文字），src（链接的文件路径），style（引入CSS行内样式），id，name特有属性：ahref（链接的目标），target（窗口打开方式）inputtype（元素的类型），size（含义依据type而不同）HTML5HTML5是HTML语言的最新版本，其前身是由网页超文本应用技术工作小组WHATWG（WebHypertextApplicationTechnologyWorkingGroup）于2004年提出的WebApplications1.0。HTML5已经被IE9+，Firefox4、Safari等浏览器支持，对于不支持HTML5的旧版浏览器，HTML5也能保证旧版浏览器能够安全地忽略掉HTML5代码。3.4.2HTML5语法的改进1.文档类型声明的改进2.指定字符编码3.属性书写的简化属性可省略属性值，属性值两边的引号也可省略!DOCTYPEhtmlmetacharset=utf-83.4.2HTML5语法的改进3.属性书写的简化4.超链接可以包含块级元素inputtype=textname=pwdrequiredimgsrc=fooalt=barpclass=fooHelloworld/pahref=#h2标题文本/h2p段落文本/p/a3.4.1HTML5新增的标记①文档结构标记，例如nav（网站导航条区域）和footer（网站底部区域）等。②媒体元素标记，如audio和video标记。③表单标记等。1.meter与progress标记p速度：metervalue