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