html中的元素(2)

在用块级元素完成网页的组织和布局以后,要为其中的每一个小区块添加内容,就需要用到行内元素:

1.字体样式元素

python 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5 保留的文本格式元素示例</title>
</head>
<body>
    <p><b>粗体文本</b><big>大号字体</big><big><big>更大号字体</big></big><b><big>粗体大号字体</big></b></p >
    <p><i>斜体文本</i><small>小号字体</small><small><small>更小号字体</small></small><i><small>斜体小号字体</small></i></p >
    <p><tt>打字机或者等宽的文本</tt>这段文本包含<sup>上标</sup>还包括<sub>下标</sub></p >
</body>
</html>

2.短语元素

python 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>短语元素示例</title>
</head>
<body>
    <p><em>em</em> 标签告诉浏览器把文本表示为强调的内容,<em>用斜体来显示</em>。</p >
    <p><strong>strong</strong> 强调的程度更强一些,<strong>用粗的字体来显示</strong>。</p >
    <p><code>
        <pre>
PI = 3.1415926
r = int(input('r='))  #请输入 <kbd>100</kbd>,其中变量 <var>r</var> 表示圆的半径
s = PI*r**2
print('s=', s)
        </pre>
    </code></p >
    <p>She said <q>I didn't know.</q></p >
    <p>一打有 <del>20</del> <ins>12</ins> 件。</p >
</body>
</html>

3.图片元素

python 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图像元素示例</title>
</head>
<body>
    <h3>荷兰郁金香公园</h3>
    <p>< img src="images/Keukenhof1.jpg" alt="Keukenhof" />
    库肯霍夫公园位于阿姆斯特丹近郊的小镇利瑟(Liess),公园内郁金香的品种、数量、质量以及布置手法堪称世界之最。</p >
    <p>
        < img src="images/tulip.jpg" alt="郁金香" width="200" height="120" />
        < img src="images/Keukenhof2.jpg" alt="利瑟" width="200" height="120" title="库肯霍夫公园" />
        < img src="images/Keukenhof3.jpg" alt="库肯霍夫公园" width="200" height="120" />
    </p >
</body>
</html>

4.超文本链接元素

bash 复制代码
<a...></a>

注:创建空超文本链接可以用#,意在保留超文本链接的格式

5.图像热区超链接元素map、area

bash 复制代码
<map name="映射图像名" id="映射图像名">
    <area shape="热区形状1" coords="热区坐标1" href="超链接地址1" />
    <area shape="热区形状2" coords="热区坐标2" href="超链接地址2" />
    <!-- ... -->
    <area shape="热区形状n" coords="热区坐标n" href="超链接地址n" />
</map>

6.范围元素span------本身并没有任何作用,主要用于独立行内的其他样式

bash 复制代码
﹤p﹥﹤span﹥文本内容﹤/span﹥其他内容﹤/p﹥

7.音频元素audio

bash 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>audio</title>
</head>
<body>
    <audio src="邓丽君 - 甜蜜蜜.mp3" controls="controls">
        当前浏览器不支持 audio
    </audio>
</body>
</html>

8.视频元素video

bash 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>video</title>
</head>
<body>
    <video src="邓丽君-我只在乎你.mp4" width="800" height="" controls="controls">
        当前浏览器不支持 video 直接播放,点击这里下载视频:下载视频
    </video>
</body>
</html>
相关推荐
庸俗今天不摸鱼27 分钟前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下34 分钟前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox44 分钟前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞1 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行1 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758101 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周1 小时前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队1 小时前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei2 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码2 小时前
Spring Task 定时任务
java·前端·spring