一、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 ...