📌  相关文章
📜  使用 HTML 的简单组合网站设计(1)

📅  最后修改于: 2023-12-03 15:22:12.074000             🧑  作者: Mango

使用 HTML 的简单组合网站设计

HTML 是一种用于制作网页的标记语言。HTML 不是一种程序设计语言，而是一种标记语言，用于描述网页的结构和内容。通过使用 HTML，程序员可以轻松地设计和创建美丽、易于使用的网站。

HTML 的基本结构

HTML 页面由多个标签组成，每个标签都提供了描述页面中不同元素的功能。HTML 页面的基本结构如下：

<!DOCTYPE html>
<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>
    <h1>网页标题</h1>
    <p>网页内容</p>
  </body>
</html>
DOCTYPE

<!DOCTYPE html> 是 HTML5 文档类型声明。它告诉浏览器，这个页面使用 HTML5 标准。

html

<html> 标签是 HTML 页面的根元素。该标签包围了整个 HTML 页面。

head

<head> 标签包含与文档相关的元数据和链接到外部资源的信息。例如，可以在 head 部分中包含样式表和脚本文件。

title

<title> 标签定义浏览器标题栏中显示的文本。此文本还可以被搜索引擎和社交媒体预览用作该页面的标题。

body

<body> 标签包含浏览器显示的实际文档内容。这里可以包含文本、图像、表格、表单等。

h1

<h1> 标签定义一个级别 1 的标题。级别 1 的标题是页面上最重要的标题，并且被认为是页面的主要标题。

p

<p> 标签定义一个段落。这可以是正文、说明或任何其他文本段。

常见 HTML 标签

下表列出了一些常用的 HTML 标签及其用途。

标签 | 描述 --- | --- <a> | 定义链接 <img> | 包含图像 <ul> | 定义无序列表 <ol> | 定义有序列表 <li> | 定义列表项 <table> | 定义表格 <tr> | 定义表格行 <td> | 定义表格单元格 <form> | 定义表单 <input> | 定义各种输入字段

创建简单的网站

下面是一个简单的 HTML 页面示例，其中包含了更多标签和属性的示例。

<!DOCTYPE html>
<html>
  <head>
    <title>我的网站</title>
    <style>
      body {
        background-color: #F6F6F6;
        font-family: Arial, sans-serif;
      }
      h1 {
        color: #454545;
      }
      p {
        color: #666;
        font-size: 16px;
      }
      img {
        max-width: 100%;
        display: block;
      }
    </style>
  </head>
  
  <body>
    <h1>欢迎来到我的网站！</h1>
    <p>这是我的个人网站，里面包含了我的一些作品和个人信息。</p>
    
    <h2>我的作品</h2>
    
    <h3>画廊</h3>
    <p>这里展示了我一些最近的绘画作品：</p>
    <ul>
      <li><a href="gallery/painting1.jpg">画作 1</a></li>
      <li><a href="gallery/painting2.jpg">画作 2</a></li>
      <li><a href="gallery/painting3.jpg">画作 3</a></li>
    </ul>
    
    <h3>博客</h3>
    <p>这里是我的最新博客：</p>
    <ul>
      <li><a href="blog/post1.html">博客文章 1</a></li>
      <li><a href="blog/post2.html">博客文章 2</a></li>
      <li><a href="blog/post3.html">博客文章 3</a></li>
    </ul>
    
    <h2>关于我</h2>
    <p>我是一个爱好艺术和编程的人。如果您有任何问题或建议，请随时联系我！</p>
    
    <h3>联系方式</h3>
    <ul>
      <li>电子邮件： <a href="mailto:info@mywebsite.com">info@mywebsite.com</a></li>
      <li>微博： <a href="http://weibo.com/mywebsite">http://weibo.com/mywebsite</a></li>
    </ul>
    
    <h3>个人简介</h3>
    <p>我是一个独立的艺术家和程序员，精通 Photoshop、Illustrator、JavaScript 和 Python。我的工作重点是数字绘画、网页制作和应用程序开发。如果你有任何问题或需要帮忙，请随时联系我！</p>
    
    <h3>个人照片</h3>
    <img src="photo.jpg" alt="我的个人照片">
  </body>
</html>

该示例包括的内容有：

  • 一个页面标题和背景颜色
  • 一个网站标题和介绍
  • 一组艺术作品，其中每个作品都是链接到包含更多信息的页面
  • 一组博客文章，其中每篇文章也是链接到包含更多信息的页面
  • 一个联系方式列表
  • 一个个人简介
  • 一张个人照片
总结

HTML 可以帮助程序员创建美丽、易于使用的网站。HTML 标签可以用来表示各种元素，如标题、段落、图像、表格、表单等。程序员可以使用 CSS 来样式化这些元素。通过使用 HTML 和 CSS，程序员可以设计和创建吸引人的、易于导航的网站。