网站构建学习笔记(0)——基本概念了解及资源学习(copy自w3school)

news/2024/5/19 17:04:47/文章来源:https://blog.csdn.net/KEVINZHAO124517/article/details/102137206

一、学习方面

1、WWW - 万维网

什么是 WWW?

  • WWW 指万维网(World Wide Web)
  • 万维网常被称为Web
  • Web 是由遍布全球的计算机所组成的网络
  • 所有 Web 中的计算机都可以彼此通信
  • 所有这些计算机都使用名为 HTTP 的通信标准

 

WWW 如何工作?

  • 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

 

W3C教程:http://www.w3school.com.cn/w3c/index.asp

 

2、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>
<body><h1>My First Heading</h1><p>My first paragraph.</p></body>
</html>
例子解释
  • <html> 与 </html> 之间的文本描述网页
  • <body> 与 </body> 之间的文本是可见的页面内容
  • <h1> 与 </h1> 之间的文本被显示为标题
  • <p> 与 </p> 之间的文本被显示为段落

 

3、CSS初识

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 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表(位于 <head> 标签内部)
  4. 内联样式(在 HTML 元素内部)

因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:<head> 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。

 

4、JavaScript初识

什么是 JavaScript?

  • JavaScript 被设计用来向 HTML 页面添加交互行为。
  • JavaScript 是一种脚本语言(脚本语言是一种轻量级的编程语言)。
  • JavaScript 由数行可执行计算机代码组成。
  • JavaScript 通常被直接嵌入 HTML 页面。
  • JavaScript 是一种解释性语言(就是说,代码执行不进行预编译)。
  • 所有的人无需购买许可证均可使用 JavaScript

 

Java 和 JavaScript 是相同的吗?

不同!

在概念和设计方面,Java 和 JavaScript 是两种完全不同的语言。

Java(由太阳微系统公司开发)很强大,同时也是更复杂的编程语言,就像同级别的 C 和 C++。

 

image

 

5、XML初识

什么是XML?

  • XML 指可扩展标记语言(EXtensible Markup Language)
  • XML 是一种标记语言,很类似 HTML
  • XML 被设计用来描述数据
  • XML 标签没有被预定义。您需要自行定义标签
  • XML 使用文件类型声明(DTD)或者 XML Schema 来描述数据。
  • 带有 DTD 或者 XML Schema 的 XML 被设计为具有自我描述性
  • XML 是一个 W3C 标准

 

XML 是一个 W3C 标准

    可扩展标记语言于1998年2月10日被确立为 W3C 标准。

 

XML 与 HTML 的主要差异

    XML 被设计用来携带数据。

    XML 不是用来替代 HTML 的。

    XML 和 HTML 为不同的目的而设计:

    XML 被设计用来描述数据,其焦点是数据的内容。

    HTML 被设计用来显示数据,其焦点是数据的外观。

    HTML 旨在显示信息,而 XML 旨在描述信息。

 

没有任何行为的 XML

     XML 是不作为的。

     也许这有点难以理解,但是 XML 不会做任何事情。XML 被设计用来结构化、存储以及传输信息。

下面是 John 写给 George 的便签,存储为 XML:

<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>

     这个标签有标题以及留言。它也包含了发送者和接受者的信息。但是,这个 XML 文档仍然没有做任何事情。它仅仅是包装在 XML 标签中的纯粹的信息。我们需要编写软件或者程序,才能传送、接收和显示出这个文档。

 

XML 是免费的、可扩展的

      XML 标签没有被预定义。您必须“发明”自己的标签。

      被用来标记 HTML 文档及其结构的标签是预定义的。HTML 文档的创作者只能使用在 HTML 标准中被定义的那些标签(比如<p>、<h1>。)。

      XML 允许创作者定义自己的标签以及自己的文档结构。

     上面的例子中的标签没有在任何一个 XML 标准中被定义过。这些标签是由 XML 文档的作者发明的。

 

XML 是对 HTML 的补充

     XML 不是 HTML 的替代物。

     您需要理解 XML 不是 HTML 的替代物,这一点非常重要。在未来的 Web 开发中,最有可能出现的情况是,XML 会被用来描述数据,而 HTML 会被用来格式化和显示这些数据。

     我们关于 XML 最好的描述是:XML 是跨平台的、用于传输信息且独立于软件和硬件的工具。

 

XML 在未来的 Web 开发中扮演的角色

     XML 将会无所不在。

     当我们看到 XML 标准突飞猛进的开发进度,以及大批的软件开发商采用这个标准的日新月异的速度时,真的是不禁感叹这真是令人叹为观止。

     我们坚定地认为,XML 将在 Web 的未来中起到的作用不会亚于一直作为 Web 基石的 HTML,并且,XML 将会成为所有数据处理和数据传输的最常用的工具。

 

6、服务器端脚本初识

什么是服务器脚本?

      通常,当浏览器请求某个 HTML 文件时,服务器会返回此文件,但是假如此文件含有服务器端的脚本,那么在此 HTML 文件作为纯 HTML 被返回浏览器之前,首先会执行 HTML 文件中的脚本。

 

