1 软件的架构
1.1 C/S架构
1.1.1 C/S架构概述
1.1.2 C/S架构的应用
- ①一般我们使用的软件都是C/S架构
- ②比如系统中的软件QQ、360、office等等
- ③C表示客户端，用户通过客户端来使用软件
- ④S表示服务器，服务器负责处理软件的业务逻辑
1.1.3 C/S架构的特点
- ①软件使用前必须安装
- ②软件更新的时候，服务器和客户端必须同时更新
- ③C/S架构的软件，不能跨平台（操作系统）使用，说明：或许有人会有疑问，QQ不是有Android和win等端的吗，这不是跨平台吗，其实，不是这样的，严格意义上的跨平台，是指一次编译，到处运行，win上的.exe文件在Android系统上是不可以运行的啊。
- ④C/S架构的软件客户端和服务器端采用的是自有协议，相对来说比较安全。
1.2 B/S架构
1.2.1 B/S架构的概述
1.2.2 B/S架构的应用
- ①B/S本质上也是C/S，只不过B/S架构的软件，使用浏览器作为软件的客户端
- ②B/S架构的软件通过使用浏览器访问网页的形式，使用软件
- ③比如：京东、淘宝等
1.2.3 B/S架构的特点
- ①软件不需要安装，直接使用浏览器访问指定的网址即可
- ②软件更新的时候，客户端不需要更新
- ③软件可以跨平台使用，只要系统有浏览器就可以使用
- ④B/S架构的软件，客户端和服务器采用的是通用的HTTP协议，相对来说不安全
2 传统B/S软件的开发流程
- ①网页设计师根据需求设计网页
- ②前端工程师将设计做成静态网页
- ③后台工程师将静态网页修改为动态网页
3 前端工程师主要学习的内容
- 根据w3c标准，一个网页主要由三个部分组成：结构、表现和行为
- 结构：HTML用来描述页面的结构。
- 表现：CSS用于控制页面中元素的样式。
- 行为：JavaScript用于相应用户的操作。
4 万维网联盟（W3C）
- 万维网联盟World Wide Web Consortimu。
- W3C专门为了定义网页相关标准而成立的。
- W3C定义了网页中的HTML、CSS、DOM、HTTP、XML等标准。
5 HTML简介
- HTML。超文本标记语言。
- 它负责网页的三个元素之中的结构。
- HTML使用标签的形式来标识网页中的不同组成部分。
- 所谓超文本指的就是超链接，使用超链接可以让我们从一个页面跳转到另一个页面。
6 HTML的标准格式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
7 HTML的注释
<!DOCTYPE html>
<!--
作者：许威威
时间：2018-05-20
描述：
-->
<!--
在这个结构中，可以来编写HTML的注释
注释中的内容，不会再页面中显示，但是可以在源代码中查看
我们可以通过编写注释来对代码进行描述，从而帮助其他的开发人员工作
一定要养成良好的编写注释的习惯，但是注释一定要简洁明了
-->
<!--
html根标签，一个页面中有且只有一个根标签，网页中的所有内容都是应该写在HTML根标签中
-->
<html>
<!--
head标签，该标签中的内容，不 会再网页中直接显示，它用来帮助浏览器解析页面的
-->
<head>
<meta charset="utf-8" />
<!--
title网页的标题标签，默认会显示在浏览器的标题栏中
搜索引擎在检索页面的时候，会首先检索title标签中的内容
它是网页中对搜索引擎中最重要的内容，会影响到网页在搜索引起中的排名
-->
<title></title>
</head>
<!--
body标签用来设置网页的主体内容，网页中的所有可见内容，都应该在body标签中编写
-->
<body>
</body>
</html>
8 标签的属性
- 属性：
- 可以通过属性来设置标签如何处理标签中的内容
- 可以在开始标签中添加属性
- 属性需要写在开始标签中，实际上就是一个键值对的结构
- 属性名="属性值"
- 一个标签中可以同时设置多个属性，属性之间使用空格隔开
<!DOCTYPE html>
<!--
作者：许威威
时间：2018-05-20
描述：
-->
<!--
在这个结构中，可以来编写HTML的注释
注释中的内容，不会再页面中显示，但是可以在源代码中查看
我们可以通过编写注释来对代码进行描述，从而帮助其他的开发人员工作
一定要养成良好的编写注释的习惯，但是注释一定要简洁明了
-->
<!--
html根标签，一个页面中有且只有一个根标签，网页中的所有内容都是应该写在HTML根标签中
-->
<html>
<!--
head标签，该标签中的内容，不 会再网页中直接显示，它用来帮助浏览器解析页面的
-->
<head>
<meta charset="utf-8" />
<!--
title网页的标题标签，默认会显示在浏览器的标题栏中
搜索引擎在检索页面的时候，会首先检索title标签中的内容
它是网页中对搜索引擎中最重要的内容，会影响到网页在搜索引起中的排名
-->
<title></title>
</head>
<!--
body标签用来设置网页的主体内容，网页中的所有可见内容，都应该在body标签中编写
-->
<body>
<!--
属性：
可以通过属性来设置标签如何处理标签中的内容
可以在开始标签中添加属性
属性要写在开始标签中，实际上就是一个键值对的结构
属性名="属性值"，一个标签中可以同时设置多个属性，属性之间需要使用空格隔开
-->
<h1>这是我的<font color="red">第一个</font>网页</h1>
</body>
</html>
9 HTML的发展
- 1993年6月，HTML第一个版本发布
- 1995年11月，HTML2.0
- 1997年1月，HTML3.2（W3C推荐）
- 1999年12月，HTML4.01（W3C推荐）
- 2000年底，XHTML1.0（W3C推荐）
- 2014年10月，HTML5（W3C推荐）
10 文档声明
- HTML当前有许多的版本，而且至少有三个版本在广泛的使用，那么浏览器怎么知道我们在使用哪个版本呢。
- 为了让浏览器知道我们使用的HTML版本，我们还需要在网页的最上面添加一个DOCTYPE声明，来告诉浏览器网页的版本。
11 怪异模式
- 为了兼容一些旧的页面，浏览器设置了两种解析模式：
- 怪异模式解析网页的时候会产生一些不可预期的行为，所以我们应该避免怪异模式的出现。
- 避免的最好方式就是在页面中编写正确的文档声明。
12 meta标签
- meta标签可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。
- meta标签是一个自结束标签，编写一个自结束标签的时候，可以在开始标签中添加/。
<meta name="description" content="这是一个网页" />
<meta name="keywords" content="网页,html,css,js" />
<meta http-equiv="refresh" content="5;url=http://www.baidu.com" />
13 HTML常用的标签
- 标题标签：在HTML中，一共有6个标题标签
- h1~h6
- 在显示效果上h1最大，h6最小，但是文字的大小我们并不关心，因为后期我们会用css来修改文字的大
- 使用HTML标签的时候，关心的是标签的语义，我们使用的标签都是语义化的标签
- 6级标题中，h1很重要，表示一个网页中的主要内容，h2~h6的重要性依次降低
- 对于搜索引擎来说，h1的重要性仅仅次于title标签，搜索引擎在检索完title之后，会立即查看h1中的内容
- h1标签非常重要，它会影响到页面在搜索引擎中的排名，但是一个页面推荐最多只有一个h1
- 一般页面中使用标题标签只会使用h1、h2和h3，后面的h4、h5和h6基本上不会使用
<!DOCTYPE html>
<!--
作者：许威威
时间：2018-05-20
描述：
-->
<html>
<head>
<meta charset="utf-8" />
<title>标题标签</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
- 段落标签：用于表示内容中一个自然段，使用p标签来表示一个段落
- p标签中的文字，默认会独占一行，并且段和段之间会有一个间距
<!DOCTYPE html>
<!--
作者：许威威
时间：2018-05-20
描述：
-->
<html>
<head>
<meta charset="utf-8" />
<title>段落标签</title>
</head>
<body>
<p>
我是一个p标签，用来表示一个段落
</p>
<p>
我是一个p标签，用来表示一个段落
</p>
</body>
</html>
- 换行标签：在页面中使用<br/>标签来表示一个换行，<br/>标签是一个自结束标签
<!DOCTYPE html>
<!--
作者：许威威
时间：2018-05-20
描述：
-->
<html>
<head>
<meta charset="utf-8" />
<title>换行标签</title>
</head>
<body>
<!--
在HTML中，字符之间写再多的空格，浏览器也会当成一个空格解析，换行也会当成是一个空格解析
在页面中可以使用<br/>标签来进行换行，<br/>标签是一个自结束标签
-->
<p>
我是一个p标签，<br />
用来表示一个段落
</p>
</body>
</html>
- 水平线标签：在页面中使用<hr/>标签一条水平线，<hr/>是一个自结束标签
<!DOCTYPE html>
<!--
作者：许威威
时间：2018-05-20
描述：
-->
<html>
<head>
<meta charset="utf-8" />
<title>水平线标签</title>
</head>
<body>
<hr />
<hr />
<hr />
</body>
</html>
14 实体
- 在HTML中，一些如<、>这种特殊字符是不能直接使用的，需要使用一些特殊的符号来表示这些特殊字符，这些特殊符号我们称之为实体。
- 实体的语法：
- 浏览器解析到实体的时候，会自动将实体转换为对应的字符
<!DOCTYPE html>
<!--
作者：许威威
时间：2018-05-20
描述：
-->
<html>
<head>
<meta charset="utf-8" />
<title>实体</title>
</head>
<body>
小于号：<
大于号：>
空格：
"&"号:&
版权符号:©
</body>
</html>
15 图片标签
- 使用img标签来向网页中引入一张图片
- img标签是一个自结束标签
- 属性:
- src，设置一个外部图片的路径
- alt，可以用来在图片不能显示的时候，图片的描述。搜索引擎可以通过alt属性来识别不同的图片。如果不写alt属性，则搜索引擎不会对img中的图片进行收录。
- width：可以用来修改图片的宽度。一般使用px作为单位
- height：可以用来修改图片的高度。一般使用px作为单位
<!DOCTYPE html>
<!--
作者：许威威
时间：2018-05-20
描述：
-->
<html>
<head>
<meta charset="utf-8" />
<title>图片标签</title>
</head>
<body>
<img src="img/1.gif" alt="这是一个松鼠"/>
<img src="img/2.gif" width="200px"/>
</body>
</html>
16 XHTML语法规范
- ①HTML中不区分大小写，但是建议使用小写。
- ②HTML中的注释不能嵌套。
- ③HTML标签必须结构完整，要么成对出现，要么自结束标签。
- ④HTML标签可以嵌套，但是不能交叉嵌套。
- ⑤HTML标签中的属性必须有值，且值必须加引号。
17 内联框架
- 使用内联框架可以引入外部的页面，使用ifreame来创建一个内联框架
- 在实际开发中，不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索
- 属性
- src：指向一个外部页面的路径，可以使用绝对路径或者相对路径。
- width：宽度
- height：高度
- name：可以为内联框架指定一个name属性。
<!DOCTYPE html>
<!--
作者：许威威
时间：2018-05-20
描述：
-->
<html>
<head>
<meta charset="utf-8" />
<title>内联框架</title>
</head>
<body>
<iframe src="http://wwww.baidu.com"></iframe>
</body>
</html>
18 超链接
- 使用超链接可以让我们从一个页面跳转到另一个页面
- 使用<a>标签来创建一个超链接
- 属性：
- href：指向链接跳转的目标地址，可以写一个相对路径、绝对路径或完整的地址。
- target：规定在何处打开链接文档
- _self：表示在当前窗口中打开，默认
- _blank：表示在新的窗口中打开
<!DOCTYPE html>
<!--
作者：许威威
时间：2018-05-20
描述：
-->
<html>
<head>
<meta charset="utf-8" />
<title>超链接</title>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度一下，你就知道</a>
</body>
</html>
19 CSS简介
- 层叠样式表
- CSS可以用来为网页创建样式表，通过样式表可以对网页进行装饰。
- 所谓层叠，可以将整个网页想象成是一层层的结构，层次高的将会覆盖层次低的。
- 而CSS就可以分别为网页的各个层次设置样式。
20 内联样式（行内样式）
- 可以将CSS样式编写到元素的style属性之中，这种方式我们称之为内联样式
- 内联样式只对当前的元素中的内容起作用
- 内联样式不方便复用
- 内联样式属于结构和表现耦合，不方便后期维护，不推荐使用
<!DOCTYPE html>
<!--
作者：许威威
时间：2018-05-20
描述：
-->
<html>
<head>
<meta charset="utf-8" />
<title>CSS</title>
</head>
<body>
<p style="color: red;">锄禾日当午，汗滴禾下土</p>
</body>
</html>
<!DOCTYPE html>
<!--
作者：许威威
时间：2018-05-20
描述：
-->
<html>
<head>
<meta charset="utf-8" />
<title>CSS</title>
</head>
<body>
<p style="color: red;font-size: 20px;">锄禾日当午，汗滴禾下土</p>
</body>
</html>
21 内部样式表
- 可以将CSS样式编写到head标签中的style标签之中，然后通过CSS选择器选中指定的元素，并同时为这些元素一起设置样式，这样可以使得样式进一步复用
- 将样式表编写到style标签之中，也可以使得结构和表现进一步分离，推荐使用的方式
<!DOCTYPE html>
<!--
作者：许威威
时间：2018-05-20
描述：
-->
<html>
<head>
<meta charset="utf-8" />
<title>CSS</title>
<!--
也可以将css编写到head中的style标签中
-->
<style type="text/css">
p{
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p>锄禾日当午，汗滴禾下土</p>
<p>锄禾日当午，汗滴禾下土</p>
<p>锄禾日当午，汗滴禾下土</p>
<p>锄禾日当午，汗滴禾下土</p>
</body>
</html>
22 外部样式表
- 可以将样式表编写到外部的CSS文件中，然后通过link标签引入到指定的页面
p{
color: red;
font-size: 20px;
}
<!DOCTYPE html>
<!--
作者：许威威
时间：2018-05-20
描述：
-->
<html>
<head>
<meta charset="utf-8" />
<title>CSS</title>
<!--
通过link标签，引入外部的css文件
-->
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<p>锄禾日当午，汗滴禾下土</p>
<p>锄禾日当午，汗滴禾下土</p>
<p>锄禾日当午，汗滴禾下土</p>
<p>锄禾日当午，汗滴禾下土</p>
</body>
</html>