HTML網頁標簽代碼基本教學-有解無憂

HTML全名超文本標記語言（Hyper Text Markup Language），可以用來制作網頁，它有一套語法規則，通過這些語法規則，就可以設計出豐富多彩的網頁了，
首先，HTML標簽定義格式為：

<標簽名>標簽內容</標簽名>

以<標簽名>開頭，以</標簽名>結尾，
還有億點要說明，HTML代碼最常使用兩個空格進行縮進，當然，也可以為4格，3格，甚至可以不用縮進，但我建議縮進代碼，因為這利于網頁后期開發時的修改，
開始今天的學習吧！

HTML學習目錄

- html 標簽
- head 標簽
- meta 標簽
- title 標簽
- body 標簽
- h1-h6 標簽
- i 標簽創建斜體文字
- b 標簽創建粗體文字
- p 標簽創建段落
- ul 標簽創建無序串列
- ol 標簽創建有序串列
- table 標簽創建表格
- a 標簽鏈接網址
- div 標簽劃分板塊
- span 標簽
- br 標簽換行符
- script 標簽加載或撰寫js代碼
- img 標簽
- style 樣式設定
- - 類選擇器
  - ID選擇器
- link 標簽鏈接資源

html 標簽

用于標識網頁代碼的開始位置與結束位置，如：

<!DOCTYPE html>
<html>
  網頁代碼
</html>

注：第一行的代碼用于標識這個檔案使用的HTML規范，

head 標簽

用于定義網頁的頭部資訊，格式：

<!DOCTYPE html>
<html>
  <head>頭部資訊</head>
</html>

這個標簽嵌套在html標簽里，

meta 標簽

用于描述HTML檔案的屬性，例如作者，創建日期等，經常用于宣告HTML檔案在外部腳本檔案中使用的字符編碼，如果外部檔案中的字符編碼與主檔案中的編碼方式不同，就要用到 charset 屬性，

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    其它標簽
  </head>
</html>

注：要嵌套在head標簽內，

title 標簽

用于顯示網頁的標題，格式如下：

<!DOCTYPE html>
<html>
  <head>
    <title>測驗標題</title>
    其它標簽
  </head>
</html>

注：也要嵌套在head標簽里，

body 標簽

定義網頁的主體，一般HTML代碼都在這里面撰寫，位置在head標簽的后面：

<!DOCTYPE html>
<html>
  <head>
    頭部標簽
  </head>
  <body>
    HTML網頁主體
  </body>
</html>

h1-h6 標簽

這些標簽一般在body標簽里，可以將嵌套的文字的大小進行改變，h1最大，h6最小：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>測驗標題</title>
  </head>
  <body>
    <h1>我是h1</h1>
    <h2>我是h2</h2>
    <h3>我是h3</h3>
    <h4>我是h4</h4>
    <h5>我是h5</h5>
    <h6>我是h6</h6>
  </body>
</html>

用瀏覽器打開此網頁，看到的應該是一段從大到小的文字，

i 標簽創建斜體文字

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>測驗標題</title>
  </head>
  <body>
    <i>斜體測驗</i>
  </body>
</html>

i標簽主要將標簽內的文字變成斜體，

b 標簽創建粗體文字

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>測驗標題</title>
  </head>
  <body>
    <b>斜體測驗</b>
  </body>
</html>

b標簽主要將標簽內的文字變成粗體，

p 標簽創建段落

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>測驗標題</title>
  </head>
  <body>
    <p>我正在開發網頁，我很開心，</p>
    <p>我正在開發網頁，我很開心，</p>
  </body>
</html>

p標簽將會把標簽內的文字起新的一段來展示，

ul 標簽創建無序串列

用于展示一個無序串列，格式為：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>測驗標題</title>
  </head>
  <body>
    <ul>
      <li>第一項</li>
      <li>第二項</li>
      <li>第三項</li>
    </ul>
  </body>
</html>

里面要嵌套li標簽，每個li標簽就是串列的其中一項，

ol 標簽創建有序串列

用于展示一個有序串列，格式為：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>測驗標題</title>
  </head>
  <body>
    <ol>
      <li>第一項</li>
      <li>第二項</li>
      <li>第三項</li>
    </ol>
  </body>
</html>

里面也要嵌套li標簽，每個li標簽就是串列的其中一項，

table 標簽創建表格

table標簽用于創建表格，如：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>測驗標題</title>
  </head>
  <body>
    <table>
      <tr>
        <td>測驗1</td>
        <td>測驗2</td>
      </tr>
      <tr>
        <td>測驗1</td>
        <td>測驗2</td>
      </tr>
    </table>
  </body>
</html>

這個標簽內需要嵌套tr標簽，tr標簽為表格的一行，內部的td標簽定義這一行每個列顯示的內容，

a 標簽鏈接網址

此標簽用于鏈接到某個網址：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>測驗標題</title>
  </head>
  <body>
    <a href="https://blog.csdn.net/">CSDN博客網站</a>
  </body>
