web前端之html从零开始（一）-----第一个html

最新推荐文章于 2025-07-03 14:45:56 发布

原创最新推荐文章于 2025-07-03 14:45:56 发布 · 4.5k 阅读

13 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了HTML中的基本标签及其用途，包括文档声明、元信息标签、标题标签、段落标签等，并通过实例展示了如何正确使用这些标签来构建网页。

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

第一个Html,编码格式要写，否则会出现乱码。

<!DOCTYPE html>
<html>
  <head>
    <title>我的第一个Html页面</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><!-- 编码格式，如果浏览器不是utf-8会出乱码 -->
  </head>

  <body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
  </body>
</html>

2、h标签的练习

<!DOCTYPE html>
<html>
  <head>
    <title>MyHtml1.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <!-- h标签标题的练习，h1,h2,h3,h4,h5,h6字体大小的不同 -->
  <body>
        <h1>这是标题1</h1>
        <h2>这是标题2</h2>
        <h3>这是标题3</h3>
        <h4>这是标题4</h4>
        <h5>这是标题5</h5>
        <h6>这是标题6</h6>
  </body>
</html>

3、p 段落标签的练习

<!DOCTYPE html>
<html>
  <head>
    <title>MyHtml2.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <!-- p标签段落的练习 -->
  <body>
        <p>段落一。</p>
        <p>段落一。</p>
        <p>段落一。</p>
        <p>段落一。</p>
        <p>段落一。</p>
  </body>
</html>

4、a标签，href超链接

<!DOCTYPE html>
<html>
  <head>
    <title>MyHtml2.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <!-- a标签超链接的练习 -->
  <body>
        <a href="http://www.baidu.com">这是一个href类型的超链接</a>
  </body>
</html>

5、img 图片引用标签

<!DOCTYPE html>
<html>
  <head>
    <title>MyHtml2.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <!-- img标签 ,这个图片是放在同级的目录下，所以直接就可以了，如果不是同级，指定到确定的目录-->
  <body>
        <img src="sss.png" width="300" height="120"/>
  </body>
</html>

6、br标签换行，hr标签划线

<!DOCTYPE html>
<html>
  <head>
    <title>MyHtml2.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <!-- p标签段落的练习 -->
   <!-- br标签换行的练习 -->
    <!-- hr标签划线的练习 -->
  <body>
        <p>段落一。</p>
        <hr />
        <p>段落一。</p>
        <br />
        <p>段落一。</p>
        <br />
        <p>段落一。</p>
        <br />
        <p>段落一。</p>
  </body>
</html>

7、排版练习

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>段落练习</title>
</head>
<body>
    <p>
    这个段落
    在源代码中
    包含许多行
    但是浏览器
    忽略了它们。
    </p>
    <p>
    这个段落
    在源代码       中
    包含   许多行
    但是      浏览器
    忽略了  它们。
    </p>
    <p>
    段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数。
    </p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>排版</title>
</head>

<body>

<h1>春晓</h1>

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

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

</body>

</html>

8、b,strong,big,small,em,sub,sup标签的作用

<!DOCTYPE html>
<html>
  <head>
    <title>我的第一个Html页面</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><!-- 编码格式，如果浏览器不是utf-8会出乱码 -->
  </head>
  <!-- b,strong加粗 -->
  <body>
        <b>这个文本是加粗的</b>
        <br/>
        <strong>这个文本是加粗的</strong>
        <br/>
        <big>这个文本放大</big>
        <br/>
        <em>这个文本是斜体的</em>
        <br/>
        <small>这个文本是缩小的</small>
        <br/>
        这个文本包含
        <sub>下标</sub>
        <br/>
        这个文本包含
        <sup>上标</sup>
        <br/>
  </body>
</html>

9、pre标签，让空格生效的标签

<!DOCTYPE html>
<html>
  <head>
    <title>我的第一个Html页面</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><!-- 编码格式，如果浏览器不是utf-8会出乱码 -->
  </head>
  <!-- b,strong加粗 -->
  <body>
        <pre>
演示如何使用 pre 标签
对空行和         空格
进行控制
        </pre>
  </body>
</html>

10、关于计算机编码的标签，都已写注释

<!DOCTYPE html>
<html>
  <head>
    <title>我的第一个Html页面</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><!-- 编码格式，如果浏览器不是utf-8会出乱码 -->
  </head>
  <!-- b,strong加粗 -->
  <body>
    <code>计算机输出</code>
    <br/>
    <kbd>键盘输入</kbd>
    <br/>
    <tt>打字机文本</tt>
    <br/>
    <samp>计算机代码样本</samp>
    <br/>
    <var>计算机变量</var>
    <br/>
    <p>
    <b>注释：</b>
        这些标签常用作显示计算机/编程代码
    </p>
  </body>
</html>

11、缩略词的用法

<!DOCTYPE html>
<html>
<head>
<title>我的第一个Html页面</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 编码格式，如果浏览器不是utf-8会出乱码 -->
</head>
<body>
    <abbr title="etcetera">etc.</abbr>
    <br />
    <acronym title="www.baidu.com">www</acronym>
    <br />
    <p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>

    <p>仅对于 IE 5 中的 acronym 元素有效。</p>

    <p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>
</body>
</html>

12、控制文字显示顺序的标签 bdo

<!DOCTYPE html>
<html>
<head>
<title>我的第一个Html页面</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 编码格式，如果浏览器不是utf-8会出乱码 -->
</head>
<body>
    <p>该段落文字从右到左显示</p>
    <p><bdo dir="rtl">该段落从右到左显示</bdo></p>
</body>
</html>

好了，今天就学到这里吧。