一，HTML简介

一、软件架构

1、C/S架构：客服端/服务器，比如系统中的ＱＱ，360等；C:用户通过客户端来使用软件，S服务器负责处理软件业务逻辑。

当我们电脑没有连接 络时，我们就不能使用qq发送消息，因为没有连接到qq的服务器（纯单机游戏没有服务器）。

1）C/S架构软件必须得安装；

2）软件更新时服务器和客户端得同时更新

3）C/S架构软件不能跨平台（.windows、lunix、android、IOS等）

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

2、B/S架构：浏览器/服务器，本质上来说也是C/S，只不过B/S架构的软件，使用浏览器作为软件的客户端

1）B/S架构的软件使用浏览器访问 页的形式来使用软件

2）如：淘宝，京东，12306等都是B/S架构软件，这些 站怎么就是软件呢/p>

站指单一的显示数据，这些 站不仅仅是显示信息

3）软件不需要安装，直接使用浏览器访问指定的 址，软件更新时不需要客户端更新，只更新服务器端

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

5）B/S架构客户端与服务器端通信采用的是通用的http协议，相对来说不安全，但是我们可以在程序中对代码进行加密。HTTPS协议，在http协议的基础上加了安全套接字，把http协议变成一个安全的协议。我们在上 时设计到 银或我们利益的操作需要看协议名。

JavaEE主要是用来写服务器

二、 软件开发流程

传统模式：产品经理进行需求分析（客户是谁，有什么样的需求， 页设计师根据需求设计 页图）；前端工程师将设计图转换成代码（静态页面）；后端工程师将静态页面改成动态， 页中的数据都在数据库服务器中，后端工程师将这些数据从数据库取出来放在页面显示。

新的开发模式：前端工程师将页面布局和表现写好，交给后端工程师，但是后端工程师并不会说去保持页面的结构，而现在我们越来越注重用户体验，前端表现和结构是给用户的直观感受，用户不会去注意到后端的。我们就改进了开发模式，前端给后台提需求，需要什么样的数据，由后端提供接口。

第三种开发模式 ：用到的不多，Node.js来编写服务器，前端写完页面后直接写服务器=》全栈工程师。

前端过程师主要学的由三部分组成。W3C标准

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

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

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

三、HTML简介

HTML超文本标记语言：

四、HTML标签

html根标签有且只有一个， 页中所有的内容都应该写在html标签中，

head标签，该标签中的内容不会在 页中直接显示，它用来帮助浏览器解析页面的

title： 页的标题标签，默认会显示在浏览器的标题栏中。搜索引擎在检索页面是，会首先检索title标签中的内容，它是 页中对于搜索引擎来说最重要的内容，会影响到 页在搜索引擎中的排名，title中的内容一般不是我们开发人员来写，在公司中有SEO来设计。

body标签：用来设置 页的主体内容， 页所有可见的内容，都应该写在body中

属性：可以通过属性来设置如何处理标签中的内容

meta标签：用来设置 页的一些元数据，让如 页的字符集、关键字、简介等。告诉浏览器 页所采用的字符集。

       

meta：设置 页关键字（在搜索H5时会显示h5相关的 页，这样的称为 页关键字）

使用标签时，关心的是标签的语义，我们使用的是语义化标签。不是关心显示效果

h1:标题标签H1-H6，H1最重要，对于搜索引擎来说，H1仅次于title，搜索引擎检索完title会立即查看H1中的内容，一个页面中只能写一个H1。一般页面中标题标签只使用H1，H2，H3。

在HTML中，字符之间写再多的空格，浏览器还是会当成一个空格，换行也当成一个空格。

实体（转义字符）：在HTML中一些特殊字符，如需使用特殊的字符 来表示这些特殊字符，这些特殊符 称为实体（转义字符）。浏览器解析到实体会自动将实体转换为其对应的字符

实体语法： &实体的名字 ；

 (不带换行的空格) <&gt(小于大于)，版权 ：&copy

img标签：向 页中引入一个外部图片，属性：src设置一个外部图片的路径，alt可以用来设置在图片不能显示时的描述。不同的浏览器处理方式不同，有的浏览器出现的可能是空白。alt最主要的作用是：在我们百度搜索一张图片时，会输入“美女”关键字，会出现很多的图片，这些图片都是从各个 站抓取来的，搜索引擎通过alt属性来识别不同的图片。如果不写alt属性则搜索引擎不会对这个图片进行收录。img的宽和高只设置一个，另一个也会同比例调整大小。在开发中除了自适应的页面，不建议使用width和height，需要什么样的图片就让美工来制作。

相对路径：相对于当前资源所在目录的位置，../返回上一级目录

站都是部署在服务器里面的， 站和图片一般都会部署在同一个服务器。

图片的格式：

JPEG（JPG）：支持的颜色较多，图片可以压缩（占据内存较小），但不支持透明（ 透明背景）。用来保存照片或颜色丰富的图片。

GIF：支持的颜色较少，只支持简单透明（支持直线透明，方形的外部透明；不支持圆形的外部透明），支持动态图。图片颜色单一或动态图时使用。

PNG :支持的颜色较多，支持复杂的透明，可以用来显示颜色复杂的透明图片。实际开发中应用的较多。

图片使用原则：效果不一致使用效果好的，效果不一致使用小的。

