Web概述 Web开发技术分为客户端开发技术和服务端开发技术，HTML属于客户端开发种的一种语言，客户端开发还有哪些语言呢？看下图Web开发框架： Web前端开发语言主要包含：html语言，css样式代码，javascript脚本，html5,css3，jQuery，ajax，Bootstrap，Backbone，下面是关于它们的简单介绍：

1.html语言：网页的基本标记语言，也是最基础的语言，掌握起来比较简单。

2.css样式代码：是用来控制html代码如何显示的，html语言只是网页的标记，但如何更好的在网页上展示你想要的效果，由css样式来控制，建议手写css样式代码，手写的更精简，重用性更高。

3.javascript脚本：运行在客户端，主要是由一些事件来改变网页的代码和显示效果的，一般的网页特效都是通过javascript脚本来编写的。它可以提供客户端的交互功能和一些动画效果，是每个网站前端开发人员必须要掌握的。

4.jQuery：是由javascript开发出来的开源的库，集成了所有javascript功能，让web前端开发人员写更少的代码，实现更多的功能，javascript脚本学起来是有一定难度的，但jQuery学起来却比较简单，这样降低了web前端开发的难度，并且jQuery几乎兼容所有浏览器。

5.html5,css3:更多的html标记和富应用，更能精简代码，功能更强大,所以目前网站前端开发人员有必要掌握和使用它。

6.ajax：相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求，特别是局部刷新。

7.Bootstrap：Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等。

web起源 1984年蒂姆伯纳斯李创造了世界上第一个万维网导航站点，下面这个就是世界上第一个站点，你可以点击浏览：http://info.cern.ch/。 历程可以总结如下图： Web的特点：

Web工作原理：客户端和Web服务器通过HTTP协议进行通信。Web服务器有时也叫HTTP服务器或Web容器。HTTP协议采用的是请求/响应模式。即客户端发起HTTP请求，web服务器接收并解析处理HTTP请求，然后将HTTP响应发送给客户端。

URL介绍： URL（Uniform Resource Location 统一资源定位器），当客户端(浏览器)输入一个URL地址，就能接收到Web服务器发送过来的数据。这个过程就是在使用HTTP协议通信。 构成如下： 协议类型：//服务器地址（端口号）/路径/文件名

HTML(Hyper Text Mark-up Language )即是超文本标记语言，通过使用标记标签来描述页面文档结构和表现形式的一种语言，再由浏览器进行解析，然后把结果展示在网页上。 这里的超文本指的是超链接，标记指的是标签。

HTML文件用编辑器打开显示的是文本，可以用文本的方式编辑。 HTML文件用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。

HTML的基本结构如下图： HTML文档规范 目前常用的两种文档类型是xhtml 1.0和html5。 xhtml制定了文档的编写规范，html5可部分遵守，也可全部遵守，看开发要求。

HTML的注释 html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释的方法是： < !-- 这是一段注释 -->

标题标签 一共有六个级别的标题标签，分别如下： 下面我们就写一下标题标签的代码，我是在pycharm里创建的HTML文件，具体代码如下：

我们用浏览器查看它的显示效果，如下： 常用的文本标签 下面用代码写几个常用的文本标签，看一下显示效果，代码如下：

显示效果如下： 列表标签 常用的列表标签如下： 其中，有序列表可以指定类型，就是指定按照什么数字或字母进行排序，可以指定的类型有：1、A、a、 I、i 无序列表也可以指定类型，就是无序排列前面的形状，类型有：disc、square、circle 下面用代码看一下列表标签的使用，代码如下：

具体效果如下： div与span标签 通常把和div标签一样一个元素占一整行的标签称为块级元素，把和span标签一样一个元素占的位置取决于标签内容的标签称为行内元素。 通过代码看一下效果，代码如下：

显示效果如下： 图片标签img < img > 标签定义 HTML 页面中的图像。其中有两个必需的属性：src 和 alt。 src：指定的时图片的位置， 可以通过绝对路径和向对路径表示。但大多数情况使用相对路径。 alt：当图片不能加载出来时，显示的文字信息。 还有几个可选的属性： title：文字提示属性，该属性是在鼠标在移动到元素上的文本提示。 width/height：规定图片的宽度/高度 下面还是用代码看一下效果，代码如下：

效果显示如下： 超链接标签 < a href=" ">…< /a > 超级链接标签 超级链接标签都有哪些属性呢： href：必须要写的属性，指的是链接跳转地址 target：表示链接的打开方式。

title：文字提示属性 下面通过代码看一下超链接标签的效果，代码如下：

具体效果如下： 其中点击文字链接中的第一个链接后，就会在本窗口打开所链接到的网址页面；而点击文字链接的第二个和第三个链接后，就会打开一个新的窗口显示所链接的网址页面。

在超级链接标签中还会常用到一个锚点链接，简单来说它的用法就是给需要跳转的标签设定一个id，然后在页面的某一部分需要跳转到该内容时，则在超级链接标签中写 href=#id 即可。

表格标签 在 HTML 文档中，广泛使用表格来存放网页上的文本和图像。 表格标签：table 行标签：tr 单元格(表示列的概念)：td 表头：th（效果加粗并且居中） 表格标题：caption 下面我们通过代码实现一个简单的表格显示，代码如下：

实现的效果如下： 表格标签中有一些常用的标签： 标签合并：

标签常用属性：

下面我们用这些常用属性再写一个菜谱的表格吧，代码如下：

实现效果如下： form表单标签 常用属性： action属性：提交的目标地址(URL) method属性：提交方式：get(默认)和post

在form表单标签中又有很多常用的几个标签，它们分别是： 1.input 表单项标签 input定义输入字段，用户可在其中输入数据。 在 HTML 5 中，input标签里面的type 属性有很多新的值。 type属性：表示表单项的类型，值如下：

2.下拉列表标签 select 标签创建下拉列表。它有如下属性：

option下拉选择项标签，用于嵌入到select标签中使用的，它的属性：

3.文本域标签，它的属性：

4.按钮标签 button标签定义按钮

5.fieldset 标签 fieldset 元素可将表单内的相关元素分组

下面我们就用以上标签写一个简单的表单标签的页面，代码如下：

实现效果如下： html内嵌框架 iframe标签会创建包含另外一个html文件的内联框架(即行内框架)，它的属性有：

内嵌框架与a标签（超链接标签）配合使用：a标签的target属性可以将链接到的页面直接显示在当前页面的iframe中。

我们编写HTML代码将实现一个用户登录的界面，最终的效果图如下所示： 背景图片可以自己随意选取，具体的代码如下：