助你分分鐘學會編寫簡單網頁

起編程，相信很多人都不陌生，立馬就會想到像：java、C、C#、C++、SQL等等用的比較廣泛的編程語言。網頁的編寫雖然比不上這些編程語言那么的復雜，但是一個好的網頁，是需要大量的：樣式設計、利用ps修圖、以及JavaScript等等技術相結合。那么今天就為大家簡單的說說HTML的編寫，對網頁的基本編寫的操作有個簡單的認識，相信看完下面的內容，聰明的你，馬上就能寫出屬于自己的網頁呢~

編寫工具：

Phase 5、 Programmer’s Notepad、SynWrite、PlainEdit.Net、Notepad++、CoffeeCup、jEdit、Sublime Text 2、Brackets、Aptana Studio 3（這10個都是我從網上搜的，小編除了Notepad++,其他都沒用過~~~）其實編寫工具一定要適合自己，才是最好的，所以小編一直都喜歡用”記事本”編寫，O(∩_∩)O哈哈~，當然推薦一下：Dreamweaver也是相當好用的。

對于初學者來說，記事本絕對是最好的編寫工具，因為所有的代碼都要自己一個一個寫，沒有其他編寫工具的快捷鍵提示。

編寫方法：

新建文件：

新建一個記事本文件，并將后綴名改為 .html ，然后在鼠標右鍵選擇用記事本打開。因為.html的文件默認的是以網頁的形式打開的，所以，修改后綴名這一步也是寫網頁中重要的一步。

基本框架：基本的網頁一般包括網頁的標簽<html>,網頁的頭<head>,網頁的主體（身體）<body>，并且在網頁的編寫中有一個原則，就是幾乎所有的標簽都是一一對應的。即<>...</>。

網頁的標題：

添加<title>...</title>標簽即可編寫網頁的標題，隨便寫啥都可以~

網頁內容的編寫：

網頁的內容只要你能想的到的，都可以寫上去，直接在<body>...</body>里隨便的輸入內容吧~

效果圖：

修飾：

利用各種標簽來對你想到的內容進行格式、顏色、等內容上的修改，下面我簡單列舉幾個常用的標簽，小伙伴們可以自己動手試試達到想要的效果，沒有涉及到的還請諒解。

添加背景圖片：<body background="圖片所在路徑+圖片全名">

背景顏色：<body color="顏色的英文名稱或者顏色代碼，可去網上搜索">

添加圖片：<img src="圖片所在路徑+圖片全名">

文字設置：<font size=”文字大小” face=”字體” color=”文字顏色”>...</font>

居中：<center>...</center>

換行：<br>

段落：<p>...</p>

超鏈接：<a href=\"鏈接的地址\">鏈接的名字</a>

移動字體：<marquee direction=lift或者right>寫上你想寫的字</marquee>

字體加粗：<b>添加文字</b>

字體斜體：<i>添加文字</i>

字體下劃線:<u>添加文字</u>

字體刪除線:<s>添加文字</s>

字體加大:<big>添加文字</big>

可以試試在<head>...<head>中試試加入我的這段代碼哦~

<head>

<title>我的網頁demo</title>

<div id="boom"><marquee direction=lift>歡迎各位小伙伴轉發~關注~贊~評論~有任何錯誤或是問題都說出來哦

~~~</marquee></div>

function Color()

{

var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray";

color=color.split("|");

document.getElementById("boom").style.color=color[parseInt(Math.random() * color.length)];

}

setInterval("Color()",400);

</script>

</head>

今天就介紹到這里，歡迎各位看官給予建議和批評，明天我會寫一篇關于《局域網內訪問他人電腦上的自制網頁》的文章，感興趣的童鞋可以關注一波~感謝大家~

TML簡介

什么是 HTML？

HTML 是用來描述網頁的一種語言。

HTML 指的是超文本標記語言 (Hyper Text Markup Language)

