当前位置： 首页 > news >正文

前端零基础入门到上班:【Day3】从零开始构建网页骨架HTML

news 文章来源：https://blog.csdn.net/m0_61118741/article/details/143244488 2025/1/10 1:30:17

HTML 基础入门：从零开始构建网页骨架

        • 目录
      • 1. 什么是 HTML？
        • HTML 的核心作用
      • 2. HTML 基本结构
        • 2.1 DOCTYPE 声明
        • 2.2 `<html>` 标签
        • 2.3 `<head>` 标签
        • 2.4 `<body>` 标签
      • 3. HTML 常用标签详解
        • 3.1 标题标签
        • 3.2 段落和文本标签
        • 3.3 链接标签
        • 3.4 图像标签
        • 3.5 列表标签
        • 3.6 表格标签
        • 3.7 HTML5 语义化标签
      • 4. HTML 属性
      • 5. HTML 常见错误与规范
      • 6. HTML 实战练习
      • 7. 总结与练习题
        • 总结
        • 练习题

目录
  1. 什么是 HTML？
  2. HTML 基本结构
    • 2.1 DOCTYPE 声明
    • 2.2 html 标签
    • 2.3 head 标签
    • 2.4 body 标签
  3. HTML 常用标签详解
    • 3.1 标题标签
    • 3.2 段落和文本标签
    • 3.3 链接标签
    • 3.4 图像标签
    • 3.5 列表标签
    • 3.6 表格标签
    • 3.7 HTML5 语义化标签
  4. HTML 属性
  5. HTML 常见错误与规范
  6. HTML 实战练习
  7. 总结与练习题

1. 什么是 HTML？

HTML（HyperText Markup Language） 是用于创建网页的标准标记语言。它通过不同的标签来组织和显示文本、图片、链接等内容，是网页结构的基础。与 HTML 搭配使用的还有 CSS 和 JavaScript，分别负责页面的样式和交互功能。

后续内容 代码偏多 你跟着练习免不了 报错同学 我建议你关注我公众号 可以随时发私信给我 看到就会回复

HTML 的核心作用
  1. 构建网页结构：定义标题、段落、图片、列表等内容的布局。
  2. 链接网页内容：通过超链接将不同页面连接在一起。
  3. 增强语义：HTML5 引入了语义化标签，帮助搜索引擎理解内容。

2. HTML 基本结构

  1. 一个完整的 HTML 文件由一系列标签组成，标签用来指明页面的结构、内容和其他信息。以下是一个简单的 HTML 页面结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的第一个 HTML 页面</title>
</head>
<body><h1>欢迎来到我的网页！</h1><p>这是我的第一个 HTML 页面。</p>
</body>
</html>
  1. 怎么生成HTML基本机构
    新建一个目录
    在这里插入图片描述
    用VSCode 打开这个目录，你可以用鼠标拖拽目录到VSCode 上
    在这里插入图片描述
    点击新建文件，新建一个初识html.html, 记得后缀是HTML哦~
    在这里插入图片描述
    接下来输入英文的！ ，一定要是英文！！！
    在这里插入图片描述
    回车哦亲
    在这里插入图片描述在这里插入图片描述
    恭喜你同学，你的第一个html页面完成了， 接下来我们怎么看效果呢？需要安装一个小插件如下图
    在这里插入图片描述
    安装成功之后重启一下，此时你可以 alt + b 就可以看你的html页面啦~~~~
    如果在安装过程中遇到问题可以关注公众号直接发消息给我，祝你学习愉快
2.1 DOCTYPE 声明
<!DOCTYPE html>
  • DOCTYPE 声明位于文档的最顶端，表示当前文档是 HTML5 标准版本。
  • 它帮助浏览器以标准模式渲染页面，确保网页样式和功能的统一。
2.2 <html> 标签
<html lang="zh-CN">
  • <html> 标签定义整个 HTML 文档的根节点，是所有其他内容的容器。
  • lang="zh-CN" 属性表示文档语言为简体中文，帮助搜索引擎和浏览器理解页面语言。