</html>

a標簽的屬性href定義跳轉到的網址，文字內容定義這個標簽在哪樣的文字上創建鏈接，

div 標簽劃分板塊

用于將頁面分成獨立的板塊，為頁面磁區或節：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>測驗標題</title>
  </head>
  <body>
    <div>
      <ul>
        <li>第一項</li>
        <li>第二項</li>
        <li>第三項</li>
      </ul>
    </div>
    <div>
      <ol>
        <li>第一項</li>
        <li>第二項</li>
        <li>第三項</li>
      </ol>
    </div>
  </body>
</html>

span 標簽

HTML的行內標簽，方便了給行內元素設定單獨的樣式，

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>測驗標題</title>
  </head>
  <body>
    <span>文字內容</span>
  </body>
</html>

br 標簽換行符

這個標簽沒有結尾，和換行符作用一樣，可以插入文本內：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>測驗標題</title>
  </head>
  <body>
    <p>第一段文字<br>第二段文字</p>
  </body>
</html>

script 標簽加載或撰寫js代碼

這個標簽用于在網頁中撰寫或加載javascript檔案代碼：
加載：（一般在head內加載，body也行）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>測驗標題</title>
    <script src="js腳本檔案.js"></script>
  </head>
  <body>
    <p>測驗網頁</p>
  </body>
</html>

撰寫：（一般在主體body內撰寫）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>測驗標題</title>
  </head>
  <body>
    <script type="text/javascript">
       var a = 1;
       var b = 2;
       alert(a + b);
    </script>
  </body>
</html>

如上，我們在script標簽內寫了億些簡單的js代碼，這些代碼在瀏覽器瀏覽時時將會運行，

img 標簽

img標簽主要用來加載圖片，上代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>測驗標題</title>
  </head>
  <body>
    <img src="test.png" />
  </body>
</html>

屬性src指定圖片路徑，這里為test.png，當然，網路圖片也是可以加載顯示的，
（注：img標簽沒有結束標簽，只是在">“前寫一個”/"即可）

style 樣式設定

CSS又叫做層疊樣式表(英文全稱：Cascading Style Sheets)，主要用來設定HTML網頁的樣式，
CSS提供來選擇器來選定HTML標簽設定相應的樣式，常用的選擇器是類選擇器和ID選擇器，

類選擇器

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>測驗標題</title>
    <style type="text/css">
    .test1{
            width:300px;
            height:50px;
            background:red;
    }
    .test2{
            width:100px;
            height:50px;
            background:green;
    }
    </style>
  </head>
  <body>
    <div class="test1">style測驗1</div>
    <div class="test2">style測驗2</div>
  </body>
</html>

首先，我們定義了style標簽，在內部寫上了兩個類選擇器，一個叫test1，另一個叫test2，在每個選擇器里邊，我們定義了width，height，background屬性（什么意思可以自己上網查一下），然后在body內定義了兩個div標簽，都有屬性class（類），這里面我們寫上了類選擇器名稱，就可以加載顯示對應的樣式了，

ID選擇器

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>測驗標題</title>
    <style type="text/css">
    #test1{
            width:300px;
            height:50px;
            background:red;
    }
    #test2{
            width:100px;
            height:50px;
            background:green;
    }
    </style>
  </head>
  <body>
    <div id="test1">style測驗1</div>
    <div id="test2">style測驗2</div>
  </body>
</html>

首先，我們定義了style標簽，在內部寫上了兩個ID選擇器，一個叫test1，另一個叫test2，在每個選擇器里邊，我們定義了width，height，background屬性，然后在body內定義了兩個div標簽，都有屬性id，這里面我們寫上了ID選擇器名稱，就可以加載顯示對應的樣式了（其實就是把div的class換成id，style標簽里的“.”換成“#”而已），

link 標簽鏈接資源

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>測驗標題</title>
    <link rel="stylesheet" href="test.css" />
  </head>
  <body>
    <p>測驗段落</p>
  </body>
</html>

link標簽用于定義HTML檔案與外部資源的關系，經常用于鏈接CSS樣式表檔案，外部資源等，link標簽上面的代碼加載了test.css檔案，也就是CSS檔案，
（注：link標簽沒有結束標簽，只是在">“前寫一個”/"即可）

課程就到這里，有些不懂的地方可以發在評論區，大家一起來討論呀！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/258969.html

標籤：其他

上一篇：如何在2021年撰寫網路應用程式？

下一篇：web前端學習（三十一）——初識JavaScript

HTML網頁標簽代碼基本教學

HTML學習目錄

html 標簽

head 標簽

meta 標簽

title 標簽

body 標簽

h1-h6 標簽

i 標簽 創建斜體文字

b 標簽 創建粗體文字

p 標簽 創建段落

ul 標簽 創建無序串列

ol 標簽 創建有序串列

table 標簽 創建表格

a 標簽 鏈接網址

div 標簽 劃分板塊