前端学习——初识html代码

PixelMeng

已于 2024-07-08 10:24:21 修改

阅读量911

点赞数 7

分类专栏：前端文章标签：前端 html

于 2024-07-04 15:39:30 首次发布

本文链接：https://blog.csdn.net/m0_62862907/article/details/140178143

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本刊说明：

本人初步接触前端，在此记录一些学习心得，欢迎一起学习交流！！推荐网址“https://www.freecodecamp.org/”，注意需要科学上网哦，完全免费（有时候跳广告，稍等一分钟就播完了），并且以简单的实例入手，成就感plus~ 宗旨是Happy coding！每完成一步都有校验以及鼓励，正反馈很强。不过做出来的东西有点上个世纪的感觉，还需要在优化外观，但对于初学者来说，完全够用了。

<话不多说，就此开始编写第一个html项目--猫咪拍照app的网页>

学习历程：

首先进入网页，注册，开始第一个项目

首先预览一下我们最终的效果图，看起来还不错，条理清晰，有基本功能，根据每一步的指示，开始编码，总计用时约4-6小时。

在此，我直接附上本人已完成的代码，如果你不想使用freecodecamp这个网址也可以的，直接使用html在线网址“HTML编辑实时预览 - 小蚂蚁工具箱 (anttoolbox.com)”，输入代码即xu

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CatPhotoApp</title>
  </head>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
      </section>
      <section>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
        </figure>
        <h3>Top 3 things cats hate:</h3>
        <ol>
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
        </figure>
      </section>
      <section>
        <h2>Cat Form</h2>
        <form action="https://freecatphotoapp.com/submit-cat-photo">
          <fieldset>
            <legend>Is your cat an indoor or outdoor cat?</legend>
            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
          </fieldset>
          <fieldset>
            <legend>What's your cat's personality?</legend>
            <input id="loving" type="checkbox" name="personality" value="loving" checked> <label for="loving">Loving</label>
            <input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
            <input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic">Energetic</label>
          </fieldset>
          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
    <footer>
      <p>
        No Copyright - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a>
      </p>
    </footer>
  </body>
</html>

学习心得：

1、html网页书写的基本框架：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
    <h1>我的第一个HTML页面</h1>
    <p>我的第一个段落。</p>
</body>
</html>

<!DOCTYPE html>标签

首先，所有的网页都应该以<!DOCTYPE html>开头，这个特殊的字符串是一个规范说明，应该放置在第一行，声明了浏览器解译代码的方式，确保可以兼容。

其次，<html></html> 标签是HTML文档的根元素，标志着一个HTML文档的开始和结束。这个标签包围了整个文档的内容，包括头部（head）和身体（body）。

`<head></head>`标签

其中，<head> 标签包含了一系列文档的元数据（metadata）【元数据就是解释数据来源的数据】，这些信息不会直接显示在网页上，但对网页的表现和行为具有重要影响。这些信息通常包括：

标题 (<title>): 页面的标题，显示在浏览器窗口或标签页上。【这个我们代码中也有，<title>CatPhotoApp</title>，指的就是标签页上会显示CatPhotoApp】
样式表 (<link>): 用于链接外部CSS文件，控制网页的布局和样式。
脚本 (<script>): 包含或引用JavaScript代码，用于增强页面的交互性。
元描述标签 (<meta>): 提供有关网页的信息，如字符集编码（charset）【这个我们代码中也有，<meta charset="utf-8">，指的就是编码方式】、页面描述（description）、关键词（keywords）等，【还有我们代码中的<html lang="en">是指定整个页面的内容语言为英语】这对搜索引擎优化（SEO）非常重要。

`<body>` `</body>` 标签

而<body> 标签包含网页的所有可见内容。凡是用户在浏览器中看到的元素，如文本、图片、视频、表单等，都应该被包含在<body>标签内。这部分内容是与用户直接交互的，形成了网页的主体部分。【也就是说网页上显示出来的东西都应该在<body></body>这个框架中】

需要注意的是，在HTML中，大多数标签都需要闭合来正确地表达元素的开始和结束。闭合可以是显式的，也就是说，使用一个开始标签 <html> 和一个结束标签 </html> 来明确包裹其中的所有内容。这样的闭合确保了元素内的所有内容都被正确地解释和渲染。【以后写html可以直接拿这个模板来用】

2、主要内容、页脚<mian>与<footer>

<main></main>标签

<main> 标签用于指定文档中的主要内容区域。这个区域应包含页面的核心话题或功能性内容，是页面最重要的部分，通常会有独特的内容，不会在其他页面重复出现。使用 <main> 标签的主要好处之一在于可以提升可访问性，帮助屏幕阅读器和其他辅助技术工具快速定位到主要内容，使得用户可以轻松跳过其他不太重要的部分，如导航链接和页眉。

`<footer>` `</footer>`标签

<footer> 标签用于定义页面或页面中某个部分的页脚。它通常包含版权信息、联系信息、站点地图、回到顶部的链接或其他类似的辅助信息。<footer> 的主要用途如下：

