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