html登录后跳转页面_html登录按钮跳转

【千锋教育HTML5从入门到精通】第1章 Web前端技术简介 　　内容分析 　　本章主要介绍Web前端概述、Web前端开发工具、HTML入门 　　教学目标 　　要求学生了解Web前端技术和相关行业信息、Web前端开发工具、HTML基本原理 　　教学过程 　　Web前端概述 　　初识Web前端 　　1991年8月6日，来自欧洲核子研究中心的科学家Tim Berners-Lee，启动了世界上第一个可以正式访问的网站（http: //info. cern. ch/），从此人类宣布了互联网时代的到来。随着互联网的飞速发展，网站开发人员也变得炽手可热求。 　　Web前端开发是从网页演变而来，名称上有明显的时代特征。随着用户体验的要求越来越高，前端开发的技术难度越来越大，Web前端开发这个职业也从设计和制作不分的局面中独立出来。 　　早期的前端其实就是Table布局，后来发展到DIV+CSS网站重构，再到JavaScript逐渐成为web前端开发的语言以及Web2.0的出现，每个阶段都涌现出相应的产品，如SNS、博客、微博等。随着人们对网页的需求不断增大，Web前端技术也正加速地发展。 　　Web开发职位可分为网页设计师（UI设计师）、Web前端开发工程师、Web后端工程师、数据库工程师。下面来了解一下这四大职位的分工： 　　• 首先由UI设计师根据产品的需求做出网站效果图，然后交付给Web前端工程师进行图片切割和网页制作。 　　• 数据库工程师负责把网站数据进行存储和优化处理。 　　• Web后端工程师负责把网站数据进行增删改查等逻辑处理，并将操作的数据返给Web前端工程师进行数据的交互与显示。 　　• Web前端工程师能充分理解项目需求和设计需求，并与UI设计师、Web后端工程师紧密合作，产出高质量的网站展示层，为用户呈现出最好的界面交互体验。

　　有一句话非常形象的形容了Web前端工程师的特点，“它是游走在二次与二进制之间的魔法师!”。 　　Web前端开发的三大核心技术 　　W3C组织，即万维网联盟，创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。W3C专门负责制定网页相关的标准，Web前端的相关技术都是基于W3C标准实现的。 　　下面来介绍下Web前端开发所包括的三大核心技术，即HTML语言、CSS语言、JavaScript语言。 　　1.HTML语言 　　HTML全称“Hyper Text Markup Language”，中文解释为“超文本标记语言”，它是制作网页的标准语言。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字素。超文本标记语言的结构包括“头”部分（Head）、和“主体”部分（Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。 　　2. CSS语言 　　CSS全称“Cascading Style Sheet”，中文解释为“层叠样式表”，它是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各素进行格式化。CSS 能够对网页中素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 　　3. JavaScript语言 　　JavaScript是一种属于网络的脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。它的解释器被称为JavaScript引擎，属于浏览器的一部分，因此JavaScript代码由浏览器边解释边执行。 通常JavaScript脚本通过嵌入在HTML中的方式来实现自身的功能。 　　Web前端三大核心技术就像板凳的三条腿，缺一不可。三大核心技术之间的联系如图1.2所示。

　　W3C组织规定，web标准需要将网页的结构、样式和行为三者进行分离。HTML +CSS+Javascript本质上构成一个MVC框架，即HTML用来描述网页的结构（Model），CSS用来描述网页的结构（View），Javascript用来描述网页的行为即调度数据和实现某种展现逻辑（Controller）。本书主要讲解HTML+CSS。 　　用一个盖房子的例子来描述下三者之间的关系，首先需要把房子的地基和结构搭建好，有一个良好的结构（HTML）。然后给房子刷上油漆和添加窗户，对房子样式进行美化（CSS）。最后给房子添加电梯和地暖，与住户进行一些行为上的交互（JavaScript），这样房子才算搭建完毕。下面来看一下在web前端中三者的体现效果，如图1.3、1.4和1.5所示。

　　Web前端开发工具 　　浏览器 　　浏览器是网页的运行平台，是可以把HTML文件展示在其中，供用户进行浏览的一种软件。目前主流的浏览器有IE、Chrome、Firefox、Safari、Opera等，如图1.6所示，由于某些因素，这些浏览器没有完全采用统一的Web标准，或者说不同的浏览器对同一个CSS样式有不用的解析。这就导致了同样的页面在不同的浏览器下显示效果可能不同。

