1. 程式人生 > >html初識(一)

html初識(一)

一個html的基本結構如下:

<!DOCTYPE html>                         <!--  文件宣告 -->
<html lang="en">                        <!--  定義網頁語言做統計用  -->
    <head>                              <!--  標籤裡面負責對網頁進行一些設定以及定義標題等  -->
        <meta charset="UTF-8">          <!--  設定字元編碼  -->
        <title>網頁標題</title>          <!--  網頁標題     -->
    </head>
    <body>                              <!--  編寫網頁上的內容  -->
          網頁顯示內容
    </body>
</html>

html文件規範:

xhtml制定了文件的編寫規範,html5可部分遵守,也可全部遵守,看開發要求。

1、所有的標籤必須小寫

2、所有的屬性必須用雙引號括起來

3、所有標籤必須閉合

4、img必須要加alt屬性(對圖片的描述)

 

html註釋:

<!-- 這是一段註釋  -->

 

html標籤特點:

html的標籤大部分是成對出現的,少量是單個出現的,特定標籤之間可以相互巢狀,巢狀就是指一個標籤裡面可以包含一個或多個其他的標籤,包含的標籤和父標籤可以是同類型的,也可以是不同型別的:

<!-- 成對出現的標籤  -->
<body>......</body>
<p>......</p>
<div>......</div>
<b>......</b>

<!-- 單個出現的標籤  -->
<br />
<img src="..." />
<input type="..." />

<!-- 標籤之間的巢狀  -->
<p>
    <span>...</span>
    <a href="...">...</a>
</p>
<div>
      <h3>...</h3>
      <div>
              <span>...</span>
              <p>...</p>
      </div>
</div>

html標題:

通過 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,標籤可以在網頁上定義6種級別的標題。6種級別的標題表示文件的6級目錄層級關係,比如說: <h1>用作主標題(最重要的),其後是 <h2>(次重要的),再其次是 <h3>,以此類推。搜尋引擎會使用標題將網頁的結構和內容編制索引,所以網頁上使用標題是很重要的。

<h1>這是一級標題</h1>
<h2>這是二級標題</h2>
<h3>這是三級標題</h3>

 

html段落、換行與字元實體

html段落

<p>標籤定義一個文字段落,一個段落含有預設的上下間距,段落之間會用這種預設間距隔開,程式碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落</title>
</head>
<body>
    <p>HTML是 HyperText Mark-up Language 的首字母簡寫,意思是超文字標記語言,超
    文字指的是超連結,標記指的是標籤,是一種用來製作網頁的語言,這種語言由一個個的
    標籤組成,用這種語言製作的檔案儲存的是一個文字檔案,檔案的副檔名為html或者htm。
    </p>

    <p>一個html檔案就是一個網頁,html檔案用編輯器開啟顯示的是文字,可以用文字的方
    式編輯它,如果用瀏覽器開啟,瀏覽器會按照標籤描述內容將檔案渲染成網頁,顯示的網
    頁可以從一個網頁連結跳轉到另外一個網頁。</p>
</body>
</html>

html換行

程式碼中成段的文字,直接在程式碼中回車換行,在渲染成網頁時候不認這種換行,如果真想換行,可以在程式碼的段落中插入<br />來強制換行,程式碼如下:

<p>
一個html檔案就是一個網頁,html檔案用編輯器開啟顯示的是文字,可以用<br />
文字的方式編輯它,如果用瀏覽器開啟,瀏覽器會按照標籤描述內容將檔案<br />
渲染成網頁,顯示的網頁可以從一個網頁連結跳轉到另外一個網頁。
</p>

html字元實體

程式碼中成段的文字,如果文字間想空多個空格,在程式碼中空多個空格,在渲染成網頁時只會顯示一個空格,如果想顯示多個空格,可以使用空格的字元實體,程式碼如下:

<!--  在段落前想縮排兩個文字的空格,使用空格的字元實體:&nbsp;   -->
<p>
&nbsp;&nbsp;一個html檔案就是一個網頁,html檔案用編輯器開啟顯示的是文字,可以用<br />
文字的方式編輯它,如果用瀏覽器開啟,瀏覽器會按照標籤描述內容將檔案<br />
渲染成網頁,顯示的網頁可以從一個網頁連結跳轉到另外一個網頁。</p>

在網頁上顯示 “<” 和 “>” 會誤認為是標籤,想在網頁上顯示“<”和“>”可以使用它們的字元實體,比如:

<!-- “<” 和 “>” 的字元實體為 &lt; 和 &gt;  -->
<p>
    3 &lt; 5 <br>
    10 &gt; 5
</p>