HTML 不是一種編程語言，而是一種標記語言 (markup language)

標記語言是一套標記標簽 (markup tag)

HTML 使用標記標簽來描述網頁

HTML 標簽

HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)。

HTML 文檔描述網頁

HTML 文檔包含 HTML 標簽和純文本

HTML 文檔也被稱為網頁

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

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

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

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

HTML 文檔 = 網頁

HTML編輯器

我們可以使用專業的 HTML 編輯器來編輯 HTML：

Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor

下面我們用記事本來制作一個簡單的網頁:

第一步，打開記事本

如何啟動記事本：

開始

所有程序

附件

記事本

第二步，在記事本中編輯HTML語言，如圖:

第三步，保存 HTML

在記事本的文件菜單選擇“另存為”。

當您保存 HTML 文件時，既可以使用 .htm 也可以使用 .html 擴展名。

第四步，在瀏覽器中運行這個 HTML 文件

啟動您的瀏覽器，然后選擇“文件”菜單的“打開文件”命令，或者直接在文件夾中雙擊您的 HTML 文件。

結果應該類似這樣：

這樣，一個簡單的網頁就成了。

HTML代碼-標題

網頁制作時用什么來表示標題呢？下面我們來看看:

HTML 標題

標題（Heading）是通過 <h1> - <h6> 等標簽進行定義的。

<h1> 定義最大的標題。<h6> 定義最小的標題。

注釋：瀏覽器會自動地在標題的前后添加空行。

注釋：默認情況下，HTML 會自動地在塊級元素前后添加一個額外的空行，比如段落、標題元素前后。

HTML代碼—水平線

HTML 水平線

<hr /> 標簽在 HTML 頁面中創建水平線。

hr 元素可用于分隔內容。

提示：使用水平線 (<hr> 標簽) 來分隔文章中的小節是一個辦法（但并不是唯一的辦法）。

HTML代碼—注釋

HTML 注釋

可以將注釋插入 HTML 代碼中，這樣可以提高其可讀性，使代碼更易被人理解。瀏覽器會忽略注釋，也不會顯示它們。

注釋是這樣寫的：

注釋：開始括號之后（左邊的括號）需要緊跟一個嘆號，結束括號之前（右邊的括號）不需要。

提示：合理地使用注釋可以對未來的代碼編輯工作產生幫助。

HTML代碼—段落

HTML 段落

段落是通過 <p> 標簽定義的。

注釋：瀏覽器會自動地在段落的前后添加空行。（<p> 是塊級元素）

提示：使用空的段落標記 <p></p> 去插入一個空行是個壞習慣。用 <br /> 標簽代替它！（但是不要用 <br /> 標簽去創建列表。不要著急，您將在稍后的篇幅學習到 HTML 列表。）

HTML代碼-折行

折行有什么用呢？

當然折行的主要目的是調整網頁布局，讓它看起來更美觀大方。

如果您希望在不產生一個新段落的情況下進行換行（新行），請使用 <br /> 標簽：

<br /> 元素是一個空的 HTML 元素。由于關閉標簽沒有任何意義，因此它沒有結束標簽。

HTML樣式-背景顏色

background-color 屬性為元素定義了背景顏色：

<html><body style="background-color:yellow"><h2 style="background-color:red">This is a heading</h2><p style="background-color:green">This is a paragraph.</p></body></html>

HTML樣式-字體、顏色和尺寸

font-family、color 以及 font-size 屬性分別定義元素中文本的字體系列、顏色和字體尺寸：

<html><body><h1 style="font-family:verdana">A heading</h1><p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p></body></html>

HTML樣式-文本對齊

text-align 屬性規定了元素中文本的水平對齊方式。

下面我們看看中，右，左的三種對齊方式演示:

HTML引用

1.HTML <q> 元素定義短的引用。

瀏覽器通常會為 <q> 元素包圍引號。

2.用于長引用的 HTML <blockquote>

