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

【HTML入门】第一课 - 网页标签框架

这一节,我们说一下学习前端开发的话,最入门的也是非常重要的一门可成,也就是HTML。HTML标签,是网页的重要组成部分,可以说,你看到网页上的内容,都是基于HTML标签呈现出来的

这一小节呢,我们说一下,HTML最初的,刚一新建网页,就应该写的框架标签们。

目录

1 新建HTML文档

1.1 新建一个txt文档

1.2 修改文档后缀

1.3 打开这个HTML文件

2 HTML的标签框架 

2.1 DOCTYPE标签

2.2 html标签

2.3 head标签

2.4 body标签

3 小结


1 新建HTML文档

可能你发现,你新拿到的电脑呢,并不能新建HTML文档,所以可以新建一个txt文档,首先新建一个文件夹,用于我们这个系列课程的学习内容。

1.1 新建一个txt文档

首先呢,新建一个txt文档,鼠标 “右键”,点击“新建”,然后点击“文本文档”,新建以后是这样子的:

1.2 修改文档后缀

什么是“文档”呢,你新建这个就是所谓的人们称之为的文档,也可以叫文件,总之都是一个东西。

你看他叫 “新建文本文档.txt”,这个 .txt 呢就是这个文档的后缀,你可以把 txt 改为 html,这样,我们就是新建了一个HTML文档了。

1.3 打开这个HTML文件

这个时候呢,你可以鼠标双击打开这个HTML文档,这个HTML文档就会被浏览器打开了。当然,推荐使用Chrome浏览器,不过你如果电脑上有Edge浏览器呢,也可以,其他浏览器也没有关系。

打开以后是这样子的,就是一个空白的网页

2 HTML的标签框架 

我们做前端开发,总是要在浏览器这个容器里浏览网页内容的。而网页内容呢,又是包含在HTML这些框架标签里的。这里说一下这些标签框架。

2.1 DOCTYPE标签

网页文档的第一行呢,我们加DOCTYPE标签,他会告诉浏览器,我们要以哪种文档格式来渲染网页。我们先来学习具体的知识,如果想学习更详细的,更扩展的内容呢,记得私信告诉狗哥,我给你找相关内容来学习

<!DOCTYPE html>

这就是网页的第一行代码。

2.2 html标签

我们所有的网页内容呢,都是嵌套在这个html标签里的。所以,html 是一种文档格式,也是前端网页的一个标签。这个html标签呢,是一个成对出现的,意思就是需要写一个开始的,一个结束的标签。就像这样:

<html></html>

2.3 head标签

网页呢,也分头部身体,所以,这里需要加head标签,head标签呢,放一些浏览器需要的,但是缺不展示的内容,比如渲染一些样式啦(我们后面说)。

<!DOCTYPE html>
<html><head></head>
</html>

2.4 body标签

刚才说到网页有身体标签,就是这个body标签,所有需要展示出的,需要被人们看到的网页内容,都会添加到这个body标签内。

<!DOCTYPE html>
<html><head></head><body></body>
</html>

3 小结

好啦,这一小节呢,我们先学到这里,很简单,就是一个非常入门的内容,虽然入门,但这是网页开发的最基本,最基本的内容,一旦你做了前端开发,这个东西是永远都脱离不开的,不管你做了多么高深的网页内容,不管你去了哪个大公司,网页永远脱离不开这个基本框架要素。

如果你真的是在跟着狗哥学习,点个赞,关注狗哥,告诉狗哥,一起学起来

相关文章:

【HTML入门】第一课 - 网页标签框架

这一节&#xff0c;我们说一下学习前端开发的话&#xff0c;最入门的也是非常重要的一门可成&#xff0c;也就是HTML。HTML标签&#xff0c;是网页的重要组成部分&#xff0c;可以说&#xff0c;你看到网页上的内容&#xff0c;都是基于HTML标签呈现出来的。 这一小节呢&#…...

【DevOps】Elasticsearch集群JVM参数调整及滚动重启指南

目录 概述 准备工作 滚动重启步骤 1. 禁用分片分配&#xff08;可选&#xff09; 2. 关闭索引写操作 3. 检查集群状态 4. 重启Master节点 5. 重启Data节点 6. 重新开启索引写操作 7. 启用分片分配&#xff08;如果之前禁用了&#xff09; 8. 监控集群状态 结论 概述…...

软设之多态

在面向对象的语言中&#xff0c;多态就是相同方法&#xff0c;不同的表现。 重写和重载时多态具体的表现形式。 重载&#xff0c;举个例子&#xff0c;有一个猫类&#xff0c;定义了一个叫的方法&#xff0c;正常叫的值是“喵喵”&#xff0c;愤怒时叫的值是“喵呜” 重写&a…...

SD NAND时序解析

一、SD NAND时序的重要性 在SD NAND的数据传输过程中&#xff0c;时序起着至关重要的作用。正确的时序确保了数据能够准确无误地在主机和SD NAND之间传输。 二、命令与读写时序 SD NAND的通信基于命令和数据传输&#xff0c;遵循以下时序规则&#xff1a; 命令与响应交互&…...

CSS-实例-div 水平居中 垂直靠上

1 需求 2 语法 3 示例 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>表格水平居中、垂直靠上示例…...

数据分析入门指南:从基础概念到实际应用(一)

随着数字化时代的来临&#xff0c;数据分析在企业的日常运营中扮演着越来越重要的角色。从感知型企业到数据应用系统的演进&#xff0c;数据驱动的业务、智能优化的业务以及数智化转型成为了企业追求的目标。在这一过程中&#xff0c;数据分析不仅是技术的运用&#xff0c;更是…...

