##HTML行内块元素好迷啊!!

一:body里面分为两类标签:块级标签和内联标签。

  1、块级标签:<p><h1><table><ol><ul><form><div>

  2、内联标签:<a><input><img><sub><sup><textarea><span>

二:块级标签元素的特点
  ① 总是在新行上开始;
  ② 高度,行高以及外边距和内边距都可控制;
  ③ 宽度缺省是它的容器的100%,除非设定一个宽度。
  ④ 它可以容纳内联元素和其他块元素

三:内联标签元素的特点
  ① 和其他元素都在一行上;
  ② 高,行高及外边距和内边距不可改变;
  ③ 宽度就是它的文字或图片的宽度,不可改变
  ④ 内联元素只能容纳文本或者其他内联元素
四:对行内元素,需要注意如下 
  设置宽度width 无效。
  设置高度height 无效,可以通过line-height来设置。
  设置margin 只有左右margin有效,上下无效。
  设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。

五:行内元素列表:

  <a>标签可定义锚

  <abbr>表示一个缩写形式

  <acronym>定义只取首字母缩写

  <b>字体加粗

  <bdo>可覆盖默认的文本方向

  <big>大号字体加粗

  <br>换行

  <cite>引用进行定义

  <code>定义计算机代码文本

  <dfn>定义一个定义项目

  <em>定义为强调的内容

  <i>斜体文本效果

  <img>向网页中嵌入一幅图像<input>输入框

  <kbd>定义键盘文本

  <label>标签为

  <input> 元素定义标注(标记)

  <q>定义短的引用

  <samp>定义样本文本

  <select>创建单选或多选菜单<small>呈现小号字体效果

  <span>组合文档中的行内元素

  <strong>语气更强的强调的内容

  <sub>定义下标文本

  <sup>定义上标文本

  <textarea>多行的文本输入控件

  <tt>打字机或者等宽的文本效果

  <var>定义变量

块级元素列表:

  <address>定义地址

  <caption>定义表格标题

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

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

  <dl>定义列表

  <dt>定义列表中的项目

  <fieldset>定义一个框架集

  <form>创建 HTML 表单

  <h1>定义最大的标题

  <h2>定义副标题

  <h3>定义标题

  <h4>定义标题

  <h5>定义标题

  <h6>定义最小的标题

  <hr>创建一条水平线

  <legend>元素为 

  <fieldset>元素定义标题

  <li>标签定义列表项目

  <noframes>为那些不支持框架的浏览器显示文本,于 frameset 元素内部

  <noscript>定义在脚本未被执行时的替代内容

  <ol>定义有序列表

  <ul>定义无序列表

  <p>标签定义段落

  <pre>定义预格式化的文本

  <table>标签定义 HTML 表格

  <tbody>标签表格主体(正文)

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

  <tfoot>定义表格的页脚(脚注或表注)

  <th>定义表头单元格

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

  <tr>定义表格中的行

扩展资料:

一,从概念的角度解释块级元素和行内元素

  1. 块级元素,一般都是从新行开始,它可以容纳行内元素和其他块元素,常见块级元素比如div/p等。“form”这个快元素比较特殊,他只能来容纳其他块元素

  2. 行内元素:也叫做内联元素,一般都是语义级别的基本元素,内联元素已办只能容纳文本或者其他内联元素

      块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都是从新行开始的。

      而当加了css控制以后,块元素可以变为内联元素,内联元素也可以变为块元素。

二,块级元素和内联元素的区别

  1. 块级元素会独占一行,其宽度自动填满其父元素宽度

   行内元素不会独占一行,相邻的行内元素会排列到同一行里,直到一行排不下,才会换行,其宽度随元素的内容变化而变化,

  2. 一般情况下,块级元素可以设置width,height属性,行内元素设置width,height无效

    (注意,块级元素设置了width宽度属性后仍然是独占一行的)

  3. 块级元素可以设置margin,padding属性

   行内元素的水平方向的padding-left和padding-right都会产生边距效果,但是竖直方向上的padding-top和padding-bottom都不会产生边距效果

posted @ 2019-06-23 20:15  阿锐互联网  阅读(144)  评论(0编辑  收藏  举报