web前端基础知识！
【HTML文档的基本结构和语法】
【基本结构】：
<HTML> HTML 文件开始
<HEAD> HTML 文件的头部开始
<title> 网页的标题</title>
......
...... HTML文件的头部内容
</HEAD> HTML文件的头部结束
<BODY> HTML文件的主体开始
......
...... HTML文件的主体内容
</BODY> HTML文件的主体结束
</HTML> HTML文件结束
|
【语法】__【Text Elements】:
<p>This is a paragraph</p>
<br> (line break)
<hr> (horizontal rule)(水平分割线)
<pre>This text is preformatted</pre>pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
__________【Logical Styles】
<em>This text is emphasized</em>（斜体强调）
<strong>This text is strong</strong>（加粗强调）
<code>This is some computer code</code>（表示计算机源代码或者其他机器可以阅读的文本内容）
__________【Physical Styles】
<b>This text is bold</b>（加粗）
<i>This text is italic</i>（斜体）
__________【Links, Anchors, and Image Elements】
<a href="http://www.example.com/">This is a Link</a>
<a href="http://www.example.com/"><img src="URL" alt="Alternate Text"></a>
<a href="mailto:webmaster@example.com">Send e-mail</a>
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</a>
__________【Unordered list】//无序列表
<ul>
<li>First item</li>
<li>Next item</li>
</ul>
__________【Ordered list】
<ol start="10">
<li>First item</li>
<li>Next item</li>
</ol>
__________【Definition list】//定义表
<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>
__________【Tables】
<table border="1">
<tr>
<th>someheader</th> //<th>定义表格内的表头单元格。
<th>someheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>
__________【Frames】
<frameset cols="25%,75%"> //百分比设置宽度
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
__________【Forms】
<form action="http://www.example.com/test.asp" method="post/get">
<input type="text" name="lastname" value="Nixon" size="30" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">
<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>
<textarea name="Comment" rows="10" cols="20"></textarea>
__________【Entities】//实体
< is the same as <
> is the same as >
© © is the same as © //版权
& is the same as &
"is the same as "
® 已注册商标 ® ®
™ 商标（美国） ™ ™
× 乘号 × ×
÷ 除号 ÷ ÷
__________【Other Elements】
<!-- This is a comment -->
<blockquote> //定义块引用
Text quoted from some source.
</blockquote>
<address> //定义文档或文章的作者/拥有者的联系信息
Address 1<br>
Address 2<br>
City<br>
</address>
【HTML表单与常用控件】
【表单】：HTML 表单用于搜集不同类型的用户输入。
【常用控件】：
<input type="text" />文本输入框<br />
<input type="submit" value="提交按钮" /><br />
<input type="reset" value="重置按钮" /><br />
<input type="radio" />单选按钮<br />
<input type="password" />密码输入框<br />
<input type="image" />图像<br />
<input type="hidden" />隐藏域<br />
<input type="file" />文件提交<br />
<input type="checkbox" />复选框<br />
<input type="button" />普通按钮<br />
<select>
<option>选择列表</option>
<optgroup><option>下拉子菜单</option></optgroup>
</select>
<textarea>文本区域</textarea>
<label>标签</label>
<fieldset>分组</fieldset>
<legend>描述元素，必填信息</legend>
【CSS的基本概念和作用】
|
【概念】：CSS (Cascading Style Sheet) 中文译为层叠样式表，是一系列格式规则，用于控制网页内容的外观(样式)并允许将样式信息和网页内容分离的一种标记语言。HTML与CSS的关系就是“网页结构”与“表现形式”的关系。
【作用】：用于网页中样式的定义，解决内容与表现分离的问题。
【CSS的基本语法和基本使用方法】
【基本语法】：CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
| selector{declaration1; declaration2; ... declarationN }
| 每条声明由一个属性和一个值组成，每个属性有一个值。属性和值被冒号分开。
| selector {property: value}
【基本使用方法】：
内联样式：直接对HTML的标记使用style属性，将CSS代码直接写在其中。
<p style="color: sienna; margin-left: 20px">This is a paragraph</p>
内部样式表：将CSS写在<style>与</style>之间。
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
外部样式表： <head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>。
【CSS的层次及其作用优先级】：样式表的优先级由高到低：行内样式表(内联样式表) > 内部样式表 > 外部样式表
补充规则： 优先级相同的情况下，后定义的属性会覆盖先前定义的。
标有"!important"的规则有最高优先级
【JavaScript的基本概念和作用】
【基本概念】：JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。
【作用】：主要用来向HTML页面添加交互行为。
【JavaScript的基本语法】
【】
1.区分大小写：变量名、函数名、运算符以及其他一切东西都是区分大小写的。
2.变量属于弱类型(var)。弱类型是指弱类型变量可以被赋予任何类型的值。
3.每行结尾的分号可有可无。
4.注释：单行注释 // 多行注释 /**/
5.括号表示代码块:{}
6.变量的定义：使用var关键字来声明。变量的命名规范是：字母数字，$符和下划线构成，但是不可以以数字开始。变量名不可以使用关键字.
7.JavaScript的数据类型：
undefined 类型
null 类型（对象）
boolean 类型
number 类型(int整型 float浮点型)
八进制数和十六进制数 012
浮点数
特殊的 Number 值
string 类型
funciton -- 函数类型
object引用类型。
8. 类型转换：
使用：Number（）、parseInt() 和parseFloat（） 做类型转换
Number()强转一个数值(包含整数和浮点数)。
*parseInt()强转整数，
*parseFloat（）强转浮点数
函数isNaN()检测参数是否不是一个数字。 is not a number
ECMAScript 中可用的 3 种强制类型转换如下：
Boolean(value) - 把给定的值转换成 Boolean 型；
Number(value) - 把给定的值转换成数字（可以是整数或浮点数）；
String(value) - 把给定的值转换成字符串；
【JavaScript常用内置对象】
|
【】JavaScript内置对象有以下几种。
● String对象：处理所有的字符串操作
● Math对象：处理所有的数学运算
● Date对象：处理日期和时间的存储、转化和表达
● Array对象：提供一个数组的模型、存储大量有序的数据
● Event对象：提供JavaScript事件的各种处理信息
内置对象都有自己的方法和属性，访问的方法如下：
对象名.属性名称
对象名.方法名称(参数表)
【浏览器对象模型BOM的基本概念和作用】
|
【基本概念】： BOM(Browser Object Mode) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
|
【作用】：
1. 弹出新的浏览器窗口、移动、关闭浏览器窗口及调整窗口大小；
2. 提供WEB浏览器详细信息的导航对象；
3. 提供装载到浏览器中页面的详细信息的定位对象；
4. 提供用户屏幕分辩率详细信息的屏幕对象；
5. 对cookie的支持。
【文档对象模型DOM的基本概念和作用】
【基本概念】：DOM是Document Object Module的缩写，即文档对象模型。DOM是表示文档和访问、操作构成文档的各种元素的应用程序接口(API)，所有支持JavaScript的web浏览器都支持DOM。
|
【作用】：DOM将网页内的元素与内容呈现为一个清晰、易读的树状模型。把整个页面映射为一个多层节点结构。
【Internet与Web技术的基本概念】
【Internet】：Internet是一个开放的、由位于世界不同地方的众多网络和计算机互联而成、依靠TCP/IP协议实现通信的互联网络。
【Web技术】：World Wide Web（WWW或Web）
Web是分布在全世界的、基于HTTP通信协议的、存储在Web服务器中的所有互相链接的超文本集。它采用客户/服务计算模式。Web服务器端存放用Web文档组织的各种信息；客户端通过浏览器软件(如IE or Netscape等) 浏览这些信息资源。
Web就是存储在Internet上的计算机中数以千万计、彼此关联的文档集合。
Web实际上是一种全球性的资源系统，而Internet是它的通信基础设施。
Web服务器：基于HTTP 通信协议的服务器称为Web服务器。Web服务器中存放Web文档。
Web文档：Web服务器中存放的类似于 用HTML语言组织的各种信息称为Web文档。
【Web技术的主要组成】
⑴超文本传送协议(HTTP, Hyper-Text Transfer Protocol)
⑵统一资源定位地址(URL, Uniform Resource Locator)
⑶超文本标记语言(HTML)
⑷Web服务器
⑸ Web浏览器
【Web浏览器与服务器的基本概念和工作原理】
【Web浏览器】：用于通过URL来获取并显示Web网页的一种软件工具。
【Web服务器】：基于HTTP 通信协议的服务器称为Web服务器。Web服务器中存放Web文档。
【工作原理】：
（1）用户请求（URL地址）
（2）根据用户请求查找信息资源地址
（3）应用程序服务器对数据库执行查询操作
（4）查询结果返回应用程序服务器
（5）应用程序服务器将数据嵌入页面
（6）Web服务器把完成页面发给浏览器
（7）浏览器为用户显示查找结果
____
|客| __________ ___________ ________
|户| ==>(1)==> | | ==>(2)==> | | ==>(3)==> | |
|端| | | | | | |
(7)|浏| |internet| |Web服务器| |数据库|
|览| <==(6)<== | | <==(5)<== | | <==(4)<== | |
|器| |________| |_________| |______|
|__|
【Web应用开发构架和开发技术】
Web应用框架（Web application framework）是一种电脑软件框架，用来支持动态网站、网络应用程序及网络服务的开发。这种框架有助于减轻网页开发时共通性活动的工作负荷，例如许多框架提供数据库访问接口、标准样板以及会话管理等，可提升代码的可再用性。
种类： MVC框架（模型-视图-控制器）MVC（Model view controller）
三部分组织组织模式
内容管理系统（CMS）
模型 - 视图 - 控制器（MVC（Model view controller））
许多框架遵循模型 - 视图 - 控制器（MVC）体系模型的结构模式，使数据模型与用户界面分开。这被普遍认为是一个很好的做法，因为它模块化的代码，能提高代码的重复使用，并允许多个接口。在Web应用中，这允许不同的应用方面，如网页，远程应用程序和Web服务接口。MVC是业界比较认可的架构模型。
三部分组织组织模式
在这种组织模式中，应用程序创建在三个部分：客户端，应用程序和数据库。数据库通常是一个RDBMS。而客户端指的是由Web应用程序生成的HTML，在用户的浏览器运行。应用程序运行在服务器上。
内容管理系统（CMS）
指的是一种内容编辑程序。就像在博客写文章一样，不需要懂得编程的人，也可以通过CMS发布，更改，管理内容。
【开发技术】：
【客户端技术】：HTML、CSS、DOM、JavaScript、AJAX等。
【服务器端技术】：CGI、ASP、PHP、ASP.NET和JSP。
【Java Servlet 和 JSP 基本概念和原理】
【Java Servlet】：Java Servlet是一个专门用于编写网络服务器应用程序的Java组件。所有基于Java的服务器端编程都是构建在Servlet之上的。在J2EE中Servlet已经是一个标准的组件。
【ASP.NET基本概念和原理】
【概念】
ASP.NET是Microsoft公司推出的新一代建立动态Web应用程序的开发平台，是一种建立动态Web应用程序的新技术。ASP.NET是.NET框架的一部分，可以使用任何.NET兼容的语言（如Visual Basic、C#）来编写ASP.NET应用程序。
ASP.NET是Microsoft.NET的一部分，是Active Server Page（简称ASP）的另一个版本；ASP.NET提供了一个统一的Web开发模型，其中包括开发人员生成企业级Web应用程序所需的各种服务。ASP.NET的语法在很大程度上与ASP兼容，同时还提供一种新的编程模型和结构，可生成伸缩性和稳定性更好的应用程序，并提供更好的安全保护。
ASP.NET是一个已编译的、基于.NET的环境，可以用任何与.NET兼容的语言（包括Visual Basic.NET、C#和JScript .NET）创作应用程序。另外，任何ASP.NET应用程序都可以使用整个.NET Framework。开发人员可以方便地获得这些技术的优点，其中包括托管的公共语言运行库环境、类型安全和继承等。
【原理】
ASP.NET的运行原理：在ASP.NET中，当一个HTTP请求发送到服务器并被IIS接收之后，IIS首先通过客户端请求的页面类型为其加载相应的.dll文件，然后在处理过程中将这条请求发送给能够处理这个请求的模块。在ASP.NET中，这个模块叫做HttpHandler（HTTP处理程序组件），之所以.aspx文件可以被服务器处理，就是因为在服务器端有默认的HttpHandler专门处理.aspx文件。IIS在将这条请求发送给能够处理该请求的模块之前，还需要经过一些HttpModule的处理，这些都是系统默认的Modules（用于获取当前应用程序的模块集合），在该HTTP请求传到HttpHandler之前，要经过不同的HttpModule的处理。
【PHP基本概念和原理】
【概念】：PHP（外文名: Hypertext Preprocessor，中文名：“超文本预处理器”）是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点，易于学习，使用广泛，主要适用于Web开发领域。
【原理】：PHP的所有应用程序都是通过WEB服务器(如IIS或Apache)和PHP引擎程序解释执行完成的，工作过程：(1)当用户在浏览器地址中输入要访问的PHP页面文件名，然后回车就会触发这个PHP请求，并将请求传送化支持PHP的WEB服务器。(2)WEB服务器接受这个请求，并根据其后缀进行判断如果是一个PHP请求，WEB服务器从硬盘或内存中取出用户要访问的PHP应用程序，并将其发送给PHP引擎程序。(3)PHP引擎程序将会对WEB服务器传送过来的文件从头到尾进行扫描并根据命令从后台读取，处理数据，并动态地生成相应的HTML页面。(4)PHP引擎将生成HTML页面返回给WEB服务器。WEB服务器再将HTML页面返回给客户端浏览器。
【AJAX基本概念和原理】
【概念】：AJAX即“Asynchronous Javascript And XML[1] ”（异步JavaScript和XML[1] ），是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页面。
【原理】：Ajax的工作原理相当于在用户和服务器之间加了—个中间层，使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。
Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。
ajax是很多种技术的集合体。其中包括浏览器的xmlHTTPRequest对象，他是负责为你开通另一条连接通道，可以传递信息。javascript：他是负责调用XMLHTTPRequest对象进行与后台交互的媒介。xml是一种数据格式，用于服务器应答传递信息的格式。除了xml外，还可以使用任何的文本格式，包括text，html，json等。
web前端基础知识！的更多相关文章
- web前端基础知识及快速入门指南
web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
- web前端基础知识学习网站推介
内容:一．基础知识及学习资料1. HTML入门学习:http://www.w3school.com.cn/html/index.aspHTML5 入门学习:http://www.w3school.co ...
- web前端基础知识总结
上个寒假总结的web前端的一些知识点给大家分享一下 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1) dir: 文本的显示方向,默认是从左向右 ...
- web前端基础知识
#HTML 什么是HTML,和他ML... 网页可以比作一个装修好了的,可以娶媳妇的房子. 房子分为:毛坯房,精装修 毛坯房的修建: 砖,瓦,水泥,石头,石子.... 精 ...
- web前端基础知识-（八）Ajax
Ajax即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术,AJAX = 异步 Ja ...
- web前端基础知识-（七）Django进阶
通过上节课的学习,我们已经对Django有了简单的了解,现在来深入了解下~ 1. 路由系统 1.1 单一路由对应 url(r'^index$', views.index), 1.2 基于正则的路由 u ...
- web前端基础知识 - Django进阶
1. 路由系统 1.1 单一路由对应 url(r'^index$', views.index), 1.2 基于正则的路由 url(r'^index/(\d*)', views.index), url( ...
- web前端基础知识-（八）Django进阶之数据库对象关系映射
Django ORM基本配置 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接数据库,并编写数据访问层代码 业务逻辑层去 ...
- web前端基础知识-（六）Django基础
上面我们已经知道Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Sessi ...
- web前端基础知识-（六）web框架
一.web框架本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/env python #coding:ut ...
随机推荐
- Junit4简单使用
一.Junit4是JAVA语言的单元测试框架,用于编写和运行可重复的测试,可以大大提高效率 1.使用Junit4必须在项目中导入Junit4.har文件 2.新建Junit Test case 勾选s ...
- C语言：结构体，共用体
结构体: 一个变量,存储不同类型的数据项共用体:一个变量,存储不同类型的数据项,相同的内存位置,存储不同的数据类型 #include <stdio.h> #include <stri ...
- winfrom 窗体控件实现二级联动
ComboBox绑定数据源时触发SelectedIndexChanged事件的处理办法 事件,而这个时候用户并没有选择内容,其SelectedValue也不是对应字段的值.那么时写在SelectedI ...
- Centos7使用pxe安装KVM虚拟机
Centos7使用pxe安装KVM虚拟机 一.安装服务所需的软件 [root@localhost ~]yum install nginx dhcp vsftpd syslinux -y [root@l ...
- 学习docker后的个人理解
一.什么是docker Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源.可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行 ...
- nvm-windows安装
linux上的nvm太好用了,windows也出了,不过需要手动下载安装 地址: https://github.com/coreybutler/nvm-windows/releases 博主安装的是 ...
- js判断假值
js中的假值:在JavaScript中,false.null.0.空字符串.undefined 和 NaN被称为假值. 需要注意的是,这种方法字符串类型会返回true哦,比如'false','0' B ...
- qt之菜单栏的创建
很久之前学习的Qt菜单栏的消息响应,昨天发现忘记了,今天又拿起来了,记一下笔记: 就像平常我们常用的软件一样,每个程序基本都有菜单栏,在菜单栏中有很多功能性的按钮,点击这些按钮会弹出有对应的菜单功能, ...
- js常用内置对象
数组Array 1创建方式 var colors = ['red','color','yellow']; var colors2 = new Array(); 2数组的赋值 var arr = []; ...
- Java并发编程:Java Thread 的 run() 与 start() 的区别
1. sleep 和 wait 方法解释 sleep()方法是Thread类里面的,主要的意义就是让当前线程停止执行,让出cpu给其他的线程,但是不会释放对象锁资源以及监控的状态,当指定的时间到了之后 ...