標簽+元素 1.標題標簽 段落標簽<h1> 一級標題 <h1><h2> 二級標題 <h2><h3> 三級標題 <h3><h4> 四級標題 <h4><h5> 五級標題 <h5><h6> 六級標題 <h6> 2.段落標簽 <p> 我是一個段落標簽 </p> //不換行 3.容器標簽 <div> 這是頭部 ...
1.標題標簽
段落標簽<h1> 一級標題 <h1>
<h2> 二級標題 <h2>
<h3> 三級標題 <h3>
<h4> 四級標題 <h4>
<h5> 五級標題 <h5>
<h6> 六級標題 <h6>
2.段落標簽
<p> 我是一個段落標簽 </p> //不換行
3.容器標簽
<div> 這是頭部 </div>
<span> 今日價格 </span>
4.圖片標簽
<img src="圖像URL" title="" alt=""/>
5.超鏈接
<a href="跳轉地址">鏈接</a>
6.列表標簽
<ul>
<li>我是第一條信息</li>
<li>我是第二條信息</li>
<li>我是第三條信息</li>
<li>我是第四條信息</li>
<li>我是第五條信息</li>
</ul>
7.媒體標簽
1.audio音頻播放
<audio autoplay="autoplay" controls="controls" loop="loop">
<source src="./source/horse.mp3" />
</audio>
2.video視頻播放
<video autoplay="autoplay" controls="controls" loop="loop">
<source src="./source/movie.ogv" />
</video>
3.註意:
-
autoplay是控制自動播放
-
controls是控制是否顯示播放控制項
-
loop是控制視頻或者音頻播放到最後一幀的時候是否從頭開始播放
8.塊元素+特點
h1-h6 div p ul li
特點:
1.總是從新行開始 2.高度,行高、外邊距以及內邊距都可以控制。
3.寬度黑認是容器的100%
4.可以容納內聯元素和其他塊元素。
9.行內元素+特點
span、a、img 、strong、i、u、s、
特點:
和相鄰行內元素在一行上。 高、寬無效,但水平方向的padding和margin可以設置,垂直方向的無效。預設寬度就是它本身內容的寬度。 行內元素只能容納文本或則其他行內元素。( a特殊)
只有左右邊距
1.對齊vertical-align (圖片旁邊的文字)
vertical-align:bottom;(底線對齊)
vertical-align:base;(基線對齊)
vertical-align:middle;(中線對齊)
vertical-align:top;(頂線對齊)
10.行內塊元素
img、 input、 td
1.和相鄰行內元素(行內塊〉在一行上,但是之間會有空白縫隙。
2.預設寬度就是它本身內容的寬度。 3.高度,行高、外邊距以及內邊距都可以控制。
11.快元素與行內元素標簽轉換
display: inline; /*塊級元素轉換為行內元素 */
display: block; /行內標簽轉換為塊級標簽/
12.行內元素轉換為行內塊元素
display