ArcGIS Pro三维空间分析、专题制图、遥感制图全流程系统教学

ESRI宣布&#xff1a;ArcGIS 10.8.2 是 ArcMap 的当前版本&#xff0c;在 2026 年 3 月 1 日之前将继续受支持。我们没有计划在 2021/22 年随 ArcGIS 版本一起发布 ArcMap 10.9.x。这意味着 10.8.x 系列将是 ArcMap 的最终版本系列&#xff0c;并将在 2026 年 3 月 1 日之前受支…...

Redis 7.x 系列【17】四种持久化策略

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Redis 版本 7.2.5 源码地址&#xff1a;https://gitee.com/pearl-organization/study-redis-demo 文章目录 1. 概述2. 案例演示2.1 无持久化2.2 RDB2.3 AOF2.4 混合模式2.4.1 方式一&#xff1a;…...

开发经验:go切片的继承

package main import ( "errors" "fmt" ) // LimitedSlice 是一个封装了切片的结构体&#xff0c;用于限制切片的最大容量 type LimitedSlice struct { slice []int maxCap int } // NewLimitedSlice 创建一个新的LimitedSlice实例&#xff…...

PyQt5事件机制解析:从原理到实战一网打尽!

PyQt5事件机制 一、简介1.1 PyQt5的概述和作用 1.2 为什么学习PyQt5事件机制1.2.1 实现用户交互1.2.2 处理复杂逻辑1.2.3 自定义用户界面行为1.2.4 优化性能 二、PyQt5事件机制初步了解2.1 PyQt5事件的概念和基本原理2.1.1 PyQt5事件的概念2.1.2 PyQt5事件的基本原理 2.2 事件处…...

GraphQL与RESTful API的区别和优势

GraphQL GraphQL是一种用于API设计的语言和查询协议&#xff0c;由Facebook于2015年推出。它允许客户端向服务器指定他们需要的数据字段&#xff0c;而不是像RESTful API那样请求整个资源然后过滤数据。在GraphQL中&#xff0c;客户端发送一个单一的请求&#xff0c;而服务器返…...

关于 Qt4Qt5迁移至Qt6出现QDesktopWidget和QApplication::desktop()删除后兼容Qt6 的解决方法

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/140036861 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV…...

【HarmonyOS NEXT】鸿蒙Socket 连接

简介 Socket 连接主要是通过 Socket 进行数据传输&#xff0c;支持 TCP/UDP/Multicast/TLS 协议。 基本概念 Socket&#xff1a;套接字&#xff0c;就是对网络中不同主机上的应用进程之间进行双向通信的端点的抽象。TCP&#xff1a;传输控制协议(Transmission Control Proto…...

1978Springboot在线维修预约服务应用系统idea开发mysql数据库web结构java编程计算机网页源码maven项目

一、源码特点 springboot在线维修预约服务应用系统是一套完善的信息系统&#xff0c;结合springboot框架和bootstrap完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用springboot框架&#xff08;MVC模式开发 &#xff09;&#xff0c;系统具有完整的源代码和…...

【vue】实现自动轮播+滚轮控制

前言 有一个无缝轮播+滚轮控制的需求,找了很多的方法发现都没办法完美的实现这种效果。 用原生的js实现不是无缝滚动 用无缝滚动插件实现,发现pc端无法实现滚轮控制 目标 1 实现表格表无缝循环滚动 2 实现滚轮控制表格表数据滚动 3 掌握vue-seamless-scroll使用方式 一些思考…...

鸿翼FEX文件安全交换系统,打造安全高效的文件摆渡“绿色通道”

随着数字经济时代的到来&#xff0c;数据已成为最有价值的生产要素&#xff0c;是企业的重要资产之一。随着数据流动性的增强&#xff0c;数据安全问题也随之突显。尤其是政务、金融、医疗和制造业等关键领域组织和中大型企业&#xff0c;面临着如何在保障数据安全的同时&#…...

苹果电脑虚拟机运行Windows Mac环境安装Win PD19虚拟机 parallels desktop19虚拟机安装教程免费密钥激活

在如今多元的数字时代&#xff0c;我们经常需要在不同的操作系统环境下进行工作和学习。而对于 Mac 用户来说&#xff0c;有时候需要在自己的电脑上安装 Windows 操作系统&#xff0c;以体验更多软件及功能&#xff0c;而在 Mac 安装 Windows 虚拟机是常用的一种操作。下面就来…...

昇思25天学习打卡营第11天|基于MindSpore通过GPT实现情感分类

学AI还能赢奖品&#xff1f;每天30分钟&#xff0c;25天打通AI任督二脉 (qq.com) 基于MindSpore通过GPT实现情感分类 %%capture captured_output # 实验环境已经预装了mindspore2.2.14&#xff0c;如需更换mindspore版本&#xff0c;可更改下面mindspore的版本号 !pip uninsta…...

【Python】变量与基本数据类型

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️Python】 文章目录 前言变量声明变量变量的命名规则 变量赋值多个变量赋值 标准数据类型变量的使用方式存储和访问数据&#xff1a;参与逻辑运算和数学运算在函数间传递数据构建复杂的数据结构 NameE…...

Unity按键表大全

Unity键值对应表# KeyCode是由Event.keyCode返回的。这些直接映射到键盘上的物理键&#xff0c;以下是键值对应列表&#xff1a; 常用键# Backspace 退格键 Delete Delete键 TabTab键 Clear Clear键 Return 回车键 Pause 暂停键 Escape ESC键 Space 空格键 小键盘# …...

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

React Native 导航系统实战(React Navigation)

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

解锁数据库简洁之道:FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

多模态大语言模型arxiv论文略读(108)

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

Spring是如何解决Bean的循环依赖:三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...