最近做iOS開發的過程中, 發現要涉及到JS和原生OC(Swift)的交互, 作為一個Developer, 本着克服一切問題的原則, 開始學習HTML, 在這里記錄下自己的學習筆記, 方便以后的復習, 和新手初學的參考.
HTML不同於過去學過的各種面向對象語言, 函數式語言, 它不像其他語言有明確的上下文的邏輯關系. 所以並不像其他語言一樣需要有什么特定的基礎, 希望這句話能讓你遠離學習過別的語言的陰影.
HTML和CSS以及JavaScript的關系
1. HTML是網頁內容的載體.內容就是網頁制作者放在頁面上想要讓用戶瀏覽的信息, 可以包含文字, 圖片, 視頻等.
2. CSS樣式是表現. 就像網頁的外衣. 比如，標題字體, 顏色變化, 或為標題加入背景圖片, 邊框等. 所有這些用來改變內容外觀的東西稱之為表現.
3. JavaScript是用來實現網頁上的特效效果, 如: 鼠標滑過彈出下拉菜單. 或鼠標滑過表格的背景顏色改變. 還有焦點新聞（新聞圖片）的輪換. 可以這么理解, 有動畫的, 有交互的一般都是用JavaScript來實現的.
1, 語義化
接觸過HTML, 或者初學HTML, 我想接觸的第一個專業詞匯不是標簽就是語義化了, 語義化的意義通俗點說就是明白每個標簽的用途(不同的標簽, 在什么情況下用, 怎么用, 這些就是語義化需要考慮的事情), 比如網頁上的文章的標題, 想要在網頁上體現的圖表, 欄目名稱, 段落等等, 都是標簽能夠實現的, 通過基本的標簽加上CSS, 就可以寫出一些很優美的頁面.
語義化的好處:
1, 更容易被搜索引擎收錄.
2, 更容易讓屏幕閱讀器讀出網頁內容.
2, 從最簡單的程序解釋下HTML
作為一個程序員, 大家都應該知道"hello, world", 不管是學C, java, OC等等我想大家寫出的第一個都應該是打印函數, 不過HTML是沒有函數的, HTML主要是一種文本的顯示, 類似於一個文本編輯器, 通過加上恰當的標簽, 讓文本排布成我們想要的樣子, 所以下面是不會出現打印函數的(以后的JavaScript會有).
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>我的第一個網頁</title> 6 </head> 7 <body> 8 <h1>Hello World</h1> 9 </body> 10 </html>
上面的就是HTML的Hello World.
簡單的介紹一下這段代碼
首先, 我們從代碼中可以發現, 大部分的標簽都是成對出現的, 所以分為開始標簽和結束標簽, 結束標簽比開始標簽會多出一個" / ", 比如上文中的<html>和</html>.
然后, 我們可以看到, 代碼中的標簽是可以互相嵌套的, 但是不可以交叉, <html>中就嵌套了成對的很多標簽, 但是卻沒有任何標簽彼此交叉. 例如<html><body></body></html>這樣就可以, 而<html><body></html></body>這樣就是不合法的.
<html></html>稱為根標簽, 所有的網頁標簽都在<html></html>中.
<head></head>標簽用於定義文檔的頭部, 文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題等。絕大多數文檔頭部包含的數據都不會真正作為內容顯示給讀者, 他是所有頭部元素的容器. 頭部標簽有標題標簽<title>, JavaScript內嵌標簽<script>, css樣式標簽<style>, 文件關聯標簽<link>, <meta>等. 以后會對標簽進行逐一的介紹.
<title></title>標簽, 在<title>和</title>標簽之間的文字內容是網頁的標題信息, 它會出現在瀏覽器的標題欄中. 網頁的title標簽用於告訴讀者和搜索引擎這個網頁的主要內容是什么, 搜索引擎可以通過網頁標簽, 迅速的判斷出網頁的主體. 每個網頁的內容都是不同的, 每個網頁都應該有一個獨一無二的title.
<body>標簽, 顧名思義, body也就是身體, 主體, 也就是說網頁上面顯示在界面上面的內容, 他也是內容標簽的容器, 常見的內容標簽有分級標題標簽<h1> ~ <h6>, 段落標簽<p>, <a>, 圖片標簽<img>等. 這些標簽中的內容會在網頁上面直接的體現出來.
<h1></h1>標題標簽, 網頁中有很多的標題, 比如這篇博客的2, 從最簡單的程序解釋下HTML就是一個標題, 而標題也有着不同的大小尺寸, HTML中定義了標題的標簽分別為<h1>到<h6>, 他們會默認加粗, 然后逐級減小字體.
3, 其他的標簽
<p></p>段落標簽, 在文章中, 我們需要條理清晰的一個一個段落, 這個時候我們就需要段落標簽了, 默認樣式中<p></p>前后都會有空白, 但是並不是我們正常使用中的首行縮進, 它通常不會讓我們滿意, 所以我們需要用css樣式(<style>標簽)來刪除或者改變它.
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title> <p>標簽</title> 6 </head> 7 <body> 8 <p>我的第一個段落.</p> 9 <p>我的第二個段落.</p> 10 <style> 11 p{ 12 color:#940; 13 } 14 </style> 15 </body> 16 </html>
<strong>和<em>強調標簽, 這兩個標簽用於強調網頁中文本的特定詞語或者段落, 但是兩者在語氣上有區別, <strong>更假強烈, 表現形式會是使用粗體, 而<em>會是斜體.
<span>標簽, <span>標簽是沒有任何語義的, 大家也許會想, 那它有何作用, 但是正是因為沒有語義, 才體現了它的強大之處, 也就是自定義, 它標簽內的文本配合上css或者是JS能夠高度的進行特定文本的自定義, 這在以后的學習中可以稱之為最重要的標簽之一.
<q>短引用文本標簽, 這個標簽比較冷門, 當你在引用某名人名言等時候, 會用到的標簽, 瀏覽器會對你引用的文字自動加雙引號, 所以你並不需要自己為之加雙引號.
<blockquote>長引用文本標簽, 這個和上面的標簽使用同理, 但是適用於長的段落性引用, 在實際效果中會是縮進的, 單獨段落的引用效果, 並不會增加雙引號.
<address>地址標簽, 可以定義一個地址, 可以是郵箱, 簽名, 或者是文檔的作者身份. 標簽中的文字在瀏覽器上的樣式默認為斜體, 使用css樣式表可以自定義.
<code>代碼標簽, 在一些技術網站, 比如我們的博客論壇網站, 需要展示一行代碼的時候, 就會用到code標簽. 但是多行代碼的時候就不可以了.
<pre>代碼段標簽, 在需要插入大段的代碼時, 需要使用<pre>標簽, 它可以將我們代碼中的回車, 縮進等完整的體現出來, 避免了HTML不識別多空格和回車的問題.
空標簽(單一標簽, 不存在開始結束標簽)
<br />換行標簽, 在HTML中是不識別多空格(可以識別單個空格作為一個文本形式)和換行的, 所有的文本都會是連續的, 所以有了段落標簽<p>, 空格 <br />在HTML中也就是等價於ASCII中的" \n ".
<hr />水平橫線標簽, 在瀏覽器中的默認樣式線條比較粗，顏色為灰色，可能有些人覺得這種樣式不美觀，沒有關系，這些外在樣式在我們以后學習了css樣式表之后，都可以對其修改。
使用這些標簽就可以完成一些簡單的文本文檔類的網站編輯了.