一、行标签inline
行标签 = 内联标签
特点:不独占一行,每个行标签元素并排排列,直到遇到父级边界换行
不支持宽高,内容文本撑开宽高,不支持上下外边距,但支持左右外边距,
会不正常显示上下内边距,不建议设置内边距
行标签常用于配合p标签实现富文本,富文本是指在一行文字中,文字形式不统一
1、a标签
a标签表示超链接,在网页中链接其他的地址,他有两个属性,href、target
herf超链接的跳转地址,target有四个值:默认为_self,指在当前页面打开链接内容,_blank指在新的窗口中打开当前链接,_top、_parent都是应用在框架中。
<a herf="地址" target="默认值">超链接显示的文字</a>
2、span标签
sapn标签没有具体的语义,同时设置多个span标签在遇到父级边界时才会换行,span标签常用于对p标签中的部分文字进行修改样式。
3、br标签
br标签表示换行,用于网页格式。
4、i标签
表示文字倾斜显示
5、b标签
表示文字加粗显示
6、sub标签
实现角标显示
<span>O<sub>2</sub></span>
可以在网页中输出氧气的化学符号
7、sup标签
实现上角标表示,表示指数形式
8、em、strong标签
作为html5的新标签,它可以替代i,b标签,与他们具有相同的属性,但是em和strong具有一定的搜索权重,可以被爬虫爬取到。
标签语义化的特点:在不借助css样式的情况下对代码结构一目了然,提升网页的SEO:搜索权重,更容易被爬虫获取。
二、块标签block
块标签特点:独占一行,默认宽度占满父级,默认高度为零,子级内容撑开高度
1、div标签
简单万能的盒子标签,也是html的重要标签,对网页区域进行划分。
2、h1-h6标题标签
h1-h6表示不同大小的标题标签,为了规范,每个网页只写一个h1标签,副标签h2不超过8个,只有h1-h8具有搜索权重,可以被爬虫获取。
3、p标签
段落标签,每个p标签都会自动换行,不会在同一行显示。
4、ul、ol
都与li标签联合使用,ul、ol的区别在于,ol是有序列表,ul无序列表,ol中的元素前面是有序数字
5、article标签
html5规范,通常article与其他几个块标签联合使用,实现一个网页的整体布局。
<article>
<nav>导航栏</nav>
<aside>侧边栏</aside>
<section>
主体内容
<h1>标题</h1>
<p>文本</p>
</section>
<footer>页脚</footer>
</article>
三、行内块标签inline-block
img标签
三个属性
src:图片的地址
alt:图片无法加载时的文字显示
title:鼠标悬浮图片时显示的文字
只给宽或高,图片大小会等比例变化
<img width="400px" src="i/y.jpg" alt="图片加载失败" title="这是一张图片">
四、行、块、行内块标签的转换
通过设置diasplay属性进行转换
display:block
display:inline
display:inline-block