HTML

實(shí)例
 文本
 鏈接
 頭部
 樣式
 圖像
 區(qū)塊
 布局
 表單
 框架

參考： http://www.runoob.com/html/html-intro.html

實(shí)例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>頁(yè)面標(biāo)題</title>
</head>
<body>
 
<h1>我的第一個(gè)標(biāo)題</h1>
 
<p>我的第一個(gè)段落荐操。</p>
 
</body>
</html>

說(shuō)明：

<!DOCTYPE html> 聲明為 HTML5 文檔
<html> 元素是 HTML 頁(yè)面的根元素
<head> 元素包含了文檔的元（meta）數(shù)據(jù)，如 <meta charset="utf-8"> 定義網(wǎng)頁(yè)編碼格式為 utf-8米苹。
<title> 元素描述了文檔的標(biāo)題
<body> 元素包含了可見(jiàn)的頁(yè)面內(nèi)容
<h1> 元素定義一個(gè)大標(biāo)題
<p> 元素定義一個(gè)段落

實(shí)例：

標(biāo)題（Heading）是通過(guò)<h1> - <h6> 標(biāo)簽來(lái)定義的.
段落是通過(guò)標(biāo)簽 <p> 來(lái)定義的.
鏈接是通過(guò)標(biāo)簽 <a> 來(lái)定義的.

   <a >這是一個(gè)鏈接</a>

圖像是通過(guò)標(biāo)簽 <img> 來(lái)定義的

<img src="/images/logo.png" width="258" height="39" />

元素：

<p>
<body>
<html>

就是沒(méi)有關(guān)閉標(biāo)簽的空元素（
標(biāo)簽定義換行）

屬性：
http://www.runoob.com/tags/html-reference.html

標(biāo)簽	描述
<a>	定義超文本鏈接
<audio>New	定義音頻內(nèi)容
<b>	定義文本粗體
<body>	定義文檔的主體
<br>	定義換行
<button>	定義一個(gè)點(diǎn)擊按鈕
<canvas>New	定義圖形，比如圖表和其他圖像,標(biāo)簽只是圖形容器柠贤，您必須使用腳本來(lái)繪制圖形
<caption>	定義表格標(biāo)題
<center>	HTML5不支持，不贊成使用钾恢。定義居中文本解幽。
<code>	定義計(jì)算機(jī)代碼文本
<col>	定義表格中一個(gè)或多個(gè)列的屬性值
<colgroup>	定義表格中供格式化的列組
<figure>New	規(guī)定獨(dú)立的流內(nèi)容（圖像廷粒、圖表窘拯、照片红且、代碼等等）。
<h1> to <h6>	定義 HTML 標(biāo)題
<i>	定義斜體字
<html>	定義 HTML 文檔
<p>	定義段落涤姊。
<span>	定義文檔中的節(jié)暇番。
<select>	定義選擇列表（下拉列表）。
<section>New	<section> 標(biāo)簽定義文檔中的節(jié)（section思喊、區(qū)段）壁酬。比如章節(jié)、頁(yè)眉恨课、頁(yè)腳或文檔中的其他部分舆乔。
<sub>	定義下標(biāo)文本。
<title>	定義文檔的標(biāo)題剂公。
	定義注釋

文本內(nèi)容：

注釋：

<!-- 這是一個(gè)注釋 -->

水平線標(biāo)簽：
<hr> 標(biāo)簽在 HTML 頁(yè)面中創(chuàng)建水平線希俩。
hr 元素可用于分隔內(nèi)容。

標(biāo)題：

<h1>這是1號(hào)標(biāo)題</h1>
<font size="6">這是6號(hào)字體文本</font>

段落：

