HTML实例之基础标签

最新推荐文章于 2024-04-03 13:53:48 发布

唱戏先生

最新推荐文章于 2024-04-03 13:53:48 发布

阅读量152

点赞数

分类专栏： HTML实例

本文链接：https://blog.csdn.net/qq_43131852/article/details/101357264

版权

HTML实例专栏收录该内容

13 篇文章 0 订阅

订阅专栏

参考https://www.w3school.com.cn/html/index.asp

一个简单的 HTML 文件

<html>

<head>
<title>我的第一个 HTML 页面</title>
</head>

<body>
<p>body 元素的内容会显示在浏览器中。</p>
<p>title 元素的内容会显示在浏览器的标题栏中。</p>
</body>

</html>

在这里插入图片描述

简单的段落

<html>
<body>

<p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p>

<p>段落元素由 p 标签定义。</p> 

</body>
</html>

在这里插入图片描述

“诗歌”问题

<html>

<body>

<h1>春晓</h1>

<p>
    春眠不觉晓，
      处处闻啼鸟。
        夜来风雨声，
          花落知多少。
</p>

<p>注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。</p>

</body>

</html>

在这里插入图片描述

拆行

<html>

<body>

<p>
To break<br />lines<br />in a<br />paragraph,<br />use the br tag.
</p>

</body>
</html>

在这里插入图片描述

标题

<html>

<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

<p>请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。</p>

</body>
</html>

在这里插入图片描述

居中排列的标题

<html>

<body>

<h1 align="center">This is heading 1</h1>

<p>上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。</p>

</body>
</html>

在这里插入图片描述

水平线

<html>

<body>
<p>hr 标签定义水平线：</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
</body>
</html>

在这里插入图片描述

注释

<html>

<body>

<!--这是一段注释。注释不会在浏览器中显示。-->

<p>这是一段普通的段落。</p>

</body>
</html>

在这里插入图片描述

背景颜色

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
</head>

<body bgcolor="yellow">
<h2>请看: 改变了颜色的背景。</h2>
</body>

</html>