1. 程式人生 > >18 12 23 html 基本學習

18 12 23 html 基本學習

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