HTML 教程
Leave a reply
Tag Archives: 電腦語言
HTML5 教程-HTML5 簡介
HTML5 簡介
每一章中的HTML5 示例
實例
<!DOCTYPE html> <html> <body> <video width="420" controls> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.ogg" type="video/ogg"> Your browser does not support the video tag. </video> </body> </html>
實例
<!DOCTYPE html> <html> <body> <video width="320" height="240" controls="controls"> <source src="/i/movie.ogg" type="video/ogg"> <source src="/i/movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video> </body> </html>
點擊“親自試一試”來查看該例如何運行。
什麼是HTML5？
HTML5 是最新的HTML 標準。
HTML5 是專門為承載豐富的web 內容而設計的，並且無需額外插件。
HTML5 擁有新的語義、圖形以及多媒體元素。
HTML5 提供的新元素和新的API 簡化了web 應用程序的搭建。
HTML5 是跨平台的，被設計為在不同類型的硬件（PC、平板、手機、電視機等等）之上運行。
註釋：在下面的章節中，您將學到如何“幫助”老版本的瀏覽器處理HTML5。
HTML5 中的新內容？
HTML5 的新的文檔類型（DOCTYPE）聲明非常簡單：
<!DOCTYPE html> The new character encoding (charset) declaration is also very simple: <meta charset="UTF-8">
HTML5 實例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> </head> <body> Content of the document...... </body> </html>
註釋： HTML5中默認的字符編碼是UTF-8。
HTML5 – 新的屬性語法
HTML5 標准允許4 中不同的屬性語法。
本例演示在<input> 標籤中使用的不同語法：
| 類型 | 示例 |
|---|---|
| Empty | <input type=」text」 value=」John Doe」 disabled> |
| Unquoted | <input type=」text」 value=John Doe> |
| Double-quoted | <input type=」text」 value=」John Doe」> |
| Single-quoted | <input type=」text」 value=’John Doe』> |
在HTML5 標準中，根據對屬性的需求，可能會用到所有4 種語法。
HTML5 – 新特性
HTML5 的一些最有趣的新特性：
- 新的語義元素，比如<header>, <footer>, <article>, and <section>。
- 新的表單控件，比如數字、日期、時間、日曆和滑塊。
- 強大的圖像支持（藉由<canvas> 和<svg>）
- 強大的多媒體支持（藉由<video> 和<audio>）
- 強大的新API，比如用本地存儲取代cookie。
HTML5 – 被刪元素
以下HTML 4.01 元素已從HTML5 中刪除：
- <acronym>
- <applet>
- <basefont>
- <big>
- <center>
- <dir>
- <font>
- <frame>
- <frameset>
- <noframes>
- <strike>
- <tt>
HTML5教學三個基礎懶人包三:標籤的演變你要跟上!
HTML5教學現在竟然增加了許多更方便的功能!排版變得更容易!插入影片也更方便了!
HTML 5 新增的標記
目前的 HTML 5 是 HTML 的最新標準，最初設計的目的只是為了要集合網路上許多分散的資源，透過標記結構化的串在同一個網頁中。
因此 HTML 5 加了許多標記，更有益於網頁的排版、結構更加明顯。
在列出 HTML 5 新增的標記前，老師要我們先複習在上堂HTML5教學整理出來的語義架構圖，再配合新增的標籤，會比較快理解，如下圖：
<section> 定義一個大的段落
<article> 定義段落裡的一篇文章
<aside> 網頁內容以外的項目，大多都是側邊攔目
<header> 定義段落中的標題，不是<head>喔
<footer> 定義頁尾的資訊
<nav> 定義導覽列的內容
<figure> 定義內體內容的區塊
<figcaption> 定義媒體區塊的標題文字
在所有新增的標記中，HTML 5 的多媒體功能也是受到矚目的。它簡化了以往在HTML處理影音多媒體資料的型態，若是沒上過HTML5教學或網路行銷課程，會像以前一樣，把影片上傳到像 Youtube 等第三方影音平台，再用嵌入的方式來撥放影片。若是使用HTML 5，則可以使用<video>標籤，在自己的網站上完成所有動作，不需要再將影片上傳到第三方影音平台才能在自己的網站上撥放了！典型的標記格式如下：
<video width=」800″ height=」500″ autoplay controls>
<source src=」https://www.tedu.tw/video/達內教育UI課程學員就業分享-李雅青.mp4″ type=」video/mp4″>
</video>
其<source>標籤指定了要撥放的影片位置，可以指定為自己網站中的影片或是網站的任一個影片URL(包含Youtube的影片)，在標記中可以透過 autoplay 指定他自動撥放。也可以加上 control 按鈕，讓影篇撥放時多了可以控制影片的按鈕。以上的 <video> 顯示影片如下：
除了影片功能外，另一個受矚目的功能叫做 <canvas>標籤，它可以讓我們在網頁上設定一個區塊，讓我們透過 Javascript 程式在上面自由作圖。
當然，尚有許多其他標籤和屬性，值得在網路行銷課程深入研究學習。不過本系列目的是介紹出現率超過 80% 的 HTML 標籤，讓行銷人員對 HTML 的標籤有初步的了解與認識。
相關連結：
最時尚且多功能的程式語言你學了嗎?上Python課程一技能頂十
白帽SEO黑帽SEO傻傻分不清嗎?網路行銷課程一次就讓你搞懂!!
文章標籤
HTML5教學三個基礎懶人包二:關於HTML表格標籤
因為今天的HTML5教學,我終於可以用好好地將我的網站用得更水,加強行銷效果!
表格標籤<Table >指令一覽表
HTML5教學基礎篇2-如何使用HTML5做表格?
許多網頁的表格都是使用jpg等圖片來表示，但在之前已提到：圖片的表現方式對於SEO優化的效果較弱，因為Google等搜尋引擎是認字勝過於認圖片！若你希望你的網站兼顧美觀與SEO優化效果，那你一定要學會辨認HTML5教學的表格標籤，如此一來，便能與之前上過的課程配合應用。
在網頁中除了項目清單標籤：無照順序排列的<ul>和有照順序排列的<ol>，還有可以按照階層排列的<dl>之外，還有更複雜的表格標籤。(起始標為<table></table>)。
由此可以看得出表格標記<th>、<tr>、<td>之間的關係以及設定的方式。同時在每一個標記之內還可以使用其他的標記，做更細部的設定。如圖中的<td>標籤就加入了<width>標籤來設定寬度，是為<td width=100>。表格標籤的常用屬性如下所示：
<align> 設定整張表格在網頁的對齊方式，有左 (left)、中 (center)、右 (right)
<bgcolor> 設定表格的背景色。以 #rrggbb 為色彩格式
<border> 設定表格的邊框寬度，以像素為單位
<cellpadding> 設定表格邊框與內容中間的留白要留多少，以像素為單位
<cellspacing> 設定格子與格子中間的空白。
<width> 設定表格的寬度，以像素為單位。
以上是針對整個表格的<table>屬性。
至於<td><tr>也有相應的屬性設定如下：
<align> 對齊儲存格的內容，有靠左 (left)、靠中 (center)、靠右 (right)、還有分散對齊 (justify)，這樣每行都可以有相等的長度（就像在報紙和雜誌中）、將內容對準指定字 (char)
<bgcolor> 設定儲存格的背景色。以 #rrggbb 為色彩格式
<colspan> 合併橫向的儲存格，數字以欲合併的格數為單位
<rowspan> 合併直向的儲存格，數字以欲合併的格數為單位
<height> 設定儲存格高度。
<width> 設定儲存格寬度。
<rowrap> 限制儲存格的內容不能換列，也許可以維持美觀，但是會犧牲多出來的文字內容。
<valign> 儲存格內容的字對齊，有靠上對齊 (lop)、靠中對齊 (middle)、靠下對齊 (bottom)。不過，如果文的字體不相同，baseline 的效果會最好！
相關連結：
HTML5教學三個基礎懶人包一:初學者開從何開始?
剛開始學HTML5教學?那HTML標籤和線上免費網頁編輯器這兩樣東西你得好好摸索!
先了解HTML基本架構!
HTML 沒有像一般程式語言一樣有變數儲存的功能、不能操作記憶體、不能算是一個正規的語言，而比較像是一種排版的標記。
所有的 HTML 標籤 (又稱標記、tag) 大都是成對的，如「<p>」和「</p>」，只有少部分如斷行用的「<b>」和「</b>」來完成。
所有的 HTML 都以「<html>」開始和「</html>」結束。
HTML檔的開頭，都會有<!DOCTYPE html>來當作HTML的識別標記。
HTML的檔案架構如下：
在「<html>」和「</html>」主要分成<head></head>和<body></body>兩部分。
如圖所示，<head></head>裡面又有<meta charset=」utf-8″>，是用來設定本網頁的字元編碼是用utf-8，因為現今網頁普遍編碼皆為UTF-8。
而<title></title>為標題標記，是用來定義網頁的標題，同時 Title 也會被 Google 設定為搜尋結果上顯示的網頁標題，因此在 SEO 上是非常重要的優化項目之一。
另外，在<head></head>標籤裡面除了<meta>和<title></title>之外，大部分對於 CSS 以及 Javascript 的設定也會放在這裡面。後續的文章會陸陸續續做說明。
重要、基本的 HTML 標記
真正網頁的內容，是放在<body>和</body>中間。常用的、任何版本皆通用的 HTML 如下所示：
<h1>~<h6> 可用來設定標題格式，若沒有另外規定的話，<h1>最大；<h6>最小。
<p> 可設定文章中的段落，被<p></p>包住的文字為一個段落，也會自動換行。
<br> 可讓文章強制換行
<table>系列 以<table></table>來插入表格，每一列的內容都包在 <tr></tr> 中間，每一列的內容包含每一格，包在 <td></td> 中間，又以 <th></th> 設定每一欄位的標題名稱。
<div> 透過 DIV 標籤可以在網頁中創造各個不同的區塊。這裡的「區塊」可視為一大段落的文字，做同一種格式設定，每個區塊內還可以增加更小的區塊。設計師也可以善用 HTML div 區塊來進行排版。區塊內容，可以是文字、圖片、影片、框架 … 等網頁內容，開頭的<div> 區塊內可以設置 id、class 或直接開始一段樣式設計，也就是 style 的部份。
<span> 和<div>相似，不同的是<span>是小範圍的格式設定，多在一行之內。
<img/> 連結圖檔的標記，圖片來源可為同一台主機的圖片或是網路上任一張圖片。
<a> 超連結URL。
<hr/> 橫的分隔線。
<ul> 項目清單(無順序)。
<ol> 項目清單(具有順序性)。
<ol> 項目清單的單一項目。
<iframe> 在網頁中嵌入其他網頁，如 Youtube。
<dl> 有階層項目的清單，<dt>為第一階層；<dd>為第二階層。
以下為文字的 HTML 標籤
<center> 置中文字。
<i> 把文字斜體。
<u> 在文字上加上底線。
<sub> 上標
<sup> 下標
<em> 強調文字
<big> 字體放大。
<small> 字體縮小。
<pre> 讓文字內容以原本的樣式出現，不加任何其他的格式。
<strong>、<b>、<em> 粗體、強調文字。雖然外觀上無益，但是在意義上，<strong>的權重高於<b>和<em>。
上述 tag 中還可以自行置入參數，做細部的設定。如上述 <h2>即可在標籤內加入「align」指令設定標題二(h2)的對其方式，如以下所示：
<h2 align=right></h2>即為向右對齊；<h2 align=left></h2>即為向右對齊；<h2 align=center></h2>即為向中對齊。
除了像是<p></p>、、<hr/> 等簡單的標籤之外，許多標籤會自動依照其特殊的結構而組合成預期的樣子，如<dl>，與其他的標籤顯示如下：
由以上圖片可知，原始碼的部分，所有的標籤與文字雖然都沒有分行，但是顯示出來的樣子卻可以依照標籤屬性而有次序的排版。像這樣的 HTML 標籤，還有更複雜的表格標籤。
而初學者上HTML5教學，卻沒有 Dreamweaver 怎麼辦? 還好線上練習網站 codepen 提共了免費的HTML5網頁平台。你可以在網頁上輸入程式碼，並立即獲得輸出的樣式。
它有免費以及付費的方式可以使用：
– 若你上HTML5教學，只是單純想練習 HTML/CSS/Javascript 的話，使用免費模式即可。
– 付費模式則可在此網站建立屬於你個人的文件內容，並且擁有網頁空間可以放自己的網站。
那要如何進入到純練習的介面呢？操作步驟如下：
1. 進入codepen首頁(如下圖)，並且點選左側的「Create」，並選擇「Pen」。
2. 進入練習的頁面如下，左側是HTML；中間是CSS；右側是Javascript。下方則是即時預覽介面。如下圖所示：
<
相關連結：