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