前端简介

一、软件的架构

    1.C/S（客户端/服务器）：一般我们使用的软件都是C/S架构，比如系统中的软件QQ、360安全卫士、office等。C表示客户端（通常为图形化界面），用户是通过客户端来使用软件；S表示服务器，服务器负责处理软件的业务逻辑。其特点如下：

        （1）软件使用前必须得安装

        （2）软件更新时，客户端和服务器端需要同时更新

        （3）C/S架构的软件不能跨平台使用（比如说windows平台的QQ在Linux平台上是不能使用的）

        （4）C/S架构的软件客户端和服务器端通信采用的是自有协议，相对来说比较安全。

    2.B/S（浏览器/服务器）：B/S本质上也是C/S，只不过B/S架构的软件，使用浏览器作为软件的客户端。B/S架构的软件一般都是通过访问一个网页的形式来使用的，而将一些运算等操作放到远端的服务器上，这样就降低了对客户端的要求，我们的计算机只需要安装一个浏览器即可使用。比如：京东、淘宝、新浪微博等。其特点如下：

        （1）软件不需要安装，直接使用浏览器访问指定的网址即可。

        （2）软件更新的时候，客户端不需要更新

        （3）软件可以跨平台使用。只要系统中有浏览器就可以使用

        （4）B/S架构的软件，浏览器和服务器端之间通信采用的是通用的HTTP协议，相对来说不安全。

    3.根据W3C标准，一个网页主要由三部分组成：结构、表现、行为。

        （1）结构：HTML用于描述页面的结构

        （2）表现：CSS用于控制页面中元素的样式

        （3）行为：JavaScript用于响应用户操作

    4.万维网联盟（W3C）：World Wide Web Consortium。W3C专门为了定义网页相关的标准而成立。W3C定义了网页中的HTML、CSS、DOM、HTTP、XML等标准。

    5.WHATWG:网页超文本应用技术工作小组，是一个以推动网络HTML5标准为目的而成立的组织。在2004年，由Opera、Mozilla基金会和苹果这些浏览器厂商组成。

二、HTML简介

1.HTML的概念

     HTML是超文本标记语言，即Hyper Text Markup language的简称，超文本标记语言是没有编译过程的语言。它不是编程语言，是使用一套标记标签来描述网页的。其特点是简易性、可扩展性、与平台无关、通用性。

2.HTML的规范

    HTML是一个弱势语言，不区分大小写，页面的后缀名是html或htm，HTML5之后要求小写。

3.HTML基本结构

（1）html文档基本结构

	
	


	
Test Page

（2）head标签内包含的主要元素

         title：该元素用于定义文档标题

         meta：该元素用于HTML页面的元数据

         script：该元素用于包含javascript脚本

         link：该元素用于链接外部CSS样式

         style：该元素用于定义内部CSS样式

说明①：title标签一般写在head标签内，title标签它是直接能在浏览器窗口中看到的，title标签极其重要，title标签是用户以搜索引擎最看重的标签，它能帮助用户和搜索引擎判断当前页面的主旨和中心思想，对搜索引擎来说，title标签中出现的关键词基本上就是该网页最想要表达的内容，因此我们在做SEO搜索引擎优化的时候，写title标签的时候应当将当前页面最核心的关键词写进title标签中，使你的自然排名提高，从而让你的网站能够达到更多的浏览量。

说明②：meta标签用于定义页面元信息，也就是一些键值对，主要有以下三个属性：

       http-equiv：指定元信息的名称，该属性指定的名称具有特殊意义，它可以向浏览器传回一些有用的信息，帮助浏览器正确的处理网页内容。

       name：指定元信息名称，该名称可以随意指定。

       content：指定元信息的值。

说明③：HTML的每个标签都具有属性，属性分私有属性和公有属性。HTML中表示长度的单位是像素，而且只有一种。

4.HTML的常用标签

（1）常用的块级标签

         显示为“块”状，浏览器会在其前后显示折行，一个块级标签独自占据一行，常用的块级元素包括：p(段落标签)，h1-h6（标题标签），div（该标签一半当做结构化块状元素使用，一般最常见的用途是对网页进行整体分块布局，即当容器来使用），ul（无序列表标签，默认情况下，列表的列表项使用圆点进行标记），ol（有序列表标签，默认情况下，列表的列表项使用数字进行标记），hr（水平线标签）等。

（2）常用的行级标签

         按行逐一显示，前后不会自动换行，也就是说多个行级标签可以在一行上面显示。