標(biāo)簽	描述
<p>	定義一個(gè)段落
<br>	插入單個(gè)折行（換行）
<b>	定義粗體文本
<em>	定義著重文字
<i>	定義斜體字
<small>	定義小號(hào)字
<strong>	定義加重語(yǔ)氣
<sub>>	定義下標(biāo)字
<sup>	定義上標(biāo)字
<ins>	定義插入字
<del>	定義刪除字
<abbr>	定義縮寫

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
<abbr title="etcetera">etc.</abbr>
<acronym title="World Wide Web">WWW</acronym>
<q>Build a future where people live in harmony with nature.</q>
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

鏈接

發(fā)送郵件：

<p>
這是另一個(gè)電子郵件鏈接：
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">發(fā)送郵件!</a>
</p>

mailto 發(fā)送人
subject 主題
在進(jìn)行抄送時(shí)纲辽，需要使用關(guān)鍵字：cc
在進(jìn)行密送時(shí)颜武，需要使用關(guān)鍵字：bcc

參數(shù)說(shuō)明：

參數(shù)	描述
mailto:name@email.com	郵件接收地址
cc=name@email.com	抄送地址
bcc=name@email.com	密件抄送地址
subject=subject text	郵件主題
body=body text	郵件內(nèi)容
?	第一個(gè)參數(shù)分隔符
&	其他參數(shù)分隔符

注：多個(gè)郵件地址用 ; 隔開，空格用 %20 代替拖吼。

頭部 head

<head> 元素包含了所有的頭部標(biāo)簽元素鳞上。在 <head>元素中你可以插入腳本（scripts）, 樣式文件（CSS），及各種meta信息吊档。

可以添加在頭部區(qū)域的元素標(biāo)簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

<style> 元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>

<body>
<h1>這是一個(gè)標(biāo)題</h1>
<p>這是一個(gè)段落篙议。</p>
</body>

</html>

HTML <meta> 元素
meta標(biāo)簽描述了一些基本的元數(shù)據(jù)。

META 元素通常用于指定網(wǎng)頁(yè)的描述趾断，關(guān)鍵詞拒名，文件的最后修改時(shí)間，作者芋酌，和其他元數(shù)據(jù)增显。

元數(shù)據(jù)可以使用于瀏覽器（如何顯示內(nèi)容或重新加載頁(yè)面），搜索引擎（關(guān)鍵詞）脐帝，或其他Web服務(wù)炸站。

<!--為搜索引擎定義關(guān)鍵詞-->
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

<!--為網(wǎng)頁(yè)定義描述內(nèi)容-->

<meta name="description" content="免費(fèi) Web & 編程 教程">

<!--定義網(wǎng)頁(yè)作者-->
<meta name="author" content="Runoob">

<!--每30秒鐘刷新當(dāng)前頁(yè)面-->:
<meta http-equiv="refresh" content="30">

HTML <script> 元素
<script>標(biāo)簽用于加載腳本文件如暖，如： JavaScript枷遂。

標(biāo)簽	描述
<head>	定義了文檔的信息
<title>	定義了文檔的標(biāo)題
<base>	定義了頁(yè)面鏈接標(biāo)簽的默認(rèn)鏈接地址
<link>	定義了一個(gè)文檔和外部資源之間的關(guān)系
<meta>	定義了HTML文檔中的元數(shù)據(jù)
<script>	定義了客戶端的腳本文件
<style>	定義了HTML文檔的樣式文件

HTML 樣式- CSS

CSS修飾標(biāo)簽的樣式，有 "內(nèi)聯(lián)" 和 "外引" 兩種方式笆制。

對(duì)于大部分標(biāo)簽匆篓，以上兩種方法均可，且修改父級(jí)標(biāo)簽，子級(jí)標(biāo)簽特性也會(huì)改變赴肚。但某些標(biāo)簽確無(wú)法通過(guò)修改父級(jí)標(biāo)簽來(lái)改變子級(jí)標(biāo)簽特性素跺，如a標(biāo)簽，修改其顏色特性誉券，必須直接修改 a 標(biāo)簽的特性才可指厌。
CSS 教程

內(nèi)聯(lián)樣式
顯示出如何改變段落的顏色和左外邊距

<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

背景顏色

