HTML5学习随记2⃣️

最新推荐文章于 2024-11-17 11:00:00 发布

不要必应

最新推荐文章于 2024-11-17 11:00:00 发布

阅读量539

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.youkuaiyun.com/aston5128/article/details/54561368

HTML5 专栏收录该内容

4 篇文章

订阅专栏

这篇HTML5学习笔记介绍了如何添加和格式化文本，包括特殊文字符号、文本样式、上下标、排版和段落标记，以及如何插入图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.添加文本

1.添加特殊文字符号

这里写图片描述

注意这里千万别用多个&nbsp表示多个空格，因为浏览器对空格距离的实现往往是不同的。

2.文本特殊样式

这里建议的是用CSS实现这些：

<b> </b>粗体文字
<em> </em>强调文字
<strong> </strong>加强调文字
<i> </i>斜体

3.上下标文字

<sup> </sup> 上标
<sub> </sub> 下标

4.文本排版

<br/> 换行标记，这是一个单标记，用来强制换行。
<hr/> 显示一条水平线

5.段落标记

<p> </p>这之间是个段落，文本在这之间是会自动换行

总结：

<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<head>
    <title>标题</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p><b>粗体文字</b></p>
<p><em>强调文字</em></p>
<p><strong>加强调文字</strong></p>
<p><i>斜体文字</i></p>
<p><b><i>粗斜体文字</i></b></p><br/>
<p>2<sup>上标</sup>+2<sub>下标</sub></p>
</body>
</html>

结果为：
这里写图片描述

6.文字列表

<ul> 无序列表
<ol> 有序列表

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>html5</title>
</head>
<body>
<h1>一级标题</h1>
<ol>
    <li>abc</li>
    <li>bcd</li>
    <li>cde</li>
    <ul>
        <li>abcdef</li>
        <ul>
            <li>abc</li>
            <ul>
                <li>abc</li>
            </ul>
        </ul>
        <li>cdefgh</li>
    </ul>
    <li>def</li>
    <li>efg</li>
    <li>fgh</li>
</ol>
<ul>
    <li>abc</li>
    <li>bcd</li>
</ul>
</body>
</html>

结果为：
这里写图片描述

2.添加图片

<img src="图片.jpg" alt="图片介绍" width="10%">

src 图片所在地址，以及图片的名称，格式
alt 图片介绍，用于鼠标停留时的提示说明，以及方便搜索引擎。
width 宽度， 同时可以用百分比，表示占整个网页的百分之多少
height 高度