（3）超链接标签

         链接文本或图片

              href：指定超链接所关联的另一个资源

              target：指定框架集中的哪一个框架来转载另一个资源，该属性可以是_self、_blank、_top、_parent四个值，分别代表         自身、新窗口、顶层框架、父框架。

（4）图像标签（自结束标签）

         

（5）span标签

         一般块级标签不要组合在span标签内，span标签主要是对需要突显的内容或强调的内容进行显示，div标签是块级标签，所以其内容既可以放块级标签也可以放行级标签，类似于body标签，而span标签主要强调的是文本和行级标签。

（6）常用的特殊符号

         空格： 

         大于：>

         小于：<

         双引号："

         &号：&

         版权号：©   

         单引号：'       ()：()    =：=

（7）文本格式化元素

        ：定义粗体文本

        ：定义斜体文本

       ：定义强调文本，实际效果与斜体文本差不多

      ：定义粗体文本，与的作用基本相同

      _{：定义下标文本}

      ^{：定义上标文本}

      ：定义wenben文本显示方向，内有dir属性，只能取值ltr或rtl

      ：下划线      ：中划线（一般用在价格，折后价）

5.表格标签

     table：用于定义表格

     tr：定义表格行，该元素只能包含或两种元素

     th：定义表格页眉的单元格

     td：定义单元格，包含两个主要属性：

            colspan：指定单元格横跨多少列

            rowspan：指定单元格纵跨的行数

     caption：用于定义表格标题

     tbody：定义表格的主体

     thead：定义表格的头

     tfoot：定义表格的脚

注：tbody、thead、tfoot写与不写的区别：当表格非常大的时候，如果不写，则必须等表格的内容全部下载完成才能显示，但是用tbody标签的话，边下载边显示。如果不写，那么浏览器解析表格内容的时候是从上到下解析，如果写了，那么顺序任意，浏览器解析的时候还是按照tbody、thead、tfoot的顺序显示内容。

6.表单标签

   （1）form标签

           

                。。。文本框、按钮等表单元素

           

  （2）form标签的常用属性

           action：指定表单提交后交由服务器上的哪个处理程序进行处理

           enctype：用于指定表单数据的编码方式

                            application/x-www-form-urlencode：默认的编码方式，将表单控件中的值处理成URL编码方式

                            multipart/form-data：以二进制流的方式来处理表单数据

                            text/plain：当表单的action的属性值为mailto:URL的形式时使用

            method：指定向服务器提交的方式，一般为get和post两种方式。

                             get方式的请求会将请求参数的名和值转换成字符串，并附加在原URL之后，因此可以在地址中看到请求参数的名和值，且get请求传递的数据比较小，一般不能大于2KB.

                           post方式的请求传递的数据量比较大，通常认为可以不受限制，往往取决于服务器的限制。post方式的请求参数是放在HTML的HEADER中传输的，用户在地址栏中看不到请求参数，安全性相对较高。

（3）常见的表单元素

         客户端向服务器传输的数据，这个数据必须要通过载体进行传递，这个载体一般都是表单元素。表单元素不能直接传递到服务器端，它必须通过表单才能传递过去，所以一般表单与其它表单控件元素结合使用，我们可以认为表单是表单元素的一个容器。

    单行文本框：

    密码输入框：

    隐藏域：

    单选框：

    复选框：

    图像域： 可以指定width和height属性

    文件上传域：

    提交、重置、普通按钮：指定input属性为submit、reset、button即可

（4）input元素常用的几个属性

        checked：设置单选框、复选框初始状态是否处于选中状态，只有type属性为checkbox或radio时才可指定（值：checked）

        disabled：设置首次加载时禁用此元素。当type属性为hidden时不能指定该属性（值：disabled）

        maxlength：该属性是一个数字，设置文本框中所允许输入的最大字符数

        readonly：指定该文本框内的值不允许被修改（值：readonly）

        size：该属性是一个数字，用于指定该控件的长度，当type属性的值为hidden时不能指定该属性

        src：指定图像域所显示的图像的url，只有当type属性为image时才可以指定该属性

7.textarea标签

    该标签用于定义多行的文本输入控件。文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

（1）常用属性如下：

         cols：规定文本区域内可见的宽度。

         rows：规定文本区域内可见的行数。

         disabled：规定禁用文本区域。（值：disabled）

         maxlength：规定文本区域允许的最大字符数。

         placeholder：规定一个简短的提示，描述文本区域期望的输入值。

         readonly：规定文本区域为只读。（值：readonly）