网站的 HTML 代码

2025年3月17日 | 阅读 7 分钟

引言

对于那些不懂 CSS 的人来说，创建响应式网页是具有挑战性的。不使用 CSS 属性，我们无法让网页更具吸引力。因此，在制作任何网站之前，我们都需要对 HTML 和 CSS 有充分的了解。在本文中，我们将学习如何创建一个网页。

创建结构

在本节中，我们将使用 <li> 和 <section> 标签来创建网页的基本结构。此外，我们还需要运行此基本 HTML 代码以获得输出。

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <link rel="stylesheet" href="./style.css">
</head>

 <body>
  <nav class=" navbar background">
    <ul class="nav-list">
      <div class="logo">
        <img src=" https://media.licdn.com/dms/image/C4D0BAQEwg5FK93uumQ/company-logo_200_200/0/1519923012279?e=2147483647&v=beta&t=63CNoS8OTR4lHjPhHSO7eFFqwLGwYunWfyDBV3tdc0c">
      </div>
      <li><a href="#web">Web Technology</a></li>
      <li><a href="#program">C Programming</a></li>
      <li><a href="#course">Courses</a></li>
    </ul>

    <div class="rightNav">
      <input type="text" name="search" id="search">
      <button class="btn btn-sm">Search</button>
    </div>
  </nav>

  <section class=" first section">
    <div class="box-main">
      <div class="firstHalf">
        <h1 class="text-big" id="web">
          Web Technology
        </h1>
         
        <p class="text-small">
          HTML referred to as HyperText Markup
          Language. It is the most widely used language that is used to develop a webpage. it was created by Berner-Lee in the year of 1991. The first standard version of HTML is HTML 2.0 .It was launched in the year of 1995. The major version of HTML is HTML5 which was launched in the year of 1999. Now we are using the latest version of HTML, which is HTML5. With the help of HTML, we can create a website and become web developers.
        </p>


      </div>
    </div>
  </section>

  <section class= "second section">
    <div class="box-main">
      <div class="secondHalf">
        <h1 class="text-big" id="program">
          C Programming
        </h1>
        <p class="text-small">
          C is a powerful general-purpose programming language developed at AT & T's Bell Laboratories of USA in 1972.It was designed and written by Dennis Ritchie. C become popular because it is reliable, simple, and easy to use.C Programming used to develop software like operating systems, databases, compilers, and so on. C programming is an excellent language to learn to program for beginners.
Although numerous computer languages are used for writing computer applications, the computer programming language, C, is the most popular language worldwide. Everything from microcontrollers to operating systems is written in C since it's very flexible and versatile, allowing maximum control with minimal commands. If you are interested in a career in computer programming, it would be wise to start by learning the C programming language.
        </p>


      </div>
    </div>
  </section>

  <section class="section">
    <div class="paras">
      <h1 class="sectionTag text-big">Java</h1>

      <p class= "sectionSubTag text-small">
        Java is the one of the most
        popular programming language
        for many years. Java is also known as Object
        Oriented Programming Language. But we cannot say that Java is not
        considered as pure object-oriented
        as it provides support for primitive
        data types (like int, char, etc) The
        Java codes are first compiled into byte
        code (machine-independent code). Then
        the byte code is run on Java Virtual
        Machine (JVM), regardless of the
        underlying architecture.
      </p>


    </div>

    <div class="thumbnail">
      <img src="https://wallpapers.com/images/featured/murjp1nk4lp1idlt.jpg" alt="laptop image">
    </div>
  </section>

  <footer class="background">
    <p class="text-footer">
      Copyright ?-All rights are reserved
    </p>


  </footer>

 </body>

</html>

CSS Design

借助 CSS，我们可以为网页提供更好的外观。最困难的部分是将图像放置在网页的不同部分。