　　不同用户使用的浏览器可能不同，因此制作网页时，需要保证该网页可以兼容所有的主流浏览器。关于网页制作中的兼容性问题及解决方案，会在后面的章节进行讲解。下面介绍几种主流的浏览器。 　　1. IE浏览器 　　IE是Internet Explorer简称，它是微软公司推出的一款网页浏览器，采用Trident内核实现，有6.0、7.0、8.0、9.0、10.0、11.0等版本。在IE7以前，中文直译为“网络探路者，但在IE7以后官方便直接称为”IE浏览器”。由于一些用户仍然在使用低版本的浏览器，因此在制作网页时，一般也需要兼容低版本的浏览器。一些其他的浏览器也是基于IE内核的，如360安全浏览器、搜狗浏览器等，只要兼容IE浏览器，这些基于IE内核的浏览器也都兼容。 　　2. Chrome浏览器 　　Chrome浏览器一般指Google Chrome，Google Chrome是一款由Google公司开发的设计简单、高效的Web浏览器，采用JavaScript引擎，可快速运行复杂的大型网站，从而降低浏览者访问的等待时长。该浏览器基于其他开源软件撰写，采用Webkit、Blink内核实现，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。本书运行环境采用Chrome浏览器，版本为 54.0.2840.5，如图1.7所示。

　　3. Firefox浏览器 　　Firefox浏览器一般指Mozilla Firefox，中文俗称“火狐”，是Mozilla公司出品的一款自由及开放源代码Web浏览器，采用Gecko内核实现，支持多种操作系统，如Windows、Mac OS X及GNU/Linux等。 　　4. Safari浏览器 　　Safari浏览器是苹果公司出品的用于苹果计算机操作系统Mac OS X中的浏览器，采用Webkit内核实现，使用了KDE的KHTML作为浏览器的运算核心。无论在 Mac还是在PC上运行，Safari 都可提供极致愉悦的网络体验方式。 　　5. Opera浏览器 　　Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的Web浏览器，采用Presto内核实现，它是跨平台浏览器，可以在Windows、Mac和Linux三个操作系统平台上运行。 　　注：浏览器内核负责对网页语法进行解释并渲染（显示）网页。 通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。 　　网页编辑器 　　网页编辑器是书写HTML、CSS等代码的工具软件。一般常用的网页编辑器有Dreamweaver、Sublime Text、WebStorm、Hbulider等，如图1.8所示为常用的网页编辑器的图标。本教材采用Dreamweaver网页编辑器，版本为CS6。Dreamweaver简称“DW”，具备完美的代码提示功能和强大的辅助操作，因此它非常容易上手，是一款适合初学者学习和使用的网页编辑器。

　　接下来讲解如何使用Dreamweaver网页编辑器进行网页编程，软件的安装不再介绍，直接讲解软件安装后如何使用。 　　运行DW软件，进入软件界面， 选择菜单栏中【文件】→【新建】，打开【新建文档】窗口，如图1.9所示，在【文档类型】下拉列表中选择HTML5，单击【创建】按钮，即可创建一个空白的HTML文档，如图1.10所示。



　　为了让初学者更好的使用DW工具，需要对DW进行一些初始化的设置，具体如下： 　　1. 工作区布局设置 　　运行DW软件，进入软件界面，在菜单栏中选择【窗口】→【工作区布局(w)】→【经典】，将布局设置成统一的模式，如图1.11。

　　必备面板 　　设置经典模式后，需要调出三个常用的面板，为此分别选中菜单栏【窗口】菜单下的【插入】、【属性】、【文件】三个命令，如图1.12所示。

　　新建默认文档设置 　　选择菜单栏中【编辑】→【首选参数】（Ctrl+U），选中左侧【分类】中的【新建文档】，右边就会出现相应的设置，选择最常用的HTML文档类型和编码类型，本书设置为HTML5，如图1.13所示。

　　新建文档的默认参数设置好以后，新建HTML文档时，DW就会按照默认文档设置直接生成所需的代码。 　　浏览器设置 　　初学者计算机必备IE浏览器和Chrome浏览器，建议讲DW的默认预览浏览器设置为“Chrome浏览器”，快捷键F12是使用主浏览器预览网页，一般把IE浏览器设为次浏览器，快捷键Ctrl+F12，如图1.14所示。

　　代码提示 　　为了加快写代码的速度，会用到代码提示，DW中就有强大的代码提示的功能，只需在【首选参数】对话框中设置代码提示，选择【代码提示】选项，然后选中【结束标签】选项中的第二项，单击【确定】按钮即可，代码提示设置如图1.15所示。

