HTML教程（看完這篇就夠了）

TML教程

超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創建網頁的標準標記語言。

您可以使用 HTML 來建立自己的 WEB 站點，HTML 運行在瀏覽器上，由瀏覽器來解析。

在本教程中，您將學習如何使用 HTML 來創建站點。

HTML 很容易學習！相信您能很快學會它！

本教程包含了數百個 HTML 實例。

使用本站的編輯器，您可以輕松實現在線修改 HTML，并查看實例運行結果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>孫叫獸的博客</title>
    </head>
    <body>
        <h1>我的第一個標題</h1>
        <p>我的第一個段落。</p>
    </body>
</html>

HTML 文檔的后綴名

.html

.htm

都可以。

HTML 簡介

實例：

<!doctype html>
<html>
<header>
<meta charset="utf-8">
<title>孫叫獸的博客</title>
</header>
<body>
<h1>這是我的標題</h1>
<p>這是我的段落</p>
</body>
</html>

實例解析

<!DOCTYPE html> 聲明為 HTML5 文檔
<html> 元素是 HTML 頁面的根元素
<head> 元素包含了文檔的元（meta）數據，如 <meta charset=“utf-8”> 定義網頁編碼格式為 utf-8。
<title> 元素描述了文檔的標題
<body> 元素包含了可見的頁面內容
<h1> 元素定義一個大標題
<p> 元素定義一個段落

什么是HTML？

HTML 是用來描述網頁的一種語言。
HTML 指的是超文本標記語言: HyperText Markup Language
HTML 不是一種編程語言，而是一種標記語言
標記語言是一套標記標簽 (markup tag)
HTML 使用標記標簽來描述網頁
HTML 文檔包含了HTML 標簽及文本內容
HTML文檔也叫做 web 頁面
HTML 標簽
HTML 標記標簽通常被稱為 HTML

標簽

HTML 標簽是由尖括號包圍的關鍵詞，比如 <html>

HTML 標簽通常是成對出現的，比如 <b> 和 </b>

標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽

開始和結束標簽也被稱為開放標簽和閉合標簽

<標簽>內容</標簽>

html元素

“HTML 標簽” 和 “HTML 元素” 通常都是描述同樣的意思.

但是嚴格來講, 一個 HTML 元素包含了開始標簽與結束標簽，如下實例:

HTML 元素:

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

web瀏覽器

Web瀏覽器（如谷歌瀏覽器，Internet Explorer，Firefox，Safari）是用于讀取HTML文件，并將其作為網頁顯示。

瀏覽器并不是直接顯示的HTML標簽，但可以使用標簽來決定如何展現HTML頁面的內容給用戶

html網頁結構

<html>
    <head>
        <title>頁面標題</title>
    </head>
    <body>
        <h1>這是一個標題</h1>
        <p>這是一個段落。</p>
        <p>這是另外一個段落。</p>
    </body>
</html>

html的版本：

<!DOCTYPE>聲明

<!DOCTYPE>聲明有助于瀏覽器中正確顯示網頁。

網絡上有很多不同的文件，如果能夠正確聲明HTML的版本，瀏覽器就能正確顯示網頁內容。

doctype 聲明是不區分大小寫的，以下方式均可：

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

html5

<!DOCTYPE html>

html4

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

xhtml1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

中文編碼

目前在大部分瀏覽器中，直接輸出中文會出現中文亂碼的情況，這時候我們就需要在頭部將字符聲明為 UTF-8。

下是使用 C# 創建 HTML 文件的代碼示例：

using System;
using System.IO;

namespace CreateHTMLFile
{
    class Program
    {
        static void Main(string[] args)
        {
            // 設置 HTML 文件路徑及文件名
            string filePath = @"C:\Temp\example.html";

            // 創建一個新的 HTML 文件
            using (StreamWriter writer = new StreamWriter(filePath))
            {
                // 寫入 HTML 標記
                writer.WriteLine("<html>");
                writer.WriteLine("<head><title>Example HTML File</title></head>");
                writer.WriteLine("<body>");

                // 寫入主體內容
                writer.WriteLine("<h1>Hello, World!</h1>");
                writer.WriteLine("<p>This is an example HTML file created using C#.</p>");

                // 寫入 HTML 結束標記
                writer.WriteLine("</body>");
                writer.WriteLine("</html>");
            }

            // 輸出成功消息
            Console.WriteLine("HTML 文件已創建：{0}", filePath);
        }
    }
}