CSS 代码

 *{
  margin: 0;
  padding: 0;
 }

 .navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 0;
  cursor: pointer;
 }

 .background {
  background: black;
  background-blend-mode: darken;
  background-size cover;
 }

 .nav-list {
  width: 70%;
  display: flex;
  align-items: center;
 }

 .logo {
  display: flex;
  justify-content: center;
  align-items: center;
 }

 .logo img {
  width: 50px;
  border-radius: 50px;
 }

 .nav-list li {
  list-style: none;
  padding: 26px 30px;
 }

 .nav-list li a {
  text-decoration: none;
  color: white;
 }

 .nav-list li a:hover {
  color: grey;
 }

 .rightnav {
  width: 30%;
  text-align: right;
 }

 #search {
  padding: 5px;
  font-size: 17px;
  border: 2px solid grey;
  border-radius: 9px;
 }

 .firstsection {
  background-color: RGB(116, 241, 116);
  height: 400px;
 }

 .secondsection {
  background-color: RGB(95, 95, 160);
  height: 400px;
 }

 .box-main {
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  max-width: 80%;
  margin: auto;
  height: 80%;
 }

 .firsthalf {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
 }

 .secondhalf {
  width: 30%;
 }

 .secondhalf img {
  width: 70%;
  border: 4px solid white;
  border-radius: 150px;
  display: block;
  margin: auto;
 }

 .text-big {
  font-family: 'Piazzolla', serif;
  font-weight: bold;
  font-size: 35px;
 }

 .text-small {
  font-size: 18px;
 }

 .btn {
  padding: 8px 20px;
  margin: 7px 0;
  border: 2px solid white;
  border-radius: 8px;
  background: none;
  color: white;
  cursor: pointer;
 }

 .btn-sm {
  padding: 6px 10px;
  vertical-align: middle;
 }

 .section {
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 90%;
  margin: auto;
 }

 .section-Left {
  flex-direction: row-reverse;
 }

 .paras {
  padding: 0px 65px;
 }

 .thumbnail img {
  width: 250px;
  border: 2px solid black;
  border-radius: 26px;
  margin-top: 19px;
 }

 .center {
  text-align: center;
 }

 .text-footer {
  text-align: center;
  padding: 30px 0;
  font-family: 'Ubuntu,' sans-serif;
  display: flex;
  justify-content: center;
  color: white;
 }

最终代码

在执行所有修改并将 HTML 和 CSS 代码合并为一个代码后，最终代码变为

