跳转到内容

HTML基础

来自代码酷

HTML基础[编辑 | 编辑源代码]

HTML（HyperText Markup Language，超文本标记语言）是构建网页的基础技术之一，用于定义网页的结构和内容。它通过标签（tags）描述页面的各个部分，如标题、段落、列表、链接等。HTML是前端开发的基石，与CSS（样式表）和JavaScript（脚本语言）共同构成现代网页开发的三大核心技术。

基本结构[编辑 | 编辑源代码]

一个标准的HTML文档由以下基本结构组成： 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    <!-- 网页内容 -->
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
</html>
  • <!DOCTYPE html>：声明文档类型为HTML5。
  • <html>：根元素，包含整个HTML文档。
  • <head>：包含元数据（如字符集、标题等），不直接显示在页面上。
  • <body>：包含所有可见的页面内容。

常用HTML标签[编辑 | 编辑源代码]

以下是HTML中常用的标签及其用途：

文本标签[编辑 | 编辑源代码]

  • 到

    ：标题标签，

    为最高级标题。

  • ：段落标签。

  • 或：加粗文本。
  • 或：斜体文本。
<h1>主标题</h1>
<h2>副标题</h2>
<p>这是一个<strong>加粗</strong>的文本，以及一个<em>斜体</em>的文本。</p>

列表标签

    • ：无序列表。
      • ：有序列表。
      2. ：列表项。
    <ul>
    <li>无序列表项1</li>
    <li>无序列表项2</li>
</ul>
<ol>
    <li>有序列表项1</li>
    <li>有序列表项2</li>
</ol>

    链接与图片[编辑 | 编辑源代码]

    • <a>：超链接。
    • <img>：图片。
    <a href="https://example.com">点击访问示例网站</a>
<img src="image.jpg" alt="示例图片">

    表格[编辑 | 编辑源代码]

    • ：表格。
      • ：表格行。
      • ：表格单元格。
      		• ：表头单元格。 
      <table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
    </tr>
</table>

      HTML表单[编辑 | 编辑源代码]

      表单用于收集用户输入，常见的表单元素包括：

      • <form>：表单容器。
      • <input>：输入字段（文本、密码、单选按钮等）。
      • <textarea>：多行文本输入。
      • <select>和<option>：下拉选择框。
      • <button>：按钮。
      <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>
    <button type="submit">提交</button>
</form>

      HTML5新特性[编辑 | 编辑源代码]

      HTML5引入了许多新特性，包括：

      • 语义化标签：如<header>、<footer>、<article>等，使文档结构更清晰。
      • 多媒体支持：<audio>和<video>标签。
      • Canvas绘图：<canvas>标签用于动态绘制图形。
      <header>
    <h1>网站标题</h1>
</header>
<article>
    <h2>文章标题</h2>
    <p>文章内容...</p>
</article>
<footer>
    <p>版权信息</p>
</footer>

      实际案例[编辑 | 编辑源代码]

      以下是一个简单的网页布局示例，结合了HTML的基本结构和常用标签： 

      <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的网页</title>
</head>
<body>
    <header>
        <h1>欢迎来到我的网站</h1>
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h2>文章标题</h2>
            <p>这是一篇文章的内容。</p>
        </article>
    </main>
    <footer>
        <p>&copy; 2023 我的网站</p>
    </footer>
</body>
</html>

      总结[编辑 | 编辑源代码]

      HTML是网页开发的基础，通过标签定义内容和结构。掌握HTML的基本标签和语义化布局是前端开发的第一步。随着HTML5的普及，开发者可以更高效地构建现代化的网页应用。

检索自“https://wiki.echo.cool/index.php?title=HTML基础&oldid=22267”