發表文章

目前顯示的是 5月, 2020的文章

HTML5 利用 CSS 取代傳統的align屬性

HTML5 利用 CSS 取代傳統的align屬性 在html 4.0.1中, 透過align指定標題、段落、圖片、表格對齊的方式為靠左、置中或靠右。 例子如下 ： 例子如下 ：   <! doctype html>       <html>             <head>                   <meta charset ="utf-8">             </head>              <body>                   <h1 align ＝ "left">這是靠左對齊的標題 1 </h1>                   <h2  align ＝ "right" >這是 靠右對齊的 標題 2 </h2>             </body>        </html> 在網誌提及過由於W3C希望網頁設計人員使用CSS定義的網頁外觀，以便與網頁的內容清楚分隔開來，所以HTML5不再列出涉及網頁外觀的屬性，以上網頁將改寫如下 ： 例子如下 ：       <! doctype html>       <html>             <head>                   <meta charset ="utf-8">                    <style>                          h1 (text - align : left)                           h2 (text - align : right)                    </style>             </head>               <body >                    <h1>這
張貼留言
閱讀完整內容

HTML5 - 段落元素(p)

HTML5 - 段落元素 （<p>) 瀏覽器會忽略HTML文件中多餘的空白字元或「Enter」鍵。利用「Enter」鍵來分段，瀏覽器一樣會忽略。在HTML文件中若顯示段落，必須使用<p>元素，在每個段落前後加上開始標籤<p> 和結束標籤 </p>。 例子如下 ：   <! doctype html>       <html>             <head>                   <meta charset ="utf-8">                   <title>段落元素運用的例子</title>             </head>               <body>                   <p> 得之，我幸； </p>                  <p> 不得，我命。  </p>                  <p> 如此而已⋯⋯ </p>                    </body>        </html>
張貼留言
閱讀完整內容

HTML5 - 標題的運用 （h1 - h6)

HTML5 - 標題的運用 （h1 - h6) HTML5 提供了事6種層次的標題，以h1元素(標題1)的字體最大，h6元素(標題6)的字體最小。 例子如下 ：   <! doctype html>       <html>             <head>                   <meta charset ="utf-8">                   <title> 標題運用的例子</title>             </head>              <body>                   <h1>這是標題 1 </h1>                   <h2>這是標題 1 </h2>                   <h3>這是標題 1 </h3>                   <h4>這是標題 1 </h4>                   <h5>這是標題 1 </h5>                   <h6>這是標題 1 </h6>             </body>        </html>
張貼留言
閱讀完整內容

HTML5 利用 CSS 取代網頁外觀的屬性

HTML5 利用 CSS 取代網頁外觀的屬性 在 HTML 4.01 中，<body> 元素還有 background、bgcolor 、text 、link 、alink 、vlink 等屬性，用來指網定網頁的背景圖片，背景色、文字顏色 和超連結在不同狀態的色彩 （例子 ： 被選取、己瀏覽的色彩）。 例子如下 ：       <! doctype html>       <html>             <head>                   <meta charset ="utf-8">                   <title> danielsir 的網頁 </title>             </head>              <body bicolour = "white" text = "black" link = "red" vlink = "green" alink = "blue">                   歡迎來到 < a  href ="http://www.danielsir.info" >danielsir 的實驗室  < /a >             </body>        </html> 但由於W3C希望網頁設計人員使用CSS定義的網頁外觀，以便與網頁的內容清楚分隔開來，所以HTML5不再列出涉及網頁外觀的屬性，以上網頁將改寫如下 ： 例子如下 ：       <! doctype html>       <html>             <head>                   <meta charset ="utf-8">                   <title> danielsir 的網頁
張貼留言
閱讀完整內容

HTML 5.0 - 文件結構

danielsir 曾在 2019年網誌，與大家分享HTML5的「簡介篇」及「網頁結構」。我嘗試用七天時間，與大家深談HTML5。 今天先與大家談談 HTML 5.0  - 文件結構。 HTML 文件的根元素 HTML 文件可以包含多個元素，有些元素是屬於「父子」關係、有些元素是屬於「兄弟」關係。而根元素為 <html>元素，而起始標籤 <html>務必放在 <!doctype html> 的後面，接著才是 HTML 文件的標頭與主體，最後還要有結束標籤 </html> 。 例子如下 ： <!doctype html>  <html>       現在是HTML文件的標頭與主題出場。 </html> HTML 文件的標頭  - <head> 元素 使用<head>元素標示作為HTML文件的標頭，裡面可以使用 <title> 、<meta> 、<link> 等元素來指定文件標題、文件相關資訊、文件之間的關聯、甚至是URL的路徑、JavaScript 程式碼、CSS 樣式等資訊。 <head> 元素會放在<html>元素裡面，而且有結束標籤 </head> 。 例子如下 ： <!doctype html>  <html>       <head>              現在是HTML文件的標頭與主題出場。       </head> </html> HTML 文件的標題 - <title> 元素 <title> 元素是用來指定HTML文件的標題，此標題會顯示在瀏覽器的標題列或索引標籤，有助於搜尋引擎優化，提升網頁被搜尋引擎找到的機率。<title> 元素務必放在 <head> 的元素裡面，而且有結束標籤 </title> 。 例子如下 ： <!doctype html>  <html>       <head>            
張貼留言
閱讀完整內容