HTML
HTML就是管理網頁的架構,一個好的網頁其HTML可以說是相當單純且具有易讀性,這種網頁不但方便前端工程師進行後續的維護外,也比較容易讓你的網頁增加曝光率讓搜尋引擎能把你的網頁擺在最前面,實際上行為稱為SEO,而現有HTML已經發佈到第五版同時也是目前最廣為使用的版本,因此大家常聽到的HTML5實際上就是指第五版的HTML喔!
HBuilder是DCloud(數字天堂)推出的一種支持HTML5的Web開發IDE。HBuilder的編寫用到了Java,C,Web和Ruby。HBuilder本身是由Java編寫的。它基於Eclipse,所以順其自然地兼容Eclipse的插件。HBuilder實際上只是一個編輯器,擁有多個豐富的語法庫,對Vue的支持比較友好,工具輕量且功能強大。
官網:https : //www.dcloud.io/hbuilderx.html
基本教學:https : //www.runoob.com/w3cnote/hbuilder-intro.html
WebStorm建立在開源IntelliJ平台之上,JetBrains已經開發和完善了超過15年。其提供了統一的UI,可與許多流行的版本控制系統配合使用,確保在git,GitHub,SVN,Mercurial和Perforce之間提供一致的用戶體驗。WebStorm提供可定制功能,調整它以完全適合您的編碼風格,從快捷方式,字體和視覺主題到工具窗口和編輯器佈局。
官網:https : //www.jetbrains.com/webstorm/
<HTML>
<head>
<meta charset="utf-8">
<title>網頁名稱</title>
</head>
<body>
網頁內容
</body>
</HTML>
語法 | 說明 |
---|---|
<HTML> <\HTML> | 整個文件的開始和結束之處,以供瀏覽器識別此文件為合法的文件 |
<head></head> | 表示標頭資訊的開始與結束,在<head>與</head>之間可加入其它標籤 |
<meta charset="utf-8"> | 指定了你的文件使用utf-8這種字元編碼 |
此網頁的標題,也就是您瀏覽器最左上面的標題 | |
<body></body> | 文件本體,所寫的內容即會顯示於網頁裡面 |
」。起始標籤代表這個元素從這裡開始。
元素還可以有「屬性(Attribute)」
屬性的組成包含:
HTML最多可以有六層的heading, <h1>–<h6>
<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>
<p>
elements 包含文字段落,在呈現一般文字時,這是我們最常用到的。
<p>This is a single paragraph</p>
<br>
或是<br/>
,即是換行。
<body>
第1行<br>
第2行<br>
第3行<br>
</body>
#### 分隔
<hr>
或是<hr/>
,即是會出現分割線,如下。
用法 | 說明 |
---|---|
基本用法 | |
Code | <hr> |
顏色設定 | |
Code | <hr color="#ff8000"> |
寬度設定 | |
Code | <hr width="240"> |
厚度設定 | |
Code | <hr size="5"> |
位置設定 | |
Code | <hr align="right"> |
陰影設定 | |
Code | <hr noshade> |
<!-- -->
,包含在中文字為註解,不會顯示。
<!--第4行<br/>
第5行<br/> -->
清單至少會包含兩個元素,以下是最常見的清單類,無順序性與有順序性的:
<ul>
裡面。<ol>
裡面。<p>購物清單</p>
<ul>
<li>衛生紙</li>
<li>牙膏</li>
<li>沐浴乳</li>
</ul>
原始碼 | 呈現結果 |
---|---|
<b>粗體</b> |
粗體 |
<i>斜體</i> |
斜體 |
<u>底線</u> |
底線 |
<del>刪除線</del> |
|
'放大' | 放大 |
'縮小' | 縮小 |
<sup>上標</sup> |
上標 |
<sub>下標</sub> |
下標 |
<tt>打字機</tt> |
打字機 |
<mark>標記</mark> |
標記 |
<blink>閃爍</blink> |
閃爍(ie 無效果) |
<em>強調</em> |
強調 |
<strong>加強</strong> |
加強 |
<samp>範例</samp> |
範例 |
<code>原始碼</code> |
原始碼 |
<var>變數</var> |
變數 |
<dfn>定義</dfn> |
定義 |
<cite>引用</cite> |
引用 |
<address>所在地址</address> |
所在地址 |
用法 | 說明 |
---|---|
基本用法 | <img src="圖檔名稱、路徑"> |
Code | <img src="images/01.jgp"> |
長寬設定 | <img src="圖檔" height="高度" width="寬度"> |
Code | <img src="images/01.jpg" height=32 width=32> |
加上說明 | <img src="圖檔" alt="說明文字"> |
Code | <img src="images/01.jgp" alt="teat image"> |
位置設定 | <img src="圖檔" align="位置"> |
Code | <img src="images/01.jgp" align=righ> |
邊框設定 | <img src="圖檔" border="邊框粗細"> |
Code | <img src="images/01.jgp" border="4"> |
左右間距 | <img src="圖檔" hspace="離左右物件的距離"> |
Code | <img src="images/01.jgp" hspace="15"> |
上下間距 | <img src="圖檔" vspace="離上下物件的距離"> |
(1)選擇一些文字,例如「Email」。
(2)把他們包在這個`<a>`元素裡:`<a>Email</a>`
(3)在`<a>`element 中加上href attribute這個屬性:`<a href="">Email</a>`
(4)屬性質就是你要連結網址:`<a href="https://...">Email</a>`