• 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】//实体

    &lt; is the same as <
    &gt; is the same as >
    &copy; &#169; is the same as © //版权
    &amp; is the same as &
    &quot;is the same as "

    ® 已注册商标 &reg; &#174;
    ™ 商标(美国) ™ &#8482;

    × 乘号 &times; &#215;
    ÷ 除号 &divide; &#247;


    __________【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等。

  • 相关阅读:
    微信:JSSDK开发
    JSSDK图像接口多张图片上传下载并将图片流写入本地
    微信JSSDK上传多张图片
    laravel自定义公共函数的引入
    php把数据转换为json格式
    laravel控制器方法中,用函数作为变量进行传递时的处理方法
    ckeditor富文本编辑器的基本配置设置:
    laravel处理菜单保持的方法:
    laravel基于Bootstrap的成功和失败的提示信息和验证提示信息
    laravel Eloquent 查询数据库判断获取的内容是否为空
  • 原文地址:https://www.cnblogs.com/famensaodiseng/p/6476854.html
Copyright © 2020-2023  润新知