　　切图软件 　　切图软件是对UI设计师设计出的效果图进行切图操作，也可以对网页中涉及到图片进行修改等处理。常用的切图软件有Photoshop和Fireworks两种。常用切图软件的图标如图1.16所示，本教材采用Photoshop进行切图，版本为CS5。Photoshop简称“PS”，它是一款专业性很强的图片处理软件，在第9章中将详细地学习如何利用Photoshop进行网页的切图操作。

　　HTML入门 　　什么是HTML 　　HTML是HyperText Markup Language的缩写，即超文本标记语言，是一种用来制作超文本文档的简单标记语言。接下来将带领读者从语言、超文本、标记三部分理解HTML。 　　1．语言 　　HTML一种编程语言，有指定的语法规则。超文本传输协议规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作。协议的制定使浏览器在运行超文本时有了统一的规则和标准。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台，自1990年以来HTML就一直被用作WWW（是World Wide Web的缩写，也可简写WEB、中文叫做万维网) 的信息表示语言，使用HTML语言描述的文件，需要通过WEB浏览器HTTP显示出效果。 　　2. 超文本 　　所谓超文本是可以加入图片、声音、动画、影视等内容的文本，事实上每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，简单且易学易懂。 　　HTML的普遍应用就是通过单击从一个主题跳转到另一个主题，从一个页面跳转到另一个页面与世界各地主机的文件链接。直接相关的主题。 　　（1）HTML可以通过图片格式和文字格式的设计实现丰富多彩的风格。 　　（2）通过HTML可以实现页面之间的跳转。 　　（3）通过HTML可以展现多媒体的效果。 　　从上面可以看到HTML超文本文件时需要用到的一些标签。 　　3. 标记 　　对于刚刚接触超文本的读者来说，一些用“<”和 “>”括起来的句子可能很难被理解，它们被称为标记，也称标签，是用来划分网页的素，以形成文本的布局、文字的格式及五彩缤纷的画面。标签通过指定某块信息为段落或标题等来标识文档某个部件。 　　在HTML中每个用来作标签的符号都是一条命令，它会告诉浏览器如何显示文本。这些标签均由”<“和”>”符号以及一个字符串组成。如<head>、 <body>等。而浏览器的功能是对这些标记进行解释，显示出文字、图像、动画、播放声音。这些标签符号用“<标签名字 属性>”来表示。标签分为单标签和双标签两大类，具体介绍如下： 　　l 单标签指的是只存在一个标签的写法，如<meta>、<input>等。 　　l 双标签指的是存在一对标签的写法，如<head></head>、<body></body>等。注意在双标签中第一个标签叫做起始标签，第二个标签叫做结束标签，结束标签需要在左尖括号后添加一个关闭符“/”。 　　HTML只是一个纯文本文件。创建一个HTML文档，需要HTML编辑器和Web浏览器两个工具。HTML编辑器是用于生成和保存HTML文档的应用程序。Web浏览器用来打开Web网页文件，提供给查看Web资源的客户端程序。 　　HTML基本结构 　　HTML文档是由一系列的素和标签组成。素名不区分大小写，HTML用标签来规定素的属性和它在文件中的位置，HTML文档分为头部和主体两部分，在文档头部对文档进行一些必要的定义，主体部分是文档要显示的信息。其基本结构如例1-1所示。 　　【例1-1】HTML文档的基本结构 　　运行结果如图1.17所示。

　　一个HTML文档基本结构主要由文档声明（<!DOCTYPE HTML>）、HTML文档（<html>）、文档头部（<head>）和文档主体（<body>）四部分组成。接下来具体介绍这四个部分的内容。 　　1. 文档声明 　　<!DOCTYPE>声明必须是 HTML 文档的第一行，位于 <html> 标签之前。<!DOCTYPE> 声明不是 HTML 标签，它用于向浏览器说明当前文档属于哪种HTML或XHTML标准规范。必须在开头处使用<!DOCTYPE>为所有的XHTML文档指定XHTML版本和类型，这样浏览器才能将网页作为有效的XHTML文档，并按照指定文档类型进行解析。 　　<!DOCTYPE>声明与浏览器的兼容性相关，如果没有<!DOCTYPE>，就由浏览器决定如何展示HTML页面，这时，不同的浏览器可能会有多种显示效果，这样是不允许的。 　　2. HTML文档 　　<html>标签位于<!DOCTYPE>声明之后，作用相当于在告知浏览器这是一个HTML文档，<html></html>标签限定了文档的开始点和结束点，其中<html>表示网页的开始，</html>表示网页结束，网页需要展示的所有内容都应该写到<html></html>标签的内部，<html>标签也被称为根标签，指最外层的意思。 　　3. 文档的头部 　　<head></head>用于定义HTML文档头部信息，文档头部内的标签如图1.17所示，在<html>标签之后，用来封装其他位于文档头部的标签，如表1.1中的标签。一个HTML文档只能有一对<head></head>标签，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。 　　表1.1 文档头部内的标签标签描述<title>定义了文档的标题<base>定义了页面链接标签的默认链接地址<link>定义了一个文档和外部资源之间的关系<meta>定义了HTML文档中的数据<script>定义了客户端的脚本文件<style>定义了HTML文档的样式文件 　　上例中<meta charset=”utf-8″>指定网页的编码方式为utf-8。utf-8是一种网页编码规范，可以统一页面显示中文简体、繁体及其他语言（如英文、日文、韩文），这样网页就不会出现乱码的情况。它属于国际通用编码方式。 　　4. 文档的主体 　　<body></body>包含文档要展示的所有内容，也称主体标签，网页中显示的文本、超链接、图像、表格和列表等信息都必须在<body>内，如图1.17中的内容，就是<body>内的信息，<body>中的内容是最终展示给用户的。 　　HTML语言是不区分大小写的，但建议文档声明采用大写方式，其他部分都采用小写方式。 　　运行第一个HTML程序 　　（1）新建一个空白HTML文档，【代码】按钮，默认为HTML基本结构。代码视图如图1.18所示。

