HTML学习总结

最新推荐文章于 2024-03-13 15:03:28 发布

Chen纳尔

最新推荐文章于 2024-03-13 15:03:28 发布

阅读量22

点赞数

文章标签： html 学习前端

本文链接：https://blog.csdn.net/m0_68927084/article/details/131515856

版权

HTML简介：
HTML（HyperText Markup Language）是一种标记语言，用于创建网页和其他类型的文档。它的主要目的是定义文本和其他内容如何呈现在Web浏览器中，包括文本的结构、格式和链接。

HTML最初由蒂姆·伯纳斯-李在1989年提出，并在1991年成为互联网工程任务组（IETF）标准。HTML通过使用标签来定义页面元素。这些标签包含在尖括号内，在开始标签和结束标签之间放置内容，以指示内容应如何显示。

虽然HTML主要用于创建Web页面，但它也可以用于创建其他类型的文档，如电子邮件和桌面出版物。由于其简单易用、可读性高和广泛支持，HTML已成为Web开发的基础之一。

基本结构：
HTML（HyperText Markup Language）是网页的基础语言，它用于制作和描述网页的内容和结构。下面是HTML的基本结构：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
  </head>
  <body>
    页面内容
  </body>
</html>

其中，<!DOCTYPE html>声明文档类型为HTML5。<html>标签是整个HTML文档的根元素，它包含了所有的HTML代码。<head>标签中包含了一些关于文档的元信息，例如编码方式、网页标题等等。<body>标签中包含了实际上显示在网页上的内容。

下面是一个简单的HTML代码示例，展示如何使用一些常用的HTML标签来创建一个简单网页：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
  </head>
  <body>
    <!--标题-->
    <h1>欢迎来到我的网站！</h1>

    <!--段落-->
    <p>这是一个演示用的网站。</p>

    <!--列表-->
    <h2>我的兴趣爱好：</h2>
    <ul>
      <li>阅读</li>
      <li>旅游</li>
      <li>电影</li>
    </ul>

    <!--图片-->
    <h2>我的照片：</h2>
    <img src="my-photo.jpg" alt="我的照片">

    <!--链接-->
    <h2>我的朋友们：</h2>
    <ul>
      <li><a href="">百度</a></li>
      <li><a href="https://www.taobao.com">淘宝</a></li>
      <li><a href="https://www.github.com">GitHub</a></li>
    </ul>

  </body>
</html>

这个网页包括了一个简单的标题、一些文字内容、一个兴趣爱好的列表、一个图片以及一些超链接。

HTML标记：
如果您需要在网页中添加HTML标记，可以使用以下代码示例：

<!DOCTYPE html>
<html>
<head>
	<title>My Webpage</title>
</head>
<body>

	<h1>Welcome to my webpage!</h1>

	<p>This is a paragraph of text.</p>

</body>
</html>

以上是一个最基本的HTML文档结构，包含了<!DOCTYPE>、<html>、<head>和<body>等标签。其中，<h1>和<p>标签用于分别定义标题和段落。

HTML语义化：
HTML语义化是指在编写HTML代码时，使用合适的标签和元素来明确网页内容的结构和意义，使得页面具有较好的可读性和可维护性。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>语义化示例</title>
</head>
<body>
  <header>
    <h1>网站标题</h1>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">新闻</a></li>
        <li><a href="#">关于我们</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h2>文章标题</h2>
        <p class="meta">作者：张三 | 发布日期：2023年07月03日</p>
      </header>

      <p>这是一篇示例文章。</p>

      <aside class="related">
        <h3>相关文章</h3>

        <ul>
          <li><a href="#">示例文章1</a></li>
          <li><a href="#">示例文章2</a></li>
          <li><a href="#">示例文章3</a></li>
        </ul>

      </aside>

      <footer class="article-footer">
        文章底部内容
      </footer>

    </article>

    <!--更多article...-->

  </main>

  <footer id="footer">
    版权信息等
  </footer>

</body>
</html>

在这个示例中，我们使用了<header>、<nav>、<article>、<aside>、<footer>等语义化标签来明确页面的结构和内容。例如，<header>元素用于表示页面顶部的内容区块，包含网站标题和导航菜单；<article>元素则表示独立的文章内容区块；<aside>元素用于放置相关文章等附加信息。

相比之下，如果我们直接使用无语义化的标签如 <div> 甚至 <table> 来构建页面布局和结构，将会给代码理解和维护任务带来很大的困难。因此，使用HTML语义化可以有效提高代码可读性和可维护性。

同时，CSS样式可以与HTML配合使用。CSS（Cascading Style Sheets）用于控制页面布局、颜色、字体大小等外观样式。

最后，在编写HTML时应遵循良好的代码规范。例如：格式化代码以使其易于阅读，使用语义化标记，尽可能使用有意义的类名和id等。

在学习HTML时，最好兼顾理论和实践。可以通过代码编写实践来加深对HTML的了解，并且可以从中学习日常开发所涉及的最佳实践。

总之，HTML是网站开发过程中必须掌握的基础知识之一。它是现代网络技术的核心，也是其他技术如JavaScript、CSS等的基础。掌握HTML需要不断学习、练习和提高。

Chen纳尔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习总结

它的主要目的是定义文本和其他内容如何呈现在Web浏览器中，包括文本的结构、格式和链接。虽然HTML主要用于创建Web页面，但它也可以用于创建其他类型的文档，如电子邮件和桌面出版物。HTML语义化是指在编写HTML代码时，使用合适的标签和元素来明确网页内容的结构和意义，使得页面具有较好的可读性和可维护性。HTML（HyperText Markup Language）是网页的基础语言，它用于制作和描述网页的内容和结构。标签是整个HTML文档的根元素，它包含了所有的HTML代码。
复制链接

扫一扫