第二章、行标签、块标签与行内块标签

目录

一、行标签inline

1、a标签

2、span标签

3、br标签

4、i标签

5、b标签

6、sub标签

7、sup标签

8、em、strong标签

二、块标签block

1、div标签 

2、h1-h6标题标签

3、p标签

4、ul、ol

 5、article标签

三、行内块标签inline-block

img标签

四、行、块、行内块标签的转换

---

一、行标签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