HTML 行内元素

简介

HTML 行内元素主要是内容和数据的容器,只能包含数据和其他行内元素。

标签

标签 说明
a 定义超链接,点击从一个页面跳到另一个页面
applet 作用是嵌入一段 Java applet 代码
basefont 定义文档中所有文本的默认颜色、大小和字体
bdo bdo 指的是 bidi 覆盖(Bi-Directional Override,用来覆盖默认的文本方向
br 标签插入一个简单的换行符
font 规定文本的字体、字体尺寸、字体颜色
iframe 规定一个内联框架用来在当前 HTML 文档中嵌入另一个文档
img 定义 HTML 页面中的图像
map 创建客户端图像映射,可点击区域的一幅图像;使用 <area> 元素定义图像映射中的区域
area 定义图像映射内部的可点击区域,作为 <map> 的子元素
object 定义一个嵌入的对象,如图像、音频、视频、Java Applets、ActiveX、PDF 以及 Flash 等
param 为包含它的 <object> 或者 <applet> 标签提供参数
q 定义一个短的引用,一般情况下浏览器会插入引号。
span 一个通用的行内容器,本身没任何结构含义,被用来组合文档中的行内元素
sub 定义下标文本,位置是字符高度的一半为基准线的下方
sup 定义上标文本,位置是字符高度的一半为基准线的上方

实例

代码:

<div>
<a href="https://tinyx.cc">TXTech</a>
文字从右到左显示 <bdo dir="rtl">文字从右到左显示</bdo>
第一行<br>第二行<br>第三行
<font size="4" color="red">TXTech 是一个免费技术教程网站</font>
<font size="3" color="blue">TXTech 是一个免费技术教程网站</font>
<font face="verdana" color="green">TXTech 是一个免费技术教程网站</font>
<iframe src="htmls/iframe.html" width="50%"/>
<img src="https://s.tinyx.cc/images/common/barcode/wechat_blog.png" alt="wechat blog"/>
<img src="https://s.tinyx.cc/images/posts/html/tags/map/map.png" width="160" height="160" alt="polygon" usemap="#polygon" alt="map">
<map name="polygon">
  <area shape="circle" coords="30,30,30" href="./html-element-inline.html" alt="circle">
  <area shape="rect" coords="80,80,160,160" href="./html-element-inline.html" alt="rect">
</map>
<object data="media/svg/draw/rect.svg" width="200" height="100" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/" />
《再别康桥》:<q>我挥一挥衣袖,不带走一片云彩</q> 多么优美的一句
 <span style="color:blue;font-weight:bold">TXTech 是一个免费技术教程网站</span>
包含 <sub>下标</sub>文本。
包含 <sup>上标</sup>文本。
</div>

效果:
a元素
TXTech
bdo元素
文字从右到左显示 文字从右到左显示
br元素
第一行
第二行
第三行
font元素
TXTech 是一个免费技术教程网站
TXTech 是一个免费技术教程网站
TXTech 是一个免费技术教程网站
img元素

map和area元素
polygon

circle rect

q
《再别康桥》:我挥一挥衣袖,不带走一片云彩 多么优美的一句
span
TXTech 是一个免费技术教程网站
sub
包含 下标文本。
sup
包含 上标文本。

留下评论

电子邮件地址不会被公开。 必填项已用*标注