ReactNative學習之Html基礎
前言：
React Native開發作為一種新型的移動開發方式，個人覺得App的一部分需求會逐步替換成這種方式，也是公司移動開發人員所必須掌握的一種開發技術，所以鑒於這種情況我覺得很有必要學習一下，特此開貼記錄一下整個學習過程。
什麽是HTML文件？
- HTML的英文全稱是Hypertext Marked Language，中文叫做“超文本標記語言”。
- 和一般文本的不同的是，一個HTML文件不僅包含文本內容，還包含一些Tag，中文稱“標記”。
- 一個HTML文件的後綴名是.htm 或者是.html。
- 用文本編輯器就可以編寫HTML文件。
先寫一個標準的html
我們利用文本編輯器聲明一個index.html,寫入如下文本內容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>這是標題</title> </head> <body> 這是網頁的內容 </body> </html>
執行一個html文件非常簡單，雙擊打開使用瀏覽器即可瀏覽。
簡單解釋：
html基於文本標記語言，以一個<tag>開始，以</tag>結束。
1.）在<head>和</head>之間的內容，是Head信息。Head信息是不顯示出來的，你在瀏覽器裏看不到。但是這並不表示這些信息沒有用處。比如你可以在Head信息裏加上一些關鍵詞，有助於搜索引擎能夠搜索到你的網頁。
2.）在<title>和</title>之間的內容，是這個文件的標題。你可以在瀏覽器最頂端的標題欄看到這個標題。
3.）在<body>和</body>之間的信息，是正文。
關於網頁信息(meta)
在計算機語言裏，你經常可以看到一個前綴 -- meta，meta就是“關於”(about)的意思。這meta解釋起來比較拗口，比如metadata，意為描述data的data，英文即data about data。還有一個詞叫metalanguage，表示一種描述其它語言的語言。再舉一個例子，metafile，表示描述其它文件的文件。
在HTML裏，meta標記(meta tags)表示用來描述網頁的有關信息。示例代碼如下：
<meta name="description" content="HTML中文教程之頭部信息"> <meta name="author" content="網頁作者李超軍">
利用meta中的Refresh你還可以實現自動跳轉頁面的功能。示例代碼：
<meta http-equiv="Refresh" content="5;url=http://www.baidu.com">
HTML元素(HTML Elements)
- HTML元素(HTMLElement)用來標記文本，表示文本的內容。比如body, p,title就是HTML元素。
- HTML元素用Tag表示，Tag以<開始，以>結束。
- Tag通常是成對出現的，比如<body></body>。起始的叫做OpeningTag，結尾的就叫做Closing Tag。
- 目前HTML的Tag不區分大小寫的。比如，<HTML>和<html>其實是相同的。
HTML元素(HTML Elements)的屬性
HTML元素可以擁有屬性。屬性可以擴展HTML元素的能力。
比如你可以使用一個bgcolor屬性，使得頁面的背景色成為紅色，就像這樣：
<body bgcolor="red">
再比如，你可以使用border這個屬性，將一個表格設成一個無邊框的表格。如下：
<table border="0">
屬性通常由屬性名和值成對出現，就像這樣：name="value"。上面例子中的bgcolor,border就是name，red和0就是value。屬性值一般用雙引號標記起來。屬性通常是附加給HTML的Opening Tag，而不是Closing Tag。
基礎HTMLTag
HTML裏，比較基礎的Tag主要用於標題，段落和分行。
1.）正文標題
這個標簽告訴你如何在HTML文件裏定義正文標題。HTML用<h1>到<h6>這幾個Tag來定義正文標題，從大到小。每個正文標題自成一段。比如從大到小，h1至h6
<h1 align="center" style="color: green">這是h1標題</h1> <h2>這是h2標題</h2> <h3>這是h3標題</h3> <h4>這是h4標題</h4> <h5>這是h5標題</h5> <h6>這是h6標題</h6>
2.）段落劃分
在HTML裏用<p>和</p>劃分段落。
<p>這是第一段文章</p> <p>這是第二段文章</p>
3.）換行
通過使用<br>這個Tag，可以在不新建段落的情況下換行。<br>沒有Closing Tag。用<p>換行是個壞習慣，正確的是使用<br>。
<p style="font-size: 25pt;color: saddlebrown"> 這是段落中的第一行 <br> 這是段落中的第二行 <br> 這是段落中的第三行 <br> 這是段落中的第四行 </p>
4.）HTML註釋
在HTML文件裏，你可以寫代碼註釋，解釋說明你的代碼，這樣有助於你和他人日後能夠更好地理解你的代碼。
註釋可以寫在<!--和-->之間。瀏覽器是忽略註釋的，你不會在HTML正文中看到你的註釋。
<!-- 這是一個註釋 --> <p><b>這僅僅是一個註釋，不會顯示在網頁中</b></p>
Html常用格式
除了上面舉例說明的這幾個標簽，之外今天再總結一下常用的格式標簽
1.）常用文本格式Tag
- <b> 粗體bold
- <i> 斜體italic
- <del> 文字當中劃線表示刪除
- <ins> 文字下劃線表示插入
- <sub> 下標
- <sup> 上標
- <blockquote> 縮進表示引用
- <pre> 保留空格和換行
- <code> 表示計算機代碼，等寬字體
寫段演示代碼
<p><b>粗體用b表示。</b></p> <p><i>斜體用i表示。</i></p> <p><del>我要刪除這幾個字</del></p> <p><ins>我要給這幾個字添加下劃線</ins></p> <p>X<sub>2</sub>+Y<sub>2</sub></p> <p>X<sup>2</sup>+Y<sup>2</sup></p> <p><blockquote>這段文字需要縮進</blockquote></p> <pre> 由於默認只能有一個空格， 使用這個可以保留多個空格 </pre> <code> void getAge(){ return age; } </code>
Html特殊字符顯示
有些字符在HTML裏有特別的含義，比如小於號<就表示HTML Tag的開始，這個小於號是不顯示在我們最終看到的網頁裏的。那如果我們希望在網頁中顯示一個小於號，該怎麽辦呢？
這就要說到HTML字符實體(HTML Character Entities)了。
一個字符實體(Character Entity)分成三部分：第一部分是一個&符號，英文叫ampersand；第二部分是實體(Entity)名字或者是#加上實體(Entity)編號；第三部分是一個分號。
比如，要顯示小於號，就可以寫<或者<。
用實體(Entity)名字的好處是比較好理解，一看lt，大概就猜出是lessthan的意思，但是其劣勢在於並不是所有的瀏覽器都支持最新的Entity名字。而實體(Entity)編號，各種瀏覽器都能處理。註意：Entity 是區分大小寫的。
1.）如何顯示空格
通常情況下，HTML 會自動截去多余的空格。不管你加多少空格，都被看做一個空格。比如你在兩個字之間加了10個空格，HTML會截去9個空格，只保留一個。為了在網頁中增加空格，你可以使用 表示空格。
<div> <p> 左右各四個空格 </p> </div>
2.）最常用的字符實體(Character Entities)
3.）其他常用的字符實體(Character Entities)
總結：
本篇先簡單總結一下html的簡單使用，下一篇再學習一下html其他標簽的使用。
ReactNative學習之Html基礎