提供额外信息：页脚是放置版权声明、隐私政策链接、联系方式等信息的理想位置。
增加导航效率：常常包含辅助导航链接，包括FAQ、博客索引或其他页面导航工具，有助于用户找到网站上的其他重要页面。
增强用户体验：页脚可以包含社交媒体链接、订阅表单等，增加用户互动和站点的整体可用性。

【其实也就是body中可以分为两块，主体部分为main，而页脚信息为footer】

3、分节<section></section>

<section> 标签在HTML中用于表示文档中的一个独立的区域（或部分），通常会有自己的标题。这个标签是HTML5引入的语义元素之一，目的是提高网页内容的结构化程度和语义清晰性。【这个就像ppt中的组，或者像一个思维导图中的大括号，帮助用来梳理内容】

4、标题<h1></h1>

基本书写方式是<h1>这是大标题</h1>【这个我们代码中也有，<h1>CatPhotoApp</h1>，我们的大标题就是CatPhotoApp】

<h1> 标签在HTML中代表最高级别的标题。HTML提供从 <h1> 到 <h6> 六个等级的标题，其中 <h1> 是最重要的，通常表示页面或页面中某个部分的主标题。使用适当的标题层次结构不仅有助于改善页面的结构和组织，还对搜索引擎优化（SEO）非常重要，因为搜索引擎使用标题来理解网页的内容结构和主题重点。

5、文本段落<p></p>

<p> 标签在HTML中表示一个段落。这是最基本的文本格式化标签之一，广泛用于在网页上创建文本块。使用 <p> 标签可以帮助组织和格式化网页的文本内容，使其更易于阅读和理解。【比如我们代码中的 <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>，只是这里还多了个<a></a>。最基础的形态是<p>这是一段文本</p>】

6、超链接<a></a>

<a>标签是HTML中用于定义超链接的元素，可以链接到另一个网页、文件、电子邮件地址、位置或任何其他URL。它是互联网上导航结构的基础。

href属性：指定链接目标的URL。在这个例子中，href="https://freecatphotoapp.com" 指向一个名为 "freecatphotoapp.com" 的网站。
target属性：定义如何打开链接的目标。常见的值包括：
_blank：打开新窗口或新标签页。
_self：在相同的框架或窗口中打开链接（默认）。
_parent：在父框架中打开链接。
_top：在整个窗口中打开链接，取消所有框架。

【比如我们代码中的 <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>，这里就是对于cat photos这段文字加入超链接，点击之后打开一个新窗口，链接地址是"https://freecatphotoapp.com"】

7、图片、图片结构、图片说明、斜体`<figure>` `</figure>、<figcaption>` `</figcaption>、<em></em>`

<img>标签

图片只需要<img>，不需要</img>，即不需要闭合【比如我们代码中<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">，这是一个图像（image）标签，用于在网页上显示图像。src（source）属性指明了图像的来源URL，即图像文件的位置。alt（alternative text）属性提供了图像内容的文本描述，这对于搜索引擎优化（SEO）非常有用，同时也支持那些由于各种原因无法看到图像的用户（例如视力障碍者或图像加载失败时）。】【我们代码中还为这个图片加入了链接<a href="https://freecatphotoapp.com">】

`<figure>` `</figure>` 标签

<figure> 标签是HTML5中引入的一个语义元素，用于对网页上的独立内容（如图像、图表、代码片段、音频和视频）进行分组，并通常与 <figcaption> 标签结合使用，后者为 <figure> 元素提供说明。使用 <figure> 标签不仅有助于增强文档的语义清晰度，还能改善网页的结构化表示。

`<figcaption>` `</figcaption>` 标签

<figcaption> 标签用于为<figure>元素提供说明文字。<figure>通常用来标记独立的内容（如图表、照片、代码片段等），而<figcaption>则用于提供这些内容的文字解释或标题。这有助于用户和搜索引擎更好地理解包含的非文本内容。

`<em></em>` 标签

<em>（强调）标签用于强调文本中的某部分。默认情况下，浏览器会将 <em> 标签内的文本显示为斜体，以突出其重要性。然而，强调的真正意义在于表明这部分文本在语境中具有强调的语气，而不仅仅是视觉上的变化。

【我们代码中也有对应内容<figcaption>Cats <em>love</em> lasagna.</figcaption>】

【alt与figcaption的区别，可以通过这个代码感受下，<figure><img src="https://example.com/image.png" alt="描述性文本"><figcaption>图1: 描述性文本说明图像内容和上下文。</figcaption></figure> alt一般只在图片加载不出来的时候显示，而figcaption一般会显示】

8、无序列表、有序列表、列表项

`<ul>` 标签（无序列表）

用途：<ul> 代表无序列表，通常用于列举一组项，其中每一项由 <li>（列表项）标签包裹。在视觉上，默认情况下无序列表的每个项目前会有一个圆点作为标记。
适用场景：当列表的顺序不重要时，例如列出菜单项、功能、属性等。

`<ol>` 标签（有序列表）

