[19/06/03-星期一] HTML基礎_C/S與B/S的區別&標題標籤(h1-h6)、段落標籤(p)

時間 2019-11-16

標籤星期一 html 基礎區別標題標籤 h1 h6 段落欄目 HTML 简体版

原文原文鏈接

1、C/S與B/S的區別css

C/S（Client/Server）:客戶端/服務器html

　　1）通常使用的軟件都是C/S架構，好比QQ、360、office365；前端

　　2）C表示客戶端，用戶經過客戶端來使用軟件；S表示服務器，服務器負責處理軟件的業務邏輯，全部數據發給服務器來處理；node

　　3）必須的安裝才能使用；軟件更新時服務器和客戶端必須得同步更新；C/S架構的軟件不能跨平臺(跨系統)使用，即windows版的QQ不能在手機上的安卓系統使用ios

　　4）C/S架構的軟件客戶端和服務器的通訊採用自有協議，相對來講比較安全。即信息要加密，協議就至關於密碼本。即便別人截獲信息，不知道協議就破解不出來。windows

　　5）開發成本比較高瀏覽器

B/S（(Browser/Server）:瀏覽器/服務器安全

·　 1）本質也是C/S，只不過B/S架構的軟件，使用瀏覽器來做爲軟件的客戶端服務器

　　2）經過使用瀏覽器訪問網頁的形式，來使用軟件。如京東、淘寶、1230六、新浪微博架構

　　3）軟件能夠不須要安裝，直接使用瀏覽器訪問指定的網址便可，

　　4）軟件更新時客戶端不須要更新。軟件能夠跨平臺，不論是安卓系統抑或Windows系統、Linux系統只要知道網址均可以訪問。一個網址打天下

　　5）採用通用的http協議發消息，至關於密碼本你們都知道，相對不安全，可是程序能夠本身加密或使用https(底層加密過的協議)協議來通訊。

舉例來講，通俗講前段負責B：瀏覽器這個部分， JavaEE主要負責S：服務器這部分，安卓/ios/電腦端的exe軟件等開發主要負責C：客戶端這部分

軟件開發流程：

一、網頁設計師根據需求設計網頁，如使用PS設計jpg文件。

二、前段工程師將設計作出靜態網頁，如使用Hbuilder編寫HTML文件。承上啓下

三、後臺工程師將靜態網頁修改成動態網頁，編寫服務器代碼如使用Java開發的JSP。可使用接口模式，分開整，定義好接口，傳數據便可。

什麼都會幹叫全棧工程師，既能寫前端也能寫服務器。新的模式：Node.js是一個讓JavaScript運行在服務器端的開發平臺，之前JavaScript是在瀏覽器端

前端入門簡單，相對於Java而說，Java入門門檻高，可是前端深刻的很難。

2、前端入門

　　結構：HTML用於描述頁面的結構，如同人的骨架

　　表現：CSS用於控制頁面中元素的樣式，如同人的皮膚，畫皮，衣服，美化頁面

　　行爲：JavaScript用於響應用戶的操做，但願一我的能夠與別人交流，頁面中能夠用戶交流，響應用戶的操做。

3、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.0一、XHTML、H5，爲了幫助瀏覽器知道和識別編寫的網頁使用版本，能夠加上

doctype聲明，讓瀏覽器知道是什麼HTML版本，<!DOCTYPE html>是H5的文檔聲明，聲明當前網頁是使用H5的標準的去寫的，相反H4.0一、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，若是都是一級標題，意味着它都不重要，還可能被搜索引擎判爲垃圾網站，更加影響排名。

　　通常頁面標題標籤只使用h一、h二、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.一、標題標籤：h1-h6    -->    
        <h1>錦瑟</h1>
        
        <!--3.二、段落標籤：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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。