前端实践记录|豆包MarsCode AI刷题

陌上花开162
VIP.1 初学乍练
2 阅读3分钟

HTML 学习笔记

HTML（超文本标记语言）是构建网页的基础，通过一系列的标签来描述网页的结构和内容。在学习 HTML 的过程中，我对其有了更深入的理解和认识，以下是我的学习笔记总结。

一、HTML 基本结构

一个基本的 HTML 页面由 <!DOCTYPE html> 声明开始，它告诉浏览器使用的 HTML 版本。接着是 <html> 根标签，里面包含 <head> 和 <body> 两个主要部分。

<head> 标签用于存放页面的元信息，例如页面标题（<title> 标签）、样式表链接（<link> 标签）、脚本链接（<script> 标签）等，这些信息不会直接显示在页面上，但对页面的功能和呈现起着重要作用。

<body> 标签则包含了页面中所有可见的内容，如文本、图片、链接、表格、表单等。这是用户在浏览器中实际看到的部分。

二、常用标签

  1. 标题标签：<h1> 到 <h6> 用于定义不同级别的标题，<h1> 为最高级别，字体最大且重要性最高，依次递减。合理使用标题标签有助于搜索引擎理解页面结构和内容层次。

  2. 段落标签：<p> 用于定义段落文本，会自动在段落前后添加空白行，使文本排版更加清晰。

  3. 链接标签：<a> 标签用于创建超链接，通过 href 属性指定链接的目标地址，可以是其他网页、文件或页面内的锚点。例如：<a href="https://www.example.com">点击这里</a> 会创建一个指向指定网址的链接。

  4. 图片标签：<img> 标签用于在页面中插入图片，通过 src 属性指定图片的路径，还可以使用 alt 属性提供图片的替代文本，当图片无法加载或被屏幕阅读器读取时显示，有助于提高网页的可访问性。例如：<img src="image.jpg" alt="美丽的风景">。

  5. 列表标签：

    • 无序列表 <ul>，里面包含 <li> 标签表示列表项，通常用于展示无需排序的项目列表，如导航菜单、商品列表等。例如：

  • 有序列表 <ol>，同样包含 <li> 标签，用于展示有顺序的项目列表，如步骤说明、排行榜等。例如：

三、表格标签

<table> 标签用于创建表格，<tr> 表示表格行，<td> 表示表格单元格，<th> 用于定义表头单元格，通常会加粗显示。通过嵌套这些标签可以构建出复杂的表格结构，用于展示数据或布局页面内容。例如：

四、表单标签

表单用于收集用户信息并提交到服务器进行处理。常见的表单标签有：

  1. <form>：定义表单的开始和结束，通过 action 属性指定表单提交的目标地址，method 属性指定提交方式（如 get 或 post）。

  2. <input>：用于创建各种输入字段，如文本框（type="text"）、密码框（type="password"）、单选按钮（type="radio"）、复选框（type="checkbox"）、提交按钮（type="submit"）等，通过 name 属性为输入字段命名，以便在服务器端获取数据。

  3. <textarea>：用于创建多行文本输入区域，用户可以输入较长的文本内容。

  4. <select> 和 <option>：<select> 定义下拉列表，<option> 则是下拉列表中的选项。例如：

五、HTML 语义化

HTML 语义化是指使用恰当的标签来表达页面的结构和内容含义，而不仅仅是为了实现视觉效果。语义化的 HTML 代码更易于阅读、维护和被搜索引擎理解。例如，使用 <nav> 标签表示导航区域，<header> 标签表示页面头部，<footer> 标签表示页面底部等。这样，即使在没有 CSS 样式的情况下，页面的结构和内容仍然能够清晰地传达给用户和搜索引擎。

以下是我的一次实践记录

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Cafe Menu</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div class="menu">
        <main>
            <h1>CAMPER CAFE</h1>
            <p class="established">Est. 2020</p>
            <hr>
            <section>
               <h2>Coffee</h2>
               <img alt="coffee icon" src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg">
               <article class="item">
                <p class="flavor">French Vanilla</p><p class="price">3.00</p>
               </article>
               <article class="item">
                <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
              </article>
              <article class="item">
                <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
              </article>
              <article class="item">
                <p class="flavor">Hazelnut</p><p class="price">4.00</p>
              </article>
              <article class="item">
                <p class="flavor">Mocha</p><p class="price">4.50</p>
              </article>
            </section>
                <h2>Desserts</h2>
                <img alt="pie icon" src="https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg">
            <section>
                <article class="item">
                    <p class="dessert">Donut</p><p class="price">1.50</p>
                </article>
                <article class="item">
                    <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
                </article>
                <article class="item">
                    <p class="dessert">Cheesecake</p><p class="price">3.00</p>
                </article>
                <article class="item">
                    <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
                </article>
            </section>
        </main>
        <hr class="bottom-line">
        <footer>
            <p><a href="https://www.freecodecamp.org" target="_blank">Visit our website</a></p>
            <p class="address">123 Free Code Camp Drive</p>
        </footer>
        </div>
    </body>
</html>
avatar
文章
阅读
粉丝