web相关知识

一、web相关知识

   1、web

         是Internet环境下的一个具体网页应用

         简称：网页、web页面、页面

         Internet:互联网，由若干个终端以及特殊的连接介质所组成

   2、web的工作原理

         1、B\S模型(结构)

                     B : Browser 浏览器

                     S : Server 服务器

                     PC: Personal Computer

                    将web应用全部保存在服务器(Server)上,由浏览器(Browser)发起请求进行访问

 

               C/S 结构(模型)

                    C: Client

                    S: Server

                   通过指定的客户端来访问服务器的应用程序。eg:QQ、各种游戏

   3、WEB 相关技术

           1、服务器端技术

                  都提供了数据库的访问技术

                 php

                 jsp(JavaServer Page)

                 asp(Active Server Page)

                 asp.net

 

          2、客户端（浏览器端）技术

                由浏览器负责解释运行

                    1、HTML

                     2、CSS

                     3、Javascript

 

二、HTML快速入门

            1、HTML

                       Hyper Text Markup Language

                       超级文本标记(标签)  语言

                 

                       a : 26个英文字符中的第一个字符

                       b : 26个英文字符中的第二个字符

                      超文本 a : 链接

                      超文本 b : 加粗

                      <> : 标记

                      Language : 语言,语法

 

                             web 页面是由 html组成的，并且以.html或.htm作为后缀的文档文件,各个页面间，是通过超链接组织到一起的。

                     开发web应用所使用的工具:

                     1、记事本(能编辑文字的工具)

                     2、浏览器(IE、Google Chrome、Firefox、Safari、Opera(欧朋))

             

                2、HTML基础语法

                     1、标记语法

                                  标记又称为元素

                                  语法:<标记内容>

                                  注意：不同的标记，会有不同的表现结果。主要用于描述功能

                           分类：

                                  1、封闭标记(双标记)

                                               语法:<标记>内容</标记>

                                                <b>内容</b>

                                                <s>内容</s>

                                   2、非封闭标记(单标记、空标记)

                                                语法:<标记>或<标记/>

                                                特点：不能包含内容，每一个独立的空标记就是一段独立的功能

                                                <br/>: 换行

                                                <hr/>: 水平线

                       2、标记的嵌套

                              在一个标记中出现另一对标记，形成更复杂的语法，或者让功能进行叠加

                               <标记1>

                               <标记2>

                               </标记2>

                               </标记1>

                     注意：

                              1、代码缩进

                               具备嵌套标记的标签，子级内容一定要通过若干(一个制表符) 空格来表示缩进

                             <标记1>

                                        <标记2>

                                        </标记2>

                             </标记1>

                              <a>

                                     <b>内容</b>

                              </a>

                              <a>这是一个超链接</a>

                              <a>这是一个超链接</a>

                                 2、注意嵌套顺序

                                      <a>

                                                 <b></b>

                                      </a>

 

                                       <a><b></a></b>

                               3、属性和属性值

                                          可以通过属性和属性值，对标签的功能加以修饰

                                         <p>一个段落</p>

                                       语法:

                                              1、属性的声明必须位于开始的标记里面

                                              2、一个元素可能有多个属性，多个属性间用空格区分

                                              3、多个属性之间，排名不分先后

                                        属性值：

                                             1、属性和属性值之间通过 = 连接属性=值

                                             2、属性值尽量用引号引起来

 

                                            <p属性名=值></p>

                                            <p属性名="值"></p>

                                            <p属性名='值'></p>

                                            <palign="right" >段落</p>

                                       标准属性：

                                               又称为通用属性，基本上每个标签都会具备的属性。

                                                id:标签在页面中的唯一标识

                                                title:鼠标移入到标签上时所显示的文字

                                                class:定义(引用)样式表中的类样式

                                                style:定义当前标签的行内样式

                                                eg:<pid="p1" title="I'm a p markup" class="testp"style="color:red;"></p>

                                      4、注释

                                                1、什么是注释：指的是允许出现在html中，但不被浏览器所翻译执行的内容

                                                2、注释的作用

                                                         1、对代码进行解释说明

                                                         2、整理思路

                                                         3、注释的语法

                                                    <!--这

                                                              是

                                                              注释

                                                              区域 -->

                                                             <a<!--写在这里就是错 -->>

                                                                    <!--该处写注释是允许的-->

                                                             </a>

                                                  3、html文档结构

                                                           1、html文档组成

                                                                     1、文档类型声明

                                                                     声明当前的html文档的版本以及类型的。

                                                                     版本：

                                                                              html5

                                                                              xhtml1.0

                                                                              html4.01

                                                                              html3

                                                                              html2

                                                                     类型：

                                                                              strict : 严格类型

                                                                              transitional : 过渡类型

                                                                              frameset : 框架集

                                                                     出现的位置：位于整个html 文档的最顶端

                                                                     HTML5的文档类型声明：

                                                                     <!doctype html>

                                                             2、html页面组成

                                                                    1、文档根标记

                                                                                <html></html>

                                                                    2、出现在根标记里面的结构

                                                                              1、网页的头部

                                                                               <head></head>

                                                                              2、网页的主体内容

                                                                              <body></body>

                                                                     3、head 元素

                                                                           包含的都是全局信息

                                                                                   title : 网页的标题

                                                                             meta :单标记，编码格式、关键字、描述....相关的全局信息

                                                                                   script : 定义或引入 Javascript文件

                                                                              link : 单标记，引入外部css样式表

                                                                                    style:定义内部样式表

                                                                      4、body元素

                                                                                 1、body出现的位置在 head元素之后，html元素之内。包含了网页要显示给用户去看的信息，称之为主体内容。

                                                                                 2、特殊字符的表示

                                                                                       回车、若干空格，最终都会被解析成一个空格

                                                                                       特殊字符通过转义字符来实现的。

                                                                                       空格: &nbsp;

                                                                                         > :&gt;  --> greater than

                                                                                         < :&lt;  --> less than

                                                                                         © :&copy;  --> Company

                                                                3、文本标记

                                                                           1、文本样式相关

                                                                               <b></b> : 加粗

                                                                               <i></i>: 倾斜

                                                                               <s></s>: 删除线

                                                                               <u></u>: 下划线

                                                                               : 下标

                                                                               : 上标

                                                                           2、标题元素

                                                                                以醒目的方式进行显示,通常用作文章的标题

                                                                                <hn></hn>

                                                                                  n:1-6

                                                                                  <h1></h1>

                                                                                  <h2></h2>

                                                                                     ...

                                                                                 <h6></h6>

                                                                           3、段落元素

                                                                                  提供了结构化文本的一种方式。

                                                                                  <p></p>

                                                                           4、换行元素

                                                                                  <br>或<br/>

                                                                                   可以出现在任意需要换行的位置处

                                                                           5、分区元素

                                                                                  常用于元素的分组，以及页面的布局

                                                                                  1、块分区元素

                                                                                        <div></div>

                                                                                     所有的效果需要开发者自己定义，主要通过 css 实现布局

                                                                                  2、行内分区元素

                                                                                        <span></span>

                                                                                       多个span会在一行内显示

                                                                                      span很少用在布局中。主要功能是包含普通文本并且自定义样式。

                                                                              6、行内元素和块级元素

                                                                                      块级元素：自己会独占一行，前后的内容会自动换行。

                                                                                     div、p、h1~h6

                                                                                     块级元素作用：多数都会用作布局中。

                                                                                     行内元素：可以和其他元素位于同一行。

                                                                                     s,b,u,i,span,

                                                                                     行内元素的作用：多数都会包裹文本，去实现文本的不同样式

                                                                                     注意：块级元素可以嵌套行内元素，但行内元素不允许嵌套块级元素。

                                                                                    <div>

                                                                                           <span></span>

                                                                                           <s></s>

                                                                                           <b></b>

                                                                                    </div>

                                                                                    <b>

                                                                                          <div></div>

                                                                                    </b>

                                                                                     注意：没强调的情况下，任何标记不允许嵌套div

                                                                                   <p>

                                                                                          <div></div>

                                                                                   </p>

                                                                          7、水平线

                                                                              <hr>

                                                                                属性：

                                                                                      size:高度

                                                                                      width:宽度

                                                                                      align:水平对齐方式

                                                                                      color ：颜色

                                                                         8、预格式化

                                                                              作用：保留文档中的格式，即保留文档中的换行和空格

                                                                              <pre></pre>