HTML（HyperText Markup Language）是用于构建网页的标记语言。它通过各种标签（tags）来组织和呈现内容。以下是一些常用的 HTML 标签以及它们的详细解释：
1、<html> 和 <body>
-
<html>HTML 文件的根元素，包裹整个 HTML 文档的内容。它告诉浏览器这是一个 HTML 文档。 -
<body>包含网页的主要内容。网页上可见的文本、图片、表单等元素都在<body>中定义。
2、<head> 和 <meta>
-
<head>包含有关网页的元数据（metadata），例如页面的标题、字符集、样式表、脚本链接等。<head>的内容不会显示在页面上，但对页面的功能和表现有重要作用。 -
<meta>定义网页的元数据，如编码、描述、关键字等。常见的用途包括 SEO（搜索引擎优化）和设置字符集。
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="A simple webpage.">
<title>My Webpage</title>
</head>
</html>
3、<h1> 到 <h6>
-
这些标签用于定义标题（headings）。
<h1>是最大的标题，<h6>是最小的。它们在 SEO 中具有重要意义，因为搜索引擎根据标题结构理解网页的内容层次。
<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>4、<p>
-
<p>用于定义段落。它是网页中的基本文本块，默认会在前后增加空白间距。
<p>This is a paragraph of text.</p>
5、<a>（Anchor）
-
<a>标签用于创建超链接。它的href属性指定链接的目标（如网页或文件）。
<a href="https://www.example.com">Visit Example</a>
6、<img>
-
<img>标签用于嵌入图像。它是一个自闭合标签，必须使用src属性指定图像的路径，并且通常建议使用alt属性提供图像的替代文本（用于图像加载失败或无障碍访问）。
<img src="image.jpg" alt="A description of the image">7、<ul> 和 <ol> 以及 <li>
-
<ul>: 无序列表，通常使用圆点（bullet）标记。 -
<ol>: 有序列表，通常使用数字标记。 -
<li>: 列表项，用于在有序或无序列表中定义每一项。
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
</ol>
8、<table>、<tr>、<td>、<th>
-
<table>: 用于创建表格。 -
<tr>: 定义表格中的行。 -
<td>: 定义单元格数据。 -
<th>: 定义表头单元格，通常会加粗并居中。
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
9、<form> 和 <input> 和 <label> 和 <button>
-
<form>: 用于创建表单，用户可以通过表单提交数据。 -
<input>: 定义输入字段（如文本框、单选框、复选框等）。 -
<label>: 定义表单元素的标签，通常与input元素一起使用，以提高用户体验和无障碍访问。 -
<button>: 定义按钮，可以用于提交表单或触发其他操作。
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>
10、<div> 和 <span>
-
<div>: 块级元素，用于分割页面布局。通常用于容器，包裹其他元素并通过 CSS 进行样式化和布局。 -
<span>: 行内元素，用于包裹文本或其他行内内容，通常用于对部分文本进行样式处理。
<div>
<p>This is a paragraph inside a div.</p>
</div>
<p>This is <span style="color: red;">red text</span> in a paragraph.</p>
11、<strong> 和 <em>
-
<strong>: 定义加粗文本。 -
<em>: 定义斜体文本。
<p>This is <strong>important</strong> text.</p>
<p>This is <em>emphasized</em> text.</p>
12、<br> 和 <hr>
-
<br>: 换行符，用于强制文本换行。 -
<hr>: 水平线，用于分隔内容。
<p>This is line one.<br>This is line two.</p>
<hr>
<p>Content after the horizontal rule.</p>
13、<header>、<nav>、<footer>
-
<header>: 定义页面或部分内容的头部，通常包含导航、标题等信息。 -
<nav>: 定义导航链接部分。 -
<footer>: 定义页面或部分内容的底部，通常包含版权声明、联系信息等。
<header>
<h1>Website Title</h1>
</header>
<nav>
<a href="/home">Home</a>
<a href="/about">About</a>
</nav>
<footer>
<p>© 2024 My Website</p>
</footer>
14、<section> 和 <article>
-
<section>: 表示页面中的一个独立部分，可以包含标题、段落、图片等内容。适合用于将页面分成不同主题块。 -
<article>: 表示独立的内容块，通常用于文章、博客、新闻等，可以在不同的页面或应用程序中重复使用。
<section>
<h2>About Us</h2>
<p>This section describes our company.</p>
</section>
<article>
<h3>Blog Post Title</h3>
<p>This is a blog post content.</p>
</article>
15、<iframe>
-
<iframe>: 内联框架，用于在页面中嵌入其他网页。
<iframe src="https://www.example.com" width="600" height="400"></iframe>
扫一扫
1609
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
