初學HTML 常見的標簽_ZenDei技術網路在線

最近做iOS開發的過程中, 發現要涉及到JS和原生OC(Swift)的交互, 作為一個Developer, 本著剋服一切問題的原則, 開始學習HTML, 在這裡記錄下自己的學習筆記, 方便以後的複習, 和新手初學的參考. HTML不同於過去學過的各種面向對象語言, 函數式語言, 它不像其他語言有明確

　　最近做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樣式表之後，都可以對其修改。

　　使用這些標簽就可以完成一些簡單的文本文檔類的網站編輯了.