2.3 <head> 标签
  • <head> 标签用于存放一些网页的基本信息，比如页面标题、字符编码、外部资源（CSS、JS）等，不会直接显示在网页上。

示例：

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的第一个 HTML 页面</title>
</head>
  • <meta charset="UTF-8">：定义网页的字符编码为 UTF-8，确保页面中所有文本正确显示。
  • <title>：页面标题，将显示在浏览器标签上。
2.4 <body> 标签
  • <body> 标签包含所有在网页上显示的内容，包括文本、图片、链接等。

示例：

<body><h1>欢迎来到我的网页！</h1><p>这是我的第一个 HTML 页面。</p>
</body>
  • 上述内容会显示在网页中，<h1> 标签表示标题，<p> 表示段落。

3. HTML 常用标签详解

接下来，详细介绍常用的 HTML 标签，帮助你构建更丰富的网页内容。

3.1 标题标签

HTML 提供了六个级别的标题标签：<h1> 至 <h6>。

示例：

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
  • 标题标签不仅控制文字大小和粗细，还向搜索引擎传达信息的层次结构，<h1> 通常用于页面主标题。
3.2 段落和文本标签

段落标签 <p>

  • <p> 用于定义段落。

文本格式化标签

  • <strong>：将文本加粗。
  • <em>：将文本斜体。

示例：

<p>这是一个普通段落。</p>
<p><strong>加粗文字</strong> 和 <em>斜体文字</em>。</p>
3.3 链接标签
  • <a> 标签用于创建超链接，通过 href 属性指定链接的目标地址。

示例：

<a href="https://www.example.com" target="_blank">访问我的网站</a>
  • target="_blank" 属性用于在新标签页中打开链接。
3.4 图像标签
  • <img> 标签用于在网页中插入图片。src 属性指定图片 URL，alt 属性描述图片内容。

示例：

<img src="image.jpg" alt="示例图片" width="200" height="150">
3.5 列表标签

HTML 支持有序列表和无序列表。

  • 有序列表 <ol>：使用 <li> 标签定义列表项。
  • 无序列表 <ul>：使用 <li> 标签定义无序项。

示例：

<ol><li>第一项</li><li>第二项</li>
</ol>
<ul><li>无序项一</li><li>无序项二</li>
</ul>
3.6 表格标签

表格由 <table> 标签定义，行由 <tr> 标签定义，表头和数据由 <th> 和 <td> 标签定义。

示例：

<table border="1"><tr><th>姓名</th><th>年龄</th></tr><tr><td>小明</td><td>20</td></tr>
</table>
3.7 HTML5 语义化标签

HTML5 新增了一些语义化标签，帮助开发者组织页面结构。

  • <header>：表示页面头部内容。
  • <footer>：表示页面底部内容。
  • <section>：页面的一个章节。
  • <article>：独立的内容块。

示例：

<header><h1>网站标题</h1>
</header>
<section><article><h2>文章标题</h2><p>这是文章的内容。</p></article>
</section>
<footer><p>版权所有</p>
</footer>

4. HTML 属性

标签可以包含多个属性，常用属性包括 id、class、style 等，用于控制元素的样式和功能。

示例：

<p id="intro" class="highlight">带属性的段落。</p>
  • id 是唯一标识，用于 CSS 或 JavaScript。
  • class 表示样式类，便于 CSS 样式应用。

5. HTML 常见错误与规范

  • 标签未闭合：确保每个标签都有结束标签，如 <p>...</p>。
  • 层级混乱：标签应按正确的结构嵌套，如 <ul><li></li></ul>。

6. HTML 实战练习

任务：创建一个简单的个人简历页面，包含姓名、简介、教育经历和联系方式。

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>个人简历</title>
</head>
<body><h1>姓名：张三</h1><p>简介：一名热爱编程的前端开发者。</p><h2>教育经历</h2><ul><li>大学：计算机科学与技术专业</li></ul><h2>联系方式</h2><p>邮箱：example@example.com</p>
</body>
</html>

7. 总结与练习题

总结
  • HTML 是构建网页的基础，了解其语法和结构是进入前端开发的重要第一步。
