常用HTML标签及属性总结

目录

引言 

 常用标签总结

 标题（Heading）标签

 文本（Text）标签

 图像（Image）标签

  列表（List）标签

 表格（Table）标签

 表单（Form）标签

HTML中常见的标签属性及其描述

 class

 id

 href

 src

 alt

其他

 参考资料

---

引言 

HTML（HyperText  Markup  Language），是一种用于创建网页的标准标记语言。它通过将文本、图像、音频、视频等内容结合起来，形成网页的结构，使得网页呈现出风格和排版的样式。HTML不是一种编程语言，而是一种标记语言，用于描述和定义网页的结构和内容。

HTML的语法非常简单，主要是由标签和属性组成。标签是用于定义HTML元素的名称，如<p>表示段落元素。属性则是用于为HTML元素提供更多的信息。例如，<img>标签用于插入图像，可以通过“src”属性来指定图像的URL地址。

HTML还具有一些常用的元素和标签，如表格、列表、链接、表单等。通过这些元素，可以创建出各种各样的网页。

除了基本的HTML语法，还有一些实用的技巧和技术，如CSS（Cascading  Style  Sheets）、JavaScript和响应式设计等。CSS用于定义网页的样式，JavaScript用于实现网页的交互功能，响应式设计则是一种让网页自适应不同设备尺寸的技术。

总之，HTML是创建网页的基础，学好HTML对于任何一个网站开发者都非常重要。无论是想要自己搭建一个简单的个人网站，还是想要成为一名专业的网站开发者，掌握HTML都是必不可少的一步。

 常用标签总结

 标题（Heading）标签

标题标签用于定义标题，并根据级别在页面上显示。

常见的标题标签包括`<h1>`、`<h2>`、`<h3>`、`<h4>`、`<h5>`和`<h6>`。

<h1>This is a level 1 heading</h1>
<h2>This is a level 2 heading</h2>
<h3>This is a level 3 heading</h3>
<h4>This is a level 4 heading</h4>
<h5>This is a level 5 heading</h5>
<h6>This is a level 6 heading</h6>

 文本（Text）标签

 文本标签用于定义文本相关的内容和格式。

常见的文本标签包括`<p>`、`<em>`、`<strong>`、`<a>`和`<span>`、'<div>'。

<p>This is a paragraph of text.</p>
<em>This text is emphasized.</em>
<strong>This text is important.</strong>
<a href="https://www.example.com">This is a link</a>
<span>This is a span element</span>
<div>This is a div element</div>

 图像（Image）标签

 图像标签用于在页面上展示图像。

`<img>`标签必须包含`src`属性，指定图像的URL

<img src="https://www.example.com/image.jpg" alt="Description of image">

  列表（List）标签

 列表标签用于定义有序或无序列表。

有序列表使用`<ol>`标签，无序列表使用`<ul>`标签；每个列表项使用`<li>`标签。

<ol>
  <li>First item in ordered list</li>
  <li>Second item in ordered list</li>
  <li>Third item in ordered list</li>
</ol>

<ul>
  <li>First item in unordered list</li>
  <li>Second item in unordered list</li>
  <li>Third item in unordered list</li>
</ul>

 表格（Table）标签

表格标签用于展示表格数据。

最常用的表格标签是`<table>`（表格本身），`<thead>`（表头），`<tbody>`（表格体）和`<tr>`（表格行）。

<table>
  <thead>
    <tr>
      <th>First column header</th>
      <th>Second column header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>First column, first row</td>
      <td>Second column, first row</td>
    </tr>
    <tr>
      <td>First column, second row</td>
      <td>Second column, second row</td>
    </tr>
  </tbody>
</table>

 表单（Form）标签

 表单标签用于创建交互式表单，允许用户输入或选择数据。

最常用的表单标签是`<form>`（表单本身），`<input>`（最常用的表单元素），`<select>`（下拉菜单）和`<textarea>`（文本框）。

<form action="process-form.php" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email">

  <label for="message">Message:</label>
  <textarea id="message" name="message"></textarea>

  <input type="submit" value="Send">
</form>

HTML中常见的标签属性及其描述

 class

 class属性用于定义一个元素的类名。

<div class="my-class">This div has a class of "my-class".</div>

 id

 id属性用于定义一个元素的唯一标识符。

<div id="my-id">This div has an ID of "my-id".</div>

 href

 href属性用于指定链接的URL。

<a href="https://www.example.com">This is a link</a>

 src

 src属性用于指定图片的URL。

<img src="https://www.example.com/image.jpg" alt="Description of image">

 alt

 alt属性用于定义图像的文本描述，在图像无法加载或屏幕阅读器上阅读页面时将显示文本。

<img src="https://www.example.com/image.jpg" alt="Description of image">

其他

还有一些HTML标签和属性并不常用，这里不一一列举。需要了解更多HTML标签和属性，可以查阅相关文档。

 参考资料

-  [HTML标签列表  -  MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element)
-  [HTML  -  w3schools](https://www.w3schools.com/html/)