一、C/S与B/S的区别

C/S(Client/Server):客户端/服务器

  1)一般使用的软件都是C/S架构,比如QQ、360、office365;

  2)C表示客户端,用户通过客户端来使用软件;S表示服务器,服务器负责处理软件的业务逻辑,所有数据发给服务器来处理;

  3)必须的安装才能使用;软件更新时服务器和客户端必须得同步更新;C/S架构的软件不能跨平台(跨系统)使用,即windows版的QQ不能在手机上的安卓系统使用

  4)C/S架构的软件客户端和服务器的通信采用自有协议,相对来说比较安全。即信息要加密,协议就相当于密码本。即使别人截获信息,不知道协议就破解不出来。

  5)开发成本比较高

B/S((Browser/Server):浏览器/服务器

·   1)本质也是C/S,只不过B/S架构的软件,使用浏览器来作为软件的客户端

  2)通过使用浏览器访问网页的形式,来使用软件。如京东、淘宝、12306、新浪微博

  3)软件可以不需要安装,直接使用浏览器访问指定的网址即可,

  4)软件更新时客户端不需要更新。软件可以跨平台,不管是安卓系统抑或Windows系统、Linux系统只要知道网址都可以访问。一个网址打天下

  5)采用通用的http协议发消息,相当于密码本大家都知道,相对不安全,但是程序可以自己加密或使用https(底层加密过的协议)协议来通信。

举例来说,通俗讲前段负责B:浏览器这个部分, JavaEE主要负责S:服务器这部分,安卓/ios/电脑端的exe软件等开发主要负责C:客户端这部分

软件开发流程:

1、网页设计师根据需求设计网页,如使用PS设计jpg文件。

2、前段工程师将设计做出静态网页,如使用Hbuilder编写HTML文件。承上启下

3、后台工程师将静态网页修改为动态网页,编写服务器代码 如使用Java开发的JSP。可以使用接口模式,分开整,定义好接口,传数据即可。

什么都会干叫全栈工程师,既能写前端也能写服务器。新的模式:Node.js是一个让JavaScript运行在服务器端的开发平台,以前JavaScript是在浏览器端

前端入门简单,相对于Java而说,Java入门门槛高,但是前端深入的很难。

二、前端入门

  结构:HTML用于描述页面的结构,如同人的骨架

  表现:CSS用于控制页面中元素的样式,如同人的皮肤,画皮,衣服,美化页面

  行为:JavaScript用于响应用户的操作,希望一个人可以与别人交流,页面中可以用户交流,响应用户的操作。

三、HTML简介 

  在纯文本编辑器中编写的内容都是纯文本,如记事本写的txt文件,nodepad++,网页就是纯文本编写。文本只能保存文本内容,图片、音频、视频都不能加上去。

  HTML(Hyper Text Markup language,超文本标记语言) ,超越单纯的文本,让网页更丰富,它负责网页中三要素之一的结构,HTML使用标签来

标记网页中的不同组织部分所谓超文本指的是超链接,使用超链接可以帮助我们从一个页面跳到另一个页面。

发展历史:(W3C 万维网联盟,XHTML 可扩展超文本标记语言)

  1993年6月  :HTML第一个版本发布;

  1995年11月:HTML 2.0版本;

  1997年1月  :HTML 3.2版本(W3C推荐);

  1999年12月:HTML 4.01版本(W3C推荐);

  2000年底    :XHTML 1.0版本(W3C推荐);

  2014年10月:HTML5版本(W3C推荐)

  XHTML版本的由来,先有浏览器厂商的实现,后有标准,W3C标准滞后,HTML不够严谨,松散惯了,但是XML(可扩展标记语言)相对严谨,所以XHTML作为从HTML

到XML的过渡版本,XHTML应运而生,但是理想很丰满,现实很骨感。经过4年,2004年浏览器厂商不愿意用XHTML标准,自由惯了,所以三大浏览器厂商(欧朋,火狐,

苹果)自己组织一个WHATWG(超文本应用技术工作组),自己制定了HTML5的标准,但是初期W3C不重视这股力量,依旧推广XHTML,一直到2007年谷歌浏览器加入到

WHATWG联盟,H5的标准进一步推广了,于是2007年两大组织合作,共同制定H5标准,开始推广H5标准,经过将近8年的努力,2014年W3C发布了H5标准。但是由于理念

的不同,W3C倾向于标准不变,要增加标准可以升级版本,如5.5版本、6.0版本,但是WHATWG倾向于一直使用H5这个名字,不断的修修补补。所以网上关于H5的新增

标签有W3C版本的标准和WHATWG标准2个版本,都能用。网上3个广泛使用的版本,H4.01、XHTML、H5,为了帮助浏览器知道和识别编写的网页使用版本,可以加上

doctype声明,让浏览器知道是什么HTML版本,<!DOCTYPE html>是H5的文档声明,声明当前网页是使用H5的标准的去写的,相反H4.01、XHTML的声明特别麻烦,很长。

  不写文档声明,会导致某些浏览器进入怪异模式,怪异模式中浏览器解析页面会导致页面无法正常显示,所以为了不进入怪异模式,必须要进行文档声明。

