小白學HTML5——壹 真香！
一.HTML的結構
1.1 html文檔主要包含兩個部分：頭區域和實體區域。
1.2 html的三個主要標簽：<html>、<head>、<body>。<html>標簽是用來標記html文檔，<head>是標簽標記頭部區域，<body>是標簽標記主體區域。
最基本的html代碼如下:
<html> <head> </head> <body> </body> </html>
二.HTML的語法
2.1 元素的屬性包含屬性名稱和屬性值，兩個部分，屬性與屬性值之間使用“=”鏈接，屬性與屬性之間使用空格鏈接。
例子：
<tag a1="v1" a2="v2"> 元素主體 </tag>
屬性值必須加上引號
屬性也可以沒有屬性值
2.2標簽可以嵌套但是不能交叉
2.3註釋文本的格式：<!--單行註釋-->
<!--
多行註釋-->
三.HTML標簽
3.1文本格式標簽
<title>...</title> 標識網頁標題
<hi>...</hi> 標識標題文本，i表示級數
<p>...</p>標識段落語言
<pre>...</pre>標識預定義文本
<blockquote>...</blockquote>標識引用文本
例子：
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <title>大標題</title> </head> <body> <h1>一級標題</h1> <p>在這裏我真的想說很多，但是我省略一萬字</p> <h1>第二個一級標簽標簽</h1> <p>同樣的</p> <h2>二級標簽</h2> <p>一萬字</p> </body> </html>
效果：
3.2字符格式標簽
<b>...</b>字體加粗
<i>...</i>斜體
<big>...</big>放大字體
<small>...</small>縮小字體
<sup>...</sup>上標文本
<sub>...</sub>下標語言
<cite>...</cite>顯示引用文本
例子：
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <title>標題</title> </head> <body> <h1>大標題</h1> <p>下面來看一下特效:</p> <p>斜體:<i>斜體</i></p> <p>加粗:<b>加粗</b></p> <p>放大:<big>放大</big></p> <p>縮小:<small>縮小</small></p> <p>上標:<sup>上標</sup></p> <p>下標:<sub>下標</sub></p> <p>引用文本:<cite>PHP是世界上最好的語言 ——無知者</cite></p> <p>我來嵌套一個斜體和加粗以及<i><b>斜體加粗</b></b></i></p> </body> </html>
效果：
3.3列表標簽
HTML中的列表結構有兩種：有序，無序。無序列表使用項目符號來標記項目順序，有序列表用編號來標記項目順序。
<ul>...</ul>標識無序列表
<ol>...</ol>標識有序列表
<li>...</li>標識列表項目
例子：
<html> <head> <meta http-equiv="content-type" content="text/html" charset="UTF-8"/> <title>標題</title> </head> <body> <h1>我們的商品有:</h1> <ul> <li>快樂水</li> <li>東北大辣皮</li> <li>emmm沒想好</li> </ul> </body> </html>
效果：
設計一個含有解釋的詞條：
<dl>...</dl>定義一個解釋的列表
<dt>...</dt>標識詞條
<dd>...</dd>解釋詞條
<html> <head> <meta http-equiv="content-type" content="text/html" charset="UTF-8"/> <title>標題</title> </head> <body> <h1>我們的商品有:</h1> <ul> <li>快樂水</li> <li>東北大辣皮</li> <li>emmm沒想好</li> </ul> <h1>其實我還想解釋一下我們的商品</h1> <dl> <dt>快樂水</dt> <dd>可口可樂</dd> <dt>東北大辣皮</dt> <dd>垃圾食品</dd> </dl> </body> </html>
效果：
3.4超鏈接
<a href=url>...</a>
例子：
<html> <head> <meta http-equiv="content-type" content="text/html" charset="UTF-8"/> <body> <a href="https://www.baidu.com/">百度直通車</a> </body> </head> </html>
3.5多媒體標簽
<img/>嵌入圖像
<embed>...</embed>嵌入多媒體
<object>...</object>嵌入多媒體
3.6表格標簽
<table>...</table>定義表格結構域
<caption>...</caption>表格標題
<th>...</th>定義表頭
<tr>...</tr>定義行
<td>...</td>定義表格單元格
例子：
<html> <head> <meta http-equiv="content-type" content="text/html" charset="UTF-8"/> <title>標題</title> </head> <body> <table summary="我就是想要一個表格"> <caption>表格的標題</caption> <tr> <td>中國</td> <td>美國</td> <td>英國</td> </tr> <tr> <td>韓國</td> <td>日本</td> <td>德國</td> </tr> </table> </body> </html>
結果
3.7單表標簽
<form>...</form>定義單表結構
<input/>:定義文本域，按鈕和復選框
<textarea>...</textare>定義多行文本框
<select>...</select>定義下拉列表
<option>...</option>定義下拉列表中的選擇項目
列子：
<html> <head> <meta http-equiv="content-type" content="text/html" charset="UTF-8"/> </head> <body> <form id="from1" name="form1" method="post" action=""> <p>單行文本域<input type="text" name="textfield" id="textfield"/></p> <p>密碼域<input type="password" name="passwordfield" id="passwordfield"></p> <p>多行文本域<textarea name="textarefield" id="textarefield"></textarea></p> <p>復選框 復選框1<input name="checkbox1" type="checkbox" value=""> 復選框2<input name="checkbox2" type="checkbox" value=""> </p> <p>單選按鈕 <input name="radio1" type="radio" value=""/>按鈕1 <input name="radio2" type="radio" value=""/>按鈕2 </p> <p>下拉菜單 <select name="selectlist"> <option value="1">選項1</option> <option value="2">選項2</option> <option value="3">選項3</option> </select> </p> </form> </body> </html>
結果：
小白學HTML5——壹 真香！