<body style="background-color:yellow;">
<h2 style="background-color:red;">這是一個(gè)標(biāo)題</h2>
<p style="background-color:green;">這是一個(gè)段落。</p>
</body>

字體, 字體顏色踊跟，字體大小

<h1 style="font-family:verdana;">一個(gè)標(biāo)題</h1>
<p style="font-family:arial;color:red;font-size:20px;">一個(gè)段落踩验。</p>

標(biāo)簽	描述
<style>	定義文本樣式
<link>	定義資源引用地址

圖像

alt 丟失圖片顯示文字
width, height 尺寸

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
<img src="https://images2015.cnblogs.com/blog/1027162/201611/1027162-20161113162105295-307972897.png", width="80%">

<p>創(chuàng)建圖片鏈接:
<a >
<img  border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

標(biāo)簽	描述
<img>	定義圖像
<map>	定義圖像地圖
<area>	定義圖像地圖中的可點(diǎn)擊區(qū)域

表格

<table border="1" cellpadding="10">
  <caption>Monthly savings</caption>
  <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

如果不定義邊框?qū)傩裕砀駥⒉伙@示邊框商玫。有時(shí)這很有用箕憾，但是大多數(shù)時(shí)候，我們希望顯示邊框

跨行或跨列的表格單元格
 漂亮的表格

標(biāo)簽	描述
<table>	定義表格
<th>	定義表格的表頭
<tr>	定義表格的行
<td>	定義表格單元
<caption>	定義表格標(biāo)題
<colgroup>	定義表格列的組
<col>	定義用于表格列的屬性
<thead>	定義表格的頁(yè)眉
<tbody>	定義表格的主體
<tfoot>	定義表格的頁(yè)腳

區(qū)塊

HTML 可以通過(guò) <div> 和 <span>將元素組合起來(lái)拳昌。
<div>組合HTML元素的容器袭异， <span> 內(nèi)聯(lián)元素，可用作文本的容器

HTML <div> 元素
HTML <div> 元素是塊級(jí)元素炬藤，它可用于組合其他 HTML 元素的容器御铃。
HTML <span> 元素
HTML <span> 元素是內(nèi)聯(lián)元素，可用作文本的容器
<span> 元素也沒(méi)有特定的含義沈矿。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
</head>
<body>
<div style="color:#0000FF">
  <h3>這是一個(gè)在 div 元素中的標(biāo)題上真。</h3>
  <p>這是一個(gè)在 div 元素中的文本。</p>
</div>

<p>我的母親有 <span style="color:blue;font-weight:bold">藍(lán)色</span> 的眼睛羹膳，我得父親有 <span style="color:darkolivegreen;font-weight:bold">碧綠色</span> 的眼睛睡互。</p>

</body>
</html>

標(biāo)簽	描述
<div>	定義文檔區(qū)塊，塊級(jí)(block-level)
<span>	定義 span陵像，用來(lái)組合文檔中的行內(nèi)元素就珠。

布局

使用 <div> 元素的網(wǎng)頁(yè)布局
如何使用 <div> 元素添加布局。通過(guò)坐標(biāo)位置控制

使用 <table> 元素的網(wǎng)頁(yè)布局
如何使用 <table> 元素添加布局醒颖。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
</head>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的網(wǎng)頁(yè)標(biāo)題</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜單</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
內(nèi)容在這里</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版權(quán) ? runoob.com</div>

</div>
 
</body>
</html>

表單

文本域/密碼

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
Password: <input type="password" name="pwd"><br>
<input type="submit" value="提交">
</form>

按鈕

<form action="demo-form.php" method="get">
  <input type="radio" name="sex" value="Male"> Male<br>
  <input type="radio" name="sex" value="Female" checked="checked"> Female<br>
  <input type="submit" value="提交"><br>
  <input type="checkbox" name="vehicle[]" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle[]" value="Car" checked="checked"> I have a car<br>
  <input type="submit" value="提交">
</form>

表單發(fā)送郵件

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
</head>
<body>

