html初識(一)
阿新 • • 發佈:2018-11-10
一個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字元實體
程式碼中成段的文字,如果文字間想空多個空格,在程式碼中空多個空格,在渲染成網頁時只會顯示一個空格,如果想顯示多個空格,可以使用空格的字元實體,程式碼如下:
<!-- 在段落前想縮排兩個文字的空格,使用空格的字元實體: -->
<p>
一個html檔案就是一個網頁,html檔案用編輯器開啟顯示的是文字,可以用<br />
文字的方式編輯它,如果用瀏覽器開啟,瀏覽器會按照標籤描述內容將檔案<br />
渲染成網頁,顯示的網頁可以從一個網頁連結跳轉到另外一個網頁。</p>
在網頁上顯示 “<” 和 “>” 會誤認為是標籤,想在網頁上顯示“<”和“>”可以使用它們的字元實體,比如:
<!-- “<” 和 “>” 的字元實體為 < 和 > -->
<p>
3 < 5 <br>
10 > 5
</p>