HTML的语法以及常用标签汇总

HTML（HyperText Markup Language）是一种用于创建网页的标记语言。它由一系列的标签组成，这些标签描述了网页的结构和内容。通过使用不同的HTML标签，可以定义文本、图像、链接、表格、表单等元素，并将它们组织成一个完整的网页。下面介绍一下HTML的语法以及常用标签。

一、HTML语法

• HTML是由一系列标签（tag）组成的，标签通常是成对出现的，包括开始标签和结束标签，用尖括号包围内容，如 <tag>内容</tag> 。
• HTML标签不区分大小写，但建议使用小写字母以保持一致性。
• HTML文档以 声明开始，然后是 标签包裹整个文档内容，其中包括 和 部分。

二、常用HTML标签

1. <h1> - <h6> : 定义标题

<h1>This is a Heading Level 1</h1>
<h2>This is a Heading Level 2</h2>

2. <p> : 定义段落

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

3. <a> ：定义超链接

<a href="https://www.example.com">Visit our website</a>

4. <img> ：插入图像

<img src="image.jpg" alt="Image Description">

5. <ul> 、 <ol> 、 <li> ：定义列表

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<ol>
  <li>Step 1</li>
  <li>Step 2</li>
</ol>

6. <table> 、 <tr> 、 <td> ：定义表格

<table>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

rowspan 属性来实现单元格的跨行合并，使用 colspan 属性来实现单元格的跨列合并

html
<table border="1">
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
    <td rowspan="2">Row 1, Cell 3 (span 2 rows)</td>
  </tr>
  <tr>
    <td colspan="2">Row 2, Cell 1 and Cell 2 (span 2 columns)</td>
  </tr>
  <tr>
    <td colspan="3">Row 3, Cell 1, Cell 2, and Cell 3 (span 3 columns)</td>
  </tr>
</table>

在上面的代码中：

• 第一行有三个单元格，第三个单元格使用 rowspan=“2” 属性，使其跨越两行。
• 第二行有两个单元格，并且第二个单元格使用 colspan=“2” 属性，使其跨越两列。
• 第三行有一个单元格，并且使用 colspan=“3” 属性，使其跨越三列。

7. <form> ：定义表单

<form action="/submit_form" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  <input type="submit" value="Submit">
</form>

表单的提交方式主要有两种：GET和POST

1. GET提交方式：
   • 使用GET提交方式，表单数据会附加在URL后面，适合数据量较小的情况。
   • GET提交方式将表单数据显示在URL中，不适合敏感数据的传输。

代码如下：

<form action="/submit_form" method="get">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  <input type="submit" value="Submit">
</form>

2. POST提交方式：
   • 使用POST提交方式，表单数据会作为HTTP请求的一部分发送，适合传输敏感数据和大量数据。
   • POST提交方式将表单数据放在请求体中，不会在URL中显示。

代码如下：

<form action="/submit_form" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  <input type="submit" value="Submit">
</form>

8. <input> ：定义输入控件

<input type="text" placeholder="Enter your name">
<input type="checkbox" id="checkbox1" name="checkbox1" value="check1">
<input type="radio" id="radio1" name="radio" value="option1">

9. <textarea> ：定义多行文本输入框

<textarea rows="4" cols="50">
Enter your text here...
</textarea>

10. <select> 、 <option> ：定义下拉框和选项

<select>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

11. <button> ：定义按钮

<button type="button">Click Me</button>

12. <label> ：定义表单标签

<label for="input_field">Enter your name:</label>
<input type="text" id="input_field">

13. <iframe>：定义内联框架

<iframe src="https://www.example.com" width="600" height="400"></iframe>

14. <style> ：定义内部样式表

<style>
  h1 {
    color: blue;
  }
</style>

15. <script> ：定义内部或外部脚本

<script>
  alert("Hello, World!");
</script>

16. <meta> ：定义文档元数据

<meta charset="UTF-8">
<meta name="description" content="This is a website description">

17. <div>

用于划分文档中的区块，常用于布局和样式控制。

代码如下：

<div style="background-color: lightblue; padding: 10px;">
  <h2>This is a div element</h2>
  <p>This is some text inside the div element.</p>
</div>

18. <span>
    用于行内元素的样式控制，常用于对文本的部分样式设置。

代码如下：

<p>This is a <span style="color: red;">red</span> word.</p>

19. <header>

用于定义文档或区块的页眉。

代码如下：

<header>
  <h1>Welcome to our website</h1>
</header>

20. <footer>

用于定义文档或区块的页脚。

代码如下：

<footer>
  <p>&copy; 2022 My Website. All rights reserved.</p>
</footer>

21. <section>

用于定义文档中的节（section），常用于结构化内容。

代码如下：

<section>
  <h2>Section Title</h2>
  <p>This is the content of the section.</p>
</section>

23. <article>

用于定义独立的内容块，如新闻文章、博客帖子等。

代码如下：

<article>
  <h2>Article Title</h2>
  <p>This is the content of the article.</p>
</article>

24. 实体特殊符号

1. < ：小于号（<）

代码如下：

<p>This is an example of the less than symbol: 5 &lt; 10</p>

2. > ：大于号（>）

代码如下：

<p>This is an example of the greater than symbol: 10 &gt; 5</p>

3. & ：和号（&）

代码如下：

<p>This is an example of the ampersand symbol: B &amp; W</p>

4. " ：引号（"）

代码如下：

<p>This is an example of the double quotation mark: "Hello"</p>

5. © ：版权符号（©）

代码如下：

<p>This content is protected by &copy; 2022</p>

6. ® ：注册商标符号（®）

代码如下：

<p>This product is a registered trademark &reg;</p>

7. € ：欧元符号（€）

代码如下：

<p>The price is 10&euro;</p>