切图仔基础篇————块级元素与行级元素

205 阅读2分钟

前言:

麻了,看到三年前的文章,累了,随便吧。

刚开始可能会基础一些,后面更新的会慢慢的变得深入和复杂。(其实前端也没啥复杂的玩意。。。emmmm....)

核心内容:

标签分类:

H5的标签,按照其属性的不同,可以划分为两类:行内标签和块标签(也有人叫内联元素和块状元素,这些都无所谓,能区分即可)

  • 行内标签:
1,行内标签无法设置宽高

2,行内标签不会独占一行,会连续占满一行,直到换行

3,行内元素不能包含块级元素,只能容纳文本或者其他行内元素
  • 块状元素:
1,块状标签可以设置宽高度

2,块元素独占一行

3,块属性标签的宽度假如不做设置,会直接默认为父元素宽度的100%

4,块级元素可以包含行内元素和块级元素,还可以容纳内联元素和其他元素
  • 行内块元素:
1,结合的行内和块级的优点:能够设置宽高,并且在一行内独立显示

转化方式:

  • 块级标签转换为行内标签:
display:inline;
  • 行内标签转换为块级标签:
display:block;
  • 转换为行内块标签:
display:inline-block;

常用标签举例:

行内标签:

<a>定义超链接

<b>字体加粗

<span>定义在文档中的行内元素

<img>向网页中插入题图像

<input>输入框

<small>小号字体效果

<br>换行

<big>字体加大加粗

<strong>强调的语气

<select>创建单选或多选菜单

<textarea>定义文本域,多行的文本输入控件

块级元素:

<div>定义文档中的分区或节

<h1>定义最大的标题

<h2>定义副标题

<h3>定义标题

<h4>定义标题

<h5>定义标题

<h6>定义最小的标题

<ul>定义无序列表

<ol>定义有序列表

<li>定义有序列表或无序列表的列表项目

<dl>定义自定义列表

<dd>定义自定义列表中的条目

<dt>定义自定义列表中的项目

<hr>创建一条水平线

<p>定义段落

<table>定义表格

<thead>标签定义表格的表头

<th>定义表头单元格

<tr>定义表格中的行

<td>表格中的标准单元格

参考链接:www.cnblogs.com/keyi/p/5853…

代码实例:还未买VPN,无法登陆到github,所以暂时先放置,到时候再改

结语:

以上仅仅是第一篇,其中有一些可能不太全.