html中的元素(2)

news/2025/2/26 16:51:18

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

1.字体样式元素

在这里插入图片描述

<!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.短语元素

在这里插入图片描述

<!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.图片元素

在这里插入图片描述

<!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.超文本链接元素

在这里插入图片描述

<a...></a>

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

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

<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——本身并没有任何作用,主要用于独立行内的其他样式

﹤p﹥﹤span﹥文本内容﹤/span﹥其他内容﹤/p﹥

7.音频元素audio

在这里插入图片描述

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

8.视频元素video

在这里插入图片描述

<!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>

http://www.niftyadmin.cn/n/5868956.html

相关文章

Apache SeaTunnel 构建实时数据同步管道(最新版)

文章作者 王海林 白鲸开源 数据集成引擎研发 Apache SeaTunnel Committer & PMC Member&#xff0c;Apache SkyWalking Committer&#xff0c;多年平台研发经验&#xff0c;目前专注于数据集成领域。 导读 在当今数字化快速发展的时代&#xff0c;数据已然成为企业决策…

鸿蒙5.0实战案例:har和hsp的转换

往期推文全新看点&#xff08;文中附带全新鸿蒙5.0全栈学习笔录&#xff09; ✏️ 鸿蒙&#xff08;HarmonyOS&#xff09;北向开发知识点记录~ ✏️ 鸿蒙&#xff08;OpenHarmony&#xff09;南向开发保姆级知识点汇总~ ✏️ 鸿蒙应用开发与鸿蒙系统开发哪个更有前景&#…

大白话Vue 双向数据绑定的实现原理与数据劫持技术

咱们来好好唠唠Vue双向数据绑定的实现原理和数据劫持技术&#xff0c;我会用特别通俗的例子给你讲明白。 啥是双向数据绑定 你可以把双向数据绑定想象成一个神奇的“同步器”。在网页里有两部分&#xff0c;一部分是数据&#xff0c;就像你记在小本本上的信息&#xff1b;另一…

物联网综合实训室建设方案的探讨(职业院校物联网综合实训室建设方案)

随着物联网技术的迅猛发展&#xff0c;社会对物联网人才的需求日益增加。为了满足这一需求&#xff0c;高校和职业院校纷纷开始建设物联网综合实训室&#xff0c;以培养具备实际操作能力和创新思维的高素质物联网人才。本文旨在探讨一种行之有效的物联网综合实训室建设方案&…

【C语言】指针笔试题

前言&#xff1a;上期我们介绍了sizeof与strlen的辨析以及sizeof&#xff0c;strlen相关的一些笔试题&#xff0c;这期我们主要来讲指针运算相关的一些笔试题&#xff0c;以此来巩固我们之前所学的指针运算&#xff01; 文章目录 一&#xff0c;指针笔试题1&#xff0c;题目一…

6.将cr打包成网络服务|使用postman进行测试|编写oj_server的服务路由功能(C++)

将cr打包成网络服务 compile_server.cc #include "compile_run.hpp" #include "../comm/httplib.h"using namespace ns_compile_and_run; using namespace httplib;//编译服务随时可能被多个人请求&#xff0c;必须保证传递上来的code&#xff0c;形成源…

【算法系列】归并排序详解

文章目录 归并排序详解1. 基本原理1.1 分治法策略1.2 归并排序步骤1.3 图解示例 2. 时间复杂度与空间复杂度2.1 时间复杂度2.2 空间复杂度 3. 稳定性4. Java 实现示例5. 归并排序的优点与缺点5.1 优点5.2 缺点 6. 总结 归并排序详解 归并排序&#xff08;Merge Sort&#xff0…

C#快速调用DeepSeek接口,winform接入DeepSeek查询资料 C#零门槛接入DeepSeek C#接入DeepSeek源代码下载

下载地址<------完整源码 在数字化转型加速的背景下&#xff0c;企业应用系统对智能服务的需求日益增长。DeepSeek作为先进的人工智能服务平台&#xff0c;其自然语言处理、图像识别等核心能力可显著提升业务系统的智能化水平。传统开发模式下&#xff0c;C#开发者需要耗费大…