练习题
  1. 使用 HTML 创建一个包含标题、段落、链接和图片的网页。
  2. 使用有序列表和无序列表，展示你最喜欢的书籍和电影。

相关文章：

前端零基础入门到上班:【Day3】从零开始构建网页骨架HTML

HTML 基础入门&#xff1a;从零开始构建网页骨架 目录 1. 什么是 HTML&#xff1f;HTML 的核心作用 2. HTML 基本结构2.1 DOCTYPE 声明2.2 <html> 标签2.3 <head> 标签2.4 <body> 标签 3. HTML 常用标签详解3.1 标题标签3.2 段落和文本标签3.3 链接标签3.4 图…...

编程日记 2024/10/31 6:31:06

字符脱敏工具类

1、字符脱敏工具类 import lombok.extern.slf4j.Slf4j; import org.apache.commons.lang3.StringUtils;/*** 数据脱敏工具类** date 2024/10/30 13:44*/Slf4j public class DataDesensitizationUtils {public static final String STAR_1 "*";public static final …...

编程日记 2024/10/31 6:29:04

【jvm】jvm对象都分配在堆上吗

目录 1. 说明2. 堆上分配3. 栈上分配&#xff08;逃逸分析和标量替换&#xff09;4. 方法区分配5. 直接内存&#xff08;非堆内存&#xff09; 1. 说明 1.JVM的对象并不总是分配在堆上。2.堆是JVM用于存储对象实例的主要内存区域&#xff0c;存在一些特殊情况&#xff0c;对象…...

编程日记 2024/10/31 6:28:02

@AutoWired和 @Resource原理深度分析！

嗨&#xff0c;你好呀&#xff0c;我是猿java Autowired和Resource是 Java程序员经常用来实现依赖注入的两个注解&#xff0c;这篇文章&#xff0c;我们将详细分析这两个注解的工作原理、使用示例和它们之间的对比。 依赖注入概述 依赖注入是一种常见的设计模式&#xff0c;…...

编程日记 2024/10/31 6:24:59

C++设计模式创建型模式———原型模式

文章目录 一、引言二、原型模式三、总结 一、引言 与工厂模式相同&#xff0c;原型模式&#xff08;Prototype&#xff09;也是创建型模式。原型模式通过一个对象&#xff08;原型对象&#xff09;克隆出多个一模一样的对象。实际上&#xff0c;该模式与其说是一种设计模式&am…...

编程日记 2024/10/31 6:23:57

重学SpringBoot3-Spring WebFlux之SSE服务器发送事件

更多SpringBoot3内容请关注我的专栏&#xff1a;《SpringBoot3》 期待您的点赞&#x1f44d;收藏⭐评论✍ Spring WebFlux之SSE服务器发送事件 1. 什么是 SSE&#xff1f;2. Spring Boot 3 响应式编程与 SSE为什么选择响应式编程实现 SSE&#xff1f; 3. 实现 SSE 的基本步骤3.…...

编程日记 2024/10/31 6:21:55

YOLO即插即用模块---AgentAttention

Agent Attention: On the Integration of Softmax and Linear Attention 论文地址&#xff1a;https://arxiv.org/pdf/2312.08874 问题&#xff1a; 普遍使用的 Softmax 注意力机制在视觉 Transformer 模型中计算复杂度过高&#xff0c;限制了其在各种场景中的应用。 方法&a…...

编程日记 2024/10/31 6:20:54

探索开源语音识别的未来：高效利用先进的自动语音识别技术20241030

&#x1f680; 探索开源语音识别的未来&#xff1a;高效利用自动语音识别技术 &#x1f31f; 引言 在数字化时代&#xff0c;语音识别技术正在引领人机交互的新潮流&#xff0c;为各行业带来了颠覆性的改变。开源的自动语音识别&#xff08;ASR&#xff09;系统&#xff0c;如…...

编程日记 2024/10/31 6:18:51

学习路之TP6--workman安装

一、安装 首先通过 composer 安装 composer require topthink/think-worker 报错&#xff1a; 分析&#xff1a;最新版本需要TP8&#xff0c;或装低版本的 composer require topthink/think-worker:^3.*安装后&#xff0c; 增加目录 vendor\workerman vendor\topthink\think-w…...

编程日记 2024/10/31 6:17:47

.NET内网实战：通过白名单文件反序列化漏洞绕过UAC

01阅读须知 此文所节选自小报童《.NET 内网实战攻防》专栏&#xff0c;主要内容有.NET在各个内网渗透阶段与Windows系统交互的方式和技巧&#xff0c;对内网和后渗透感兴趣的朋友们可以订阅该电子报刊&#xff0c;解锁更多的报刊内容。 02基本介绍 03原理分析 在渗透测试和红…...

编程日记 2024/10/31 6:15:44

AI Agents - 自动化项目：计划、评估和分配

Agents: Role 角色Goal 目标Backstory 背景故事 Tasks&#xff1a; Description 描述Expected Output 期望输出Agent 代理 Automated Project: Planning, Estimation, and Allocation Initial Imports 1.本地文件helper.py # Add your utilities or helper functions to…...

编程日记 2024/10/31 6:14:43

Git的.gitignore文件

一、各语言对应的.gitignore模板文件 项目地址&#xff1a;https://github.com/github/gitignore 二、.gitignore文件不生效 .gitignore文件只是ignore没有被追踪的文件&#xff0c;已被追踪的文件&#xff0c;要先删除缓存文件。 # 单个文件 git rm --cached file/path/to…...

编程日记 2024/10/31 6:13:42

网站安全，WAF网站保护暴力破解

雷池的核心功能 通过过滤和监控 Web 应用与互联网之间的 HTTP 流量&#xff0c;功能包括&#xff1a; SQL 注入保护&#xff1a;防止恶意 SQL 代码的注入&#xff0c;保护网站数据安全。跨站脚本攻击 (XSS)&#xff1a;阻止攻击者在用户浏览器中执行恶意脚本。暴力破解防护&a…...

编程日记 2024/10/31 6:12:40

深度学习：梯度下降算法简介

梯度下降算法简介 梯度下降算法 我们思考这样一个问题&#xff0c;现在需要用一条直线来回归拟合这三个点&#xff0c;直线的方程是 y w ^ x b y \hat{w}x b yw^xb&#xff0c;我们假设斜率 w ^ \hat{w} w^是已知的&#xff0c;现在想要找到一个最好的截距 b b b。 一条…...

编程日记 2024/10/31 6:11:38

SparkSQL整合Hive后，如何启动hiveserver2服务

当spark sql与hive整合后&#xff0c;我们就无法启动hiveserver2的服务了&#xff0c;每次都要先启动hive的元数据服务&#xff08;nohup hive --service metastore&#xff09;才能启动hive,之前的beeline命令也用不了&#xff0c;hiveserver2的无法启动&#xff0c;这也导致我…...

编程日记 2024/10/31 6:09:36

前端路由如何从0开始配置？vue-router 的使用

在 Web 开发中&#xff0c;路由是指根据 URL 的不同部分将请求分发到不同的处理函数或页面的过程。路由是单页应用&#xff08;SPA, Single Page Application&#xff09;和服务器端渲染&#xff08;SSR, Server-Side Rendering&#xff09;应用中的一个重要概念。 在开发中如何…...

编程日记 2024/10/31 6:08:34

Java中的运算符【与C语言的区别】

目录 1. 算术运算符 1.0 赋值运算符&#xff1a; 1.1 四则运算符&#xff1a; - * / % 【取余与C有点不同】 1.2 增量运算符&#xff1a; - * / % * 【右侧运算结果会自动转换类型】 1.3 自增、自减&#xff1a;、-- 2. 关系运算符 3. 逻辑运算符 3.1 短路求值 3.2 【…...

编程日记 2024/10/31 6:06:32

二、基础语法

入门了解 注释 **作用&#xff1a;**在代码中加一些注释和说明&#xff0c;方便自己或者其他程序员阅读代码 两种格式&#xff1a; 单行注释&#xff1a;// 描述信息 通常放在一行代码的上方&#xff0c;或者一条语句的末尾&#xff0c;对该行代码进行说明 多行注释&#x…...

编程日记 2024/10/31 6:03:29

DB-GPT系列（一）：DB-GPT能帮你做什么？

DB-GPT是一个开源的AI原生数据应用开发框架(AI Native Data App Development framework with AWEL and Agents)&#xff0c;围绕大模型提供灵活、可拓展的AI原生数据应用管理与开发能力&#xff0c;可以帮助企业快速构建、部署智能AI数据应用&#xff0c;通过智能数据分析、洞察…...

编程日记 2024/10/31 6:00:26

【Python各个击破】numpy

简介 NumPy是一个开源的Python库&#xff0c;它提供了一个强大的N维数组对象和许多用于操作这些数组的函数。它是大多数Python科学计算的基础&#xff0c;包括Pandas、SciPy和scikit-learn等库都建立在NumPy之上。 安装 !pip install numpy导入 import numpy as np用法 # …...

编程日记 2024/10/31 5:59:24

【STM32 Blue Pill编程实例】-4位7段数码管使用

4位7段数码管使用 文章目录 4位7段数码管使用1、7段数码介绍2、硬件准备与接线3、模块配置4、代码实现在本文中，我们将介绍如何将 STM32 Blue Pill开发板与 4 位 7 段数码管连接，并在 STM32CubeIDE 中对其进行编程。 在文章中首先将介绍 4 位 7 段数码管及其与 STM32 Blue Pi…...

编程日记 2024/10/31 5:58:23

[进阶]java基础之集合(三)数据结构

文章目录 数据结构概述常见的数据结构数据结构(栈)数据结构(队列)数据结构(数组)数据结构(链表) 数据结构 概述 数据结构是计算机底层存储、组织数据的方式。是指数据相互之间是以什么方式排列在一起的。数据结构是为了更加方便的管理和使用数据&#xff0c;需要结合具体的业…...

编程日记 2024/10/31 5:57:22

《Apache Cordova/PhoneGap 使用技巧分享》

一、引言 在移动应用开发的领域中&#xff0c;Apache Cordova&#xff08;也被称为 PhoneGap&#xff09;是一个强大的工具&#xff0c;它允许开发者使用 HTML、CSS 和 JavaScript 等 Web 技术来构建跨平台的移动应用。这种方式不仅能够提高开发效率&#xff0c;还能降低开发成…...

编程日记 2024/10/31 5:54:18

SCP（Secure Copy

SCP&#xff08;Secure Copy&#xff09;‌是Linux系统下基于SSH协议的安全文件传输工具&#xff0c;用于在本地和远程主机间安全、快速地传输文件和目录。SCP命令通过加密传输确保数据的安全性&#xff0c;并且不占用过多系统资源‌。 SCP的基本用法 ‌基本语法‌&#xff1a…...

编程日记 2024/10/31 5:53:17

uniApp 省市区自定义数据

关于自定义省市区选择 其实也是用了 uniApp的内置组件 picker <picker mode"multiSelector" change"bindRegionChange" columnchange"bindMultiPickerColumnChange" :value"valueRegion" :range"multiArray"><v…...

编程日记 2024/10/31 5:52:16

图解Redis 06 | Hash数据类型的原理及应用场景

介绍 Hash 类型特别适合存储对象&#xff0c;例如用户信息等。 String类型也可以用于存储用户信息&#xff0c;Hash与String存储用户信息的区别如下图所示&#xff1a; 内部实现 Hash 类型 的底层数据结构是通过压缩列表&#xff08;Ziplist&#xff09;或哈希表&#xff…...

编程日记 2024/10/31 5:50:13

在 Windows 系统上设置 MySQL8.0以支持远程连接

在 Windows 系统上设置 MySQL8.0以支持远程连接的步骤如下&#xff1a; 步骤1: 修改 MySQL 配置文件1. 找到配置文件&#xff1a; MySQL 的配置文件通常为 my.ini&#xff0c;通常位于 C:\ProgramData\MySQL\MySQL Server8.0\&#xff08;确保查看隐藏文件和文件夹&#xff09…...

编程日记 2024/10/31 5:45:08

四种基本的编程命名规范

目前&#xff0c;共有四种基本的编程命名规范&#xff0c;分别是匈牙利命名法、驼峰式命名法、帕斯卡命名法和下划线命名法&#xff0c;其中前三种命名法较为流行。 例如&#xff1a;iMyData是一个匈牙利命名法&#xff1b;myData是一个驼峰式命名法&#xff1b;MyData是一个帕…...

编程日记 2024/10/31 5:44:06

【前端】在 TypeScript 中使用 AbortController 取消异步请求

在 TypeScript 中使用 AbortController 来取消异步请求&#xff0c;尤其是像 fetch 这样的请求&#xff0c;可以提供一种优雅的方式来中止长时间运行的操作。下面是一个详细的步骤说明&#xff0c;展示如何在 TypeScript 中使用 AbortController 取消 fetch 请求。 步骤 1&…...

编程日记 2024/10/31 5:42:04

k8s知识点总结

docker 名称空间 分类 Docker中的名称空间用于提供进程隔离&#xff0c;确保容器之间的资源相互独立。主要分类包括&#xff1a; PID Namespace&#xff1a;进程ID隔离&#xff0c;使每个容器有自己的进程树&#xff0c;容器内的进程不会干扰其他容器或主机上的进程。 NET Nam…...

编程日记 2024/10/31 5:39:02

什么是网络开发/苏州关键词优化软件

IDC评述网&#xff08;idcps.com&#xff09;02月19日报道&#xff1a;根据市场研究公司Net Applications最新数据显示&#xff0c;在2月全球搜索引擎市场份额大战中&#xff0c;Google-Global以58.44%的份额稳坐冠军宝座&#xff0c;环比上月&#xff0c;份额下降了4.30%。而亚…...

编程日记 2025/1/9 22:22:47

专门做化妆品的网站/百度网址收录入口

fabric 可以很轻松的实现 SSH链接 安装 pip install fabric查看版本 $ fab --version Fabric 2.4.0 Paramiko 2.4.1 Invoke 1.2.0脚本运行 # 执行本机命令 import osos.system("echo hi")# 执行远程命令 from fabric import Connectionconn Connection("ro…...

编程日记 2025/1/9 22:17:43

汉沽谁做网站/市场调查报告

Set 是ES6提供的一种新的数据结构&#xff0c;它允许你存储任何类型的唯一值&#xff0c;而且Set中的元素是唯一的。 我们用new操作符来生成一个Set对象 基本用法 let arr [1,2,3,1,2,2,1,2,1,1]; let set new Set(arr); set.size // 3 [...set] // [1,2,3] 元素是唯一的 可…...

编程日记 2025/1/9 17:26:01

对搜索引擎优化的认识/关键词优化怎么弄

文章目录P1372题目思路P1414题目思路P1372 题目 题目背景 “叮铃铃铃”&#xff0c;随着高考最后一科结考铃声的敲响&#xff0c;三年青春时光顿时凝固于此刻。毕业的欣喜怎敌那离别的不舍&#xff0c;憧憬着未来仍毋忘逝去的歌。1000 多个日夜的欢笑和泪水&#xff0c;全凝聚…...

编程日记 2025/1/9 12:32:03

徐州做公司网站多少钱/网络营销是干什么的

虚拟机网卡桥接centos系统获取不到IP今天把虚拟机跟新到新的版本&#xff0c;发现虚拟机网卡桥接centos系统获取不到IP&#xff01;在想更新过后有可能是恢复初始默认的了&#xff01;所以就修改一下进去编辑一下&#xff1a;重启系统就可以了&#xff01;转载于:https://blog.…...

编程日记 2025/1/9 12:11:48

域名注册完成后如何做网站/湖南网络推广排名

python读写文件 通常我们是通过open函数来读写文件的。 以下是open函数的源码&#xff1a; def open(file, moder, bufferingNone, encodingNone, errorsNone, newlineNone, closefdTrue):我们通常只会用到前两个参数&#xff0c;其中file指的是文件名&#xff0c;而mode指的…...

编程日记 2025/1/9 10:14:50