HTML5入門（一）—— 基本標簽&表格
阿新 • • 發佈：2017-06-18
詳細信息 樣式設置 定位 content 瀏覽器中 解釋 加載 郵箱 常用
一、HTML簡介
超文本標簽語言，即網頁的源碼。而瀏覽器就是翻譯解釋HTML源碼的工具。
二、HTML Head部分<1>Head的作用
用於描述網頁的一些關鍵信息。比如網頁的配置、設置、關鍵字等等。這些信息大多在瀏覽器是看不到的，但是對網頁的解析至關重要。
<2>meta標簽
①用於描述網頁的各種信息。網頁編碼格式UTF-8:萬國碼，兼容各種語言的編碼，最常用！
②設置網頁的關鍵字，有助於搜索引擎的搜索。name="keywords" 表示網頁的關鍵字；content=" " 表示關鍵字的詳細信息，多個關鍵字用英文逗號分隔；
③設置網頁的描述信息，搜索引擎搜索時標題下面的一段文字。name="description" 表示網頁的描述信息；content=" " 表示描述信息的詳細內容。
<3>link標簽
鏈接網頁的小圖標。rel="icon" 表示當前link的作用是鏈接網頁圖標；href="img/icon.jpg"中 href表示圖標的地址。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <metaname="keywords" content="傑瑞教育,H5周末班,網頁開發" /> <meta name="description" content="這是我在傑瑞教育開發的第一個網頁！" /> <title>這是我的第一個網頁</title> <link rel="icon" href="img/icon.jpg" /> </head> <body> 浩哥真帥！ </body> </html>
三、HTML標簽的分類
1、塊級標簽：顯示為塊狀，獨占一行，自動換行。
2、行級標簽：在一行中，從左往右依次排列，不會自動換行。 【塊級標簽與行級標簽的區別】 1.塊級標簽：默認寬度100%（占滿一行）； 塊級標簽自動換行（獨占一行，右邊不能有任何東西）； 塊級標簽可以使用CSS設置高度、寬度！ 2.行級標簽：默認寬度由內容撐開（內容多寬、寬度就占多寬）； 行級標簽不會自動換行（一行當中從左往右依次排開）； 行級標簽的高度寬度不能設置！ （一） 基於布局的塊級標簽 <1> h標簽 標題標簽，顯示為黑體加粗，共分為6種：h1~h6: h1最大，h6最小。 <2> hr標簽 表示一條水平線 <hr /><h1>這是h1標簽</h1> <h2>這是h2標簽</h2> <h3>這是h3標簽</h3> <h4>這是h4標簽</h4> <h5>這是h5標簽</h5> <h6>這是h6標簽</h6> <hr/><3> P標簽 表示段落標簽。相當於我們文章中的一段文字。 <br/> 換行符。【註意】在代碼中，直接回車換行，瀏覽器並不認識。必須使用<br/>告訴瀏覽器這裏要斷行。 <4> pre標簽 預格式標簽。會保留代碼中的空格、回車等符號，直接在瀏覽器顯示。pre標簽常用於在網頁中顯示代碼，保留代碼格式。
<pre> if(entity != null){ tring result = EntityUtils.toString(entity,"UTF-8");//HttpEntity轉為字符串類型 jsonObject = JSONObject.fromObject(result);//字符串類型轉為JSON類型 } </pre><5> blockquote 塊引用標簽 表明一段話是從其他網站引用的。其重要屬性：cite=" " 表示這段話的引用來源，常放一個網站地址。但是瀏覽器顯示並沒有任何區別。 <6> 無序列表 ul 無序列表用<ul>表示，列表中的每一個列表項用<li>表示。
<ul> <li>這是無序列表第一項</li> <li>這是無序列表第二項</li> <li>這是無序列表第三項</li> <li>這是無序列表第四項</li> </ul><7> 有序列表ol 有序列表用<ol>標簽，標簽中的每個列表項用<li>表示。
<ol> <li>這是有序列表第一項</li> <li>這是有序列表第二項</li> <li>這是有序列表第三項</li> <li>這是有序列表第四項</li> </ol><8> 定義列表dl 定義列表<dl>,裏面有一個標題<dt>,有多個描述項<dd>。<dt>頂格 <dd>自動縮進。
<dl> <dt>這是dl列表的標題</dt> <dd>這是dl列表的描述項1</dd> <dd>這是dl列表的描述項2</dd> <dd>這是dl列表的描述項</dd> </dl><9> 圖片組合標簽<figure> ①圖片<img/>後續講解；②圖片標題：<figcaption> </figcaption>
<figure> <img src="img/icon.jpg"/> <figcaption>圖片的描述標題</figcaption> </figure><10> 分區標簽<div> (最常用的標簽) div標簽需要配合使用CSS，現在並沒有什麽用； div標簽沒有任何特殊的作用，僅僅起到一個包裹內容的作用 常用於網頁中劃分區塊； div標簽可以包裹任何內容，需配合CSS一起使用。
<div style=" width:500px; height:100px; background:greenyellow ;"> 這是div裏面的文字！ <p>1234567890</p> </div>
（二）基本的行級標簽
<1> span（文本）標簽
span標簽特點：類似塊級div ①只是包裹作用，沒有其他任何作用； ②作用於div類似，需要配合CSS使用，只不過div是塊級標簽，span是行級標簽。浩哥真<span style="color: red;font-size: 48px;">帥</span>！！！ <br/> <br/> <br/><2> em（強調）/strong（強調）、i（傾斜）/b（加粗） ① em和i都能傾斜。strong和b都能加粗！但是i和b僅僅只是傾斜和加粗，而strong和em多了強調的語義。 ② em和strong都表示強調，但是strong強調的級別更高。 【註意】 1.強調的目的：讓搜索引擎知道網頁重點強調的內容!便於搜索引擎顯示。 2.strong和em都可以多層嵌套，表示強調程度的遞增
<em>這是em標簽</em><br/> <strong>strong標簽</strong><br/> <b>b 標簽</b><br/> <i>i 標簽</i><br/> <u>這是 u標簽</u><br/><br/><3> 引用標簽 q標簽（quote）：表示短引用。 cite屬性：用於聲明引用的來源。 <blockquote>用於引用一段內容</blockquote> <q>用於引用一句話</q> <cite>常用於引用作品名、書畫名等</cite> 相同點：三個引用標簽，都用cite屬性表示引用來源 不同點：①引用內容不同。blockquote->一段話; q->一句話 ; cite->作品名。 ②顯示默認效果不同。blockquote->默認整段向右縮進;q->默認加引號; cite->默認傾斜。
<q cite="http://www.jianghaozhenshuai.com">我是q標簽引用</q><br/> <blockquote cite="">我是blockquote的引用</blockquote><br/> <cite cite="">這是cite標簽引用！</cite><br/><br/><4> 字體大小 small：將字體縮小一號； big：將字體放大一號。 【註意】 ①small和big可多層嵌套，直到字體到達最大最小為止；②已淘汰，不建議使用。 <5> img 圖片標簽 ① src屬性：表示圖片的路徑 [圖片路徑的合法方式] 相對路徑： src=>“source” ① 圖片與當前文檔在同一層文件夾：直接寫圖片名； ② 圖片在當前文檔的下一層文件夾：文件夾名/圖片名； ③ 圖片在當前文檔的上一層文件夾：../圖片名（../表示後退一層）； 【註意】圖片必須包含在項目裏，不能訪問項目外的圖片。 ②height：圖片高度 width:圖片寬度 ③title：圖片的標題 即鼠標指上後看到的提示文字。 ④alt：圖片無法加載時顯示的文字。 ⑤align：圖片周圍的文字相對於圖片如何對齊。可選值： top、 center、 bottom
<img src="img/icon.jpg" style width="200px" height="200px"></img> <img src="https://www.baidu.com/img/bd_logo1.png"></img> <img src="file：///E:/bd_logo1.jpg"></img><br/><br /> <img src="bd_logo1.png" /> <img src="img/icon.jpg" title="考拉" /> <img src="../icon.jpg" /> <img src="../img/bd_logo1.png"/><br/><br /> <img src="../bd_logo1.png" alt="圖片無法加載顯示"/> <br /> <img src="../icon.jpg" align="top"/> 123456 <br /> <br /><6> 超鏈接 a ①href屬性：表示超鏈接需要跳轉的頁面。 a.可以寫網絡地址； b.可以打開本地文件：采用相對路徑確定文件地址，與img標簽確定方式相同。 ② title屬性：鼠標指上後顯示的文字。 ③ target屬性：設置新頁面打開後的窗口位置 。可選值：_self自身頁面打開（默認） _blank新窗口打開。 【超鏈接的特殊應用】 1.功能性鏈接 mailto:// 點擊鏈接給指定郵箱發送郵件 tencent：//message/?uin=1257943317 點擊與指定QQ聊天 ftp：//使用ftp協議進行文件的上傳下載。 2、錨鏈接 本頁面錨鏈接 ① 在頁面的指定位置設置一個錨點，用name屬性表示錨點的名字； ② 將超鏈接的href屬性，設置為#加錨點名字。 頁面間錨鏈接 ① 在新頁面的指定位置設置一個錨點，用name屬性表示錨點的名字； ② 將超鏈接的href屬性，設置為“新頁面地址#加錨點名字”。
<a href="http://www.baidu.com" target="_blank">這是一個超鏈接01</a><br/> <a href="01-HTML-Head部分.html" target="_bank">這是一個超鏈接02</a><blr /> <a href="../text000.html" title="測試網站" target="_blank">外鏈接</a><br/> <a href="mailto：[email protected]" title="我的郵件" target="_blank">點擊給指定郵件發送郵件</a> <a name="#center"></a> <div style="background-color: greenyellow;height:800px ;"></div> <a href="#top">點擊返回頂部！</a> <a href="#center">點擊跳到中間!</a> <a href="../text000.html#one" target="_blank">點擊新頁面第一部分</a> <a href="../text000.html#two" target="_blank">點擊新頁面第二部分</a> <a href="../text000.html#three" target="_blank" >點擊新頁面第三部分</a>
四、W3C規範
1、W3C：萬維網聯盟，負責制定和維護Web行業開發標準。
2、要求的規範： ① 兩個分離： 內容與表現分離（HTML與CSS分離） ；內容與行為分離（HTML與JavaScript分離開）； ② HTML語言要遵循語義化！ ③ 關於代碼書寫的規範： HTML中的標簽與屬性必須要小寫； HTML中的標簽必須閉合 <p></p> <img/>； 屬性值必須用引號引起來 <img src="屬性值"/>； HTML標簽必須正確嵌套。（不能交叉、塊級標簽可以包裹行級，行級標簽不能包裹塊級）五、HTML表格
表格用Table表示，表格中的每一行用tr表示，一行中的每一列用td表示； th表示的是表頭，表頭中的文字默認加粗居中；th要放在tr中，相當於替換掉td。
<1> table常用屬性 1、boder：給表格加邊框，並且給整個table加外邊框，當增大boder的值時，td上的值不變化，只有最外層大邊框變寬 2、cellspaceing:單元格 與單元格之間的距離。 cellspaceing="0":單元格 與單元格之間沒有距離。但是邊框線的寬度依然是兩條線的寬度。 【註意】表格邊框合並的CSS寫法：style="border-collapse: collapse；" 這條css與cellspaceing="0"的區別： 後者僅是將單元格之間的屬性調整為0，實際上單元格之間依然還是兩條線； 前者是將表格相鄰的兩條邊框合並處理，只有一條線存在。（一旦邊框合並，cellspacing失效） 3、cellpadding="20" ：單元格中的文字與單元格邊框的距離。 4、 height：表格的高度 width：表格的寬度 使用表格寬高屬性設置大小： <table height="400" width="500"></table> 使用CSS樣式設置大小： <table style="height:400px;width:500px;"></table> 5、align：設置表格在瀏覽器中位置。不建議使用了。可選值：left center right 6、bgcolor:背景色； bordercolor:邊框顏色； background：背景圖。當背景色跟背景圖同時存在時，背景圖會覆蓋背景色。 <2> tr與td常用屬性 1、width、 height； 2、bgcolor="red"：單元格背景顏色； 3、align：設置單元格中的文字，水平對齊方式；left、center、right valign：設置單元格中的文字，垂直對齊方式；top、middle、bottom 4、nowrap="nowrap"：當單元格文字過多時，設置單元格文字不斷行顯示，但是，會把表格的寬度增大！ <3> 表格的跨行與跨列 1、跨列：在td上使用屬性colspan="n"進行跨列 2、跨行：在td上使用屬性rowspan="n"進行跨行 參考代碼：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML表格</title> </head> <body> <table style="width: 500px;height: 100px;border-collapse: collapse;" border="1" bordercolor="red" bgcolor="aquamarine" align="center"> <tr bgcolor="pink"> <th nowrap="nowrap">標題一</th> <th>標題二</th> <th>標題三</th> </tr> <tr style="color: red;" > <td rowspan="2">1-1</td> <td>1-2</td> <td>1-3</td> </tr> <tr> <td colspan="2">2-2</td> </table> </body> </html>
六、後記
這是小女第一次發微博，寫此後記紀念一下。通過這兩堂課跟HTML的接觸，我發現自己還是很喜歡她的，只是我沒有與生俱來的編碼天分，一切還在摸索階段，希望可以通過後天的勤奮努力稱為編碼界中的佼佼者。加油↖(^ω^)↗
HTML5入門（一）—— 基本標簽&表格