天天看點
傳回

HTML基礎

HTML初識

HTML 基本概念

HTML是一種标準化的标記語⾔，由一套标記标簽(markup tag)組成。Web前端開發人員的一項主要工作就是利用HTML标簽來編寫⽹頁，将文本、超連結、圖檔、語音、視訊等各種内容整合起來，實作絢麗多姿的網頁。

下面是大家需要記住的關于HTML的一些基本描述：

  • HTML标記标簽，通常簡稱HTML标簽；
  • HTML文檔，通常簡稱HTML頁面、網頁等；
  • HTML5能夠較好的相容HTML之前版本，但也廢棄了一些舊的HTML特性。

基本的HTML結構

這是一個最基本HTML頁面：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello World</title>
    </head>
    <body bgcolor="yellow">
        <h1 align="center">這是一個一級标題</h1>
        <p>這是第1個段落。</p>
        <p>這是第2個段落。</p>
    </body>
</html>
HTML基礎

其中：

<html>、</html>，<body>，</body>，<h1>，<p>

等都是HTML标簽；

<h1>這是一個一級标題</h1>

，

<p>這是第1個段落

。

</p>

等都是HTML元素；

bgcolor="yellow"、align="center"

都是HTML元素的屬性。

那麼HTML标記和HTML元素，到底有何差別呢？HTML元素的屬性又是什麼呢？

HTML标簽

HTML标簽由一對尖括号、标簽名，以及反斜杠組成，包括開始标簽和結束标簽兩類：

  • 開始标簽的格式：

    <标簽名>
  • 結束标簽的格式：

    </标簽名>

是以，

<html>，<head>，<p>

等都是開始标簽；

</html>，</head>，</p>

等都是結束标簽。

HTML元素

HTML元素是由HTML開始标簽、元素内容、HTML結束标簽，以及各種HTML屬性組成的嵌套式HTML内容單元。

典型的HTML元素的格式：

<标簽名> 元素内容 </标簽名>

一個HTML文檔，即

<html>...</html>

就是一個最大的HTML元素；

<head>...</head>，<p>...</p>

也都是HTML元素（其中...表示兩個标記之間的所有内容）。

HTML 屬性

屬性提供了有關HTML元素的更多的資訊。

HTML屬性位于開始标簽，其基本的結構如下：

<标簽名 屬性名="屬性值"> 元素内容 </标簽名>

下面是關于屬性的一些要點：

  • 屬性在開始标簽中規定；
  • 屬性是以名稱/值對的形式出現，比如：

    name="value"；
  • 一個标簽可以包含多個屬性；
  • HTML屬性不會展現到網頁上。

本例中，

bgcolor

屬性代表主體(body)部分的顔色；

align

屬性代表對齊方向，其值有：

  • align屬性值
  • center

  • right

    提示：

**屬性使用小寫英文字母更加符合規範； **

** 屬性值可以用雙引号或單引号包含，**例如：

title=' 他說"你好" '

這種情況，屬性值如果包含雙引号，那麼最外層就用單引号。

我們還會用到一些常用的屬性，如下表所示：

屬性值含義

  • class 自定義的元素類名元素的類名
  • id 自定義的元素id名元素的唯一的id
  • tyle 元素内聯樣式元素的樣式
  • title 額外資訊内容元素的額外資訊

注釋

什麼是注釋？ 為什麼要添加注釋呢？

注釋是解釋性文本，在運作程式時，會被程式跳過，不做處理。

注釋有兩個作用：

  1. 可以給代碼添加文字說明，便于代碼閱讀和日後維護；

  2. 對于暫時不用但又不能删除的代碼，可以添加注釋儲存下來；

    如何添加注釋呢？

<!--表示注釋的開始， -->

表示注釋的結束，這樣就可以添加提示說明和注釋元素了。

你可以這樣注釋p标簽和添加文字說明。

<!-- 這裡p标簽 -->
<!--<p>這是一個段落</p>-->

h标簽 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h1>建立不同字型大小的标題</h1>
    <!-- ********* Begin ********* -->
    <h2>建立不同字型大小的标題</h2>
    <h3>建立不同字型大小的标題</h3>
    <h4>建立不同字型大小的标題</h4>
    <h5>建立不同字型大小的标題</h5>
    <h6>建立不同字型大小的标題</h6>
    <!-- ********* End ********* -->
</body>
</html>

p标簽

p元素通常用來表示一個段落。

你可以這樣建立一個p标簽，

<p> p标簽表示一個段落。</p>

a标簽

a标簽通常用來定義一個連結。href屬性的值就是連結的位址。

你可以這樣建立一個a标簽，

<a href="http://www.baidu.com">百度</a>

。當你點選這個連結時，它就會跳轉到百度首頁。

img标簽

img

标簽通常用來表示一個圖檔。

src

屬性的值就是圖檔的位址，

alt

屬性的值是當圖檔沒有展現出來時提示的文字 。

你可以這樣建立一個img标簽，

<img src="https://www.educoder.net/attachments/download/207791" alt="風景畫"/>

這樣圖檔就顯示出來了。

div标簽 

<div>這是一個div标簽</div>
div标簽可以把文檔分割為獨立的、不同的部分。它沒有實際的意義，僅僅表示建立了一個塊級元素。
`你可以這樣建立一個div标簽，<div>建立div标簽</div>。
可以發現：它和<h1>-<h6>，<p>标簽的建立是一樣的，隻不過它沒有實際的意義。

HTML基礎

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>自我簡介</title>
    <meta name="description" content="XXX的自我簡介網站">
    <meta name="keywords" content="自我簡介,關鍵詞一,關鍵詞二,關鍵詞三">
  </head>
  <body>
    <h1 align="center">自我簡介</h1>

    <h2>簡介</h2>
    <p>在這裡簡單的描述一下你自己吧。</p>

    <h2>三個與你最有關的詞</h2>
    <p>這三個詞可以是一種形容，也可以是一種運動或者是一種獨特的愛好，等等。</p>
    <ul>
        <li>蛇</li>
        <p>我的生肖</p>
        <li>健</li>
        <p>我的名字的名</p>
        <li>白羊</li>
        <p我的星座</p>
    </ul>
</body>
</html>

下面，我們将結合代碼為大家講解該網頁完整結構和為什麼更容易被搜尋引擎發現。

聲明文檔格式：DOCTYPE

首先，第一行：

<!DOCTYPE HTML>

聲明了該文檔是HTML 5的文檔。

因為在Web世界裡，有很多各式各樣的文檔類型，是以我們首先需要做的便是聲明該文檔是HTML，以便浏覽器正确顯示網頁。

如果你想聲明為HTML 4.01的文檔可以這樣寫：

<!DOCTYPE `HTML` PUBLIC "-//W3C//DTD `HTML` 4.01 Transitional//EN" 
"http://www.w3.org/TR/`HTML`4/loose.dtd">

因為本實訓以HTML 5作為标準，是以統一使用第一種方式。

為什麼與HTML4.01相比HTML 5聲明中沒有數字”5”呢？

因為W3C認為之前的文檔聲明太過複雜，正好借此機會移除版本号，這樣聲明就更加簡化；

html 标簽名 html标簽 屬性值 a标簽
上一篇: html基礎
下一篇: html基礎

繼續閱讀