學(xué)習(xí)HTML+CSS的一些方法

2023-12-25    分類： 網(wǎng)站建設(shè)

現(xiàn)在市面上到處都是各種指南教程，為了顯示這一系列文章的不同，我特意起名為指北系列，不同在哪里?我會按一個對HTML一點(diǎn)概念的人的腦子來教你一步一步的學(xué)，保證你看完后有收獲。

學(xué)習(xí)之前，請記住偉大的哲學(xué)家兼武術(shù)家李小龍的一句話：清空你的杯子，方能在行注滿?？諢o以求全。

推薦參考書：1，O'reilly.HeadFirst.Html.With.Css.And.Xhtml

2，W3C shcool

3，CSS禪意花園

4，HTML 文檔 CSS文檔

我覺得如果想入門的話，上面三本書就夠了，買其它的書真浪費(fèi)錢，還不如好好的看看HTML DOCUMENT ,and CSS document.

第1集 了解HTML and CSS

目標(biāo)：通過本課，你要做到：知道HTML是做什么的，CSS的作用。

OK，開始上課了，借用軟件工程學(xué)里的觀察者模式，我假定任何看此文章的必須是往WEB方面發(fā)展，如果不是向往這方面發(fā)展看這文章我想腦子肯定進(jìn)水了。OK，那首先大至的了解下WEB這個概念。

WEB百度的解釋如下：網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，是承載各種網(wǎng)站應(yīng)用的平臺。通俗的說，您的網(wǎng)站就是由網(wǎng)頁組成的。

還要了解一下瀏覽器的概念：

瀏覽器：萬維網(wǎng)(Web)服務(wù)的客戶端瀏覽程序。可向萬維網(wǎng)(Web)服務(wù)器發(fā)送各種請求，并對從服務(wù)器發(fā)來的超文本信息和各種多媒體數(shù)據(jù)格式進(jìn)行解釋、顯示和播放。

可以這樣理解：WEB主要 由客戶端和服務(wù)器端組成，客戶端是接收信息的終端，類似于我們發(fā)短信的時候，客戶端就是收信人，服務(wù)器端是發(fā)信人。當(dāng)然抽象化的省略了防火墻，DNS之類的東西，因?yàn)檫@些東西你不需要了解。

所以，你有時候也聽一些書呆子說web的架構(gòu)是B/S架構(gòu)，如果你懂一點(diǎn)點(diǎn)英語，也就知道是(brower,and server)的簡稱，沒什么意思。

當(dāng)然，上面的東西全是廢話，你看不懂不需要看，學(xué)習(xí)HTML 和CSS，其實(shí)要了解的東西很少很少。

閉上眼睛，想一想，比如你今天想上網(wǎng)看美女圖片，你會干什么?OK,肯定要打開一個瀏覽器吧，不管是IE還是FIREFOX,所以，你肯定會自然而然的知道，我們必須借助于瀏覽器才能看到網(wǎng)站上的網(wǎng)頁，用專業(yè)一點(diǎn)的話可以說，瀏覽器是負(fù)責(zé)把HTML CSS JS等傳到客戶的端的語言按照內(nèi)置的一整套規(guī)則解析成我們?nèi)四芸吹枚膬?nèi)容的一個工具。

只要你大至懂了瀏覽器的解析規(guī)則，等于說你基本讀得懂HTML和CSS 代碼了，好，現(xiàn)在我們來看看瀏覽器是如何解析的。先從一個經(jīng)典的HELLOWORLD例子開始第一課。

推薦使用的編輯器:notepad++,editplus,dreamware(新手不推薦使用，這些IDE集成工具會毀了你的，讓你一輩子也不會寫出一行完整的代碼),

<html>?? <head>?? <title>the first example</title>?? </head>?? <body>?? <!----這里寫注釋-------->?? <helloword?? </body>?? </html>

ok,保存一下上面的例子成一個.html,或者.htm文件，用瀏覽器瀏覽一下。

通過上面的例子你會了解以下知識：

1，標(biāo)簽一般是成對出現(xiàn)的，有沒有不是成對出現(xiàn)的標(biāo)簽?當(dāng)然有,比如<input type="image" />但單標(biāo)簽一般的在最后面要加一個斜線，意思是我已經(jīng)關(guān)閉了。

2，HTML由二部分組成，<head><body>他們被最外面的<html>包著，HTML的世界里，有一些內(nèi)容(永遠(yuǎn)要記住，HTML只負(fù)責(zé)WEB的內(nèi)容方面的東西)，基本上只要是內(nèi)容方面的東西，他要么是屬于head,要么是屬于body,如果你以后看到有的東西既可以放到 head里，又可以放在body里，我可以百分百的跟你說，那些代碼不是負(fù)責(zé)內(nèi)容方面的東西的，他們要么負(fù)責(zé)樣式方面，要么負(fù)責(zé)一些動態(tài)東西，除此之外沒有其它的東西了。

因?yàn)?，在客戶端里面，大至分為三種東西:

HTML:負(fù)責(zé)內(nèi)容

CSS:負(fù)責(zé)樣式

javascript:負(fù)責(zé)動態(tài)東西

舉一個例子你一下子就明白了：

大富翁的虛擬社區(qū)最近興起了房地產(chǎn)，： 阿士伯想蓋一個和錢夫人一樣的大大的house(百度一下你就知道，house在西方專指別墅),他想蓋一個五室三廳四衛(wèi)的House，要有一個大的花園，一個停車庫，在他的房間里面他將會買一些家電一些家具，請一些傭人。

這里面，虛擬社區(qū)里把停車庫，花園，臥式當(dāng)成了一個一個獨(dú)立的東西(這些在WEB里面就被稱為HTML元不經(jīng)意)。所以，阿士伯花了一些金幣買了這些道具，但買了之后，在自己的空空的空間里怎么放，這里肯定有一套規(guī)則 吧：有可能這套規(guī)則這樣寫：

1，南邊是二個主臥式

2，車庫最后和地下室在一起

3，各個道具的大小如何設(shè)置

4，各個道具的間距如何設(shè)置

(這些就被稱為CSS樣式)

然后阿士伯購買的家電和傭人肯定也根據(jù)自己心中的要求來選擇吧，可能是這樣的：

1，家電必須要有X-max的效果

2，最好是一整套的智能家居解決方案

3，那個傭人不但要會做魚香肉絲，也必須要會煮方便面。

本文來自成都品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)公司-創(chuàng)新互聯(lián)

文章名稱：學(xué)習(xí)HTML+CSS的一些方法
轉(zhuǎn)載來源：http://www.bm7419.com/news43/310343.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、商城網(wǎng)站、網(wǎng)站收錄、小程序開發(fā)、關(guān)鍵詞優(yōu)化、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站制作