从零开始学前端 · HTML 基础篇（一）：认识 HTML 与页面结构

优质文章学习记录

— 8 min read
从零开始学前端 · HTML 基础篇（一）：认识 HTML 与页面结构

目录

在前端开发中，HTML 是所有网页的基础，也是每一名前端开发者绕不开的第一步。

本文将从 HTML 是什么 开始，带你认识 HTML 的基本结构、常见标签以及标签之间的关系，并通过简单直观的代码示例，帮助你快速理解 HTML 是如何构建一个网页的。

如果你是 刚接触前端的新手，或者对 HTML 的整体结构还不够清晰，那么这篇文章将非常适合作为你的入门参考。

一、什么是HTML

HTML是超文本标记语言 — HyperText Markup Language 是一种用来告诉浏览器怎么组织页面的标记语言

HTML由一系列的标签组成，知道了标签如何使用也就知道了如何书写HTML

二、标签语法

例如：

大部分的标签都会有开始标签和结束标签，也称之为双标签，但是也会有少量的单标签
如：< hr> <img>等等,这些标签以后都是会慢慢接触到的

三、初识HTML代码

下来进入代码环节
此系列使用的前端工具为:Trae CN

在这里插入图片描述


首先这是在编辑器中输入!,编辑器自动为我们搭的框架
我们来逐句分析是这个架子的每句话是用来干什么的

<!DOCTYPE html>

这句话是用来声明的当前的页面是使用HTML的规范编写的

html标签元素

这个元素包含了页面之中所有的内容 html 是整个文档的根元素，所有页面内容都必须放在它内部。在html中，lang这个属性是用来声明网页的主要语言，帮助浏览器正确处理页面内容

  1. en 代表英语，这意味着该页面的主要语言是英语
  2. zh-CN代表的是中文

<head>元素

头部元素，包含了文档的元(meta)数据

字符集

<meta charset=“UTF-8”>
表示该文档的字符集设置为UTF-8，UTF-8 包括绝大多人类书面语言的大多数字符，在我们平时写代码的时候大多数使用的也是UTF-8

移动端页面适配

<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
确保网页在移动设备上以最佳状态呈现，提升用户浏览体验

  1. <meta>标签
    标签用于定义文档的元数据（即关于文档的信息），如字符集、作者、描述、关键字等。这些元数据并不会直接显示在页面内容中，但它们为浏览器、搜索引擎和其他应用提供了必要的信息。
    例子：
    <meta charset=“UTF-8”>
    这个标签告诉浏览器使用 UTF-8 编码来解析网页的内容，UTF-8 是一种字符编码方式，几乎支持世界上所有的语言字符。它确保网页中所有字符的正确显示。
  2. <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
    这是一个专门用于移动端页面适配的 meta 标签。它告诉浏览器如何控制页面的显示区域（viewport）和缩放行为，确保网页在不同设备（尤其是移动设备）上有良好的用户体验。
    具体解释：
    name=“viewport”：这告诉浏览器该 meta 标签是用于控制视口（viewport）的配置。视口是浏览器显示网页内容的区域。在桌面浏览器中，视口通常是整个浏览器窗口的大小，而在移动设备中，视口则通常是屏幕的大小。
    content=“width=device-width”：这部分指定了视口的宽度，device-width 表示视口宽度应该与设备的屏幕宽度一致。简单来说，width=device-width 告诉浏览器，不要缩放网页，而是使网页宽度与设备屏幕的宽度相匹配。这是移动端适配的关键，因为它可以避免网页被缩小以适应小屏幕，确保网页的元素不会太小，用户能够轻松阅读。
    content=“initial-scale=1.0”：这个参数设置了页面加载时的初始缩放比例。initial-scale=1.0 表示页面初始时不进行任何缩放，即网页内容按照真实的尺寸显示，而不是自动放大或缩小。这有助于确保用户第一次打开页面时，内容以最适合屏幕的比例显示。

title元素

设置了页面的标题

在这里插入图片描述

也就是这里的名字

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>html_01</title></head><body></body></html>

随着我们的更改，我们网页的标题也进行了更改

在这里插入图片描述

body元素

包含了页面上所有显示在页面上的的内容

四、标签关系

在日常中，见到的关系分为两种关系

并列关系（兄弟关系）

在这里插入图片描述


例如这两个div就输入兄弟关系

嵌套关系（父子关系）

在这里插入图片描述


这两个div就是父子关系

五、HTML中的标题和段落

标题标签 h

双标签
在日常网页的中，标题标签的使用可谓是无处不在，下面两个例子，例如，新浪新闻页面

在这里插入图片描述


h标签就是用来凸显文章主题的

h标签的语法

共分为h1-h6，下面展示一下

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>html_01</title></head><body><h1>这是h1标签</h1><h2>这是h2标签</h2><h3>这是h3标签</h3><h4>这是h4标签</h4><h5>这是h5标签</h5><h6>这是h6标签</h6></body></html>
在这里插入图片描述


