App下載

HTML基礎(chǔ)知識(shí)點(diǎn)整理歸納

猿友 2021-01-22 17:13:18 瀏覽數(shù) (5761)
反饋

一、 HTML的基本結(jié)構(gòu)

<head>
  <title>網(wǎng)頁(yè)的標(biāo)題</title>
  <meta charset="utf-8"/>
</head>
<body>
  寫(xiě)網(wǎng)頁(yè)的主體
</body>

注意:寫(xiě)完代碼記得將格式保存為 .html(推薦) htm xhtml HTML 的基本結(jié)構(gòu)詳解

1.<html>內(nèi)容</html> 解釋?zhuān)篐TML 文檔的文檔標(biāo)記,也稱為 HTML 開(kāi)始標(biāo)記 功能:表示網(wǎng)頁(yè)的開(kāi)始和結(jié)束

2.<head>內(nèi)容</head> 解釋?zhuān)篐TML 文件頭標(biāo)記,也稱為 HTML 頭信息開(kāi)始標(biāo)記 功能:用來(lái)包含文件的基本信息,比如網(wǎng)頁(yè)的標(biāo)題、關(guān)鍵字,在內(nèi)可以放、、等等標(biāo)記 注意:當(dāng)中的內(nèi)容不會(huì)在瀏覽器當(dāng)中顯示

3.<title>內(nèi)容</title> 解釋?zhuān)篐TML 的標(biāo)題文件 功能:網(wǎng)頁(yè)的主題,顯示在瀏覽器的窗口的左上邊!

4.<body>內(nèi)容</body> 解釋?zhuān)篐TML 文檔的主體標(biāo)記 功能:…是網(wǎng)頁(yè)的主體部分,在此標(biāo)記之間可以包含如<p></p>、<h1></h1>、<br>、<hr>等等標(biāo)記,正是由這些內(nèi)容組成了我們所看見(jiàn)的網(wǎng)頁(yè)

二、HTML的基本標(biāo)簽

1、格式標(biāo)簽:

  • 段落標(biāo)簽:格式:<p>你要分段的內(nèi)容</p> 功能:對(duì)網(wǎng)頁(yè)上的文字進(jìn)行分段特點(diǎn):間距比較大
  • 換行標(biāo)簽格式:你要換行的文字后面直接加標(biāo)簽:<br/>注意:它是一個(gè)單標(biāo)簽
  • 居中對(duì)齊標(biāo)簽格式:<center>你要居中的內(nèi)容</center>讓段落或者文字能夠相對(duì)于父標(biāo)簽居中顯示

2、文本標(biāo)簽

  • 標(biāo)題標(biāo)簽:格式:<h1>標(biāo)題</h1>...<h6>標(biāo)題</h6> 功能:定義網(wǎng)頁(yè)中的文字標(biāo)題特點(diǎn): 標(biāo)題標(biāo)簽獨(dú)占一行
  • 字體設(shè)置標(biāo)簽:格式:<font>要設(shè)置的文字</font> 功能:修改文字顏色、字體、大小。常用屬性:

 <font szie="12px">老王</font>
<font color ="red">字體改為紅色</font>
<font face="微軟雅黑">更改文字字體</font>

  • 字體加粗/傾斜表示強(qiáng)調(diào),通常為粗體字

</strong>
<b>字體加粗</b>

  • <em>表示強(qiáng)調(diào)

3、圖像標(biāo)簽

網(wǎng)頁(yè)上面我們看到不僅有文字、還有圖片,下面重點(diǎn)講如何向網(wǎng)當(dāng)中插入圖片!

格式如下:<img src="圖片路徑" width="設(shè)置圖片寬度" height="設(shè)置圖片高度" border="邊框" alt="圖片"/>

<img/>標(biāo)簽常見(jiàn)屬性詳解

  • src 屬性作用:指定我們要加載的圖片的路徑和圖片的名稱以及圖片格式
  • width 屬性作用:指定圖片的寬度,單位 px、em、cm、mm
  • height 屬性作用:指定圖片的高度,單位 px、em、cm、mm
  • border 屬性作用:指定圖標(biāo)的邊框?qū)挾?,單?px、em、cm、mm
  • alt 屬性作用:
    當(dāng)網(wǎng)頁(yè)上的圖片被加載完成后,鼠標(biāo)移動(dòng)到上面去,會(huì)顯示這個(gè)圖片指定的屬性文字作用
    如果圖像沒(méi)有下載或者加載失敗,會(huì)用文字來(lái)代替圖像顯示作用
    搜索引擎可以通過(guò)這個(gè)屬性的文字來(lái)抓取圖片

三、網(wǎng)頁(yè)中的超鏈接

基本語(yǔ)法<a href="" target="打開(kāi)方式" name="頁(yè)面錨點(diǎn)名稱" >鏈接文字或者圖片</a>屬性講解- href 屬性:鏈接的地址,鏈接的地址可以是一個(gè)網(wǎng)頁(yè),也可以是一個(gè)視頻、圖片、音樂(lè)等等

  • target 屬性
    1、作用:定義超鏈接的打開(kāi)方式
    2、屬性值:_blank:在一個(gè)新的窗口中打開(kāi)鏈接
    _seif(默認(rèn)值):在當(dāng)前窗口中打開(kāi)鏈接
    _parent:在父窗口中打開(kāi)頁(yè)面(框架中使用較多)
     _top:在頂層窗口中打開(kāi)文件(框架中使用較多)
    name 屬性指定頁(yè)面的錨點(diǎn)名稱

 注:代碼的格式空格鍵和回車(chē)鍵在網(wǎng)頁(yè)中都不會(huì)起到任何作用,我們?yōu)榱俗尨a清晰易讀,可以使用空格和回車(chē)鍵進(jìn)行編排。

1 人點(diǎn)贊