一，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架构软件，这些网站怎么就是软件呢？

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

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 charset="utf-8">

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

注释：<!--功能  作者  日期-->

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

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

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

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

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

&nbsp;(不带换行的空格) &lt;&gt(小于大于)，版权号：&copy

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

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

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

图片的格式：

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

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

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

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

绝对路径：是从盘符开始的路径,形如 C:\windows\system32\cmd.exe

五、文档声明

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

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

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 ：对定义内容的描述

三种列表可以相互嵌套。