HTML基礎-02

<header>網頁頭部              <hgroup>一個標題組

<main>網頁主體                 <article>網頁中的一塊內容

<footer>網頁底部               <section>一個區塊

<nav>導航                          <aside>輔助信息

以上均爲塊元素，獨佔一行。

<q>短引用                      <blockquote>長引用

標題與段落

標題：h1-h6等級（從小到大），默認加粗，具備換行符，不能嵌套

　　h1+h2+h3：並行顯示                 h1>h2>h3：嵌套顯示

　　h1{標題}*10+tab鍵=建立10個<h1>標題</h1>

　　h1{$}*10+tab鍵=1,2,3.....10個標籤

段落：<p>...</p>

字符實體

有些東西在瀏覽器中打不開，須要使用字符實體

&nbsp； 空格

&emsp;  全角空格

&copy;    版權符合

&yen;      人民幣符號￥

&gt;        大於號>

&lt;          小於號<

快捷符號

+：標籤並行關係

*：建立多個標籤，div*5+tap

{}:設置內容

（）：對內部的內容，（tr>td*4）*5

[]:設置屬性，div[id=demo class]

@:設置$符號的起始位置

$:設置起始位置，div{$@4}*5+tap鍵=4,5,6,7,8

文本修飾標籤

強調：<strong>  </strong>(加粗)

　　　<em>      </em>(斜體)

<i>  </i>：斜體；<b>   </b>：加粗

區別：1.寫法和展現效果有區別，一個加粗，一個斜體

　　　2.strong的強調性更強，em稍弱

上標/下標：^上標 /////_下標

 刪除文本，插入文本：<del>  </del>/////<ins>  </ins>

　　　　　　　　　　二者配合使用

圖片標籤和屬性

<img src="引入圖片地址" alt="當圖片加載失敗時，顯示的提示文字" title=「 提示文字（鼠標放在圖片上出現的提示）」

圖片格式：

　　　　jpg(jpeg):支持的顏色豐富，不支持透明效果，適合顯示圖片

　　　　GIF：支持的顏色較少，支持簡單透明，支持動圖

　　　　png:支持顏色豐富，支持複雜透明

　　　　webp:google專門爲頁面設計一種圖片格式，支持顏色豐富、支持複雜透明、支持動圖，而且佔用內存特別小，集各類優勢，兼容性差

　　　　經過base64編碼的圖片（背景圖片必須快速出現），base64能夠將圖片轉換成字符串，直接在網頁中使用。

注意：效果一致，用小的；效果不一致，用效果好的；

音頻標籤

<aduio controls autoplay src='  '>   </aduio>

controls:用來設置用戶是否控制音頻播放 ；  沒有屬性值，容許用戶播放就加（有音頻），不容許就不加（無音頻）

autoplay：設置音樂是否自動播放，默認不會

例：<aduio controls autoplay loop(循環播放）>  

　　　　對不起，瀏覽器不支持此標籤

　　　　<source src='#'>

　　 </aduio>

視頻標籤

<video controls src='#' width=' '>  </video>

<embed width=' 'height=' 'src=' 'type='video/mp4'>

超連接

用於引入文件的地址路徑，相對路徑，絕對路徑

<a href=' # '>  </a>

target:改變連接的打開方式

　　　　_self：在當前頁面打開

　　　　_blank：新窗口打開（慎用）

　　<base target='_blank'>:改變標籤的默認行爲

錨點

給標籤設置name或id屬性，經過<a href='#'>連接錨地am，連接到當前頁面中的指定位置，或其餘頁面的指定位置。

例：當前頁面內錨點：

　　　　<h1 id='top'>頂部</h1>

　　　　<a href='#top’>返回頂部</a>

　　其餘頁面：

　　　　跳轉<a href='./地址#middle'>進入另外一個頁面的中間位置</a>

　　　　中間位置設置錨點：<p  id=‘middle’>

列表

無序列表：<ul>  </ul>，無前後之分；列表項：<li>  </li>

ul/li必須同時出現，不能單獨書寫。嵌套一個/多個li，ul只能放li標籤，並不能放其餘內容

li：type屬性修改：disc:默認實心圓；

　　　　　　　　circle:空心圓；

　　　　　　　　square:實心方塊；

有序列表：<ol>  </ol>  <li>  </li>

li：type屬性設置項目符號

　　　　　　　　A大寫英文字母

　　　　　　　　a小寫英文字母

　　　　　　　　1阿拉伯數字

　　　　　　　　I大寫羅馬數字

　　　　　　　　i小寫羅馬數字

　　start:設置列表符號從第幾個開始排列，屬性值只能是阿拉伯數字

　　reversed：設置列表符號的倒序，會會出現負號。

例：

<ol type=’A’start=’3’reversed>

 

　　<li>

 

　　　　ddwws

 

　　</li>

 

</ol>

定義列表

給文本添加定義列表語義

dl:定義列表  只能嵌套（一個、多個）dd/dt，二者爲同一級標籤，dd是dt的解釋、定義、說明

　　dt:定義標題  容器級  　　dd:定義描述  容器級，跟在dt後面，解釋dt

例：<dl>

<dt>速度</dt>

<dd>速度就是路程除以時間</dd>

</dl>