HTML <blockquote> 元素定義被引用的節。

瀏覽器通常會對 <blockquote> 元素進行縮進處理。

HTML超鏈接

什么是超鏈接？超鏈接就是從一個頁面到另一個頁面之間跳轉的方式。

超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。

當您把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變為一只小手。

我們通過使用 <a> 標簽在 HTML 中創建鏈接。

有兩種使用 <a> 標簽的方式:

通過使用 href 屬性 - 創建指向另一個文檔的鏈接
通過使用 name 屬性 - 創建文檔內的書簽

<a >Visit Baidu</a>

上面這行代碼顯示為：Visit Baidu

點擊這個超鏈接會把用戶帶到 Baidu 的首頁。

提示："鏈接文本" 不必一定是文本。圖片或其他 HTML 元素都可以成為鏈接。

鏈接屬性

使用 Target 屬性，你可以定義被鏈接的文檔在何處顯示。

多朋友想學一下網頁制作，上網一看，只要涉及到網頁制作，都離不開HTML這個詞語，HTML是HyperText Markup Language的簡稱，想學習HTML語言，先得了解一些基本知識，今天這邊內容可以作為學習HTML的菜鳥教程第一課。

HTML是什么？

一般我們說HTML是指超文本標記語言，英文名稱為HyperText Markup Language，簡稱HTML，它是目前互聯網上應用最廣泛的語言。

如何查看HTML？

拿最常見的網頁為例，如果用大家熟悉的IE瀏覽器的話，直接在網頁上點右鍵，選擇“查看源”即可查看當前網頁的HTML源碼；如果是其他瀏覽器的話，多數情況下點擊右鍵，選擇“查看源碼”或者類似“查看網頁源代碼”這樣的選項即可查看。

當然也可以通過專業的網頁制作軟件以及各種文本編輯器來查看。

HTML有什么用？

HTML語言可以方便地將網絡上存儲于不同位置的文字、圖片、聲音、視頻等內容組織起來，方便用戶瀏覽。對于我們來說，HTML是學習網頁制作的基本功，熟練掌握HTML這項基本功，可以為以后的學習和工作打下良好的基礎。

HTML如何入門？

要學習任何編程語言，都不好好高騖遠，HTML的入門很簡單，但是也要遵循學習的基本步驟，選擇一本入門書籍，循序漸進地去學習每一張的內容。一邊學習，一邊查看網頁代碼對照來學，提升入門速度。

HTML案例

下面就是最基本的HTML案例，在這個案例中，用的是HTML5，

<!DOCTYPE html> 聲明為 HTML5 文檔
<html> 元素是 HTML 頁面的根元素
<head> 元素包含了文檔的元（meta）數據，如 <meta charset="utf-8"> 定義網頁編碼格式為 utf-8。
<title> 描述了網頁的標題
<body> 元素包含了可見的頁面內容，因為下面是最簡單的案例，所以只有幾行，實際網頁一般都有很多行。
<h1> 定義一個大標題
<p> 元素定義一個段落，也就是大家常說的分段。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML菜鳥教程(runoob.com)</title>
</head>
<body>
    <h1>我的第一個標題</h1>
    <p>我的第一個段落。</p>
</body>
</html>

如何編輯HTML?

這個就很多了，比如最出名的Dreamweaver，當然如果熟練之后，可以選擇任意自己喜歡的編輯器，一些小的改動或者一小段代碼的話，也可以用各種常見的文本編輯器來處理，比如我們在wodows系統上常見的記事本，總之只要自己覺得方便就好。

總結

以上是學習HTML菜鳥教程的第一課，首先保持一個良好的心態來學習，有好的心態，知識方面只要循序漸進，學會就是水到渠成的事情了。

在線咨詢

上一篇：你會在Excel中批量生成條形碼嗎？
下一篇：Web前端開發之HTML簡介

您的項目需求

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

整合營銷服務商