開始學(xué)習(xí)HTML啦, 誰讓現(xiàn)在iOS的招聘要求上都寫著熟練掌握HTML優(yōu)先呢.目前在看的<<Head First HTML 與CSS>>, 感覺還挺不錯(cuò)的. (原諒我的所有標(biāo)點(diǎn)符號(hào)都是英文的,只因?yàn)樵O(shè)置好了不想改). 好吧,不多說廢話, 開始寫筆記啦~(對(duì)了,HTML5呢就是最新版本的HTML,不過因?yàn)橐院蠖家赃@個(gè)HTML5作為規(guī)范,雖然會(huì)在這個(gè)基礎(chǔ)上增加新的功能特性,但是不會(huì)有HTML6之類的東西出現(xiàn)了,所有也可以直接叫HTML)
基礎(chǔ)概念
1. HTML: HyperText Markup Language,超級(jí)文本標(biāo)記語言
它的作用就構(gòu)建網(wǎng)頁的結(jié)構(gòu)和內(nèi)容.告訴瀏覽器這個(gè)界面的是由哪些模塊以怎么樣的形式構(gòu)成的.都有些什么內(nèi)容.例如這個(gè)頁面有幾個(gè)段落.第幾個(gè)段落中間會(huì)有一張圖片.哪里會(huì)有換行,哪里會(huì)有一個(gè)超鏈接.
2.CSS:Casading Style Sheets,層疊樣式表
它的作用是告訴瀏覽器,頁面里的元素該如何顯示.比如背景應(yīng)該顯示成什么顏色啊,文字用什么字體啊,大小如何之類的.這個(gè)具體后面的筆記再詳細(xì)介紹吧 ,畢竟....我還沒學(xué)到那兒呢
3.標(biāo)記.
HTML里面所有用<>括起來的,都是標(biāo)記. 例如,<a> 和</a>,<head>和</head>,<h1>和</h1>等. 不帶"/"符號(hào)的,是開始標(biāo)記,帶"/"符號(hào)的是結(jié)束標(biāo)記.一般情況下,一個(gè)開始標(biāo)記(如<a>)會(huì)對(duì)應(yīng)著一個(gè)結(jié)束標(biāo)記(如</a>),它們是成對(duì)出現(xiàn)的.(不一般的情況,那就看下面元素里的解釋吧~) ?
4.元素:HTML就是由一個(gè)個(gè)元素組成的.?
a) 元素按照構(gòu)成方式來說,可以分為普通元素和空元素.?
普通元素 = ?開始標(biāo)記 + 要顯示的內(nèi)容 + 結(jié)束標(biāo)記 ,?
例如 ? ? <h1>你喜歡學(xué)習(xí)嗎?</h1> ? ?, 這就是一個(gè)h1元素(h1是表示字體最大的標(biāo)題,依照字體大小,有h1~h6這6個(gè)級(jí)別的標(biāo)記). <h1>是開始標(biāo)記,"你喜歡學(xué)習(xí)嗎"是會(huì)顯示在網(wǎng)頁上的內(nèi)容,</h1>是結(jié)束標(biāo)記, 三者就構(gòu)成了一個(gè)普通元素.?
空元素 = 開始標(biāo)記
例如<br>,這是一個(gè)換行的標(biāo)記,在輸入<br>的地方就表示這里要有一個(gè)換行.它不需要跟結(jié)束標(biāo)記成對(duì)出現(xiàn),也不需要有內(nèi)容.因?yàn)樗褪潜硎緭Q行而已. 不寫<br>,直接寫一個(gè)</br>也會(huì)換行,不過HTML里一般不這么寫,都是寫<br>. 另外,出現(xiàn)<img>標(biāo)記的地方就表示這里會(huì)有一張圖片.這個(gè)也不需要顯示文本內(nèi)容.也是一個(gè)空元素.
b).按在頁面里顯示時(shí)前后是否會(huì)有自動(dòng)換行,也可以分為塊元素和內(nèi)聯(lián)元素.
?例如 ? <p>要顯示的內(nèi)容</p> ? 這個(gè)是表示段落的元素,<p>是段落標(biāo)記. 頁面在顯示的時(shí)候,段落的前后自動(dòng)都會(huì)有換行,跟上下空出距離.這種元素就叫塊元素.還有顯示標(biāo)題的<h1>也是塊元素. 相反的像<a>是表示一個(gè)鏈接,在它在頁面顯示的時(shí)候,前后不會(huì)有自動(dòng)換行,這種就叫內(nèi)聯(lián)元素. 區(qū)別就是看前后會(huì)不會(huì)有自動(dòng)換行啦
塊元素通常用作web頁面中的主要構(gòu)建模塊(如一個(gè)一個(gè)段落),而內(nèi)聯(lián)元素往往用來標(biāo)記小段內(nèi)容(如段落里的一個(gè)鏈接).在設(shè)計(jì)界面的時(shí)候一般先從大的塊開始(塊元素),然后在完善頁面的時(shí)候加入內(nèi)聯(lián)元素.
屬性:
屬性是用來修飾元素的.屬性都寫在開始標(biāo)記的括號(hào)里,用等于號(hào)賦值.如<img src="haha.jpg">. 這里src就是img的屬性,而"haha.jpg"就是這個(gè)屬性的值,記得值要寫在" "雙引號(hào)里,這是比較嚴(yán)謹(jǐn)且標(biāo)準(zhǔn)的寫法. 上面說過<img>元素是表示這里要顯示一張圖片.而這里的scr屬性的值就是這張圖片的地址了.
標(biāo)記的介紹
只要新建一個(gè)text文件,把后綴改成 .html, 就可以在里面寫代碼啦.寫完以后打開方式選擇用瀏覽器打開,就能看到你寫的界面了. 瀏覽器會(huì)自動(dòng)加載你寫的這個(gè)本地的html文件.
首先,一個(gè)HTML頁面最基本的結(jié)構(gòu)如下,下圖里顯示的元素,都是構(gòu)成一個(gè)界面最基本,且必須有的元素.? html是整個(gè)頁面的最外層元素,所有元素都要包含在它里面. 頁面可以劃分為2個(gè)部分,即head部分(定義一些頁面顯示效果,CSS代碼等)和body部分(整個(gè)頁面要顯示的內(nèi)容都在這個(gè)元素里寫).具體見下圖代碼和注釋
<!--- 注釋內(nèi)容-->, 這是html里的注釋的寫法.
最常用的一些元素的介紹()
1.title元素: 頁面的名字,必須嵌套在head元素里.顯示效果如下圖
2.h1~h6: 標(biāo)題元素.HTML里提供了6種字號(hào)的標(biāo)題,從<h1>字體最大,<h6>最小.它們都是塊元素,也就是這個(gè) 元素的前后都會(huì)自動(dòng)換行. ( <h1> 標(biāo)題內(nèi)容</h1>,其他幾個(gè)也是以此類推就好.
3.<p>: 段落元素. 通常在<p>和</p>的前后都會(huì)自動(dòng)換行,因?yàn)樗菈K元素.段落元素是構(gòu)成頁面的一個(gè)主要的大塊.你也可以在里面嵌套超文本鏈接啊,圖片之類的.
4.<em>:表示強(qiáng)調(diào)的.放在這元素里的內(nèi)容字體會(huì)跟前后不一樣.這是一個(gè)內(nèi)聯(lián)元素.所以前后不會(huì)自動(dòng)換行.
5.<img>:圖片元素.這是個(gè)空元素,所以不是<img>圖片</img>這種格式.
?這個(gè)元素是告訴瀏覽器這里需要插入一張圖片.要顯示圖片的話,必須給這個(gè)屬性的src屬性賦值. 把圖片的地址賦值給這個(gè)屬性,就能顯示該圖片了. 可以用網(wǎng)上的圖片的URL給src賦值,那下載圖片的時(shí)候就會(huì)根據(jù)這個(gè)URL去下載圖片.也用相對(duì)路徑來賦值.一般構(gòu)建網(wǎng)站的時(shí)候,都是自己建一個(gè)文件夾,里面有不同頁面的文件夾,還會(huì)有一個(gè)專門保存圖片的文件夾,網(wǎng)站里要用到的圖片都在這個(gè)文件里.所以用這個(gè)相對(duì)路徑來賦值的時(shí)候,就會(huì)去加載這個(gè)文件夾里的圖片.當(dāng)你在網(wǎng)上去瀏覽一個(gè)網(wǎng)頁的時(shí)候,其實(shí)就是瀏覽器根據(jù)這個(gè)網(wǎng)頁的URL去找到這個(gè)網(wǎng)頁文件所存放的服務(wù)器,再找到這個(gè)文件夾,加載它里面的html文件和圖片等數(shù)據(jù),顯示到頁面上.
另外還有一個(gè)alt屬性,這也是img元素必須要有的屬性.這個(gè)屬性的值是對(duì)圖片的描述文字.當(dāng)圖片出于某種原因無法顯示的時(shí)候,大部分的瀏覽器就會(huì)顯示一個(gè)下載失敗的小圖以及alt里的文字.告訴瀏覽者這是一張什么圖.另外,對(duì)于有視力障礙的人,他們是用屏幕閱讀器來閱讀網(wǎng)頁,屏幕閱讀器就會(huì)讀出alt里的圖片文字說明,讓讀者知道這是什么圖片. 雖然即使不給這個(gè)屬性賦值,在正常情況下不會(huì)圖片顯示造成影響.但是不規(guī)范.有的編譯器會(huì)報(bào)警告.
寫法就是<img src="hahah.jpg" alt="這是一個(gè)人在大笑的圖片"> ?(我的例子里寫的相對(duì)路徑,我的描述能力有限,所以alt的值,看看就好)
