18 12 23 html 基本學習
阿新 • • 發佈：2018-12-23
一個html的基本結構如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>網頁標題</title> </head> <body> 網頁顯示內容 </body> </html>
在sublime中打出 ! 加 tab 鍵可以調出
html標題標籤
<h1>這是一級標題</h1>
<h2>這是二級標題</h2>
<h3>這是三級標題</h3>html段落標籤、換行標籤與字元實體
<p>標籤定義一個文字段落，一個段落含有預設的上下間距，段落之間會用這種預設間距隔開
程式碼中成段的文字，直接在程式碼中回車換行，在渲染成網頁時候不認這種換行，如果真想換行，可以在程式碼的段落中插入<br />來強制換行，
html塊標籤、含樣式的標籤
1、<div> 標籤 塊元素，表示一塊內容，沒有具體的語義。
2、<span> 標籤 行內元素，表示一行中的一小段內容，沒有具體的語義
1、<em> 標籤 行內元素，表示語氣中的強調詞
2、<i> 標籤 行內元素，表示專業詞彙
3、<b> 標籤 行內元素，表示文件中的關鍵字或者產品名
4、<strong> 標籤 行內元素，表示非常重要的內容
語義化的標籤，就是在佈局的時候多使用有語義的標籤，搜尋引擎在爬網的時候能認識這些標籤，理解文件的結構，方便網站的收錄。比如：h1標籤是表示標題，p標籤是表示段落，ul、li標籤是表示列表，a標籤表示連結，dl、dt、dd表示定義列表等，語義化的標籤不多
html影象標籤
<img>標籤可以在網頁上插入一張圖片，它是獨立使用的標籤，它的常用屬性有：
- src屬性 定義圖片的引用地址
- alt屬性 定義圖片載入失敗時顯示的文字，搜尋引擎會使用這個文字收錄圖片、盲人讀屏軟體會讀取這個文字讓盲人識別圖片，所以此屬性非常重要。
-
“ ./ ” 表示當前檔案所在目錄下，比如：“./pic.jpg” 表示當前目錄下的pic.jpg的圖片，這個使用時可以省略。
-
“ ../ ” 表示當前檔案所在目錄下的上一級目錄，比如：“../images/pic.jpg” 表示當前目錄下的上一級目錄下的images資料夾中的pic.jpg的圖片
html連結標籤
<a>標籤可以在網頁上定義一個連結地址，它的常用屬性有：
- href屬性 定義跳轉的地址
- title屬性 定義滑鼠懸停時彈出的提示文字框
- target屬性 定義連結視窗開啟的位置
- target="_self" 預設值，新頁面替換原來的頁面，在原來位置開啟
- target="_blank" 新頁面會在新開的一個瀏覽器視窗打
有序列表
在網頁上定義一個有編號的內容列表可以用<ol>、<li>配合使用來實現
無序列表
在網頁上定義一個無編號的內容列表可以用<ul>、<li>配合使用來實現