服务器脚本能做什么呢?

  • 动态地向 web 页面编辑、改变或添加任何的内容
  • 对由 HTML 表单提交的用户请求或数据进行响应
  • 访问数据或数据库,并向浏览器返回结果
  • 为不同的用户定制页面
  • 提高网页安全性,使您的网页代码不会通过浏览器被查看到

重要事项:由于脚本在服务器上执行,因此浏览器在不支持脚本的情况下就可以显示服务器端的文件!

 

ASP 和 PHP

     您无法通过查看源代码来查看 ASP 或 PHP 的源代码,您看到的仅仅是来自服务器的输出,那些纯粹的 HTML。这是因为在结果以纯粹的 HTML 发送到浏览器之前,脚本已经在服务器上执行了。

 

ASP 实例

http://www.w3school.com.cn/tiy/s.asp?f=demo_aspe_text

http://www.w3school.com.cn/tiy/s.asp?f=demo_aspe_formatting

 

7、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 数据库表

     一个数据库通常包含一个或多个表。每个表由一个名字标识(例如“客户”或者“订单”)。表包含带有数据的记录(行)。

下面的例子是一个名为 "Persons" 的表:

image

上面的表包含三条记录(每一条对应一个人)和四个列(姓、名、地址和城市)。

 

SQL 查询程序

通过 SQL,我们可以查询某个数据库,并获得返回的一个结果集。

查询程序类似这样:

SELECT LastName FROM Persons

结果集类似这样:

image

注释:某些数据库系统要求在 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 - 删除索引

转载于:https://www.cnblogs.com/BlueMountain-HaggenDazs/p/4426366.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_807377.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Wordpress安装Redis为网站加速

前面我们讲了宝塔Linux面板安装Redis&#xff0c;现在我们来举一些例子来看看redis的实际运用&#xff0c;比如Wordpress安装Redis为网站加速&#xff0c;下面就跟着ytkah一起来操作一下。 第一&#xff0c;下载predis.php放到网站根目录&#xff0c;与index.php同目录&#xf…

利用利用政府网站获得SEO高质量外链方法【吐血收集】

最近&#xff0c;有在网上发现一个【高权重外链】的发布方法。利用政府网站的虚拟外链转为物理外链&#xff0c;从而获得政府网站的外链权重。政府网站的权重本来就高&#xff0c;通过这个方法可以获得一定权重的政府外链。一、首先要找到目标政府网站首先你要找到高权重的政府…

使用Hexo+Github搭建自己的个人网站

文章目录1、准备工作2、打开git bash命令行输入:3、新建本地博客文件夹Blog4、GitHub新建仓库1、准备工作 1、创建一个GitHub账户 2、下载安装 Node.js (包含 npm) 3、安装Git 2、打开git bash命令行输入: 注:在任意位置打开git bash输入即可。 node -v //查看node.js的版…

使用Typecho搭建个人网站

博主以前是Hexo和GitHub来搭建的网站nonniexie.cn的,这里介绍用Typecho来搭建。准备工作&#xff0c;需要一台自己的云服务器。并且远程连接到云服务器上&#xff0c;给你推荐几个比较好用的连接工具FinalShell、Xshell 5、SecureCRTP、putty一共四款工具。个人比较喜欢Xshell …

phpStudy v8.1创建本地网站域名

**简介&#xff1a;**以tp5.1为例&#xff0c;利用phpstudy v8.1创建一个本地网站域名。 **第一步&#xff1a;**打开phpStudy并启动web服务&#xff1b; **第二步&#xff1a;**点击“创建网站”&#xff1b; **第三步&#xff1a;*输入域名、http80、同步hosts、定位根目录&…

phpStudy v8.1创建本地网站域名

简介&#xff1a; 以tp5.1为例&#xff0c;利用phpstudy v8.1创建一个本地网站域名。 第一步&#xff1a; 打开phpStudy并启动web服务&#xff1b; **第二步&#xff1a;**点击“创建网站”&#xff1b; **第三步&#xff1a;*输入域名、http80、同步hosts、定位根目录&#x…

ThinkPHP6.0在phpstudy下配置网站域名

1、安装T6框架&#xff0c;参照文章&#xff1a;Composer与ThinkPHP6.0的下载与安装 2、打开phpstudy&#xff0c;启动Apache。 3、在phpstudy导航栏目中选择“网站”&#xff0c;点击“创建网站” 在弹出的网站对话框内&#xff0c;自行填写域名、将根目录定位到t6的入口文件…

python 自动登录网站_解放双手,用Python自动登录25个主流网站

原标题&#xff1a;解放双手&#xff0c;用Python自动登录25个主流网站 用 Python 写爬虫脚本是大家经常遇到的需求。在这个过程中&#xff0c;避开不了登录这一关。 使用 Python 一般会用 request 库&#xff0c;补充 header 中的 post 要素&#xff0c;有些还会有 隐藏的 hid…

在服务器上同时执行 多个kettle_一台服务器上如何创建多个网站?

