69关打通Html基础（freeCodeCamp实践笔记之CatPhotoApp）

阳的糖

已于 2023-08-27 16:23:45 修改

阅读量433

点赞数 1

文章标签： html 笔记状态模式前端

于 2023-08-27 15:25:04 首次发布

本文链接：https://blog.csdn.net/m0_72594605/article/details/132523741

版权

前言

从大一下开始接触前端，发现前端是所见即所得，刚写完的代码下一秒已经在浏览器里面呈现，之后跟着一位研究生学长完成了大学以来的第一个项目，项目的结果并不一定多么出色，但回顾完成项目的过程确是非常有意义的，无论是对前端三大件和Vue的熟悉还是Git命令的操作，抑或是学长的教诲、伙伴之间的合作，那一个个晚上在实验室的联调测试犹然在眼前浮现。

抛开回忆杀，我们切入前端学习的正题，在项目的一步步推进中，我越来越觉得前端是充满创造力的，开始的我可能觉得通过代码放了一张图片，放了可以点击跳转的按钮是多么的有意思，渐渐的当整个网页加载在我面前时却会发现它是如此地不协调，或者简单地说就是好丑。是的，前端需要你去掌握扎实的编程基础也需要你的想象力去构建 $B e a u t i f u l$ 的页面。当时的我想象不足，技术有差，不会的都是依靠AI辅助。

但这个暑假，我，再一次回到前端的，从最基础的开始，不停的学习前端无边无际的知识和技术。✊最近发现一个前端免费学习的宝藏网站freeCodeCamp（🔥）—官方版（英文）|中文社区版。里面的课程很全面，主要以实战编程联系为主，题目不难，很适合刚入门或者用来巩固，接下来就根据freeCodeCamp来写前端博客笔记。除了练手，通过测试还能获得平台发布的各种证书，无论这些证书是否对我们有一定价值，但能获得多一张总不是坏事吧。😀好了，接下来就让我们进入第一关——CatPhotoApp

理解Html

HTML 是什么？
HTML 的全称是 HyperText Markup Language（超文本标签语言），它是一种用来描述网页结构的标签语言。
它采用一种特殊的语法或符号来组织网页的内容，元素通常都有开始标签和结束标签，例如标题、段落、列表。

HTML 就等同于我们人体里面的骨架，一块一块骨头（标签）组装起来建立起一个人的骨架和结构。比如说经常可以见到的head，body，footer等标签，就等同于一个人的头，身体和脚。那其他的标签比如h1，h2，div，section和ul，li等标签就是用来组建我们人体每一个部位的小骨头。

Html头部信息

我们在开始写Html语言之前都会写类似于下面这样一段代码，很多人可能写了很久也不知道它到底起了什么作用（反正能用就行可能是很多人的想法😉，说真的如果开始的时候没去搞懂，到后面代码写的顺溜了更加懒得去看了）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CatPhotoApp</title>
</head>

第一行的<!DOCTYPE html>是进行文档类型声明，作用就是告诉浏览器使用那种html来显示网页，我们这个语句的意思就是当前页面采取的是HTML5版本来显示网页，以后直接用就行
html lang="en"用来定义当前文档的语言，其中en为英语，zh-CN为简体中文，其实对于文档显示来说，定义en的文档也可以显示中文，定义zh-CN的文档也可以显示英文，这个书写对浏览器和搜索引擎（百度，谷歌等）还是有作用的。下面这个搜索框就是中文与其他语言的区别了。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oXm0t61r-1693120051349)(C:\Users\丁铭阳\AppData\Roaming\Typora\typora-user-images\image-20230825194114126.png)]$

