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>配合使用來實現