Html學(xué)習(xí)筆記一
<html>
? ? <head>?? ??? ?? ? <!--標(biāo)題-->
?? ?? ? <title>html標(biāo)簽筆記<title>
?? ??? ?<style>? ? ? ? ? ? ?
?? ??? ??? ?span{?? ??? ??? ??? ?
????? ??? ??? ??color:blue;
?? ??? ??? ??? ?? ??}
?? ??? ?</style>
? ? </head>
? ??<body>?? ??? ?? ? <!--文章-->?
?? ??? ?<h1>h1-h6標(biāo)題標(biāo)簽</h1>??<!--文章標(biāo)題-->
?? ?? ? <p>?? ??? ??? ??? ?<!--段落，前面留白-->
?? ??? ?? ? <em>?斜體</em> ，<strong>粗體</strong>，<span>設(shè)樣式</span>
?? ??? ??? ?<q>莊生曉夢(mèng)迷蝴蝶。望帝春心托杜鵑。</q>?
?? ??? ??? ?<blockquote>?這是一段很長(zhǎng)的文本引用<br/> </blockquote>
? ? ??? </p><hr/>?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??<!--添加水平橫線，跟br一樣也是空標(biāo)簽-->? ??? ?
?? ??? ?<p>?
?? ??? ??? ??暗淡輕黃體性柔，<br/>情疏跡遠(yuǎn)只香留。<br/>?? ??? ??? ?? ? <!--?換行標(biāo)簽，即回車-->
?? ??? ?? ? 作者： ? ?安琪拉?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??<!--?表時(shí)空格 ，注意直接鍵入空格回車沒(méi)用-->
?? ??? ??? ?<address>北京市西城區(qū)德外大街10號(hào)</address>?? ??? ??? ??<!--地址（電子郵件等）信息，瀏覽器默認(rèn)斜體-->
?? ??? ??? ?<code>代碼語(yǔ)言</code>? ? ? ???? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?? <!--文本是代碼，可以使用code標(biāo)簽，如果是多行代碼，可以使用<pre>標(biāo)簽，會(huì)保留直接鍵入的空格和換行符-->
?? ??? ?</p>
?? ?? ? <p>
?? ??? ??? ?? ? <div>?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?<!--div標(biāo)簽劃分出獨(dú)立的邏輯部分。 使邏輯更加清晰，無(wú)顯示-->
?? ??? ??? ?? ? <ul><li>?無(wú)序標(biāo)簽</li></ul>?? ??? ??? ?? ? ? ?<!--ul-li在網(wǎng)頁(yè)中的默認(rèn)樣式一般為：每項(xiàng)li前都自帶一個(gè)圓點(diǎn)-->
?? ??? ??? ?? ?<ol><li>?有序標(biāo)簽</li></ol>?? ??? ??? ?? ? <!-- 每項(xiàng)<li>前都自帶一個(gè)序號(hào)，序號(hào)默認(rèn)從1開始-->
?? ??? ??? ?? ? </div>? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
?? ??? ??? ????<div ?id="版塊名稱">…</div> ??? ?? ?<!--可以為這一個(gè)獨(dú)立的邏輯部分設(shè)置一個(gè)名稱，用id屬性來(lái)為<div>提供唯一的名稱-->
?? ??? ??? ?? ? <table>?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ????<!-- 創(chuàng)建表格的四個(gè)元素：table、tbody、tr、th、td-->
?? ??? ??? <!--?摘要<table summary="表格簡(jiǎn)介文本"> 增加表格的可讀性(語(yǔ)義化)，使搜索引擎更好的讀懂表格內(nèi)容-->
?? ??? ??? ??? ??? ?<caption>標(biāo)題文本</caption>?? ?? ?<!--?用以描述表格內(nèi)容，標(biāo)題的顯示位置：表格上方。-->
?? ??? ??? ??? ??? ?? ? <tbody>?? ??? ??? ??? ??? ??? ??? ??? ??<!--用tbody分段，table可以按結(jié)構(gòu)一塊塊的顯示，不在等整個(gè)表格加載完后顯示。-->
?? ??? ??? ??? ??? ??? ??? ?? ? <tr>?? ??? ??? ??? ??? ??? ??? ?? ? <!--?tr 表格的一行，所以有幾對(duì)tr 表格就有幾行。-->
?? ??? ??? ??? ??? ??? ??? ?? ? ?? ?<th>班級(jí)</th>?? ??? ?? ? <!--?th 表格的頭部的一個(gè)單元格，表格表頭。-->
?? ??? ??? ??? ??? ??? ??? ?? ? ?? ?<th>人數(shù)</th>
?? ??? ??? ??? ??? ??? ??? ?? ? </tr>
?? ??? ??? ??? ??? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ??? ??? ?? ? ?? ?<td>一班</td>?? ??? ??? ?? <!-- 表格的一個(gè)單元格，一行中包含幾對(duì)<td>...</td>，說(shuō)明一行中就有幾列。-->
?? ??? ??? ??? ??? ??? ??? ?? ? ?? ?<td>50</td>
?? ??? ??? ??? ??? ??? ??? ??? ?</tr>
?? ??? ??? ??? ??? ??? ?</tbody>
?? ??? ??? ?? ? </table>
?? ??? ??? ??? ?<a href="目標(biāo)網(wǎng)址" title="鼠標(biāo)滑過(guò)顯示的文本">? ?鏈接顯示的文本?</a>? <!--重要！超鏈接，也可以是郵件地址-->
?? ??? ??? ?? ? <!--在網(wǎng)址后面加target="_blank"，表在新的瀏覽器窗口中打開-->
?? ??? ??? ??? ?<a href="mailto:?yy@imooc.com??subject="郵件主題。" &body="郵件內(nèi)容">顯示文本</a>
?? ??? ??? ?<!--注意：如果mailto后面同時(shí)有多個(gè)參數(shù)的話，第一個(gè)參數(shù)必須以“?”開頭，后面的參數(shù)每一個(gè)都以“&”分隔。-->
?? ??? ?? ? <!--插入圖片-->
?? ??? ?? ? <img src="圖片地址"> alt="圖片下載失敗時(shí)的替換文本"?title="鼠標(biāo)滑過(guò)圖片時(shí)顯示的文本"</img>
?? ?? ? </p>
? ? </body>
?? ?
</html>
<!--瀏覽器中<em> 默認(rèn)用斜體表示，<strong> 用粗體表示， <span>標(biāo)簽沒(méi)有語(yǔ)義，作用就是為了設(shè)置單獨(dú)的樣式用的。
<q>語(yǔ)義是引用別人的話，自動(dòng)添雙引號(hào)，對(duì)搜索引擎更友好?，<blockquote>是對(duì)長(zhǎng)文本的引用-->
