html學習一周總結
時間：2023-09-04 07:24:02 | 來源：網站運營
時間：2023-09-04 07:24:02 來源：網站運營
html學習一周總結：自一月六號開始學習html & css基礎已經有一周左右了，為了總結學習過的內容方便日后回顧，打算以后每周記個周記，溫故而知新，順便也是查漏補缺。目前學習已經進行到css的內容，因此第一篇周記就主要總結html相關內容。
一.網頁構成
我認為在學習前搞清楚網頁的構成很重要，方便我們理解這幾個語言間的關系。網頁可以想像成一層一層疊加組成的，html、css、JavaScript分別書寫網頁的結構、表現(xiàn)和行為，因為我是學設計的，學習到此概念后能較快的理解，并根據(jù)老師講解補充整理了它們所對應的內容，如下圖：
網頁構成
html控制網頁的結構，可能類似交互設計的低保真原型圖，規(guī)定了整個網頁的骨架結構、布局以及要呈現(xiàn)的內容；css書寫網頁的樣式，一切用戶直接在網頁獲取的信息，直觀的字體、顏色等樣式，可以理解為它是為網頁披上皮膚，對應根絕視覺設計式來編寫創(chuàng)建網頁的樣式表；有了骨架和皮膚，JS令網頁“動”起來，可以理解為它來書寫網頁的交互行為和反饋。
以上是我的理解，由于學的還不久可能不是很對，歡迎一起討論，也歡迎大佬們的指正～
二.html結構
1.基本語法結構
基本框架
首先html 全稱為Hypertext markup language，翻譯過來是超文本標記語言，這里的標記是指用標簽的形式來標示文本不同的內容，不同的標簽有不同的作用，html都是用一個個標簽來搭建骨架的。
其次，標簽也稱為元素，在html中一般是成對出現(xiàn)的，有開始和結束，語法是：<></>。用<>將標簽擴起來，</>尖括號里加斜杠表示結束，比如表示段落的標簽p，就寫作<p></p>，在中間寫內容，也就是：
<p>在此處書寫段落內容</p>
但是一些標簽無需成對出現(xiàn)，叫做自結束標簽，寫作<標簽名 />，比如換行標簽br，可以直接寫成<br />來使用。
最后，在html最基本的結構中，有且只有一個根目錄<html></html>,所有內容都要寫在html標簽中，html有兩個子標簽<head></head> 和 <body></body>。
head標簽不會在頁面中直接顯示，它用來幫助瀏覽器解析頁面，在其中設立信息，如css/js標簽等。（現(xiàn)在學到一些css的內容，在css內部樣式中，css標簽就需要寫在head標簽里，所用語法區(qū)別與html。）head標簽里的tittle標簽是表示頁面的名稱，將會顯示在瀏覽器標題欄中。搜索引擎在檢索頁面時，會首先檢索title內容，它是網頁中，對于搜索引擎來說最重要的內容，會影響到網頁在搜索引擎中的排名。
body標簽中的內容直接顯示在頁面中，用來設置網頁的主體內容，網頁中所有可見內容，都應該在body中編寫。
2.文檔聲明
在基本框架中最上面一行寫了<!doctype html>，這個是用來聲明當前網頁用了html5的標準。如果不寫，則會導致網頁入
怪異模式，瀏覽器解析頁面會導致頁面無法正常顯示，所以為了避免進入該模式，一定要寫這個文檔聲明。
因為制定標準的W3C和WHATWG兩個組織制定過很多標準，如果不聲明網頁是用什么標準寫的就會導致上文提到的結果。最先是W3C制定，后者因為一些原因（覺得不夠嚴謹?shù)龋┮仓贫艘恍?，分別有公司使用，總之最后兩者公同制定了html5標準，是現(xiàn)在比較通用的標準，聲明寫起來、記起來都比較方便。
3.字符集
計算機中保存的所有內容都需要轉成二進制，人類使用的文字符號就需要進行編碼轉換為二進制，瀏覽器再由二進制轉換為文字符號進行解碼，解碼也需要轉換，轉換采取特定的字符集來進行。而各個國家地區(qū)使用文字不同，設定的字符集也就各種各樣，編碼與解碼采用的字符集不匹配時就會出現(xiàn)亂碼，因此有必要在編寫時聲明所使用字符集，采用meta標簽來聲明，meta標簽是個自結束標簽，所以語法為：
<meta charset="utf-8" />
這里charset就是字符集的意思，等號后面的值就是指采用utf-8的字符集，這是個萬國碼，目前通用的字符集。
三.常用標簽
要注意的是html中的標簽基本都是語意標簽，雖然也可以設置樣式，但是很不推薦，樣式都由css設置。
1.目前學到的一些常用html標簽有：一級標題標簽 <h1></h1> (有一到六級h1-h6，重要程度依次遞減，搜索引擎檢索完title后會立即檢索h1內容)
段落標簽 <p></p>
超鏈接標簽<a></a>
換行標簽<br />
水平線標簽<hr />
圖片標簽<img />
注釋標簽<!-- -->
純粹塊元素<div></div> (沒有任何語意，不會為里面的內容設定任何默認樣式，用作頁面布局）
純粹內聯(lián)元素<span></span> （沒有任何語意，專用來選中文字，然后為文字設定樣式）
2.屬性每個標簽都有共同或特定的屬性，寫在開始標簽的標簽名后面，用空格隔開，使用名值對的方式設定：xx="xx"。
比如每個標簽都有id屬性，這是給標簽設定一個特定標示，同一頁面內id的值不能重復，且值不能以數(shù)字開頭，如:
<p id="p1">我是段落標簽</p>
這個意思就是我給這個p標簽設置了一個id值，叫做p1，選擇這個標簽設定樣式，或者超鏈接到他時就能用到這個id值。
有的標簽有必須寫的屬性，比如：
（1）圖片標簽需要書寫引入外部圖片的路徑，這個路徑是指相對路徑，即是指圖片相對于html文件存儲位置的路徑，用src屬性來寫路徑
1）在同一根目錄下：
<img src="圖片名.jpeg" />
2)在同一文件夾，但圖片在這一文件夾的子文件夾中：
<img src="子文件夾名/圖片名.jpeg" />
如果圖片還在子文件夾中的文件夾中則寫：
<img src="孫子文件夾/子文件夾/圖片名.jpeg" />
3)圖片在父文件夾中，則用../表示返回上一級，返回多少級就寫多少個../ ：
<img src="../圖片名.jpeg" />
4)圖片在父文件夾的另一個子文件夾中：
<img src="../兄弟文件夾名/圖片名.jpeg" />
圖片的縮略名需要寫出來，常用.jpeg 、.png 、 .gif ,用哪種格式看情況存圖（用圖片效果、大小來判斷），大小最好預先裁好。
（2）超鏈接標簽需要指定到鏈接的路徑，因此必須填它的href屬性指引路徑，即：
1）絕對路徑 ： <a href="
http://www.baidu.com">我是一個超鏈接</a> 這就是指直接跳轉到我所指定的網頁中。
2）相對路徑：<a href="xxx.html">我是一個超鏈接</a> 這是指在跳轉到同一目錄下的xxx.html網頁上。
3）同一頁面內指定內容：用設置該指定內容的id值的方式跳轉到指定內容的位置。
比如頁面內有這首詩的內容，
<p>似虎能緣木，如駒不伏轅。
但知空鼠穴，無意為魚餐。
薄荷時時醉，氍毹夜夜溫。
前生舊童子，伴我老山村。
</p>
我想直接跳轉到這首詩的位置，我就可以給這個p標簽設置一個id值：
<p id="poetry">似虎能緣木，如駒不伏轅。
但知空鼠穴，無意為魚餐。
薄荷時時醉，氍毹夜夜溫。
前生舊童子，伴我老山村。
</p>
然后超鏈接寫<a href="#poetry">去指定內容</a>，點擊“去指定內容”就能跳轉到詩詞。
另外，超鏈接標簽還有一個常用屬性target，通過設置target值，設定超鏈接在本窗口打開還是新窗口打開，默認值為本窗口，所以不寫時默認在當前窗口打開：
<a href="
http://xxxx.xxx" target="_self">當前窗口</a>
<a href="
http://xxx.xxxx.xxx" target="_blank">新窗口打開</a>
當前是在B站上看課自學的，看的尚硅谷的課程，課程很細致，小白表示非常友好，希望以后也都能跟得上～
以上就是目前學到的html的一些基本內容，期待交流和指正～
在線咨詢