代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Welcome to my website</title>
 <style>
  
  *{
    margin: 0;
    padding: 0;
  }

  .navbar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    cursor: pointer;
  }

  .background {
    background: black;
    background-blend-mode: darken;
    background-size cover;
  }

  .nav-list {
    width: 70%;
    display: flex;
    align-items: center;
  }

  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .logo img {
    width: 50px;
    border-radius: 50px;
  }

  .nav-list li {
    list-style: none;
    padding: 26px 30px;
  }

  .nav-list li a {
    text-decoration: none;
    color: white;
  }

  .nav-list li a:hover {
    color: grey;
  }

  .rightnav {
    width: 30%;
    text-align: right;
  }

  #search {
    padding: 5px;
    font-size: 17px;
    border: 2px solid grey;
    border-radius: 9px;
  }

  .firstsection {
    background-color: RGB(116, 241, 116);
    height: 400px;
  }

  .secondsection {
    background-color: RGB(95, 95, 160);
    height: 400px;
  }

  .box-main {
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    max-width: 80%;
    margin: auto;
    height: 80%;
  }

  .firsthalf {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .secondhalf {
    width: 30%;
  }

  .secondhalf img {
    width: 70%;
    border: 4px solid white;
    border-radius: 150px;
    display: block;
    margin: auto;
  }

  .text-big {
    font-family: 'Piazzolla', serif;
    font-weight: bold;
    font-size: 35px;
  }

  .text-small {
    font-size: 18px;
  }

  .btn {
    padding: 8px 20px;
    margin: 7px 0;
    border: 2px solid white;
    border-radius: 8px;
    background: none;
    color: white;
    cursor: pointer;
  }

  .btn-sm {
    padding: 6px 10px;
    vertical-align: middle;
  }

  .section {
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 90%;
    margin: auto;
  }

  .section-Left {
    flex-direction: row-reverse;
  }

  .paras {
    padding: 0px 65px;
  }

  .thumbnail img {
    width: 250px;
    border: 2px solid black;
    border-radius: 26px;
    margin-top: 19px;
  }

  .center {
    text-align: center;
  }

  .text-footer {
    text-align: center;
    padding: 30px 0;
    font-family: 'Ubuntu,' sans-serif;
    display: flex;
    justify-content: center;
    color: white;
  }

 </style>
 
</head>

 <body>
  <nav class=" navbar background">
    <ul class="nav-list">
      <div class="logo">
        <img src="https://media.licdn.com/dms/image/C4D0BAQEwg5FK93uumQ/company-logo_200_200/0/1519923012279?e=2147483647&v=beta&t=63CNoS8OTR4lHjPhHSO7eFFqwLGwYunWfyDBV3tdc0c">
      </div>
      <li><a href="#web">Web Technology</a></li>
      <li><a href="#program">C Programming</a></li>
      <li><a href="#course">Courses</a></li>
    </ul>

    <div class="rightNav">
      <input type="text" name="search" id="search">
      <button class="btn btn-sm">Search</button>
    </div>
  </nav>

  <section class=" first section">
    <div class="box-main">
      <div class="firstHalf">
        <h1 class="text-big" id="web">
          Web Technology
        </h1>
         
        <p class="text-small">
           HTML, referred to as HyperText Markup
          Language. It is the most widely used language that is used to develop a webpage. it was created by Berner-Lee in the year of 1991. The first standard version of HTML is HTML 2.0 .It was launched in the year of 1995. The major version of HTML is HTML5 which was launched in the year of 1999. Now we are using the latest version of HTML, which is HTML5. With the help of HTML, we can create a website and become web developers.
        </p>


      </div>
    </div>
  </section>

  <section class= "second section">
    <div class="box-main">
      <div class="secondHalf">
        <h1 class="text-big" id="program">
          C Programming
        </h1>
        <p class="text-small">
          C is a powerful general-purpose programming language developed at AT & T's Bell Laboratories of USA in 1972.It was designed and written by Dennis Ritchie. C become popular because it is reliable, simple, and easy to use.C Programming is used to develop software like operating systems, databases, compilers, and so on. C programming is an excellent language to learn to program for beginners.
Although numerous computer languages are used for writing computer applications, the computer programming language, C, is the most popular language worldwide. Everything from microcontrollers to operating systems is written in C since it's very flexible and versatile, allowing maximum control with minimal commands. If you are interested in a career in computer programming, it would be wise to start by learning the C programming language.
        </p>


      </div>
    </div>
  </section>

  <section class="section">
    <div class="paras">
      <h1 class="sectionTag text-big">Java</h1>

      <p class= "sectionSubTag text-small">
        Java is the one of the most
        popular programming language
        for many years. Java is also known as Object
        Oriented Programming Language. But we cannot say that Java is not
        considered as pure object-oriented
        as it provides support for primitive
        data types (like int, char, etc) The
        Java codes are first compiled into byte
        code (machine-independent code). Then
        the byte code is run on Java Virtual
        Machine (JVM), regardless of the
        underlying architecture.
      </p>


    </div>

    <div class="thumbnail">
      <img src="https://wallpapers.com/images/featured/murjp1nk4lp1idlt.jpg" alt="laptop image">
    </div>
  </section>

  <footer class="background">
    <p class="text-footer">
      Copyright ©-All rights are reserved
    </p>


  </footer>

 </body>

</html>

输出

说明

在上面的代码中，我们借助 HTML 和 CSS 创建了一个网站。上述代码的最终输出显示在输出部分。

下一主题HTML CSS

网站的 HTML 代码

引言

创建结构

HTML 代码

CSS Design

最终代码

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

网站的 HTML 代码

引言

创建结构

HTML 代码

CSS Design

最终代码

相关帖子

如何使用 HTML 和 CSS 将登录表单添加到图片

如何在 HTML 中使用 PHP

HTML 可访问性

HTML Runner

如何在 HTML 中添加空格

如何在 HTML 中添加网站图标

Excel 中级测试

HTML 隐藏元素

HTML 申请表

HTML 空格代码

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器