整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
起編程，相信很多人都不陌生，立馬就會(huì)想到像：java、C、C#、C++、SQL等等用的比較廣泛的編程語言。網(wǎng)頁的編寫雖然比不上這些編程語言那么的復(fù)雜，但是一個(gè)好的網(wǎng)頁，是需要大量的：樣式設(shè)計(jì)、利用ps修圖、以及JavaScript等等技術(shù)相結(jié)合。那么今天就為大家簡單的說說HTML的編寫，對(duì)網(wǎng)頁的基本編寫的操作有個(gè)簡單的認(rèn)識(shí)，相信看完下面的內(nèi)容，聰明的你，馬上就能寫出屬于自己的網(wǎng)頁呢~
編寫工具：
Phase 5、 Programmer’s Notepad、SynWrite、PlainEdit.Net、Notepad++、CoffeeCup、jEdit、Sublime Text 2、Brackets、Aptana Studio 3（這10個(gè)都是我從網(wǎng)上搜的，小編除了Notepad++,其他都沒用過~~~）其實(shí)編寫工具一定要適合自己，才是最好的，所以小編一直都喜歡用”記事本”編寫，O(∩_∩)O哈哈~，當(dāng)然推薦一下：Dreamweaver也是相當(dāng)好用的。
對(duì)于初學(xué)者來說，記事本絕對(duì)是最好的編寫工具，因?yàn)樗械拇a都要自己一個(gè)一個(gè)寫，沒有其他編寫工具的快捷鍵提示。
編寫方法：
新建文件：
新建一個(gè)記事本文件，并將后綴名改為 .html ，然后在鼠標(biāo)右鍵選擇用記事本打開。因?yàn)?html的文件默認(rèn)的是以網(wǎng)頁的形式打開的，所以，修改后綴名這一步也是寫網(wǎng)頁中重要的一步。
基本框架：基本的網(wǎng)頁一般包括網(wǎng)頁的標(biāo)簽<html>,網(wǎng)頁的頭<head>,網(wǎng)頁的主體（身體）<body>，并且在網(wǎng)頁的編寫中有一個(gè)原則，就是幾乎所有的標(biāo)簽都是一一對(duì)應(yīng)的。即<>...</>。
網(wǎng)頁的標(biāo)題：
添加<title>...</title>標(biāo)簽即可編寫網(wǎng)頁的標(biāo)題，隨便寫啥都可以~
網(wǎng)頁內(nèi)容的編寫：
網(wǎng)頁的內(nèi)容只要你能想的到的，都可以寫上去，直接在<body>...</body>里隨便的輸入內(nèi)容吧~
效果圖：
修飾：
利用各種標(biāo)簽來對(duì)你想到的內(nèi)容進(jìn)行格式、顏色、等內(nèi)容上的修改，下面我簡單列舉幾個(gè)常用的標(biāo)簽，小伙伴們可以自己動(dòng)手試試達(dá)到想要的效果，沒有涉及到的還請(qǐng)諒解。
添加背景圖片：<body background="圖片所在路徑+圖片全名">
背景顏色：<body color="顏色的英文名稱或者顏色代碼，可去網(wǎng)上搜索">
添加圖片：<img src="圖片所在路徑+圖片全名">
文字設(shè)置：<font size=”文字大小” face=”字體” color=”文字顏色”>...</font>
居中：<center>...</center>
換行：<br>
段落：<p>...</p>
超鏈接：<a href=\"鏈接的地址\">鏈接的名字</a>
移動(dòng)字體：<marquee direction=lift或者right>寫上你想寫的字</marquee>
字體加粗：<b>添加文字</b>
字體斜體：<i>添加文字</i>
字體下劃線:<u>添加文字</u>
字體刪除線:<s>添加文字</s>
字體加大:<big>添加文字</big>
可以試試在<head>...<head>中試試加入我的這段代碼哦~
<head>
<title>我的網(wǎng)頁demo</title>
<div id="boom"><marquee direction=lift>歡迎各位小伙伴轉(zhuǎn)發(fā)~關(guān)注~贊~評(píng)論~有任何錯(cuò)誤或是問題都說出來哦
~~~</marquee></div>
<script language="javascript">
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>
今天就介紹到這里，歡迎各位看官給予建議和批評(píng)，明天我會(huì)寫一篇關(guān)于《局域網(wǎng)內(nèi)訪問他人電腦上的自制網(wǎng)頁》的文章，感興趣的童鞋可以關(guān)注一波~感謝大家~
什么是 HTML？
HTML 是用來描述網(wǎng)頁的一種語言。
HTML 指的是超文本標(biāo)記語言 (Hyper Text Markup Language)
HTML 不是一種編程語言，而是一種標(biāo)記語言 (markup language)
標(biāo)記語言是一套標(biāo)記標(biāo)簽 (markup tag)
HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁
HTML 標(biāo)簽
HTML 標(biāo)記標(biāo)簽通常被稱為 HTML 標(biāo)簽 (HTML tag)。
HTML 文檔描述網(wǎng)頁
HTML 文檔包含 HTML 標(biāo)簽和純文本
HTML 文檔也被稱為網(wǎng)頁
HTML 標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞，比如 <html>
HTML 標(biāo)簽通常是成對(duì)出現(xiàn)的，比如 <b> 和 </b>
標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開始標(biāo)簽，第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽
開始和結(jié)束標(biāo)簽也被稱為開放標(biāo)簽和閉合標(biāo)簽
HTML 文檔 = 網(wǎng)頁
我們可以使用專業(yè)的 HTML 編輯器來編輯 HTML：
Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor
下面我們用記事本來制作一個(gè)簡單的網(wǎng)頁:
第一步，打開記事本
如何啟動(dòng)記事本：
開始
所有程序
附件
記事本
第二步，在記事本中編輯HTML語言，如圖:
第三步，保存 HTML
在記事本的文件菜單選擇“另存為”。
當(dāng)您保存 HTML 文件時(shí)，既可以使用 .htm 也可以使用 .html 擴(kuò)展名。
第四步，在瀏覽器中運(yùn)行這個(gè) HTML 文件
啟動(dòng)您的瀏覽器，然后選擇“文件”菜單的“打開文件”命令，或者直接在文件夾中雙擊您的 HTML 文件。
結(jié)果應(yīng)該類似這樣：
這樣，一個(gè)簡單的網(wǎng)頁就成了。
網(wǎng)頁制作時(shí)用什么來表示標(biāo)題呢？下面我們來看看:
HTML 標(biāo)題
標(biāo)題（Heading）是通過 <h1> - <h6> 等標(biāo)簽進(jìn)行定義的。
<h1> 定義最大的標(biāo)題。<h6> 定義最小的標(biāo)題。
注釋：瀏覽器會(huì)自動(dòng)地在標(biāo)題的前后添加空行。
注釋：默認(rèn)情況下，HTML 會(huì)自動(dòng)地在塊級(jí)元素前后添加一個(gè)額外的空行，比如段落、標(biāo)題元素前后。
HTML 水平線
<hr /> 標(biāo)簽在 HTML 頁面中創(chuàng)建水平線。
hr 元素可用于分隔內(nèi)容。
提示：使用水平線 (<hr> 標(biāo)簽) 來分隔文章中的小節(jié)是一個(gè)辦法（但并不是唯一的辦法）。
HTML 注釋
可以將注釋插入 HTML 代碼中，這樣可以提高其可讀性，使代碼更易被人理解。瀏覽器會(huì)忽略注釋，也不會(huì)顯示它們。
注釋是這樣寫的：
注釋：開始括號(hào)之后（左邊的括號(hào)）需要緊跟一個(gè)嘆號(hào)，結(jié)束括號(hào)之前（右邊的括號(hào)）不需要。
提示：合理地使用注釋可以對(duì)未來的代碼編輯工作產(chǎn)生幫助。
HTML 段落
段落是通過 <p> 標(biāo)簽定義的。
注釋：瀏覽器會(huì)自動(dòng)地在段落的前后添加空行。（<p> 是塊級(jí)元素）
提示：使用空的段落標(biāo)記 <p></p> 去插入一個(gè)空行是個(gè)壞習(xí)慣。用 <br /> 標(biāo)簽代替它?。ǖ遣灰?<br /> 標(biāo)簽去創(chuàng)建列表。不要著急，您將在稍后的篇幅學(xué)習(xí)到 HTML 列表。）
折行有什么用呢？
當(dāng)然折行的主要目的是調(diào)整網(wǎng)頁布局，讓它看起來更美觀大方。
如果您希望在不產(chǎn)生一個(gè)新段落的情況下進(jìn)行換行（新行），請(qǐng)使用 <br /> 標(biāo)簽：
<br /> 元素是一個(gè)空的 HTML 元素。由于關(guān)閉標(biāo)簽沒有任何意義，因此它沒有結(jié)束標(biāo)簽。
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>
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>
text-align 屬性規(guī)定了元素中文本的水平對(duì)齊方式。
下面我們看看中，右，左的三種對(duì)齊方式演示:
1.HTML <q> 元素定義短的引用。
瀏覽器通常會(huì)為 <q> 元素包圍引號(hào)。
2.用于長引用的 HTML <blockquote>
HTML <blockquote> 元素定義被引用的節(jié)。
瀏覽器通常會(huì)對(duì) <blockquote> 元素進(jìn)行縮進(jìn)處理。
什么是超鏈接？超鏈接就是從一個(gè)頁面到另一個(gè)頁面之間跳轉(zhuǎn)的方式。
超鏈接可以是一個(gè)字，一個(gè)詞，或者一組詞，也可以是一幅圖像，您可以點(diǎn)擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某個(gè)部分。
當(dāng)您把鼠標(biāo)指針移動(dòng)到網(wǎng)頁中的某個(gè)鏈接上時(shí)，箭頭會(huì)變?yōu)橐恢恍∈帧?/p>
我們通過使用 <a> 標(biāo)簽在 HTML 中創(chuàng)建鏈接。
有兩種使用 <a> 標(biāo)簽的方式:
<a >Visit Baidu</a>
上面這行代碼顯示為：Visit Baidu
點(diǎn)擊這個(gè)超鏈接會(huì)把用戶帶到 Baidu 的首頁。
提示："鏈接文本" 不必一定是文本。圖片或其他 HTML 元素都可以成為鏈接。
鏈接屬性
使用 Target 屬性，你可以定義被鏈接的文檔在何處顯示。
多朋友想學(xué)一下網(wǎng)頁制作，上網(wǎng)一看，只要涉及到網(wǎng)頁制作，都離不開HTML這個(gè)詞語，HTML是HyperText Markup Language的簡稱，想學(xué)習(xí)HTML語言，先得了解一些基本知識(shí)，今天這邊內(nèi)容可以作為學(xué)習(xí)HTML的菜鳥教程第一課。
HTML是什么？
一般我們說HTML是指超文本標(biāo)記語言，英文名稱為HyperText Markup Language，簡稱HTML，它是目前互聯(lián)網(wǎng)上應(yīng)用最廣泛的語言。
如何查看HTML？
拿最常見的網(wǎng)頁為例，如果用大家熟悉的IE瀏覽器的話，直接在網(wǎng)頁上點(diǎn)右鍵，選擇“查看源”即可查看當(dāng)前網(wǎng)頁的HTML源碼；如果是其他瀏覽器的話，多數(shù)情況下點(diǎn)擊右鍵，選擇“查看源碼”或者類似“查看網(wǎng)頁源代碼”這樣的選項(xiàng)即可查看。
當(dāng)然也可以通過專業(yè)的網(wǎng)頁制作軟件以及各種文本編輯器來查看。
HTML有什么用？
HTML語言可以方便地將網(wǎng)絡(luò)上存儲(chǔ)于不同位置的文字、圖片、聲音、視頻等內(nèi)容組織起來，方便用戶瀏覽。對(duì)于我們來說，HTML是學(xué)習(xí)網(wǎng)頁制作的基本功，熟練掌握HTML這項(xiàng)基本功，可以為以后的學(xué)習(xí)和工作打下良好的基礎(chǔ)。
HTML如何入門？
要學(xué)習(xí)任何編程語言，都不好好高騖遠(yuǎn)，HTML的入門很簡單，但是也要遵循學(xué)習(xí)的基本步驟，選擇一本入門書籍，循序漸進(jìn)地去學(xué)習(xí)每一張的內(nèi)容。一邊學(xué)習(xí)，一邊查看網(wǎng)頁代碼對(duì)照來學(xué)，提升入門速度。
HTML案例
下面就是最基本的HTML案例，在這個(gè)案例中，用的是HTML5，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML菜鳥教程(runoob.com)</title>
</head>
<body>
<h1>我的第一個(gè)標(biāo)題</h1>
<p>我的第一個(gè)段落。</p>
</body>
</html>如何編輯HTML?
這個(gè)就很多了 ，比如最出名的Dreamweaver，當(dāng)然如果熟練之后，可以選擇任意自己喜歡的編輯器，一些小的改動(dòng)或者一小段代碼的話，也可以用各種常見的文本編輯器來處理，比如我們?cè)趙odows系統(tǒng)上常見的記事本，總之只要自己覺得方便就好。
總結(jié)
以上是學(xué)習(xí)HTML菜鳥教程的第一課，首先保持一個(gè)良好的心態(tài)來學(xué)習(xí)，有好的心態(tài)，知識(shí)方面只要循序漸進(jìn)，學(xué)會(huì)就是水到渠成的事情了 。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