默认是加粗的效果，当然后期我们通过css可以修改这个属性，目前我们就乖乖的使用它的默认吧

段落标签p

双标签
表示html中的一个段落
每行只显示一个，文字显示不开会自动换行，同样的，相关的样式可以使用css进行设置

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>html_01</title></head><body><p>这是一个段落</p></body></html>
在这里插入图片描述

Read more

iterm2-snazzy主题自定义教程：如何根据个人喜好调整终端色彩

iterm2-snazzy主题自定义教程：如何根据个人喜好调整终端色彩 【免费下载链接】iterm2-snazzyElegant iTerm2 theme with bright colors 项目地址: https://gitcode.com/gh_mirrors/it/iterm2-snazzy iterm2-snazzy是一款拥有明亮色彩的优雅iTerm2主题，能让你的终端界面更加美观舒适。本教程将带你了解如何安装该主题并根据个人喜好调整终端色彩，打造专属于你的个性化终端体验。 一、快速安装iterm2-snazzy主题 1.1 克隆项目仓库 首先，打开终端，执行以下命令克隆项目仓库： git clone https://gitcode.com/gh_mirrors/it/iterm2-snazzy 1.2 导入主题文件 进入克隆好的项目目录，找到Snazzy.itermcolors文件。打开iTerm2，依次点击iTerm2->Preferences->Profiles-&

Flutter 三方库 bones_ui 的鸿蒙化适配指南 - 打造直观、响应式的 Web 风格 UI 交互体验

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.ZEEKLOG.net Flutter 三方库 bones_ui 的鸿蒙化适配指南 - 打造直观、响应式的 Web 风格 UI 交互体验 Flutter for OpenHarmony 开发者在构建具有 Web 质感的跨平台应用时，UI 框架的选择至关重要。本文将带大家深度调研 Dart 三方库 bones_ui 在鸿蒙系统上的适配方案，探索如何利用其直观的组件架构，加速鸿蒙桌面级应用的开发效率。 前言 在移动端和桌面端融合的今天，开发者往往希望一套代码能同时适配多种屏幕形态。bones_ui 原生为 Dart Web 打造，但在 Flutter for OpenHarmony 的大前端生态中，其简洁的 UI 组件设计思想对我们构建鸿蒙跨平台应用具有极大的参考价值。
【沧海拾昧】绿联NAS配置WebDAV公网访问并使用RaiDrive挂载到本地

【沧海拾昧】绿联NAS配置WebDAV公网访问并使用RaiDrive挂载到本地

#C0601 沧海茫茫千钟粟，且拾吾昧一微尘 ——《沧海拾昧集》@CuPhoenix 【阅前敬告】沧海拾昧集仅做个人学习笔记之用，所述内容不专业不严谨不成体系【如有问题必是本集记录有谬，切勿深究】 目录 * 前言 * 一、配置步骤 * 1、确认网络设备支持 IPv6 * 2、购买域名 * 3、配置访问凭证 * 2、NAS 配置 WebDAV 服务 * 3、NAS 配置 DDNS 支持 * 4、配置反向代理 * 5、在 RaiDrive 中挂载 * 6、设置防火墙 * 二、最终结果 前言 将 NAS 的磁盘空间通过 RaiDrive 等软件挂载到本地使用是一种十分便捷的方法，但是 RaiDrive 中只有针对群晖（
[前后端系统开发教程]第四节-前端多平台部署的终极解决方案

[前后端系统开发教程]第四节-前端多平台部署的终极解决方案

在上一节中我们已经制作了一个简单的用户管理后端系统，我们这节就来尝试制作一个对应的前端系统。那么，我们是要使用安卓开发者工具制作一个安卓app，或者部署为微信小程序，亦或部署为传统的html网页？ 答案是我全都要！通过DCloud生态，我们可以实现一份代码，多端部署。 第一部分：什么是DCloud生态? 众将士多端露难色，新面孔竟生好胆识 注：本节开始，教程的节奏会适当加快，希望各位可以跟上。 简单来说，DCloud生态的核心功能是，通过将项目按照不同的目标部署平台，二次编译为对应平台的代码，以实现“一份代码，多端部署”，以提高开发效率。详细介绍请参考uniapp官方文档：简介 - HBuilderX 文档。DCloud还提供云函数、云对象等工具，我们将在教程的后面去学习。 在这节教程中我们先学习如何在HBuilderX中调用上节中后端系统的API（即后端服务接口），编写一份前端代码，再将其打包为微信小程序、html网页和安卓app。 第二部分：怎么调用后端API接口？ 接口表叫那前端瞧，服务器知晓谁来还 我们先回顾一下上节教程中的接口类，将其整理为一份API接口说明