说码解字
0%

HTML-语法速览

发表于 更新于 分类于 ， Valine：

1. HTML 的基本结构

HTML 是超文本标记语言，用于定义网页的内容。

基本文档结构：

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
</html>

元素组成：

  • 标签：如 <h1> 和 </h1>。
  • 属性：如 lang="en"。
  • 内容：如 这是一个标题。

2. 常见标签

标题标签

HTML 提供 6 个级别的标题，从 <h1> 到 <h6>：

1
2
3
<h1>标题 1</h1>
<h2>标题 2</h2>
<h3>标题 3</h3>

段落和换行

  • 段落：<p>
  • 换行：<br>
1
2
3
<p>这是一个段落。</p>
<p>另一个段落。</p>
<p>换行符<br>这是一行新内容。</p>

文本格式化

1
<b>加粗</b>, <strong>强调</strong>, <i>斜体</i>, <u>下划线</u>, <s>删除线</s>

3. 超链接

超链接使用 <a> 标签。

1
<a href="https://www.example.com" target="_blank">点击访问 Example</a>
  • href：链接地址。
  • target="_blank"：新窗口打开。

4. 图像

图像使用 <img> 标签。

1
<img src="image.jpg" alt="描述文本" width="300" height="200">
  • src：图片路径。
  • alt：图片描述（用于无障碍和加载失败时显示）。
  • width 和 height：宽度和高度。

5. 列表

无序列表

1
2
3
4
5
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

有序列表

1
2
3
4
5
<ol>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>

6. 表格

表格使用 <table> 标签。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
    </tr>
</table>
  • <th>：表头。
  • <tr>：表行。
  • <td>：表格单元格。

7. 表单

表单使用 <form> 标签，用于收集用户输入。

1
2
3
4
5
6
7
8
9
<form action="/submit" method="post">
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username">
    <br>
    <label for="password">密码:</label>
    <input type="password" id="password" name="password">
    <br>
    <input type="submit" value="提交">
</form>
  • action：提交地址。
  • method：提交方式（get 或 post）。
  • 常见输入类型：text、password、email、number、checkbox、radio。

8. 多媒体

视频

1
2
3
4
<video controls width="600">
    <source src="video.mp4" type="video/mp4">
    您的浏览器不支持视频播放。
</video>

音频

1
2
3
4
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    您的浏览器不支持音频播放。
</audio>

9. HTML5 新特性

语义化标签

  • **<header>**：定义页面头部。
  • **<footer>**：定义页面尾部。
  • **<article>**：独立的文章。
  • **<section>**：页面的独立部分。
  • **<nav>**：导航菜单。
  • **<aside>**：侧边栏。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<header>
    <h1>网站标题</h1>
</header>
<nav>
    <ul>
        <li><a href="#home">首页</a></li>
        <li><a href="#about">关于</a></li>
    </ul>
</nav>
<main>
    <section>
        <h2>主要内容</h2>
        <p>这是主要内容区域。</p>
    </section>
</main>
<footer>
    <p>版权所有 &copy; 2024</p>
</footer>

本地存储（Local Storage 和 Session Storage）

1
2
3
4
5
6
7
8
9
// 存储数据
localStorage.setItem("key", "value");
sessionStorage.setItem("key", "value");

// 读取数据
console.log(localStorage.getItem("key"));

// 删除数据
localStorage.removeItem("key");

10. 内嵌 CSS 和 JavaScript

内嵌 CSS

1
2
3
4
5
6
7
8
9
<style>
    body {
        background-color: lightblue;
    }
    h1 {
        color: navy;
        text-align: center;
    }
</style>

内嵌 JavaScript

1
2
3
4
5
6
<script>
    function showAlert() {
        alert("Hello, World!");
    }
</script>
<button onclick="showAlert()">点击我</button>

11. 特殊字符

HTML 支持的常用特殊字符：

  • &lt;：小于号 <
  • &gt;：大于号 >
  • &amp;：和号 &
  • &nbsp;：空格
  • &copy;：版权符号 ©
  • &reg;：注册商标符号 ®

12. 注释

1
2
<!-- 这是一个注释 -->
<p>注释不会被显示在页面上。</p>

这些 HTML 基本语法涵盖了常用的标签和属性，为进一步学习 CSS 和 JavaScript 提供了基础。