<h3>發(fā)送郵件到 someone@example.com:</h3>

<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="發(fā)送">
<input type="reset" value="重置">
</form>

</body>
</html>

框架

<iframe src="demo_iframe.htm" width="200" height="200" frameborder="0"></iframe>
<iframe src="http://www.runoob.com">
  <p>您的瀏覽器不支持  iframe 標(biāo)簽妻怎。</p>
</iframe><br>
<iframe src="http://www.runoob.com"></iframe>

```

### 顏色：
<http://www.runoob.com/html/html-colornames.html>
<p style="background-color:rgb(255,255,0)">
顏色
<p>

最后編輯于：2018.07.29 17:13:28

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市图贸，隨后出現(xiàn)的幾起案子蹂季，更是在濱河造成了極大的恐慌冕广，老刑警劉巖疏日，帶你破解...
沈念sama閱讀 222,104評(píng)論 6贊 515
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異撒汉，居然都是意外死亡沟优，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 94,816評(píng)論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門睬辐，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)挠阁，“玉大人宾肺，你說(shuō)我怎么就攤上這事∏炙祝” “怎么了锨用？”我有些...
開封第一講書人閱讀 168,697評(píng)論 0贊 360
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)隘谣。經(jīng)常有香客問(wèn)我增拥，道長(zhǎng)，這世上最難降的妖魔是什么寻歧？我笑而不...
開封第一講書人閱讀 59,836評(píng)論 1贊 298
?港島之戀（遺憾婚禮）
正文為了忘掉前任掌栅，我火速辦了婚禮，結(jié)果婚禮上码泛，老公的妹妹穿的比我還像新娘猾封。我一直安慰自己，他們只是感情好噪珊，可當(dāng)我...
茶點(diǎn)故事閱讀 68,851評(píng)論 6贊 397
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開白布晌缘。她就那樣靜靜地躺著，像睡著了一般卿城。火紅的嫁衣襯著肌膚如雪枚钓。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 52,441評(píng)論 1贊 310
城市分裂傳說(shuō)
那天瑟押，我揣著相機(jī)與錄音搀捷，去河邊找鬼。笑死多望，一個(gè)胖子當(dāng)著我的面吹牛嫩舟，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播怀偷，決...
沈念sama閱讀 40,992評(píng)論 3贊 421
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼家厌，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了椎工？” 一聲冷哼從身側(cè)響起饭于，我...
開封第一講書人閱讀 39,899評(píng)論 0贊 276
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎维蒙，沒(méi)想到半個(gè)月后掰吕，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 46,457評(píng)論 1贊 318
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡颅痊，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 38,529評(píng)論 3贊 341
?白月光啟示錄
正文我和宋清朗相戀三年殖熟，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片斑响。...
茶點(diǎn)故事閱讀 40,664評(píng)論 1贊 352
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡菱属，死狀恐怖钳榨，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情纽门，我是刑警寧澤薛耻，帶...
沈念sama閱讀 36,346評(píng)論 5贊 350
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站赏陵，受9級(jí)特大地震影響昭卓，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜瘟滨，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 42,025評(píng)論 3贊 334
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一候醒、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧杂瘸，春花似錦倒淫、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,511評(píng)論 0贊 24
一樁弒父案敌土，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)。三九已至运翼，卻和暖如春返干，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背血淌。一陣腳步聲響...
開封第一講書人閱讀 33,611評(píng)論 1贊 272
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工矩欠，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人悠夯。一個(gè)月前我還...
沈念sama閱讀 49,081評(píng)論 3贊 377
代替公主和親
正文我出身青樓癌淮，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親沦补。傳聞我的和親對(duì)象是個(gè)殘疾皇子乳蓄，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,675評(píng)論 2贊 359

HTML

實(shí)例：

文本內(nèi)容：

鏈接

頭部 head

HTML 樣式- CSS

圖像

表格

區(qū)塊

布局

表單

框架

推薦閱讀更多精彩內(nèi)容