一台服务器上如何放多个网站呢&#xff1f;其实很简单&#xff0c;我们以阿里云服务器为例。教大家用宝塔面板一键部署&#xff0c;轻松添加多个站点。&#xff08;在步骤12&#xff09;什么是宝塔面板&#xff1a;宝塔Linux面板是提升运维效率的服务器管理软件&#xff0c;支持…

什么是CDN,网站被攻击时该怎么防

日前&#xff0c;空前高涨的网络攻击威胁着大量的站长&#xff0c;很多站长为了应对网络攻击可谓是耗尽心力&#xff0c;取得的效果确是不尽人意的。 首先我们应该了解什么是网络攻击&#xff0c;网络攻击常见的有DDOS攻击&#xff0c;WEB应用攻击等。 DDOS攻击全称也叫分布式…

php1139,已解决!php-fpm配置弄错了,面板,网站都502 Bad Gateway

[求助帖]已解决&#xff01;php-fpm配置弄错了&#xff0c;面板&#xff0c;网站都502 Bad Gateway铁牌会员158.00 价值分总 16,650 次阅读 13 张回复 hyb9512 发表于 2014-03-05 14:24:25本帖最后由 hyb9512 于 2014-3-7 00:40 编辑之前都一直好好的&#xff0c;今天网站打…

java jpanel 数据刷新6,Java提取网站后台数据进行处理并排名

Java提取网站后台数据进行处理并排名一、网页分析打开网站后&#xff0c;可以看到这个网站的编程语言排名情况。我们选择下图中的图表&#xff0c;这个图表中有2001-2019年的编程语言每个月的使用率&#xff0c;我需要它的数据。二、数据提取在网页点右键&#xff0c;点击查看源…

服务器ip端口ip显示全部未分配,IIS网站属性里,只有(全部未分配),找不到IP地址的解决方法...

IIS网站属性里&#xff0c;只有(全部未分配)&#xff0c;找不到IP地址的解决方法今天配置服务器的时候发现有台服务器&#xff0c;iis里面没有ip地址如上图所示亲测的解决方法&#xff1a;修改下计算机名称&#xff0c;然后重启服务器就可以了。具体步骤如下&#xff1a;我的电…

Matlab标定工具箱使用教程(对应英文网站)

Matlab标定工具箱使用教程 这个教程将带你完整地利用20到25张平面棋盘格图像进行相机标定。 这个教程将让你学会如何使用所有工具箱的特征&#xff1a;载入图像、提取图像角点、运行标定引擎、显示结果、控制精度 添加和删减图像、图像矫正、导出标定不同格式的数据...这个教程…

html铺满整个页面_自适应网站页面适配实现和基本原理讲解

随移动端设备的普及&#xff0c;移动web网站成为了前端工程师工作主攻点诸多的手机厂商&#xff0c;导致每种手机机型、分辨率等手机参数相差很多&#xff0c;同时给前端开发人员增加了工作难度此时手机端的适配是个不得不解决的问题下面介绍一下网站适配的实现及原理是如何操作…

css不显示_Web 性能优化:21 种优化 CSS 和加快网站速度的方法

SegmentFault 社区专栏&#xff1a;终身学习者作者&#xff1a;Tam Hanna译者&#xff1a;前端小智 来源&#xff1a;creativebloqCSS 必须通过一个相对复杂的管道&#xff0c;就像 HTML 和 JavaScript 一样&#xff0c;浏览器必须从服务器下载文件&#xff0c;然后进行解析并将…

html5 企业网站模板 多语言,通用HTML5企业网站模板

通用HTML5企业网站模板资源下载此资源下载价格为4D币&#xff0c;请先登录资源文件列表codedown123-0820-24/about-us.html , 24118codedown123-0820-24/contact.html , 22243codedown123-0820-24/css/animate.min.css , 53032codedown123-0820-24/css/bootstrap.min.css , 122…

麒麟服务器上安装.Net Core环境并发布web网站

本文主要记录在麒麟服务器上安装.Net Core的运行环境&#xff0c;并运行.Net Core webApi程序。 准备工作 我使用的是华为云主机&#xff0c;操作系统为&#xff1a;银河麒麟高级服务器操作系统V10&#xff0c;CPU为鲲鹏&#xff0c;架构为Arm64。 如何购买一台云主机&#…

不吹不黑,“滴滴,移动端静态网站开发

如果让你组织一次团建活动&#xff0c;你怎么处理&#xff1f;(对&#xff0c;这是滴滴技术面的问题&#xff0c;呵呵哒) 反正最后滴滴的定级和薪资也被压得更惨&#xff0c;职级比其他offer至少低了两个档次&#xff0c;呵呵哒。 在下也不是故意抹黑滴滴&#xff0c;但事实就…

wap网站制作教程,Github标星5.3K

这里是网站制作的内容 这里是网站推广的内容 OK&#xff0c;完成了上面的步骤&#xff0c;下面我们要看一看运行结果了&#xff0c;稍微检查一下左边的运行代码&#xff0c;看看有没有粗心错误&#xff0c;单击上部的预览按钮&#xff0c;如果没有错误的话就会在右边显示编程的…