html运用以及工具
對于這個教程，我建議你只使用最簡單的工具。例如：Notepad（在windows里），TextEdit（在Mac上）或是KEdit（在KDE里）就可以了。一旦你了解這個原理，你就會想要切換到更高級的工具，甚至是商業(yè)程序，如Style Master，Dreamweaver或GoLive。但對于你的第一個CSS樣式表，最好不要因為使用太多的高級功能而分心。
不要使用文字處理器，如Microsoft Word或OpenOffice。它們通常制作出網(wǎng)絡(luò)瀏覽器不能讀取文件。對于HTML和CSS，我們需要簡單的純文本文件.
第一步打開你的文本編輯器（Notepad，TextEdit，KEdit，或是任何你喜歡的文本編輯器），在一個空的窗口開始，輸入以下的內(nèi)容：
<！DOCTYPE html PUBLIC“-//W3C//DTD HTML 4.01//EN”>
<html>
<head>
<title>我的第一個樣式頁面</title>
</head>
<body>
<！--目錄-->
<ul class=“navbar”>
<li><a href=“index.html”>首頁</a>
<li><a href=“musings.html”>連接1</a>
<li><a href=“town.html”>連接2</a>
<li><a href=“l(fā)inks.html”>連接3</a>
</ul>
<！--主要內(nèi)容-->
<h1>我的第一個樣式頁面</h1>
<p>歡迎來到我的樣式頁面！
<p>這里沒有圖片，但至少有CSS樣式.有連接，但只是為了舉例和演示，并不能帶你到任何地方…
<p>這只是個例子，好像沒什么好寫.
<！--簽名和日期-->
<address>2004年4月5日制作</address>
</body>
</html>
事實上，你不需要輸入它：你可以從這個網(wǎng)頁復(fù)制并粘貼進(jìn)編輯器。
（如果你在Mac上使用TextEdit，不要忘記告訴TextEdit文本確實是純文本，通過轉(zhuǎn)到格式菜單并選擇“Make plain text”。）
Alert！Advanced:上面HTML文件的第一行告訴瀏覽器HTML的類型（DOCTYPE意思是文檔類型）。在這個案例中，它是HTML 4.01版本。
在<和>里的單詞叫標(biāo)簽，像你看能到的，這文檔包含<html>和</html>標(biāo)簽。
在<head>和</head>間有一個位置是給沒有顯示在屏幕上各個種類的信息的。目前為止，它包含文檔的標(biāo)題，但之后我們也會在這里加上CSS樣式表。
<body>是實際文檔文本所在之處。原則上，除了在<！--和-->里作為對它們本身注釋的內(nèi)容不會顯示，這里的所有內(nèi)容都會被顯示。瀏覽器會忽略它。
在該示例中的標(biāo)簽，<ul>介紹了一個“無次序列表”，例如：條目沒有編號的列表。<li>是“列表條目”的開始。<p>是“段”。還有<a>是創(chuàng)建超鏈接的“錨點”。
the HTML source shown inside KEdit
編輯器展示了HTML源。
Alert！Advanced:如果你想知道在<…>里的名字是什么意思，一個好的開始地方是著手從HTML開始。但是只有一些關(guān)于我們示例HTML頁面的單詞。
“ul”是一個每個條目都有一個超鏈接的列表。這會作為我們的“站點導(dǎo)航菜單”連接到我們（超鏈接）網(wǎng)站的其它頁面。想必，我們網(wǎng)站的所有頁面都有一個類似的菜單。
“h1”和“p”元素形成這個頁面獨特的內(nèi)容，而底部的簽名（“address”）也是和網(wǎng)站上所有的頁面是類似的。
注意，我沒有關(guān)閉“l(fā)i”和“p”元素。在HTML里（但不是在XHTML里），允許忽略</li>和</p>標(biāo)簽，這就是我在這里做的，為了使得文本稍微容易讀一點。但是你可以加上它們，如果你喜歡的話。
讓我們假設(shè)這是要成為一個有許多類似頁面的網(wǎng)站上的一個頁面。對當(dāng)前網(wǎng)頁來說很普通，此頁面有一個菜單，在超鏈接站點，一些獨特的內(nèi)容和簽名上煉接到其它頁面上去。
現(xiàn)在從文件菜單里標(biāo)明“另存為……”，導(dǎo)入你想把它放入的一個目錄/文件夾里（桌面也可以），再把文件存為“mypage.html”。先不要關(guān)掉編輯器，我們還會需要它。
（如果你在Mac OS X 10.4前的版本上使用TextEdit，你會看到一個選項“不要附加保存.txt擴(kuò)展名”的存檔對話框。標(biāo)明那個選項，因為名字“mypage.html”已經(jīng)包含了一個擴(kuò)展名。更新的版本的TextEdit會讓.html自動擴(kuò)展。）
接下來，在瀏覽器里打開文件。你可以按照下面的做：用你的文件管理器（Windows Explorer，Finder或Konqueror）找到文件，再點擊或雙擊“mypage.html”文件。它就會在你默認(rèn)的網(wǎng)絡(luò)瀏覽器里打開。（如果不可以，就打開你的瀏覽器，把文件拖進(jìn)來。）
像你看到的那樣，頁面看起來非常沉悶……
第二步，添加一些顏色
你可能看到一些白色背景里的黑色文本，但它是取決于瀏覽器如何配置的。所以，我們能做的讓頁面更加時新的一件簡單的事情就是添加一些顏色。（讓瀏覽器開著，我們之后會再用到它。）
我們從嵌在HTML文件里的樣式表開始。然后，我們會把HTML和CSS放進(jìn)單獨的文件里。單獨的文件很好，因為相對于復(fù)合的HTML文件，它讓相同的樣
第二步，添加一些顏色
你可能看到一些白色背景里的黑色文本，但它是取決于瀏覽器如何配置的。所以，我們能做的讓頁面更加時新的一件簡單的事情就是添加一些顏色。（讓瀏覽器開著，我們之后會再用到它。）
我們從嵌在HTML文件里的樣式表開始。然后，我們會把HTML和CSS放進(jìn)單獨的文件里。單獨的文件很好，因為相對于復(fù)合的HTML文件，它讓相同的樣式表使用起來更簡單：你只需要編寫樣式表一遍。但是對于該步驟，我們僅僅保持所有的內(nèi)容在一個文件里。
我們需要添加一個<style>元素到HTML文件中。樣式表會在此元素里。所以回到編輯器窗口，再在HTML文件的抬頭部分添加下面的五行。要添加的行用紅色的顯示出來了。
<！DOCTYPE html PUBLIC“-//W3C//DTD HTML 4.01//EN”>
<html>
<head>
<title>我的第一個樣式頁面</title>
<style type=“text/css”>
body {
color: purple；
background-color: #d8da3d }
</style>
</head>
<body>
[etc.]
第一行說的是，這是一個樣式表，并且它是用CSS（“text/css”）編寫的。第二行說的是，我們?yōu)椤癰ody”元素添加了樣式。第三行設(shè)定了文本的顏色是紫色，還有接下來一行設(shè)定了背景是一種泛綠的黃色。
Alert！Advanced:CSS里的樣式表是由規(guī)則組成。每條規(guī)則有三個部分：
選擇器（在示例里：“body”），告訴瀏覽器文檔的哪個部分受規(guī)則影響了；
屬性（在示例里：'color''和'background-color'都是屬性），規(guī)定了布局的什么方面被設(shè)置了；
還有值（'purple'和'#d8da3d'）給出了樣式屬性的值。
我們要設(shè)置兩個屬性，因此我們要做兩個單獨的規(guī)則：
body { color: purple }
body { background-color: #d8da3d }
但是因為兩個規(guī)則都都會影響主體，我們只要輸入一次“body”，再把屬性和值放在一起。更多的選項，請看第2章Lie & Bos。
主體元素的背景也就是整個文檔的背景。我們沒有把任何明確的背景給任何其它的元素（p，li，address……），所以默認(rèn)它們會沒有（或，會是透明的）。'color '屬性設(shè)置body元素文本的顏色，但是主體內(nèi)的其它元素都要沿襲那種顏色，除非明確的覆蓋。（我們之后會添加其它顏色。）
現(xiàn)在保存文件（從菜單里選用“保存”）再回到瀏覽窗口。如果你按“刷新”鍵，顯示就會從“沉悶”的頁面變成有色彩（雖然還是相當(dāng)沉悶）的頁面。除了頂端的連接列表，文本應(yīng)該是帶有泛綠的黃色背景的紫色文本。
Screenshot of the colored page in Konqueror
一個瀏覽器在添加了一些顏色后是如何顯示頁面的。
Alert！Advanced:在CSS里顏色有多種方法來規(guī)定。此示例展示了它們的兩種方法：通過名稱（“purple”）和通過十六進(jìn)制代碼（“#d8da3d”）。顏色的名稱大約有140種，而十六進(jìn)制代碼有超過16，000，000種顏色。添加一種樣式表解釋了更多關(guān)于代碼的詳情。
第三步：添加字體
另外一件容易做的事情是，為頁面多種元素的字體制造一些區(qū)別。因此讓我們設(shè)置文本為“Georgia”字體，但除了h1標(biāo)題，我們會用“Helvetica”。
在網(wǎng)上，你不能確定你的讀者電腦上用的是什么字體，所以，我們也添加一些替代方案：如果沒有Georgia，Times New Roman或Times也可以，如果所有的都不行，瀏覽器會使用任何襯線字體。如果Helvetica缺失，Geneva，Arial和sunSans-Regular在形狀上是很相似的，又如果沒有這些運作，瀏覽器會選擇任何其它無襯線的字體。
?
轉(zhuǎn)載于:https://www.cnblogs.com/xiaozhim/p/6747878.html
總結(jié)
以上是生活随笔為你收集整理的html运用以及工具的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机的基础知识1
- 下一篇： Property Exercise