一、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. Linux系统中的硬件问题如何排查？(1)

    在Linux系统中,对于硬件故障问题的排查可能是计算机管理领域最棘手的工作,即使是经验相当丰富的用户有时也会遇上自己搞不定的状况,本文分享一些实用的技巧与处理方法,希望有助于读者朋友理解.查明并最终搞 ...

  2. ESP-8266 串口通信(Serial)

    ESP8266的串口通信与传统的Arduino设备完全一样.除了硬件FIFO(128字节用于TX和RX)之外,硬件串口还有额外的 256字节的TX和RX缓存.发送和接收全都由中断驱动.当FIFO/缓存 ...

  3. Docker(四)：Docker常用命令

    除过以上我们使用的Docker命令外,Docker还有一些其它常用的命令 拉取docker镜像 docker pull image_name 查看宿主机上的镜像,Docker镜像保存在/var/lib ...

  4. c++ copy和operator =

    目录(?)[+] 构造函数 拷贝构造函数 赋值函数   C++中一般创建对象,拷贝或赋值的方式有构造函数,拷贝构造函数,赋值函数这三种方法.下面就详细比较下三者之间的区别以及它们的具体实现 1.构造函 ...

  5. ArrayList，Vector ，LinkedList的存储性能和特性

    ArrayList,Vector,LinkedList : 两者都采用数组元素方式存储数据,此数组元素数大于实际存储的数据(以便于增加和插入元素),允许直接按照序号索引元素,但是插入元素涉及数组元素移 ...

  6. （69）Python异常处理与断言

    http://blog.csdn.net/pipisorry/article/details/21841883 断言 断言是一句必须等价于布尔真的判定;此外,发生异常也意味着表达式为假.这些工作类似于 ...

  7. Linux vi/vim and linux yum 命令

    Linux vi/vim 所有的 Unix Like 系统都会内建 vi 文书编辑器,其他的文书编辑器则不一定会存在. 但是目前我们使用比较多的是 vim 编辑器. vim 具有程序编辑的能力,可以主 ...

  8. 箭头函数详解()=>{}

    摘要:箭头函数有几个使用注意点. (1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象,箭头函数继承而来的this指向永远不变. (2)不可以当作构造函数,也就是说,不可以使用n ...

  9. springBoot 配置url 访问图片

    需要添加依赖: <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  10. idea使用 git 撤销commit 原

    填写commit的id  就可以取消这一次的commit