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基礎