1 软件的架构
1.1 C/S架构
1.1.1 C/S架构概述
- 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架构的概述
- 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声明,来告诉浏览器网页的版本。
<!DOCTYPE html>
11 怪异模式
- 为了兼容一些旧的页面,浏览器设置了两种解析模式:
- 标准模式
- 怪异模式
- 怪异模式解析网页的时候会产生一些不可预期的行为,所以我们应该避免怪异模式的出现。
- 避免的最好方式就是在页面中编写正确的文档声明。
12 meta标签
- meta标签可提供有关页面的元信息,比如针对搜索引擎和更新频度的描述和关键词。
- meta标签是一个自结束标签,编写一个自结束标签的时候,可以在开始标签中添加/。
- 常见用法
- 设置页面的字符集
<meta charset="utf-8" />
- 设置网页的描述
<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标签引入到指定的页面
- 新建style.css
p{ color: red; font-size: 20px; }
- 新建index.html
<!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>