Home > Article > Web Front-end > How to write html

How to write html

PHPzOriginal: 2023-04-21 10:01:112760browse

HTML (Hyper Text Markup Language) is a markup language used to create web pages. It uses markup to describe the content and structure of a web page. In this article, we'll cover how to use HTML to create a basic web page.

Basic HTML file structure

HTML files must start with <!DOCTYPE html>, which is the declaration method of HTML5, telling the web browser Which version of HTML this document is written in. Next, you need to add the <html> tag, which is the root tag of the HTML file. Just add other tags inside the <html> tag.

<!DOCTYPE html>
<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个简单的网页。</p>
  </body>
</html>

In the above code, the <head> tag is used to contain the metadata of the web page, <title> is used to specify the web page title, The <body> tag is used to contain the main content of the web page. <h1> and  are used to create the title and paragraph of the web page respectively.

Add text and links

In HTML, you can add text and links using the following tags:

<!-- 段落 -->
<p>这是一个段落。</p>

<!-- 标题 -->
<h1>这是一个一级标题</h1>

<!-- 强调 -->
<strong>这是加粗的文本。</strong>
<em>这是斜体的文本。</em>

<!-- 链接 -->
<a href="http://www.example.com">这是一个链接</a>

Add image

You can add images using the <img> tag. The tag must contain the URL of the image. Alternate text can be added using the alt attribute, which is important for assistive technology users.

<img src="image.jpg" alt="这是一张图片。">

Add list

You can use the following tags to create ordered and unordered lists:

<!-- 有序列表 -->
<ol>
  <li>项目1</li>
  <li>项目2</li>
</ol>

<!-- 无序列表 -->
<ul>
  <li>项目1</li>
  <li>项目2</li>
</ul>

Add table

You can use the following tags to create tables:

<table>
  <thead>
    <tr>
      <th>标题1</th>
      <th>标题2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
    </tr>
    <tr>
      <td>单元格3</td>
      <td>单元格4</td>
    </tr>
  </tbody>
</table>

Style and layout

You can use CSS (Cascading Style Sheets) to add style and layout to HTML . CSS allows you to control aspects such as the color, size, and position of text on a web page.

<!DOCTYPE html>
<html>
  <head>
    <title>网页标题</title>
    <style>
      h1 {
        color: blue;
        font-size: 24px;
        text-align: center;
      }
      
      p {
        color: black;
        font-size: 18px;
        margin: 10px;
        line-height: 1.5;
      }
    </style>
  </head>
  <body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个简单的网页。</p>
  </body>
</html>

The above code sets the title of the web page to blue and centered; sets the paragraph to black, 18 pixels in size, 10 pixels top and bottom margins, and 1.5 line height.

Conclusion

The above is a simple guide to building a web page using basic HTML tags and CSS, but there are many more complex and advanced uses of HTML and CSS languages. , including using Javascript for dynamic interaction of web pages, etc. In short, using HTML and CSS to build web pages is a good way for beginners to get started, and it is also the only way to learn front-end development in depth.

The above is the detailed content of How to write html. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Can I learn Vue if I don’t know JavaScript?Next article：Can I learn Vue if I don’t know JavaScript?

See more

How to write html

Related articles