字符集（Character set）是多个字符的集合。以便计算机能够识别和存储各种文字。在标签内，可以通过标签的charset属性来规定HTML文档应该使用哪种字符编码。上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码，尽量统一写成标准的"UTF-8”，不要写成"utf8"或"UTF8"。
```
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
以上两行代码告诉浏览器，网页应该以确保IE浏览器使用最新渲染，设备的宽度作为初始宽度，并且初始缩放比例为 1.0。这有助于确保网页在移动设备上以合适的大小和比例呈现，提供更好的用户体验。

常见的文本元素

1、h1~h6标题元素

标题（Heading）：是通过 <h1>~<h6> 等标签进行定义的，<h1>定义最大的标题。<h6>定义最小的标题。在我们CatPhotoApp中我们会用到以下标题元素

<h1>CatPhotoApp</h1>
<h2>Cat Photos</h2>
<h2>Cat Lists</h2>
<h3>Things cats love:</h3>
<h3>Top 3 things cats hate:</h3>
<h2>Cat Form</h2>

在这里插入图片描述

注意：

确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

2、P元素

段落：是通过<p>标签定义的，可以把 HTML 文档分割为若干段落。

<p>
        <span>See more</span>
        <a href="https://www.freecatphotoapp.com/">cat photos</a>
        <span>in our gallery.</span>
</p>

在这里插入图片描述

3、strong 与 em 元素

<strong> 标签把文本定义为语气更强的强调的内容。<strong> 标签和 [<em> 标签]一样，用于强调文本，但它强调的程度更强一些。

<em> 标签把文本定义为强调的内容。<em> 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。

<!-- 其中<br>是换行作用 -->
<br><span>Cats <em>love</em> lasagna.</span>
<br><span>Cats <strong>hate</strong> other cats.</span>

在这里插入图片描述

4、b 与 i 元素

<b>标签呈现粗体文本效果。<b> 标签和基于内容的样式标签 [<strong>] 类似。它告诉浏览器将包含其中的文本以粗体字显示。

<i>标签显示斜体文本效果。<i> 标签和基于内容的样式标签 [<em>] 类似。它告诉浏览器将包含其中的文本以斜体字（italic）或者倾斜（oblique）字体显示。

图像标签和路径

1、图片标签

<img src="https://i-blog.csdnimg.cn/blog_migrate/263ef9b3be922f616bd8c1b41d2cf10d.jpeg" alt="Cats love lasagna." />

在我们CatPhotoApp就会用到以上标签来映入图片，此图片的路径来源于网址，是一个绝对路径。

标签相关属性:

src：路径（图片的地址与名字）
alt：规定图像的替代文本
width：规定图像的宽度
height: 规定图像的高度
title : 鼠标悬停在图片上给予提示

2、相对路径

以引用文件所在位置为参考基础，而建立出的目录路径。这里简单地说，路径就是图片相对于页面的位置。

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级如`<img src="baidu.gif" />`
下一级路径	/	图像文件位于HTML文件下一级如`<img src="baidu.gif" />`
上一级路径	…/	图像文件位于HTML文件上一级如`<img src="baidu.gif" />`

相对路径是从代码所在的这个文件出发，去寻找目标文件的，而我们这里所说的上一级、下一级和同一级就是图片相对于HTML页面的位置。

3、绝对路径

是指目录下的绝对位置（唯一存在的），直接到达目标位置，通常是从盘符开始的路径。

例如，文件在电脑中的哪一个位置"D:\\webtest\img\1.png" 或完整的网络地址（唯一路径也是绝对路径）"https://i-blog.csdnimg.cn/blog_migrate/263ef9b3be922f616bd8c1b41d2cf10d.jpeg" 。

列表

Web 上的许多内容都是列表，HTML 有一些特别的列表元素。标记列表通常包括至少两个元素。最常用的列表类型为：

无序列表（Unordered List）中项目的顺序并不重要，就像购物列表。用一个<ul>元素包围。
有序列表（Ordered List）中项目的顺序很重要，就像烹调指南。用一个<ol>元素包围。

列表的每个项目用一个列表项目（List Item）元素<li>包围。下面是我们在CatPhotoApp中需要用到的两种列表：

<h3>Top 3 things cats love:</h3>
<ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
</ul>
<h3>Top 3 things cats hate:</h3>
<ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
</ol>

在这里插入图片描述

超链接

要植入一个链接，我们需要使用一个简单的元素 — <a>— a 是 “anchor” （锚）的缩写。

<a href="https://www.freecatphotoapp.com/">cat photos</a>

在这里插入图片描述

注意：如果网址开始部分省略了 https:// 或者 http://，可能会得到错误的结果。在完成一个链接后，可以试着点击它来确保指向正确。

表单相关元素

表单元素也是在这个任务中我掌握最薄弱的一块，尤其是一开是方框左上角嵌入标题让我懵了一下，后来才知道<legend>标签直接可以在<fieldset>嵌入标题。

在这里插入图片描述

下面是整个CatPhotoApp中需要掌握的表单元素的使用

<form action="https://freecatphotoapp.com/submit-cat-photo" method="post">
        <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>

form：表单中action属性，是将用户的信息收集后传送至对应页面进行处理，通常是包含服务方脚本的URL。如果为空则表示向当前页面提交。method：指出表单数据提交的方式。有两个可能值：
- GET：将表单数据附加在请求中的URL上（默认方式）。
- POST：将表单数据封装在发送到服务器的请求中，比get方式安全。
fieldset: 这是用于将相关的表单元素组织在一起的标签。每个字段集可以有一个 legend 元素，用于提供关于字段集内容的标题或说明。
input：单行文本输入框、单选框、复选框、按钮等元素
- type：input的类型
  - text：文本输入框（明文输入）
  - password：文本输入框（密文输入）
  - radio：单选框
  - checkbox：复选框
  - button：按钮
  - reset：重置
  - submit：提交表单数据给服务器
  - file：文件上传
- readonly：只读
- disabled：禁用
- checked：默认被选中，只有当type为radio或checkbox时可用
- autofocus：当页面加载时，自动聚焦
- name：名字
- value：取值
button：实现按钮效果
- 普通按钮（type=button）：使用value属性设置按钮文字
- 重置按钮（type=reset）：重置它所属form的所有表单元素（包括input、textarea、select）
- 提交按钮（type=submit）：提交它所属form的表单数据给服务器（包括input、textarea、select）
label元素一般跟input配合使用，用来表示input的标题labe可以跟某个input绑定，点击label就可以激活对应的input变成选中