html是一種標記語言，用于創(chuàng)建網(wǎng)頁。在本文中，我們將介紹HTML的基礎(chǔ)知識，代碼寫入到本地文件，并以.html結(jié)尾，雙擊瀏覽器打開就可以查看效果。

HTML文檔結(jié)構(gòu)

HTML文檔由標簽組成，每個標簽可以包含文本和其他標簽。一個HTML文檔通常包括以下幾個部分：

<!DOCTYPE html>
<html>
    <head>
        <title>頁面標題</title>
    </head>
    <body>
        頁面主體內(nèi)容
    </body>
</html>

<!DOCTYPE html>：聲明文檔類型為HTML5。
<html>：HTML文檔的根元素。
<head>：包含頁面的元數(shù)據(jù)，如頁面標題、css樣式表和JAVAScript代碼等。
<title>：定義頁面的標題，會顯示在瀏覽器的標題欄中。
<body>：包含頁面的主體內(nèi)容，如文本、圖片、鏈接等。

HTML標簽和屬性

HTML標簽用于定義頁面的結(jié)構(gòu)和樣式，每個標簽都有相應(yīng)的屬性用于設(shè)置標簽的屬性和樣式。

下面是一些常用的HTML標簽和屬性：

<h1>-<h6>：定義標題，數(shù)字越小表示標題級別越高。
<p>：定義段落。
<a>：定義鏈接，href屬性用于設(shè)置鏈接目標。
<img>：定義圖片，src屬性用于指定圖片地址。
<ul>和<li>：定義無序列表，<ul>表示列表，<li>表示列表項。
<ol>和<li>：定義有序列表，<ol>表示列表，<li>表示列表項。
<table>、<tr>、<td>：定義表格，<table>表示表格，<tr>表示表格中的行，<td>表示表格中的單元格。
<div>：定義文檔中的區(qū)塊，用于組合其他元素。
<span>：定義文檔中的行內(nèi)元素，用于設(shè)置文本樣式。

下面是一個HTML代碼示例：

<!DOCTYPE html>
<html>
    <head>
        <title>我的網(wǎng)頁</title>
        <style>
            h1 {color: red;}
            p {font-size: 18px;}
            a {text-decoration: none;}
            img {width: 100px;}
            table {border-collapse: collapse;}
            td {border: 1px solid black; padding: 5px;}
        </style>
    </head>
    <body>
        <h1>歡迎訪問我的網(wǎng)頁</h1>
        <p>這是一個段落。</p>
        <a href="https://www.example.com">這是一個鏈接</a>
        <br>
        <img src="https://t7.baidu.com/it/u=3085466652,3804111837&fm=193&f=GIF">
        <ul>
            <li>列表項1</li>
            <li>列表項2</li>
        </ul>
        <ol>
            <li>列表項1</li>
            <li>列表項2</li>
        </ol>
        <table>
            <tr>
                <td>單元格1</td>
                <td>單元格2</td>
            </tr>
            <tr>
                <td>單元格3</td>
                <td>單元格4</td>
            </tr>
        </table>
    </body>
</html>

在這個示例代碼中，<style>標簽用于設(shè)置樣式，<h1>標簽用于定義標題，<p>標簽用于定義段落，<a>標簽用于定義鏈接，<img>標簽用于定義圖片，<ul>和<ol>標簽用于定義列表，<table>、<tr>和<td>標簽用于定義表格，<div>標簽用于定義文檔中的區(qū)塊，<span>標簽用于定義文檔中的行內(nèi)元素。

a標簽

a標簽用于定義鏈接，其中最重要的屬性是href，用于指定鏈接目標。a標簽可以包含文本或圖片，也可以用于創(chuàng)建錨點鏈接。下面是一個a標簽的示例：

<a href="https://www.example.com">這是一個鏈接</a>

在這個示例中，href屬性指定了鏈接的目標為https://www.example.com，a標簽包含了文本“這是一個鏈接”。

br標簽

