1.知识的引入：

 

　　关于系统的结构：

 

　　B/S架构：

 

　　Browser/Server(浏览器/服务器的交互形式）

 

　　Browser支持哪些语言：HTML CSS JavaScript

 

　　写HTML CSS JavaScript代码的叫做：WEB前端开发工程师。

 

　　前端的图片需要UI设计师完成。

 

　　S是服务器端Server,Server端的语言有很多：如c/c++,Java,python…等等。

 

　　B/s架构的系统有什么优缺点？

 

　　优点：升级方便，只升级服务器端代码即可。维护成本低。

 

　　缺点：速度慢，体验差，界面不炫酷，无法运行大型游戏。（否则卡死)

 

　　企业内部的解决方案都是采用B/S的系统，因为办公不需要炫酷，只要能做数据的增删改查即可。并且维护成本低。

 

　　如：京东、腾讯视频、百度等

 

　　C/S架构

 

　　Clienet/Server(客户端/服务器端的交互形式）

 

　　缺点：升级麻烦，维护成本较高。

 

　　优点：速度快，体验好，界面炫酷。（娱乐性的系统多数是C/S架构）

 

　　如：各种app。

 

　　2.什么是HTML:？

 

　　HTML 是用来描述网页的一种语言。

 

　　它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

 

　　超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。使用HTML语言描述的文件需要通过WWW浏览器显示出效果。

 

　　HTML:Hyper Text Markup Language(超文本标记语言）

 

　　HTML 不是一种编程语言，而是一种标记语言 (markup language)

 

　　标记语言是一套标记标签 (markup tag)

 

　　HTML 使用标记标签来描述网页

 

　　有大量的标签组成，每一个标签都有开始标签和结束标签。

 

　　HTML开发的时候使用普通的文本编辑器就可以，也可以使用专业的开发工具：DreamWeaver,HBuilder…

 

　　创建的文件扩展名是.html或.htm，直接采用浏览器打开HTML文件就可以运行。

 

　　HTML是谁制定的？

 

　　W3C:世界万维网联盟

 

　　制订的协议：HTML/XML/http协议/https协议

 

　　W3C制定了HTML的规范，每个浏览器厂家都会遵守。

 

　　HTML目前最高版本是：HTML5.0,简称H5

 

　　为了方便中国web前端程序员的开发的网站，提供了大量的帮助文档，为开发提供方便。

 

　　W3school:先出现，和w3c没有关系。

 

　　W3cschool:后出现，和w3c没有关系。

 

　　1.第一个HTML:

 

　　2.基本标签

 

　　分段：

 

　　标题字:

 

　　独目标记：

 

　　预留格式：

 

　　其他：

 

　　当内容与与HMTL语法相冲突时采用实体符号。

 

　　实体符号特点：以&开始，以;结束。

 

　　1.画一个表格

 

　　2.单元格合并

 

　　上下合并：删除下面的那行，上行的格加rowspan。

 

　　左右合并:随便删除哪个，剩余的那个加colspan.

 

　　3.th标签

 

　　第一行字段，比td多的是加粗和居中。

 

　　4.thead,tbody,tfoot标签

 

　　这三个， 将表格分割。

 

　　thead表示头，tboby表示中间内容，tfoot表示脚。

 

　　通过超链接浏览器可以向服务器发送请求。

 

　　浏览器向服务器发送数据（请求：request)

 

　　服务器向浏览器发送数据（响应：response）

 

　　B/s结构的系统：每一个请求都会对应一个响应。

 

　　B–>请求—>s

 

　　s–>响应—>s

 

　　href:hot references 热引用

 

　　href属性为一个地址，可以是本地路径

 

　　超链接有一个target属性：

 

　　_blank：新窗口

 

　　_self:当前窗口（默认窗口)

 

　　_top:顶级窗口

 

　　_parent:父窗口

 

　　例如一下就是一个表单：

 

　　表单用于接收用户的信息

 

　　表单展现之后，用户填写表单，点击提交后数据传入到服务器。

 

　　1.怎么画表单呢?

 

　　使用from标签画表单。

 

　　一个网页当中可以有多个表单。

 

　　2.用户注册表单

 

　　form表单method属性：

 

　　get:采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上。

 

　　post：采用post方式提交的时候，用户提交的信息不会显示在浏览器的地址栏上。post更安全

 

　　method不指定，为get.

 

　　超链接也可以提交数据给服务器，但是提交的内容是不变的。默认为get。

 

　　3.下拉列表支持多选

 

　　4.file控件

 

　　5.隐藏域hidden控件

 

　　用于将数据提交给服务器，但不想让用户看见

 

　　5.readonly和disabled

 

　　都表示只读。

 

　　但是readonly可以提交给服务器，disabled数据不会提交（即使有name属性也不会）

 

　　6.input控件的maxlength属性

 

　　表示最多输入的字符数量。

 

　　7.HTML中元素的id属性

 

　　1.在HTML文档中，任何元素（节点）都有id属性，id属性是唯一标识。所以在同一个HTML文档当中id值不能重复。

 

　　2.提交表单只和name有关

 

　　3.id的作用

 

　　为了让我们更好的获取元素。

 

　　javascript语言：可以对HTML文档当中的任意节点进行增删改操作！那么我们应该先通过id拿到节点对象。

 

　　4.HTML文档是一棵树，树上有很多节点，每个节点都有唯一的id.

 

　　DOM（Document)树。

 

　　1.div和span都可以称为图层。

 

　　图层是为了页面更好的布局

 

　　div会独自占用一行，而span不会独自占用一行。

 

　　table布局不灵活，太石板。