網(wǎng)絡(luò)結(jié)構(gòu)與HTML學(xué)習(xí)筆記
微信公眾號：嵌入式開發(fā)圈
關(guān)注可了解更多的教程。問題或建議，請公眾號留言;
如果你覺得本文對你有幫助，歡迎贊賞
▲長按圖片保存可分享至朋友圈
作為一個嵌入式應(yīng)用開發(fā)者，網(wǎng)頁前后端的東西也要了解一點，不需要有多深度，至少別人說了你知道一點，就像我們用算法一樣，你不是那個行業(yè)的，不專業(yè)從事那個行業(yè)的事情。所以只要有知識的廣度即可，不然做類似和云端服務(wù)器合作的項目就會很懵逼。
我們先來了解下基礎(chǔ)知識。
一、網(wǎng)絡(luò)學(xué)習(xí)基礎(chǔ)-網(wǎng)絡(luò)結(jié)構(gòu)和HTML
網(wǎng)絡(luò)常見基本結(jié)構(gòu)
Browser/Server:
瀏覽器/服務(wù)器，這是現(xiàn)在最流行的網(wǎng)絡(luò)模式。平常的上網(wǎng)：比如新浪網(wǎng)、鳳凰網(wǎng)等。
我的電腦(客戶端)http請求 新浪網(wǎng)(服務(wù)器端)
在瀏覽器軟件的地址欄中，輸入一個 ==================>???????????????當(dāng)Apache收到客戶端的請求后， 網(wǎng)址，并回車。????首先，Apache先判斷一下，文件拓展名。
如：http://www.sina.com.cn/index.html????<==================????1)如果請求的文件是.html文件，Apache將在 http請求結(jié)果????自己的空間中查找文件，找到后直接返回給客戶端。
如果請求的文件是.php文件，它需要將.php文件
各樣的代碼。 轉(zhuǎn)給PHP程序來處理。
主要有三種代碼：html代碼、CSS代碼、JavaScript代碼。
html代碼：主要控制網(wǎng)頁的結(jié)構(gòu)。(標題、正文、鏈接等等)
CSS代碼 ：主要控制網(wǎng)頁的外觀。(顏色，文字粗細等等)
JS代碼 ：主要控制網(wǎng)頁的行為。(比如動畫等等)
C/S Client/Server :
客戶端/服務(wù)器端。最關(guān)鍵的地方，在自己的電腦上安裝一個客戶端軟件，通過客戶端訪問服務(wù)器。例如： QQ
http協(xié)議： 就是上互聯(lián)網(wǎng)所遵守的一種規(guī)則。
www.sina.com.cn ?是要訪問的服務(wù)器的名稱。
服務(wù)器： 安裝了服務(wù)器端軟件(Apache,IIS)的電腦。
瀏覽器的功能: ? ?將各種代碼(從服務(wù)器返回)，翻譯成“圖文混排”的效果。
二、HTML簡介
(1)HTML: Hypertext Markup Language : 超文本標注語言
(2)HTML是一種規(guī)范，是一種標準，編寫網(wǎng)頁的一種標準。
(3)超文本：就是網(wǎng)頁上不光有文本，還有圖片，音樂，視頻等。
(4)標注:是一種記號，是一種標志。如：紅綠燈。
(6)語言:這里的"語言"就是代碼，跟所謂的"程序語言"一點關(guān)系都沒有。
(7)HTML的主要目的：就是用來顯示網(wǎng)頁的不同效果、不同部分。
如:文本，這就表示將文本進行加粗。(bold),這個..就是標記。
HTML文件結(jié)構(gòu)
<html> <head> <title>新浪首頁title> head> <body> 網(wǎng)頁正文。。。。。 body> html>
HTML文件結(jié)構(gòu)的說明
(1)標記的含義：
告訴瀏覽器，其中的內(nèi)容或者代碼用什么格式(圖片、視頻)來進行翻譯。
(2)標記的含義：
告訴瀏覽器，網(wǎng)頁中的漢字用什么字符集(GB2312(簡體中文),BIG5(繁體中文),JIS(日文),utf-8(多國語言字符集))顯示。
(英文，數(shù)字是全球統(tǒng)一的，不會亂碼，但是，如果不使用正確的字符集，會出現(xiàn)亂碼)
(3)標記的含義：
是網(wǎng)頁主要內(nèi)容的顯示區(qū)域。網(wǎng)頁中99%的內(nèi)容都必須放在。
只有放在中，最終瀏覽器翻譯以后，才能看見結(jié)果。
HTML標簽格式
HTML標記，大致分兩類 : (1)雙邊標記 ; (2)單邊標記
(1)雙邊標記
是指有開始和結(jié)束標記，內(nèi)容放在開始和結(jié)束標記之間。
如內(nèi)容
語法格式：<標簽 屬性1 = "值?1" 屬性2 = "值2">內(nèi)容標簽>
"屬性"的理解：人的特征(屬性)有身高=170cm、體重=100KG、姓名=張三
例如：
<font size="6" color="blue" face="楷體">這是6號字體文本font>
font是標簽，size是屬性表示字體大小,color也是屬性，表示顯示字體的顏色。face也是屬性，表示字體類型。
表示加下劃線
(2)單邊標記
是指有開始標記，而沒有結(jié)束標記，單邊標記一般是沒有內(nèi)容。如：
表示換行
單邊標記一般起一個特殊的功能。
單邊標記常用的有10多個標記。
語法格式：<標簽 屬性1 = "值?1" 屬性2 = "值2">
HTML標簽編寫規(guī)范
(1)HTML標記不區(qū)分大小寫。如:、、
(2)HTML標記屬性可有可無，有的標記是沒有屬性的，如:、、等
(3)雙邊標記的內(nèi)容在開始和結(jié)束標簽之間，單邊標記沒有內(nèi)容。
(4)HTML標記可以相互嵌套，但一定注意是順序嵌套，外層套內(nèi)層，一層套一層。
<meta http-equiv="content-type" content="text/html;charset=utf-8">
功能：告訴瀏覽器，如何翻譯漢字。
Content-type:內(nèi)容類型
Content:詳細內(nèi)容類型介紹
Text/html:網(wǎng)頁是text格式，html是文本中的小格式。
charset:字符集，主要控制漢字如何顯示
utf-8:多國語言編碼，什么國家的語言都可以正常顯示。
好了，光說不練假把戲，咱們就來寫第一個網(wǎng)頁吧，用NotePad C++編輯器創(chuàng)建一個1.html的文件，然后輸入以下網(wǎng)頁代碼：
<html> <head> <title>這是一首詩構(gòu)成的網(wǎng)頁title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> head> <body> <h1> <font size="6" color="blue" face="黑體">春曉font> h1> <p> <u> <font size="3" color="black" face="黑體"> 春眠不覺曉，處處聞啼鳥。u><br><u> 夜來風(fēng)雨聲，花落知多少。font>u><br> p> body> html>
運行結(jié)果：
的常用屬性
(1)bgColor?:?網(wǎng)頁的背景色。?如: <body bgColor="red"> (2)Background?:?網(wǎng)頁背景圖片地址?。?如: <body background="images/bg.png"> 網(wǎng)頁背景圖片最好跟網(wǎng)頁放在一起，最好不要用中文來命名，背景是平鋪效果。
例如：<body bgcolor = "#99cc33" background="images\20170331151615532.png"> HTML文本修飾標記：
(3)<b>b>：????????加粗?bold(跟文本相關(guān))?????如: <b>文字b> ，這個標記沒有屬性
(4)<i>i>:?????????加斜體?italic(跟文本相關(guān))?如：<i>文字i> (5)<u>u>:?????????下劃線?underline。????????如: <u>文字u> (6)<s>s>:?????????刪除線?strike。???????????如: <s>文字s> (7)<sup>sup>:?????上標。
(8)<sub>sub>:?????下標。
????例如：<font size="7">a<sup>2sup> +?b<sub>2sub> =?24 font> (9)<font>font>:????????字體標記
????size?:?文本大小，取值1-7,1小，7大。
????Color:?顏色值。
????Face?:字體?？w、黑體、宋體。。。。
接下來看一個實例，更好了說明如何使用這些標記：
<html> <head> <title>這是一首詩構(gòu)成的網(wǎng)頁title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> head> <body bgcolor="green"> <h1> <font size="6" color="red" face="楷體"> 關(guān)雎 font> h1> <h2> <font size="5" color="red" face="楷體"> 先秦：佚名 h2> <p> <font size="4" color="red" face="楷體"> <b><i>關(guān)關(guān)雎鳩，在河之洲。窈窕淑女，君子好逑。i>b><br> <b><u>參差荇菜，左右流之。窈窕淑女，寤寐求之。u>b><br> <b><s>求之不得，寤寐思服。悠哉悠哉，輾轉(zhuǎn)反側(cè)。s>b><br> <b>參差荇菜，左右采之。窈窕淑女，琴瑟友之。b><br> <b>參差荇菜，左右芼之。窈窕淑女，鐘鼓樂之。b><br> font> p> body> html>
運行結(jié)果：
那如果背景顏色換成圖片該怎么做呢？先在HTML文件的當(dāng)前路徑下創(chuàng)建一個images文件夾，注意，最好還是讓存放圖片的文件夾和HTML在同一路徑下，這樣便于管理。
往這個文件夾放入一張圖片格式，gif,png,jpg等等都可以。。。我下面的這張是png圖片。。。
然后，修改HTML代碼如下：
<html> <head> <title>這是一首詩構(gòu)成的網(wǎng)頁title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> head> <body background="images/20170331151615532.png"> <h1> <font size="6" color="red" face="楷體"> 關(guān)雎 font> h1> <h2> <font size="5" color="red" face="楷體"> 先秦：佚名 h2> <p> <font size="4" color="red" face="楷體"> <b><i>關(guān)關(guān)雎鳩，在河之洲。窈窕淑女，君子好逑。i>b><br> <b><u>參差荇菜，左右流之。窈窕淑女，寤寐求之。u>b><br> <b><s>求之不得，寤寐思服。悠哉悠哉，輾轉(zhuǎn)反側(cè)。s>b><br> <b>參差荇菜，左右采之。窈窕淑女，琴瑟友之。b><br> <b>參差荇菜，左右芼之。窈窕淑女，鐘鼓樂之。b><br> font> p> body> html>
顯示結(jié)果：
????我們學(xué)習(xí)了boda常用的屬性以及HTML的一些標記，但是圖顯示的效果卻不是那么的好看。原因就是沒有排版好，接下來使用居中來使這個頁面更好看一點，順便多加入幾個別的標記。
HTML排版標記
(1) ： 表示一個段落。一段文字放在p標記里就可以了。
常用屬性：align ?水平對齊方式，取值:left(左對齊)、center(居中對齊)、right(右對齊)，一個段落默認就是左對齊。
(2)換行標記
(3)水平線標記(單邊標記)：
size:水平線的粗細，單位一般為px
color:顏色
width:水平線的寬度
noshade:去掉水平線的陰影。(在HTML中，noshade是沒有值的屬性)如:
如：
(4)
預(yù)排版標記
功能：將保留所有的空白字符(空格、換行符),換句話說就是原封不動的輸出。
語法：
:雙邊標記
(5)
...
一級標題到六級標題
標題標記：
...
功能：定義各種標題
屬性：
align 水平對齊,取值:left(左對齊)、center(居中對齊)、right(右對齊)，一個段落默認就是左對齊。
寫個例子看看效果是怎么樣的：
<html> <head> <title>這是一首詩構(gòu)成的網(wǎng)頁title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> head> <body bgColor="white"> <h1 align="center"> <font size="6" color="red" face="楷體"> 關(guān)雎 font> h1> <hr size="5" color="green" width="1600" noshade> <h2 align="center"> <font size="5" color="red" face="楷體"> 先秦：佚名 h2> <hr size="10" color="red" width="1600" noshade> <p align="center"> <font size="4" color="black" face="楷體"> <b><i>關(guān)關(guān)雎鳩，在河之洲。窈窕淑女，君子好逑。i>b> <br> <b><u>參差荇菜，左右流之。窈窕淑女，寤寐求之。u>b> <br> <b><s>求之不得，寤寐思服。悠哉悠哉，輾轉(zhuǎn)反側(cè)。s>b> <br> <b>參差荇菜，左右采之。窈窕淑女，琴瑟友之。b> <br> <b>參差荇菜，左右芼之。窈窕淑女，鐘鼓樂之。b> <br> p> body> html>
運行效果：
長期商務(wù)合作服務(wù)：
免責(zé)聲明：本文內(nèi)容由21ic獲得授權(quán)后發(fā)布，版權(quán)歸原作者所有，本平臺僅提供信息存儲服務(wù)。文章僅代表作者個人觀點，不代表本平臺立場，如有問題，請聯(lián)系我們，謝謝！
下載文檔
