首頁 > 開發者 > JavaScript
HTML---簡介，html
什麼是HTML？
HTML是用來描述網頁的一種語言
HTML是超文字標記語言 (HTML)（Hyper Text Markup Language）
HTML不是變成語言，是一種標記語言
HTML新特性
用於繪畫的canvas標籤
用於媒介回放的video和audio元素
對本地離線儲存更好支援
新的特殊內容元素
如：article、footer、header、nav、section
新的表單空間
如：calendar、date、time、email、url、search
瀏覽器的支援
Safari、Chrome、Firefox以及Opera包括IE9基本支援了HTML5
HTML基礎
聲明：<!DOCTYPE>
HTML也有多個不同的版本，只有完全明白頁面中使用的確切HTML版本，瀏覽器才會完全正確的顯示出HTML頁面。這就是<!DOCTYPE>的用處。
<!-- HTML 5： --><!DOCTYPE html><!-- HTML 4.01: --><!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd”><!-- XHTML 1.0: --><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
HTML基礎標籤：
html---所有的標籤都會包含在html這個標籤當中，一般用角括弧”<html>”表示元素，而元素是一對一對的，有開始就有結束，用”</html>”表示元素結束。元素開始喝元素結束中間，就是元素的內容啦。
<!DOCTYPE html><html><head> <title></title></head><body></body></html>
head---用來定義“頭部”的資訊，比如：編碼格式
這個編碼格式還是有必要定義的，如果不定義就會在預覽的時候出現亂碼
<html> <!-- en代表英文，zh代表中文 --> <head lang = "zh"> </head> <body> 我就是要在body裡面直接寫文字。哼哼。 </body></html>
<html> <!-- en代表英文，zh代表中文 --> <head lang = "zh"> <!-- 編碼格式“UTF-8” --> <meta charset = "UTF-8"> </head> <body> 我就是要在body裡面直接寫文字。哼哼。 </body></html>
<html> <!-- en代表英文，zh代表中文 --> <head lang = "zh"> <!-- 編碼格式“UTF-8” --> <meta charset = "UTF-8"> <!-- 標題 “Hello HTML” --> <title>我是title，我就是瀏覽器的標題，O(∩_∩)O</title> </head> <!-- 用來顯示本文 --> <body> 我是body，你看到我了嗎？ <h1>我是h1，我是最大的，O(∩_∩)O</h1> <h2>我是h2，我是還算比較大了啦~</h2> <h3>我是h3，我還算正常吧。</h3> <h4>我是h4，我不是太大</h4> <h5>我是h5，我怎麼這麼小？？</h5> <h6>我是h6，我是最小的，T_T</h6> </body></html>
可以看到，設定後的效果
<html> <!-- en代表英文，zh代表中文 --> <head lang = "zh"> <!-- 編碼格式“UTF-8” --> <meta charset = "UTF-8"> <!-- 標題 “Hello HTML” --> <title>我是title，我就是瀏覽器的標題，O(∩_∩)O</title> </head> <!-- 用來顯示本文 --> <body> 我就是要在body裡面直接寫文字。哼哼。 我是第二行。 我是第三行。 <p>我還是老老實實獃著小p裡面吧~</p> <p>我是第二行。</p> <p>我是第三行。</p> </body></html>
<html> <head lang = "zh"> <meta charset = "UTF-8"> </head> <body> <h3 align="center">我是標題3，我是center置中的屬性</h1> <h3 align="left">我也是標題3，我是left靠左對齊的屬性</h1> <h3 align="right">我還是標題3，我是rigth靠右對齊的屬性</h1> </body></html>
<html> <head lang = "zh"> <meta charset = "UTF-8"> </head> <body bgcolor="#000"> </body></html>
<html> <head lang = "zh"> <meta charset = "UTF-8"> </head> <body> <a href="http://www.baidu.com" target="_banlk">點我就能上百度</a> </body></html>
標籤描述<b>定義粗體文本<big>定義大號文字<em>定義著重文字<i>定義斜體文字<small>定義小號文字<strong>定義加重語氣<sub>定義下標文字<sup>定義上標文字<ins>定義插入文字<del>定義刪除文字
<html> <head lang = "zh"> <meta charset = "UTF-8"> </head> <body> <b>我是b標籤格式，我是加粗的</b> <br /><br /> <big>我是big，我是顯示大字型</big> <br /><br /> <em>我是em，我代表著重語氣</em> <br /><br /> <i>我是i，我定義斜體的文字</i> <br /><br /> <small>我是small，我定義小號字型</small> <br /><br /> <strong>我是strong，我定義加重語氣</strong> <br /><br /> 我的出現是為了體現出sub是下標的<sub>我是sub，我是下標文字</sub> <br /><br /> 我也是出了讓sup體現上標的<sup>我是sup，我是下標文字</sup> <br /><br /> <ins>我是ins，我是插入文字，我有一條下橫線</ins> <br /><br /> <del>我是del，我是刪除文字，我中間有條橫線代表我已經被刪除了。</del> </body></html>
<html> <head lang = "zh"> <meta charset = "UTF-8"> <link rel="stylesheet" type="text/css" href="hello_css.css"> </head> <body> <h1>我是標題1，我會被hello_css.css給引用成紅色的</h1> </body></html>
css代碼
h1{ color: red;}
<html> <head lang = "zh"> <meta charset = "UTF-8"> <link rel="stylesheet" type="text/css" href="hello_css.css"> <style type="text/css"> h2{ color: green; } </style> </head> <body> <h1>我是標題1，我被css樣式引用成紅色的</h1> <h2>我是標題2，我被style改成綠色的</h2> </body></html>
<html> <head lang = "zh"> <meta charset = "UTF-8"> </style> </head> <body> <p style="color: blue">我是小p</p> </body></html>
<html> <head lang = "zh"> <meta charset = "UTF-8"> </style> </head> <body> <!-- 文字連結 --> <a href="http://www.baidu.com">點我進百度</a> <br /> <!-- 圖片連結 --> <a name="pika" href="http://www.baidu.com"> <img src="img/pika.png" alt="pika" width="250" height="200"> </a> </body></html>
點擊皮卡丘後，進入百度首頁
好吧，今天就寫到這裡。其實HTML還是蠻簡單的，學習之後，對於測試、開發、網頁遊戲都會有一定的協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
