接触前端有一段时间了,期间也学会了很多元素。现在我带大家了解下最基本的块元素与行内元素。
块元素:
<div 盒子标签>
<p>段落标签</p>
<ul 无序列表>
<li>加li使用</li>
</ul>
<ol 有序列表>
<li>加li使用</li>
</ol>
<dl 自定义列表>
<dt>放图片</dt>
<dd>放内容 放文字</dd>
</dl>
<hr 分割线>
<h1>标题标签</h1>....<h6> h1最大 h6最小 </h6>
</div>
List-style :none; 是 列表无样式
li {
list-style: none;
}
这是把li标签的样式去掉了。
其特点是 独占一行 可设置宽高。
行内元素:
<span>标签</span>
<b>加粗</b> <strong>加粗</strong>
<i>倾斜</i> <em>倾斜</em>
<s>删除标签</s> <del>删除标签</del>
<u>下划线</u> <ins>下划线</ins>
<br>换行 <sub>下标文本</sub> <sup>上标文本</sup>
<a href="">超链接</a>
<img src="" alt="" title="">
Span 是没有什么特殊效果的,在标签里面写文字即可
Br是换行标签,意思就是换下一行来写东西。
你好<sub>你好</sub>
A标签 是超链接标签,效果就是点击后可以跳转到下一个界面。
Img标签是用来添加图片的,src的意思是图片所在的路径,alt是图片没有显示所出现的代替性文字,title是鼠标滑过图片时的提示文字信息。
其行内元素的特点是:排成一排 不可设置宽高。
display: inline;是转行内元素。
display: block;是转块元素。
display: inline-block;是行内块元素。