html基础语法简述汇总

HTML（HyperText Markup Language，超文本标记语言）是构建网页和Web应用程序的标准语言。它用于创建网页的结构，描述网页中的内容以及如何显示这些内容。HTML通过标记（tags）来标识文档的不同部分，告诉浏览器如何渲染内容。

1. HTML文档的结构

一个标准的HTML文档包含以下基本部分：

<!DOCTYPE html> <!-- 声明文档类型 -->
<html lang="en"> <!-- HTML文档开始 -->
<head>
    <meta charset="UTF-8"> <!-- 设置字符集 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 响应式设计 -->
    <title>网页标题</title> <!-- 网页标题 -->
</head>
<body>
    <!-- 页面内容在这里 -->
</body>
</html>

<!DOCTYPE html>: 声明文档类型，告诉浏览器该文档是HTML5格式。
<html>: HTML文档的根元素，lang="en"定义文档的语言为英语。
<head>: 包含文档的元数据，如字符集、视口设置、标题、链接等。
<meta charset="UTF-8">: 设置文档的字符编码为UTF-8，支持多语言字符。
<meta name="viewport" content="width=device-width, initial-scale=1.0">: 用于响应式设计，确保页面在不同设备上的适配。
<title>: 设置网页的标题，显示在浏览器标签栏上。
<body>: 网页的主体部分，包含实际显示给用户的内容。

2. 常用HTML标签

2.1 文本标签

<h1> to <h6>: 标题标签，<h1>为最高级别，<h6>为最低级别。用于定义不同级别的标题。
1
2
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<p>: 段落标签，用于定义文本段落。
1
<p>这是一个段落。</p>

<br>: 换行标签，插入一个换行符。

1	这是一行文本。<br>这是一行新文本。

<strong>: 强调文本，通常显示为加粗。
1
<strong>这是加粗文本。</strong>
<em>: 强调文本，通常显示为斜体。
1
<em>这是斜体文本。</em>

<a>: 链接标签，用于创建超链接。

1	<a href="https://www.example.com">点击这里访问Example网站</a>

2.2 列表标签

<ul>: 无序列表，用于创建没有顺序的项目列表。

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

<ol>: 有序列表，用于创建有顺序的项目列表。

<ol>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>

<li>: 列表项，<li>标签用于定义列表中的每一项，<ul>或<ol>中使用。

2.3 表格标签

<table>: 表格标签，用于创建表格。

<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
    </tr>
</table>

<tr>: 表格行标签，用于定义一行。
<th>: 表头单元格标签，通常显示为加粗并居中。
<td>: 表格单元格标签，用于定义表格中的数据。

2.4 图片标签

<img>: 用于在页面上嵌入图片。常用属性包括src（图片路径）、alt（替代文本）、width和height（设置图片尺寸）。
1
<img src="image.jpg" alt="描述文本" width="300" height="200">

2.5 表单标签

<form>: 表单标签，用于收集用户输入的数据。

<form action="/submit" method="post">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="提交">
</form>

<input>: 用于定义各种类型的输入字段。

1	<input type="text" id="name" name="name" placeholder="请输入姓名">

<label>: 标签标签，用于定义表单控件的说明。
1
<label for="name">姓名：</label>
<button>: 按钮标签，用于定义按钮。
1
<button type="submit">提交</button>

3. HTML属性

HTML标签可以包含各种属性来配置其行为和样式。常见的属性包括：

id: 为元素分配唯一标识符。
1
<div id="header">网站头部</div>
class: 为元素分配一个或多个类名，通常用于CSS或JavaScript。
1
<p class="highlight">高亮文本</p>
href: 用于定义链接的目标地址（用于<a>标签）。
1
<a href="https://www.example.com">访问Example网站</a>
src: 用于定义图片、音频、视频等文件的路径。
1
<img src="logo.png" alt="网站Logo">
alt: 用于指定图片的替代文本（当图片无法显示时显示）。
1
<img src="image.jpg" alt="描述文本">

4. HTML注释

HTML注释用于在代码中添加注释，注释的内容不会显示在网页上。

1	<!-- 这是一个注释 -->

5. HTML字符实体

HTML中有一些特殊字符需要用字符实体来表示，例如：

<: 小于符号（<）
>: 大于符号（>）
&: 与符号（&）
": 双引号（"）
': 单引号（'）

例如，要在页面中显示 < 字符，应该写作 <。

1	<p><div>这是一个HTML标签</div></p>

6. 嵌套结构

HTML标签可以嵌套使用，也可以放置其他标签。例如：

<div>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个段落。</p>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
    </ul>
</div>

总结

HTML是网页开发的基础，使用HTML标签来定义网页的内容和结构。掌握HTML基础语法，了解常见标签和属性，有助于你更好地构建和设计网页。