引申 编码-解码

  乱码:计算机很笨,只能识别二进制的0,1,在计算机中保存中任何内容,必须转成二进制来执行,包括各种网页。在读取内容时,需要将二进制转成正确的内容。

如果不能采用正确的字符集去读取就会产生乱码,就是鸡同鸭讲。

编码:依据一定的规则,将字符转换为二进制编码的过程。

解码:依据一定的规则,将二进制编码转换成字符的过程。

  这个规则就是字符集,就是密码本,如果不使用正确的密码本,解出来必定是乱码。

  常见的字符集:ASCII(美国,7位二进制表示,128个字符)、ISO-8859-1(欧洲在美国基础,8位二进制表示,256个字符)、GBK(国标码,中国在美国基础的扩充编码)、

GB2312(国标码,中文系统的默认编码)、UTF-8(支持世界上所有国家的各种文字编码方式)。

  在中文系统的浏览器中,默认都是使用GB2312去解码。记事本中ANSI是系统的默认编码,在中文系统中采用GB2312编码,在英语系统中可能就是ASCII编码,很灵活。

3.1  标题标签(h1-h6) 

  在显示效果上h1最大,h6最小,但是对文字的大小并不关心。因为通过css可以设置文字的大小

  使用HTML标签时,关心的是标签的语义(比如h1可以是文章的一级标题,h2可以是文章的二级标题),我们使用的标签都是语义化标签。关心的语义,而不是显示效果。

  h1最重要,表示一个网页中的主要内容,h2-h6重要性依次递减。h1的重要性仅次于title,对于搜索引擎,它搜索完title标题后,立即查看一级标题。

  h1很重要,会影响网页在搜索引擎中的排名,页面只能或一般只写一个h1,如果都是一级标题,意味着它都不重要,还可能被搜索引擎判为垃圾网站,更加影响排名。

  一般页面标题标签只使用h1、h2、h3,h4-h6基本都不会使用。

3.2  段落标签(p)

  段落标签用于表示内容中的一个自然段,使用标签p来表示一个段落。p标签中的文字会默认独占一行,并且段与段之间会有一个间距。

  在编写HTML源码时,字符之间不管写再多的空格,浏览器也会当成【一个】空格解析,换行也会当成【一个】空格解析。

引申:换行标签(br):   使用<br />来表示一个换行,它是个自结束标签。

   水平线标签(hr): 使用<hr />在当前页面生成一个水平线,它也是一个自结束标签。

<!DOCTYPE html>
<!--html根标签:一个网页有且只有一个根标签,网页中的所有内容都应该写在html根标签中-->
<html>
<!--head标签:该标签的内容不会再网页中直接显示,它可以帮助浏览器解析页面-->
<head>
<!--meta标签是设置网页的元数据,比如网页的字符集、关键字、简介
meta是个自结束标签,编写一个自结束标签,可以在开始标签中添加一个"/",有的不加貌似也可以
-->
<meta charset="UTF-8"> <!--告诉浏览器采用UTF-8字符集去解码--> <!--title网页的标题标签:默认显示在浏览器的标题栏中
搜索引擎在检索页面时,会首先检索title中的内容,它是网页中对于搜索引擎最重要的内容,会影响网页在搜索引擎
中排名,会有SEO(搜索引擎优化)主要干这个事
-->
<title>html基础知识再学习</title> </head> <!--body标签用来设置网页的主体内容,网页中所有可见的内容,都应该在body中书写-->
<body>
<!--属性:<font> 样式的意思, 规定文本的字体 face、字体尺寸 size(1-7之间)、字体颜色 color
font标签不赞成使用,可以使用css来设置
可以通过属性来设置标签去如何处理标签中的内容,可以在开始标签中添加属性;
属性需要写在开始标签中,实际上就是一个名-值对的结构。
一个标签中可以设置多个属性 标签和元素是一个意思
如:<h1>文字</h1> 这里h1既可以叫标签也可以叫元素
-->
<font color="blue" size="4" face="微软雅黑">你敲代码好像蔡徐坤呀</font> <!--3.1、标题标签:h1-h6 -->
<h1>锦瑟</h1> <!--3.2、段落标签:p
引申:换行标签:br <br />是个自结束标签
hr <hr />也是一个自结束标签
-->
<p>锦瑟无端五十弦,一弦一柱思华年。</p>
<p>庄生晓梦迷蝴蝶,望帝春心托杜鹃。</p>
<p>沧海月明珠有泪,蓝田日暖玉生烟。</p>
<p>此情可待成追忆?只是当时已惘然。</p> <p> <h4>解析:</h4>
瑟本有二十五根弦,但此诗创作于李商隐妻子死后,故五十弦有断弦之意<br />
但即使这样它的每一弦、每一音节,足以表达对那美好年华的思念。<br />
庄周其实知道自己只是向往那自由自在的蝴蝶。<br />
望帝那美好的心灵和作为可以感动杜鹃。<br />
大海里明月的影子像是眼泪化成的珍珠。<br />
只有在彼时彼地的蓝田才能生成犹如生烟似的良玉。<br />
那些美好的事和年代,只能留在回忆之中了。<br />
而在当时那些人看来那些事都只是平常罢了,却并不知珍惜。<br />
</p> </body>
</html>

