html相关知识

最新推荐文章于 2023-05-31 15:59:51 发布

dodobibibi

最新推荐文章于 2023-05-31 15:59:51 发布

阅读量170

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/dodobibibi/article/details/87394805

本文详细介绍了HTML的基本概念，包括其定义、结构以及常见的文本标签。涵盖了从创建HTML文件、使用不同方向的文本输出、文本格式化到预文本处理的各个方面。

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

定义

html(Hyper Text Markup Language，超文本标记语言)：是用来创建网页的标记语言。
“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

Markdown：Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。

新建一个html文件
在这里插入图片描述
上图中内容介绍

<!--声明为html5-->
<!DOCTYPE html>

<!--html是一整个人-->
<html lang="en">

<!--相当于人的头-->
<head>

    <!--指定html'的编码格式-->
    <meta charset="UTF-8">
    
    <!--描述文档的标题-->
    <title>Title</title>
    
</head>

<!--相当于人的身体，可见的页面内容-->
<body>

</body>

</html>

常见文本标签

页面显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示在页面的左上角</title>
</head>
<body>

&copy;2019Baidu

</body>
</html>

上下左右动态移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上下左右动态移动</title>
</head>
<body>

<marquee direction="right">welcome  westos to learn python </marquee>
<marquee direction="left">welcome  westos to learn python </marquee>
<marquee direction="up">welcome  westos to learn python </marquee>
<marquee direction="down">welcome  westos to learn python </marquee>

</body>
</html>

空格的表示以及从左到右、从右到左输出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>空格的表示以及从左到右、从右到左输出</title>
</head>
<body>

<bdo dir="ltr">wes&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tos</bdo><br/>      
<!--<br/>表示换行-->
<!--从左到右输出-->
<!--输出结果为wes      tos-->
<bdo dir="rtl">westos</bdo><br/>
<!--从右到左输出-->
<!--输出结果为sotsew-->

</body>
</html>

标记为黄色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标记为黄色</title>
</head>
<body>

<mark>westos</mark><br/>

</body>
</html>

上下角标以及大小等于号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上下角标以及大小等于号</title>
</head>
<body>

x<sub>1</sub> = 2<br/>
x<sub>2</sub> = 3<br/>
(x<sub>1</sub> + x<sub>2</sub> )<sup>2</sup> = ?<br/>
x<sub>1</sub>   &lt; x<sub>2</sub> <br/>
x<sub>1</sub>   &gt; x<sub>2</sub> <br/>

</body>
</html>

结果如图
在这里插入图片描述

标记内容加下虚线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标记内容加下虚线</title>
</head>
<body>

<abbr title="全部内容">轻轻的我走了，正如我轻轻的来；</abbr>

</body>
</html>

预文本处理标签pre

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>所得结果和当前输入的文字格式相同</title>
</head>
<body>

<pre>
轻轻的我走了，正如我轻轻的来；
        我轻轻的招手，作别西天的云彩。

那河畔的金柳，是夕阳中的新娘；
        波光里的艳影，在我的心头荡漾。

软泥上的青荇，油油的在水底招摇；
        在康河的柔波里，我甘心做一条水草！

那榆荫下的一潭，不是清泉，是天上虹；
        揉碎在浮藻间，沉淀着彩虹似的梦。

寻梦？撑一支长篙，向青草更青处漫溯；
        满载一船星辉，在星辉斑斓里放歌。

但我不能放歌，悄悄是别离的笙箫；夏虫也为我沉默，沉默是今晚的康桥！

悄悄的我走了，正如我悄悄的来；我挥一挥衣袖，不带走一片云彩。
</pre>

</body>
</html>

标题格式h

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>各级标签格式(h1-h6)</title>
</head>
<body>

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

</body>
</html>

结果如图
在这里插入图片描述

段落标签p、删除线s

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p style="color: red; font-size: larger">原价： <s>1000元</s></p>
<p>现价： 800元</p>

</body>
</html>

结果如图
在这里插入图片描述

斜体i、下划线u、加粗b/strong

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>斜体i、下划线u、加粗b/strong</title>
</head>
<body>

<p>一只猫<i>80万美元</i>
    <u>是芭蕾舞猫“阿比西尼亚猫”</u>
    家猫鼻祖的“埃及神猫”
    难道是自幼<b>飘过太平洋的西开粉条</b>
</p>
<p>
    被贫穷限制思想的我网搜到底是神马品种
    原来它们既非胎生，也非蛋生，更不是试管出来的
    是由一条条代码混搭而成的。
    那一个个<strong>IT大神</strong>的程序员就是他们的爹妈啊。
    他们的生活环境贼好，
    空间幅员辽阔，没有环境污染，
    他们生活在美丽的云端。
    他们的大本营叫“链养猫”网站。
    他们还有个科技感的名字“云养猫”。
</p>
<p>
    他们来自一个虚拟养成猫咪的游戏网站，它的特别之处就在于可以通过一种目前很流行的区块链平台，进行交易。
</p>

</body>
</html>

结果如图
在这里插入图片描述