此代碼將創建一個名為 “example.html” 的 HTML 文件，并在其中添加一些基本的元素。你可以根據需要修改或擴展它，以滿足你的具體需求。注意，要創建 HTML 文件，你需要使用 System.IO 命名空間中的 StreamWriter 類。該類允許你向文件寫入文本數據。

.表格的制作

1、表格元素–<table>

表格中的行–<tr>

表格中的列–<td>

表格中的表頭–【居中/加粗】

table標記的邊框–border

table標記的寬度–width

table標記的高度–height

table標記的水平對齊方式–align

table標記的表格背景色–bgcolor

table標記的表格邊框色–bordercolor

table標記的表格中的內容與邊框之間的距離–cellpadding

table標記的表格中的邊框與邊框之間的距離–cellspacing【默認是1px】

tr標記的align屬性–設置當前行的水平對齊方式

tr標記的bgcolor屬性–設置當前行的背景色

tr標記的valign屬性–設置當前行的垂直對齊方式【top/middle/bottom】

td標記的align屬性–設置當前列的水平對齊方式

td標記的bgcolor屬性–設置當前列的背景色

td標記的valign屬性–設置當前列的垂直對齊方式【top/middle/bottom】

合并單元格

水平方向合并單元格–跨列—colspan

垂直方向合并單元格–跨行—rowspan
刪除多余的單元格*

以下是計算器的控制面板代碼

<!DOCTYPE html>

<html>

<head>

<title>計算器的控制面板</title>

</head>

<body>

<table border="1" cellspacing="10px" cellpadding="20px"

align="center" bgcolor="aliceblue">

</tr>

</tr>

</tr>

</tr>

<td rowspan="2" bgcolor="yellow">=

</td>

</tr>

</tr>

</table>

</body>

</html>

看成品:

2. 列表元素

2.1 有序列表

ol—有序列表

li—列表中的每一項【條目】

默認的標志是有順序的數字

我們可以通過ol的type屬性來修改標志

1–有順序的數字

a–有順序的小寫字母

A–有順序的大寫字母

i–有順序的小寫羅馬數字

I–有順序的大寫羅馬數字

start屬性設置書順序的開始值

2.2 無序列表

ul—無序列表

li—列表中的每一項【條目】

默認的標志是實心點

我們可以通過ul的type屬性來修改標志

circle–圓形【。】

disc----實心點[默認]

square–正方形

none–沒有標志

2.3 自定義列表

dl—自定義列表

dt—自定義列表的頭

dd—子項目

以下是有序，無序，和自定義列表

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</ul>

</ol>

<dl>

<dt>自定義列表</dt>

</dl>

</body>

</html>

3. 表單<form>

主要負責采集信息的，可以將采集的信息提交。

form的屬性

action—指定表單數據的后端處理程序

method----指定表單數據的提交方式【get[默認]/post】

get提交數據會將被處理的數據跟隨在請求地址之后

被提交的數據255個字符

https://www.baidu.com/s?&wd=html

post提交數據會將被處理的數據封裝到http協議的頭

https://www.baidu.com/s

被提交的數據沒有限制

通常情況下提交文件只能用post

enctype屬性規定在將表單數據發送到服務器之前如何對其進行編碼。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr>

<td>application/x-www-form-urlencoded</td>

<td>在發送前對所有字符進行編碼（默認）。</td>

</tr>

<tr>

<td>multipart/form-data</td>

<td>不對字符編碼。當使用有文件上傳控件的表單時，該值是必需的。

</td>

</tr>

<tr>

<td>text/plain</td>

<td>將空格轉換為 "+" 符號，但不編碼特殊字符。</td>

</tr>

</table>

</body>

</html>

表單元素

input 文本框/密碼框/單選按鈕/復選框…

seletc 下拉列表

textarea 文本域—富文本編輯器

在線咨詢

上一篇：34道常見的HTML+CSS面試題（附答案）
下一篇：信不信，我能在圓周率里找出你的銀行卡密碼！

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML教程（看完這篇就夠了）

您的項目需求