html标签
HTML（超文本标记语言）是构建网页的标准语言。它用于描述网页的结构和内容，采用标签来标记文本、图像和其他媒体元素。以下是一些关键点：
特点
- 标记语言：使用标签来定义文档结构，如标题、段落和列表。
- 结构化：HTML提供了文档的基本结构，使浏览器能够正确呈现内容。
- 超链接：支持创建超链接，方便在网页之间导航。
基本结构
html
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个段落。</p>
<a href=”https://example.com”>访问示例网站</a>
</body>
</html>
应用
- 文本和图像显示：显示文本、图像、视频等多种媒体。
- 表单创建：收集用户输入，如登录、注册和反馈表单。
- 布局设计：结合CSS进行网页布局和样式设计。
1. 基本结构标签
<html>: HTML文档的根元素，所有其他元素都应包含在此标签内。
<html lang=”en”>
<head>: 包含文档的元数据，如标题、字符集、样式表和脚本等。
<head>
<meta charset=”UTF-8″>
<title>文档标题</title>
</head>
<title>: 网页的标题，显示在浏览器标签上。
<title>我的网页</title>
<body>: 网页的主体内容，包含用户在浏览器中看到的所有内容。
<body>
<h1>欢迎</h1>
</body>
2. 文本格式化标签
<h1>到<h6>: 标题标签，用于定义文档的标题层级，<h1>为最高级，通常用于主标题。
<h1>主标题</h1>
<p>: 段落标签，用于定义文本段落。
<p>这是一个段落。</p>
<br>: 换行标签，用于在文本中插入换行。
这是第一行。<br>这是第二行。
<strong>: 表示强调的文本，通常以粗体显示。
<strong>重要提示</strong>
<em>: 表示强调的文本，通常以斜体显示。
<em>重点内容</em>
<small>: 显示小号文本。
<small>小字说明</small>
<mark>: 突出显示的文本，通常以背景高亮显示。
<mark>高亮文本</mark>
3. 链接和引用
<a>: 超链接标签，用于创建链接。
<a href=”https://www.example.com”>访问示例网站</a>
<img>: 插入图像，src属性指定图像路径，alt属性提供替代文本。
<img src=”image.jpg” alt=”描述图像”>
<figure>: 图像及其说明的容器。
<figure>
<img src=”image.jpg” alt=”描述图像”>
<figcaption>图像说明</figcaption>
</figure>
<figcaption>: 图像或图表的说明文本。
<figcaption>这是图像的说明</figcaption>
4. 列表
<ul>: 无序列表，列表项通常以圆点表示。
<ul>
<li>项目1</li>
<li>项目2</li>
</ul>
<ol>: 有序列表，列表项通常以数字或字母表示。
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
<li>: 列表项，适用于无序列表和有序列表。
<li>一个列表项</li>
5. 表格
<table>: 创建一个表格。
<table>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
</table>
<tr>: 表格行。
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<td>: 表格单元格，存放数据。
<td>内容</td>
<th>: 表头单元格，通常以粗体显示。
<th>表头内容</th>
6. 表单
<form>: 表单标签，用于收集用户输入。
<form action=”/submit” method=”post”>
<input type=”text” name=”name” placeholder=”输入姓名”>
<input type=”submit” value=”提交”>
</form>
<input>: 输入控件，可以是文本框、单选框、复选框等，类型通过type属性指定。
<input type=”text” name=”username” placeholder=”用户名”>
<textarea>: 多行文本输入框。
<textarea rows=”4″ cols=”50″ placeholder=”输入内容”></textarea>
<button>: 按钮控件。
<button type=”button”>点击我</button>
<select>: 下拉列表。
<select>
<option value=”1″>选项1</option>
<option value=”2″>选项2</option>
</select>
<option>: 下拉列表中的选项。
<option value=”3″>选项3</option>
7. 其他标签
<div>: 块级容器，用于分组和样式化。
<div class=”container”>内容</div>
<span>: 行内容器，用于分组小块文本或元素。
<span class=”highlight”>突出显示的文本</span>
<header>: 页面或部分的头部，通常包含标题和导航。
<header>
<h1>网站标题</h1>
</header>
<footer>: 页面或部分的底部，通常包含版权信息。
<footer>© 2024 公司名称</footer>
<nav>: 导航链接区域，通常用于定义网站的导航菜单。
<nav>
<a href=”#home”>首页</a>
<a href=”#about”>关于我们</a>
</nav>
<article>: 独立的内容区域，例如文章或博客帖子。
<article>
<h2>文章标题</h2>
<p>文章内容</p>
</article>
<section>: 主题区域，用于组织内容。
<section>
<h2>部分标题</h2>
<p>部分内容</p>
</section>
8. 元标签
<meta>: 文档的元信息，比如字符集、描述、关键词等。
<meta name=”description” content=”这是一个示例网页”>