App下載

HTML基礎(chǔ)知識點整理歸納

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

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

<head>
  <title>網(wǎng)頁的標題</title>
  <meta charset="utf-8"/>
</head>
<body>
  寫網(wǎng)頁的主體
</body>

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

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

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

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

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

二、HTML的基本標簽

1、格式標簽:

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

2、文本標簽

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

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

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

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

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

3、圖像標簽

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

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

<img/>標簽常見屬性詳解

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

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

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

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

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

1 人點贊