　　图1.1 代码视图 　　（3）修改<title>和<body>中的内容，按Ctrl + S快捷键，进行文件的保存，文件后缀名为.html格式。如图1.19所示。

　　图1.2 保存成.html文件 　　（4）单击“在浏览器中预览/调试”按钮，选择chrome.exe浏览器进行预览。或者通过双击.html文件进行预览。如图1.20所示。

　　图1.3 在Chrome浏览器中预览效果 　　到此本教材的第一个网页就运行成功了，可以试着改变<title>和<body>中的内容。然后重新保存页面并刷新浏览器进行预览。 　　HTML注释 　　在编写HTML代码时，经常要在一些关键代码旁做一下注释，这样做的好处很多，如：方便理解代码、方便查找相关代码或是方便项目组里的其他程序员来了解你所写的代码，还可以方便自己以后对代码的理解和修改。语法格式如下： 　　<!–注释的内容–> 　　“<!–“表示注释的开始，” –>”表示注释的结束。DW中自带添加注释功能，如图1.21所示，也可手动添加注释。

　　图1.1 HTML注释 　　HTML属性 　　使用HTML制作网页时，如果想让网页的内容更丰富，如设置显示文字的颜色为彩色，大小为30。此时如果仅仅使用HTML标签默认显示样式已经不能满足需求，这就需要对HTML标签的属性加以设置，大多数标签都有自己的一些属性, 属性要写在始标签内，属性用于进一步改变显示的效果, 各属性之间无先后次序，可以省略而采用默认值;其语法格式如下： 　　在语法格式中，标签可以有多个属性，必须写在开始标签中，位于标签名之后。属性与标签之前需要一个空格隔开，多个属性之间也用空格隔开。 　　作为一般的原则，大多数属性值不用加双引号。但是包括“空格”、“％”，“＃”等特殊字符的属性值必须加入双引号。为了养成良好的习惯，提倡对属性值全部加双引号。具体示例如下： 　　注意：一定不要在“<”与标签名之间输入多余的空格，也不能在中文状态下输入这些标签及属性，否则浏览器不能正确的识别括号中的标志命令，从而无法正确的显示信息。后面还会学习到更多其他的HTML属性，这里读者只要记住HTML属性的基本格式就好。 　　以上内容源自清华大学出版社出版的《HTML5从入门到精通》，非常适合零基础的同学学习，内容系统且全面。

　　本书是HTML5初学者极好的入门教材之一，内容通俗易懂、由浅入深、循序渐进。本书内容覆盖全面、讲解详细，其中包括标签语义化、标签使用规范、选择器类型、盒模型、标签分类、样式重置、CSS优化、Photoshop切图处理、整页制作、CSS3新样式、HTML5新功能等。 　　本书具有四大特色：一是案例简洁形象，以简单案例来剖析晦涩的知识点；二是通过精简核心内容，摒弃老旧的概念与语法，突出重点内容，从而节省读者的阅读时间与学习成本；三是本书作者实战操作经验丰富，本书内容不仅仅局限于知识点讲解，还包含开发工具、开发流程、整站制作、精确切图等知识点的详细介绍；四是本书包含更多新版本内容，同时对新的CSS3和HTML5知识点都有所涉及。 　　本书适合初学者和中等水平的HTML5开发人员，以及高等院校、培训学校的师生使用，是牢牢掌握HTML5语言开发技术的必读之作。