- A+
所属分类:Web前端
标签+元素
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: inline-block;