网页前端开发基础知识

刚接触网页前端!在网上搜了很多的关于网页前端相关资料,都不尽人意,主要是感觉难!

本文很多来源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教程

https://www.w3school.com.cn/sql/index.asp

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,230评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,261评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,089评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,542评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,542评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,544评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,922评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,578评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,816评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,576评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,658评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,359评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,937评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,920评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,859评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,381评论 2 342

推荐阅读更多精彩内容