br標簽用于在文本中創(chuàng)建換行符。它是一個空標簽，不需要閉合。下面是一個br標簽的示例：

這是第一行<br>
這是第二行

在這個示例中，br標簽用于在第一行和第二行之間創(chuàng)建一個換行符。

div和span標簽

div和span標簽都是用于定義文檔中的區(qū)塊或行內(nèi)元素，它們本身沒有特定的含義，但可以用于組織和樣式化HTML文檔。div標簽用于定義塊級元素，通常用于組合其他元素，而span標簽用于定義行內(nèi)元素，通常用于設(shè)置文本樣式。下面是div和span標簽的示例：

<div>
    <h1>這是一個區(qū)塊</h1>
    <p>這是區(qū)塊中的段落</p>
</div>
<span style="color: red;">這是一段紅色文本</span>

在這個示例中，div標簽用于定義一個區(qū)塊，包含了一個標題和一個段落，而span標簽用于定義一段紅色文本。

h1到h6標簽

h1到h6標簽用于定義標題，數(shù)字越小表示標題級別越高。通常，h1用于頁面的主標題，h2用于頁面的次級標題，以此類推。下面是h1到h6標簽的示例：

<h1>這是一個一級標題</h1>
<h2>這是一個二級標題</h2>
<h3>這是一個三級標題</h3>
<h4>這是一個四級標題</h4>
<h5>這是一個五級標題</h5>
<h6>這是一個六級標題</h6>

在這個示例中，h1到h6標簽分別用于定義不同級別的標題。

img標簽

img標簽用于定義圖片，其中最重要的屬性是src，用于指定圖片的地址。img標簽也可以包含alt屬性，用于在無法加載圖片時顯示替代文本。下面是img標簽的示例：

<img src="https://www.example.com/image.jpg" alt="這是一張圖片">

在這個示例中，src屬性指定了圖片的地址為
https://www.example.com/image.jpg，`alt`屬性指定了替代文本為“這是一張圖片”。

li標簽和ul標簽

li標簽用于定義列表項，ul標簽用于定義無序列表。無序列表中的每個列表項通常用一個符號或圖標表示。下面是li和ul標簽的示例：

<ul>
    <li>列表項1</li>
    <li>列表項2</li>
</ul>

在這個示例中，ul標簽定義了一個無序列表，包含了兩個列表項。

li標簽和ol標簽

li標簽用于定義列表項，ol標簽用于定義有序列表。有序列表中的每個列表項通常用數(shù)字或字母表示。下面是li和ol標簽的示例：

<ol>
    <li>列表項1</li>
    <li>列表項2</li>
</ol>

在這個示例中，ol標簽定義了一個有序列表，包含了兩個列表項。

p標簽

p標簽用于定義段落。下面是p標簽的示例：

<p>這是一個段落。</p>

在這個示例中，p標簽用于定義一個段落。

table、tr和td標簽

table、tr和td標簽用于定義表格。table標簽定義了表格，tr標簽定義了表格中的行，td標簽定義了表格中的單元格。table標簽可以包含多個tr標簽，而tr標簽可以包含多個td標簽。下面是table、tr和td標簽的示例：

<table>
    <tr>
        <td>單元格1</td>
        <td>單元格2</td>
    </tr>
    <tr>
        <td>單元格3</td>
        <td>單元格4</td>
    </tr>
</table>

在這個示例中，table標簽定義了一個表格，包含了兩行兩列的單元格。

總結(jié)

HTML是創(chuàng)建網(wǎng)頁的基礎(chǔ)，掌握了HTML標簽的使用，就可以創(chuàng)建各種各樣的網(wǎng)頁。在本文中，我們詳細介紹了HTML中常用的標簽的使用，包括a、br、div、span、h1到h6、img、li和ul、li和ol、p以及table、tr和td標簽。同時，我們也提供了代碼和效果演示的示例，希望能夠幫助您更好地理解和掌握HTML的基礎(chǔ)知識。