刚接触网页前端!在网上搜了很多的关于网页前端相关资料,都不尽人意,主要是感觉难!
本文很多来源w3school 在线教程!
网站构建初级教程
万维网如何工作
www初级教程
什么是 WWW?
WWW 指万维网(World Wide Web)
万维网常被称为Web
Web 是由遍布全球的计算机所组成的网络
所有 Web 中的计算机都可以彼此通信
所有这些计算机都使用名为 HTTP 的通信标准
它如何工作?
Web 信息存储于被称为网页的文档中
网页是存储于被称为 Web 服务器的计算机上
读取网页的计算机称为 Web 客户端
Web 客户端通过称为浏览器的程序来查看网页
主要的浏览器有 Internet Explorer 和 Mozilla Firefox
浏览器如何获取页面
浏览器可通过一个请求来读取某个服务器上的一张网页
请求是一个包含页面地址的标准 HTTP 请求
页面地址类似这样:http://www.someone.com/page.htm
浏览器如何显示页面
所有的网页都含有其如何被显示的结构
浏览器通过阅读这些结构来显示页面
最常用的显示结构称为 HTML 标签
用于段落的 HTML 标签类似这样:<p>
在 HTML 中像这样定义段落:<p>This is a Paragraph</p>
谁来指定web的标准
web 标准不是由 Netscape 或 Microsoft 制定的
web 的规则制定主体是 W3C
W3C 指的是万维网联盟(World Wide Web Consortium)
W3C 将各种规范订立为 web 标准
最核心的 web 标准是 HTML、CSS、XML
最新的 HTML 标准是 XHTML 1.0
什么是服务器?
服务器是计算机的一种
它比普通计算机运行更快、负载更高、价格更贵
服务器在网络中为其它客户机,提供计算或者应用服务
具备承担响应服务请求、承担服务、保障服务的能力
具有高速的CPU运算能力、长时间的可靠运行、强大的I/O外部数据吞吐能力以及更好的扩展性。
HTML 语言
什么是 HTML?
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言,而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词,比如 <html>
HTML 标签通常是成对出现的,比如 <b> 和 </b>
标签对中的第一个标签是开始标签,第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML文档
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容:
例子解释
<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落
如何使用层叠样式表 (CSS)
CSS 初级教程
需要具备的基础知识
HTML
XHTML
CSS 概述
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
样式解决了一个普通问题
HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>, <p>, <table> 这样的标签,HTML 当初被指望用来表达“这是标题”、“这是段落”、“这是表格”之类的信息。而文档的布局被期望由浏览器来完成,而不使用任何的格式化标签。
由于两种主要的浏览器(Netscape 和 Internet Explorer)不断地将新的 HTML 标签和属性(比如字体标签和颜色属性)添加到 HTML 规范之中,因此创建文档内容清晰地独立于文档表现层的站点变得越来越困难。
为了解决这个问题,万维网联盟(W3C),这个非营利的标准化联盟,肩负起了 HTML 标准化的使命,并在 HTML 4.0 之外创造出 STYLES(样式)。
所有的主流浏览器均支持层叠样式表。
样式表极大地提高了工作效率
样式表定义如何显示 HTML 元素,诸如 HTML 3.2 的样式中的字体标签和颜色属性通常被保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面布局的外观。
由于允许同时控制多重页面的样式和布局,CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者,你可以为每个 HTML 元素定义样式,并将之应用于你希望的任意多的页面中。如需进行全局变换,只需简单地改变样式,然后网站中的所有元素均会被自动地更新。
多重样式将层叠为一个
样式表允许以多种方式规定样式信息。样式可以被规定于单个的 HTML 元素中,在 HTML 页的头元素中,或在一个外部的 CSS 文件中。甚至可以在一个单一的 HTML 文档内部引用多个外部样式表。
层叠次序
当同一个HTML元素被不止一个样式所定义时,会使用哪个样式呢?一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。
浏览器缺省设置
外部样式表
内部样式表(位于 <head> 标签内部)
内联样式(在 HTML 元素内部)
因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:<head> 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。
JavaScript 编程
JavaScript 初级教程
在数百万张页面中,JavaScript 被用来改进设计、验证表单、检测浏览器、创建cookies,等等等等。
JavaScript 是因特网上最流行的脚本语言,并且可在所有主要的浏览器中运行,比方说 Internet Explorer、 Mozilla、Firefox、Netscape、和 Opera。
应具备的知识
HTML
XHTML
什么是JavaScript
JavaScript 被设计用来向 HTML 页面添加交互行为。
JavaScript 是一种脚本语言(脚本语言是一种轻量级的编程语言)。
JavaScript 由数行可执行计算机代码组成。
JavaScript 通常被直接嵌入 HTML 页面。
JavaScript 是一种解释性语言(就是说,代码执行不进行预编译)。
所有的人无需购买许可证均可使用 JavaScript。
Java和JavaScript是相同的吗?
不同!
在概念和设计方面,Java 和 JavaScript 是两种完全不同的语言。
Java(由太阳微系统公司开发)很强大,同时也是更复杂的编程语言,就像同级别的 C 和 C++。
JavaScript能做什么
JavaScript 为 HTML 设计师提供了一种编程工具
HTML 创作者往往都不是程序员,但是 JavaScript 却是一种只拥有极其简单的语法的脚本语言!几乎每个人都有能力将短小的代码片断放入他们的 HTML 页面当中。
JavaScript 可以将动态的文本放入 HTML 页面
类似于这样的一段 JavaScript 声明可以将一段可变的文本放入 HTML 页面:document.write("<h1>" + name + "</h1>")
JavaScript 可以对事件作出响应
可以将 JavaScript 设置为当某事件发生时才会被执行,例如页面载入完成或者当用户点击某个 HTML 元素时。
JavaScript 可以读写 HTML 元素
JavaScript 可以读取及改变 HTML 元素的内容。
JavaScript 可被用来验证数据
在数据被提交到服务器之前,JavaScript 可被用来验证这些数据。
JavaScript 可被用来检测访问者的浏览器
JavaScript 可被用来检测访问者的浏览器,并根据所检测到的浏览器,为这个浏览器载入相应的页面。
JavaScript 可被用来创建 cookies
JavaScript 可被用来存储和取回位于访问者的计算机中的信息。
XML 标准
XML 初级教程
XML 被设计用来描述数据,其焦点是数据的内容。
HTML 被设计用来显示数据,其焦点是数据的外观。
应掌握的基础知识
HTML / XHTML
JavaScript 或 VBScript
什么是XML
XML 指可扩展标记语言(EXtensible Markup Language)
XML 是一种标记语言,很类似 HTML
XML 被设计用来描述数据
XML 标签没有被预定义。您需要自行定义标签。
XML 使用文件类型声明(DTD)或者 XML Schema 来描述数据
带有 DTD 或者 XML Schema 的 XML 被设计为具有自我描述性。
XML 是一个 W3C 标准
可扩展标记语言于1998年2月10日被确立为 W3C 标准。
XML与HTML的主要差异
XML 被设计用来携带数据。
XML 不是用来替代 HTML 的。
XML 和 HTML 为不同的目的而设计:
XML 被设计用来描述数据,其焦点是数据的内容。
HTML 被设计用来显示数据,其焦点是数据的外观。
HTML 旨在显示信息,而 XML 旨在描述信息。
没有任何行为的XML
XML 是不作为的。
也许这有点难以理解,但是 XML 不会做任何事情。XML 被设计用来结构化、存储以及传输信息。
XML是免费的、可扩展的
XML 标签没有被预定义。您必须“发明”自己的标签。
被用来标记 HTML 文档及其结构的标签是预定义的。HTML 文档的创作者只能使用在 HTML 标准中被定义的那些标签(比如<p>、<h1>。)。
在未来的 Web 开发中,最有可能出现的情况是,XML 会被用来描述数据,而 HTML 会被用来格式化和显示这些数据。
我们关于 XML 最好的描述是:XML 是跨平台的、用于传输信息且独立于软件和硬件的工具。
XML在未来的Web开发中扮演的角色
XML 将会无所不在。
当我们看到 XML 标准突飞猛进的开发进度,以及大批的软件开发商采用这个标准的日新月异的速度时,真的是不禁感叹这真是令人叹为观止。
我们坚定地认为,XML 将在 Web 的未来中起到的作用不会亚于一直作为 Web 基石的 HTML,并且,XML 将会成为所有数据处理和数据传输的最常用的工具。
服务器脚本技术
HTML 文件可以包含文本、HTML 标签以及脚本。HTML 文件中的脚本可以在 web 服务器上执行。
服务器前端脚本
服务器端脚本是对服务器行为的编程。这被称为服务器端脚本或服务器脚本。
客户端脚本是对浏览器行为的编程。
什么是服务器脚本
通常,当浏览器请求某个 HTML 文件时,服务器会返回此文件,但是假如此文件含有服务器端的脚本,那么在此 HTML 文件作为纯 HTML 被返回浏览器之前,首先会执行 HTML 文件中的脚本。
服务器脚本能做什么
动态地向 web 页面编辑、改变或添加任何的内容
对由 HTML 表单提交的用户请求或数据进行响应
访问数据或数据库,并向浏览器返回结果
为不同的用户定制页面
.提高网页安全性,使您的网页代码不会通过浏览器被查看到
ASP和PHP
我们通过使用活动服务器页面(ASP)和超文本预处理器(PHP)来演示服务器端的脚本编程。
您无法通过查看源代码来查看 ASP 或 PHP 的源代码,您看到的仅仅是来自服务器的输出,那些纯粹的 HTML。这是因为在结果以纯粹的 HTML 发送到浏览器之前,脚本已经在服务器上执行了。
脚本教程
ASP 教程
https://www.w3school.com.cn/asp/index.asp
PHP教程
https://www.w3school.com.cn/php/index.asp
使用 SQL 来管理数据
SQL 是用于访问和处理数据库的标准的计算机语言。
通过SQL来管理数据
结构化查询语言 (SQL) 是用于访问数据库的标准语言,这些数据库包括 SQL Server、Oracle、MySQL、Sybase 以及 Access 等等。
对于那些希望在数据库中存储数据并从中获取数据的人来说,SQL 的知识是价值无法衡量的。
什么是SQL
SQL 指结构化查询语言 (Structured Query Language)
SQL 使我们有能力访问数据库
SQL 是一种 ANSI 的标准计算机语言
SQL 面向数据库执行查询
SQL 可从数据库取回数据
SQL 可在数据库中插入新的记录
SQL 可从数据库删除记录
SQL 很容易学习
SQL是一种标准
SQL 是一门 ANSI 的标准计算机语言,用来访问和操作数据库系统。SQL 语句用于取回和更新数据库中的数据。SQL 可与数据库程序协同工作,比如 MS Access、DB2、Informix、MS SQL Server、Oracle、Sybase 以及其他数据库系统。
不幸地是,存在着很多不同版本的 SQL 语言,但是为了与 ANSI 标准相兼容,它们必须以相似的方式共同地来支持一些主要的关键词(比如 SELECT、UPDATE、DELETE、INSERT、WHERE 等等)。
SQL数据库表
一个数据库通常包含一个或多个表。每个表由一个名字标识(例如“客户”或者“订单”)。表包含带有数据的记录(行)。
SQL数据库表
SQL查询程序
通过 SQL,我们可以查询某个数据库,并获得返回的一个结果集。
查询程序类似这样:
SELECT LastName FROM Persons
结果类似
注释:某些数据库系统要求在 SQL 命令的末端使用分号。在我们的教程中不使用分号。
SQL数据操作语言(DML)
SQL (结构化查询语言)是用于执行查询的语法。但是 SQL 语言也包含用于更新、插入和删除记录的语法。
这些查询和更新语句都来自 SQL 的 DML 部分:
SELECT - 从数据库表中获取数据
UPDATE - 更新数据库表中的数据
DELETE - 从数据库表中删除数据
INSERT INTO - 向数据库表中插入数据
SQL数据定义语言(DDL)
SQL 的数据定义语言部分使我们有能力创建或删除表格。我们也可以定义索引(键),规定表之间的链接,以及施加表间的约束。
SQL 中最重要的 DDL 语句:
CREATE TABLE - 创建新表
ALTER TABLE - 变更(改变)数据库表
DROP TABLE - 删除表
CREATE INDEX - 创建索引(搜索键)
DROP INDEX - 删除索引
SQL教程