用途：<ol> 代表有序列表，与 <ul> 类似，但列出的项是有序的，每个项目前会自动编号。
适用场景：适用于需要按顺序显示的内容，如操作步骤、排名、或任何其他需要强调顺序的列表。

`<li>` 标签（列表项）

用途：<li> 用于表示列表中的单个项目，它必须嵌套在 <ul> 或 <ol> 标签中。<li> 标签定义了列表中的每一项。
特点：<li> 是灵活的，可以包含文本、图片、链接、甚至是其他列表。

【比如代码中的<ul> <li>cat nip</li><li>laser pointers</li> <li>lasagna</li></ul>

<ol> <li>flea treatment</li><li>thunder</li><li>other cats</li> </ol>，感觉跟word里面的项目符号一样的】

9、表单、分组、单选题、多选题、按钮<form></form>、<`fieldset`><\`fieldset`>、<lengend><\lengend>、<button></button>

<form>: <form> 标签定义了一个 HTML 表单，用于收集用户的输入数据。表单数据在用户提交表单时发送到服务器。

action 属性: 指定表单数据在提交时要发送到的 URL。【在我们的例子中，数据将被发送到 "https://freecatphotoapp.com/submit-cat-photo" 这个地址。】

`<fieldset>` 标签

用途：<fieldset> 用于对表单中相关的表单控件进行分组。这有助于增强表单的组织结构，使其更加易于理解和操作。在视觉上，浏览器通常会为 <fieldset> 元素显示一个边框。
特点：<fieldset> 可以包含一个或多个表单元素，如输入框、复选框、单选按钮等。

`<legend>` 标签

用途：<legend> 用于提供 <fieldset> 内容的标题或说明。它通常显示在 <fieldset> 的边框顶部，作为表单分组的标题。
特点：使用 <legend> 可以帮助用户理解表单各部分的用途，特别是对于视觉或认知障碍的用户，能够清楚地指示各个表单控件组的功能。

<input>标签

<input> 标签是HTML中非常核心的一个元素，用于创建用户界面的各种输入字段。它是表单（form）的基本组成部分，允许用户输入数据，这些数据可以在提交表单时被发送到服务器。

<input> 标签非常灵活，可以通过不同的 type 属性值来支持多种类型的输入字段：

type="text"：创建一个单行文本输入框，用于输入短文本字符串。
type="password"：创建一个密码输入框，输入的文本会被遮盖。
type="radio"：创建单选按钮，允许用户从多个选项中选择一个。
type="checkbox"：创建复选框，允许用户选择多个选项。
type="submit"：创建一个提交按钮，用于提交表单。
type="email"：创建一个用于输入电子邮件地址的文本字段，具有基本的验证功能，确保输入格式正确。
type="number"：创建一个数字输入框，允许用户输入一个数字。
type="date"：创建一个日期选择器，允许用户选择一个日期。
type="file"：创建一个文件选择器，允许用户选择一个或多个文件上传。
type="hidden"：创建一个隐藏的输入字段，不显示在页面上，但其值会被提交。

常用属性

name：指定输入字段的名称，这是表单数据被发送到服务器时用于识别字段数据的键。
value：为输入字段设置一个初始值。
placeholder：提供一个在输入字段为空时显示的提示文本，帮助用户理解应该输入什么。
required：指定输入字段为必填项，阻止表单在此字段为空时被提交。
disabled：禁用输入字段，用户不能与之交互。
readonly：使输入字段为只读，用户可以看到值但不能修改。

单选题：

<input> 标签的 type="radio" 指明了这些是单选按钮。所有单选按钮共享同一个 name 属性值 "indoor-outdoor"，这意味着这些按钮是相互排斥的，用户只能选择其中一个。checked表示默认选中这一项。

多选题：

<input type="checkbox">: 定义复选框，允许用户选择一个或多个选项。每个复选框通过唯一的 id 属性标识，并且具有相同的 name 属性（"personality"），表明它们属于同一组选项。checked表示默认选中这一项。

<button>标签

<button type="submit">: 创建一个提交按钮，用于提交表单。type="submit": 指定按钮的类型为提交，当此按钮被点击时，表单数据将被发送到 <form> 标签的 action 属性所指定的URL。

结语：

通过这一系列的HTML元素学习，我们不仅掌握了如何通过不同的标签来增强网页的功能性和结构性，也深入了解了每个标签在实际应用中的具体作用和最佳实践。从基本的文本和图像呈现到复杂的表单处理，HTML作为构建现代网页的基础，其灵活性和强大的功能让我们能够设计出既美观又用户友好的网页界面。未来继续学习前端，加快更新，狗头保命hhh

PixelMeng

关注

7
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
前端学习——初识html代码

在这个学习系列中，我们进行案例分析，深入探讨了HTML的核心组件，包括用于构建和格式化网页的各种标签。我们学习了如何使用标签来定义网页的结构，和标签来分别包含文档的元数据和可见内容。到标签帮助我们创建了清晰的标题层级，而标签则用于格式化文本段落。我们还探索了标签创建超链接的方法，通过标签嵌入图像，并通过，，和等标签来收集用户输入和提交表单等。
复制链接

扫一扫