[19/06/03-星期一] HTML基础_C/S与B/S的区别&标题标签(h1-h6)、段落标签(p)的更多相关文章

  1. [19/06/09-星期日] CSS基础_示例

    一.图片格式&Hack(尽量不要使用) IE6对图片png-24的透明效果不支持,IE6中背景会发灰,可以使用png-8来代替.但是使用png-8代替之后清晰度会有所下降. 使用js来解决该问 ...

  2. html基础标签-1-pre预格式标签

    pre预格式标签 code,tt标签 1 <!doctype html> 2 <html lang='zh-cn'> 3 <head> 4 <meta cha ...

  3. [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器

    一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...

  4. JavaSE学习总结第06天_Java语言基础2 & 面向对象1

      06.01 二维数组概述和格式1的讲解 二维数组概述:二维数组其实就是一个元素为一维数组的数组 格式1:数据类型[][] 变量名 = new 数据类型[m][n]; m表示这个二维数组有多少个一维 ...

  5. 03 java语言基础逻辑运算符

    03.01_Java语言基础(逻辑运算符的基本用法) A:逻辑运算符有哪些 &,|,^,! &&,|| B:案例演示 逻辑运算符的基本用法 注意事项: a:逻辑运算符一般用于连 ...

  6. android 1.6 launcher研究之自定义ViewGroup (转 2011.06.03(二)——— android 1.6 launcher研究之自定义ViewGroup )

    2011.06.03(2)——— android 1.6 launcher研究之自定义ViewGroup2011.06.03(2)——— android 1.6 launcher研究之自定义ViewG ...

  7. 指导手册03:Hadoop基础操作

    指导手册03:Hadoop基础操作 Part 1:查看Hadoop集群的基本信息1.查询存储系统信息(1)在WEB浏览器的地址栏输入http://master:50070/ 请查看自己的Hadoop集 ...

  8. 3月19日 html(一) html基础内容

    ---恢复内容开始--- 今天学习了html的第一节课,是些比较简单的基础知识,知道如何向网页里添加文本.图片.表格.超链接之类的,如何去编写这些代码. html(hyper text makeup ...

  9. 委托、Lambda表达式、事件系列06,使用Action实现观察者模式,体验委托和事件的区别

    在"实现观察者模式(Observer Pattern)的2种方式"中,曾经通过接口的方式.委托与事件的方式实现过观察者模式.本篇体验使用Action实现此模式,并从中体验委托与事件 ...

随机推荐

  1. MySQL 创建唯一索引忽略对已经重复数据的检查

    MySQL 创建唯一索引忽略对已经重复数据的检查 在创建唯一索引的基础上加上关键字"IGNORE "即可.(注意,经测试,在5.7版本已经不再支持该参数) # 重复数据 mysql ...

  2. print的位置差异

    第一种,for循环和print是同级的,只有当for循环结束了才会print d=[]for i in range(1, 101): d.append(i)print d[6::7] 第二种,也就是p ...

  3. 【NOIP2016提高A组五校联考4】label

    题目 题目 20%算法 设\(f_{i,j}\)表示第i个节点选了j这个权值的方案数. 显然转移方程为,\[f_{i,j}=\Pi_{v=son(i)}(\sum_{k=1}^{j-k}f_{v,k} ...

  4. asp.net mvc 异步控制器

    参考:https://blog.csdn.net/niewq/article/details/20490707 https://www.cnblogs.com/visonme/p/5537190.ht ...

  5. webUploader---实现大文件断点续传

    核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...

  6. 【Leetcode】2的幂(整数的二进制形式,与运算)

    class Solution { public: bool isPowerOfTwo(int n) { ) return false; )) == ; } }; 注: 1) 2的幂函数,其y值大于0: ...

  7. ApiException

    ApiException 用于在catch中throw 异常,可以添加异常信息, throw new ApiException("线下绑卡异常!"); public class A ...

  8. DVWA--XSS(stored)

    XSS 0X01 1.简介 跨站脚本(cross site script)为了避免与样式css混淆,所以简称为XSS. XSS是一种经常出现在web应用中的计算机安全漏洞,也是web中最主流的攻击方式 ...

  9. 大数据笔记(二十七)——Spark Core简介及安装配置

    1.Spark Core: 类似MapReduce 核心:RDD 2.Spark SQL: 类似Hive,支持SQL 3.Spark Streaming:类似Storm =============== ...

  10. java.sql.SQLException: The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or repr

    在数据库连接配置文件中加入以下: 解决办法为在application文件中添加serverTimezone=UTC spring.datasource.url=jdbc:mysql://localho ...