html行内元素、块级元素及空元素有哪些？区别是什么？

时间：2020-01-30 14:40:08 阅读：89 评论：0 收藏：0 [点我收藏+]

标签：表格修改 splay 有一个不可 sub out 目录格式化

一、 html标签有哪些？

1）行内元素有哪些？

　　行内元素：行内大多为描述性标记

<span>...</span>
<a>...</a> 链接、锚点
<br> 换行
<b>...</b> 加粗
<strong>...</strong> 加粗
em - 强调
img - 图片
font - 字体设定 ( 不推荐 )
<i>...</i> 斜体
<em>...</em> 斜体
<del>...</del> 删除线
strike - 中划线（已经废弃）
<u>...</u> 下划线
<input>...</input> 文本框
<textarea>...</textarea> 多行文本
<select>...</select> 下拉列表
<sup>...</sup> 上标
<sub>...</sub> 下标

2）块级元素有哪些？

　　块级元素：块级元素大多为结构性标记

<address>...</adderss> 地址
<center>...</center>举中对齐块
<h1>...</h1> 标题一级
<h2>...</h2> 标题二级
<h3>...</h3> 标题三级
<h4>...</h4> 标题四级
<h5>...</h5> 标题五级
<h6>...</h6> 标题六级
<hr> 水平分割线
<blockquote>...</blockquote> 段落缩进前后5个字符
<marquee>...</marquee> 滚动文本
<ul>...</ul> 无序列表
<ol>...</ol> 有序列表
<dl>...</dl> 定义列表
<table>...</table> 表格
<form>...</form> 表单
dir - 目录列表
<div>...</div>常用块级容易，也是 css layout 的主要标签
fieldset - form控制组
<p>...</p> 段落
<pre>...</pre> 预格式化

3）空(void)元素有哪些？

<br/> //换行
<hr> //分隔线
<input> //文本框等
<img> //图片
<link> <meta>

二、行内元素和块级元素有什么区别？

　　根据 CSS 规范的规定，每一个网页元素都有一个 display 属性，用于确定该元素的类型，每一个元素都有默认的 display 属性值，比如 div 元素，它的默认 display 属性值为 “block”，成为“块级” 元素 (block-level)；而 span 元素的默认 display 属性值为“inline”，称为“行内” 元素。

区别一：

　　　　块级：块级元素会独占一行，默认情况下宽度自动填满其父元素宽度

　　　　行内：行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。

区别二：

　　　　块级：块级元素会自动占据一定矩形空间，可以设置宽高

　　　　行内：行内元素没有自己的独立空间，不可以设置宽高

区别三：

　　　　块级：块级元素可以设置margin，padding

　　　　行内：行内元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。