绝对路径：是从盘符开始的路径,形如 C:windowssystem32cmd.exe

五、文档声明

1993年HTML第一个版本发布，2014年10月发布HTML5，最开始的标准是浏览器厂商自己定义的，后来由W3C来定义标准。

doctype文档类型：HTML有多种版本在广泛使用，如何让浏览器知道我们使用的版本/p>

doctype，h5声明当前的 页是按照html5的标准来编写的，编写 页时一定要将h5的文档声明写在 页的最上边。

如果不写文档声明，则会导致有些浏览器进入一个怪异模式，进入怪异模式后浏览器解析页面会导致页面无法正常显示。

为了兼容一些旧的页面，浏览器中设置了两种解析模式：

标准模式standards Mode

怪异模式Quirks Mode:解析 页时hi产生一些不可预期的行为，我们应该避免怪异模式的出现

六、乱码问题

1.乱码出现的原因

在计算机中保存的任何内容，最终都需要转换为0,1 这种二进制编码保存，包括 页中的内容。在读取时二进制内容时，需要将二进制解码。

编码：按照一定的规则，将字符串转换为二进制编码的过程

解码：按照一定的规则，将二进制编码转换为字符串的过程

字符集：编码和解码所使用的规则，

乱码出现的原因:编码和解码采用的字符集不同

常见的字符集：

ASCI：美国人发明的一个字母采用7位，一共能够保存128个，26个字母大小写，各种符 。可以满足，7位占据的内存又小。

ISO-8859-1:欧洲人发明的，采用8位，256个，

GBK:中国，国标码

GB2312:中文系统的默认编码，

UTF-8:万国码

ANSI：自动以系统默认编码来保存文件，

在中文系统中默认的是采用GB2312进行解码，

meta标签：用来设置 页的一些元数据，让如 页的字符集、关键字、简介等。告诉浏览器 页所采用的字符集。

七，HTML语法

       HTML中不区分大小写，标签必须完整，要么成对出现，要么自结束标签。浏览器会尽最大努力正确的解析页面，所有不符合语法规范的内容，浏览器都会自动修正（抢占更大的市场，会尽最大努力修正）。但是有些情况下会修正错误。

       HTML中标签可以嵌套，但是不能交叉嵌套；

      HTML标签中的属性必须有值，且值必须加引 ；

内联框架iframe：引入外部页面，在实际开发中不建议使用，因为内联框架中的内容 不会被搜索引擎所检索。

（如果给某个公司做的是一个内 项目（系统在公司内部运行不用放到互联 上），不用背搜索引擎所检录）。

HTML超文本标记语言中的超指的是超链接。

超链接：可以让我们从一个页面跳转到领一个页面。访问过的是紫色，没有访问过的是蓝色。

href：指向超链接跳转的目标地址，可以写一个相对路径也可以写一个完整的地址

target属性：用来指定打开超链接的位置，可选值：

 _self：表示在当前窗口打开（默认值）

_blank:在新窗口中打开

纯表现的标签都不推荐使用，通过CSS来设置。

超链接href=”#”则点击超链接后会跳转到当前页面的顶部。给任何标签设置Id值，将href=”id值”则可以跳转到指定的位置。

将收件人设置为mailto后面的地址。在以前的开发方便用户联系 站所有人，现在都是通过二维码。

八，块元素和内联元素

块元素：独占一行，可以设置元素的宽和高，div，p，h1，ul，ol，li，主要用来做 页布局

DIV没有任何语义，并不会为里面的内容设置任何默认样式，主要用来进行页面布局的。

内联元素：指的是只占自身大小的元素，宽高不可设置span，主要用来选中文本设置样式

span没有任何语义，专门用来选中文字，为文字设置样式。

一般情况下，使用块元素包含内联元素，不会使用内联元素包含块元素；a元素可以包含任何元素除了它本身，p元素不可以包含其他的块元素。

九、HTML标签及样式

补充一些HTML标签，

em 和strong有语义，i和b没有语义，

在H5中赋予small语义，来哦表明一些细则类的内容，不如合同内的小字， 站版权声明。

cite标签： 页中加书名 的内容，表示参考内容，内容会斜着显示

q标签：表示短引用，浏览器会默认加上“”，通过CSS来加的，我们在浏览器哄无法选中这个引 ，q:before{content:'””‘}

IE6中不会添加引 ，IE8中的引 跟火狐中的不一样。

blockquote:标签表示长引用，

sup：设置上标

sub：设置下标

del：删除的内容，添加删除线

ins：表示插入的内容，会自动添加下划线

pre：预格式标签，不会忽略代码中的空格，等宽字体

code:专门用来表示代码

1.列表标签

在 页中有3种列表，无序列表ul、有序列表ol、定义列表dl

li 列表项，通过type修改无序列表的项目符 ，可选值：disc(默认值)、square：实心方块、circle:空心圆一般默认取消，他们在不同的浏览器中显示的效果不一样。如果需要设置项目符 ，可以采用为Li设置背景图片的方式来设置。

有序列表中type 可选值：1  默认值采用阿拉伯数字；a/A 采用小写或大写字母， i/I 采用小写或大写罗马数字

定义列表：对一些词汇或内容进行定义dl中有两个标签，dt : 被定义的内容；dd ：对定义内容的描述

三种列表可以相互嵌套。