HTML -- 行内元素和块级元素(包含常见的行内/块级元素)

1. 行内元素和块级元素

1.1 行内元素

  • 无论内容多少,总是独占一行

行内元素特征:

  • ①设置宽高无效
  • ②对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间
  • ③不会自动进行换行

常见行内元素:

<b>标签规定粗体文本
<big>让文本比常规的字体大一号
< i>标签显示斜体文本效果
<small>标签呈现小号字体效果
<tt>标签呈现类似打字机或者等宽的文本效果
<abbr>它所包含的文本是一个更长的单词或短语的缩写形式
<acronym>标签定义首字母缩写
<cite> 标签通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题,
<code>对文档中的文本进行格式化,
<dfn> 标签可标记那些对特殊术语或短语的定义
<em>实例 对文档中的文本进行格式化
<kbd>标签定义键盘文本
<strong><em> 标签一样,用于强调文本,但它强调的程度更强一些
<samp>表示一段用户应该对其没有什么其他解释的文本字符,
<var>标签表示变量的名称,或者由用户提供的值
<a>标签可以是超链接或锚
<bdo>可覆盖默认的文本方向
<br>以下代码标记一个换行:
<img>标签创建的是被引用图像的占位空间
<map>定义客户端图像映射,
<object>元素用于在网页中包含对象,比如:图像、音频、视频、Java applet、ActiveX、PDF、Flash 等,
<q>标签用于简短的行内引用
<script>在 HTML 页面中插入一段 JavaScript
<span>标签被用来组合文档中的行内元素
<sub>下标文本
<sup> 上标文本
<button>按钮
<input>一个简单的 HTML 表单,包含两个文本输入框和一个提交按钮
<label>标签为 input 元素定义标注
<select>select 元素是一种表单控件,可用于在表单中接受用户输入,
<textarea>标签定义多行的文本输入控件,文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体,再

1.2 块级元素

  • 内容撑开宽度,左右都是行内元素的可以排在一行

块级元素特征:

  • 能够识别宽高
  • ②margin和padding的上下左右均对其有效
  • ③可以自动换行④多个块状元素标签写在一起,默认排列方式为从上至下

常见块级元素:

<address>联系方式信息
<article> HTML5文章内容
<aside> HTML5伴随内容
<audio> HTML5音频播放
<blockquote>块引用
<canvas> HTML5绘制图形
<dd>定义列表中定义条目描述
<div>文档分区
<dl>定义列表
<fieldset>表单元素分组,
<figcaption> HTML5图文信息组标题
<figure> HTML5图文信息组 (参照 <figcaption>)
<footer> HTML5区段尾或页尾
<form>表单
<h1>, <h2>,<h3>, <h4>, <h5>, <h6>标题级别 1-6
<header> HTML5区段头或页头
<hgroup> HTML5标题组
<hr>水平分割线
<noscript>不支持脚本或禁用脚本时显示的内容
<ol>有序列表
<output> HTML5表单输出
<p><pre>预格式化文本
<section> HTML5一个页面区段
<table>表格
<tfoot>表脚注
<ul>无序列表
<video> HTML5视频


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CodeJiao

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值