How to write html-Front-end Q&A-php.cn

How to write html

PHPz

Release： 2023-04-21 10:20:38

Original

2840 people have browsed it

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>

Copy after login

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>

Copy after login

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="这是一张图片。">

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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!