【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 小结

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/770957.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

怎么录制电脑内部声音?好用的录音软件分享,看这篇就够了!

如何录制电脑内部声音&#xff1f;平时使用电脑工作&#xff0c;难免会遇到需要录音的情况。好用的录音软件有很多&#xff0c;也有部分录屏工具也支持录音功能。 那么如何录制电脑内部声音呢&#xff1f;本文整理了几个录制电脑内部声音的方法&#xff0c;如果你需要在电脑上录…

nacos开启鉴权后,springboot注册失败

1.确认Nacos版本 我的Nacos版本是1.4.2 2.确认Nacos相关依赖的版本之间兼容&#xff0c;一下是我的一些pom.xml依赖 <!--父级项目的--><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifa…

推荐一个私有化部署的物联网平台

引言 随着物联网技术的飞速发展&#xff0c;越来越多的企业开始寻求能够提供稳定、安全、可定制的物联网解决方案。私有化部署的物联网平台因其能够满足企业对数据安全和个性化需求的优势&#xff0c;逐渐成为市场的新宠。本文将详细介绍ThingsKit物联网平台&#xff0c;一个专…

微软发布了Win11 24H2版本的首个设置动态更新和恢复!

系统之家于7月3日发出最新报道&#xff0c;微软针对Win11 24H2版本发布了首个设置动态更新(Setup Dynamic Update)KB5039448。此次更新主要改进了Win11 24H2的安装文件以及用户在升级、安装到24H2版本过程中可能会使用到的所有文件。 系统之家附上 Windows 11 24H2 的完整发布时…

刷代码随想录有感(125):动态规划——最长公共子序列

题干&#xff1a; 代码&#xff1a; class Solution { public:int longestCommonSubsequence(string text1, string text2) {vector<vector<int>>dp(text1.size() 1, vector<int>(text2.size() 1, 0));for(int i 1; i < text1.size(); i){for(int j …

AGI 之 【Hugging Face】 的【Transformer】的 [ Transformer 架构 ] / [ 编码器 ]的简单整理

AGI 之 【Hugging Face】 的【Transformer】的 [ Transformer 架构 ] / [ 编码器 ]的简单整理 目录 AGI 之 【Hugging Face】 的【Transformer】的 [ Transformer 架构 ] / [ 编码器 ]的简单整理 一、简单介绍 二、Transformer 三、Transformer架构 四、编码器 1、自注意…

PyCharm社区版Cython支持

自己在文件类型中加一个&#xff0c;名称叫【pythonC】 &#xff0c;文件名模式这一栏要加*.pyx的后缀&#xff0c;之后双击【pythonC】编辑这个文件类型 这里1、2、3、4配置如下 # 1 " # &*, - / : ; <>[ ] { }# 2 False None True and as assert break cdef …

Python代码设置Excel工作表背景色或背景图

Excel是工作中数据处理和分析数据的重要工具。面对海量的数据和复杂的表格&#xff0c;如何提高工作效率、减少视觉疲劳并提升数据的可读性是不容忽视的问题。而给工作表设置合适的背景是表格优化的一个有效方式。为Excel工作表设置背景色或背景图不仅能够美化工作表&#xff0…

FreeRTOS学习 -- 软件定时器

一、软件定时器简介 1、软件定时器概述 软件定时器允许设置一段时间&#xff0c;当设置的时间到达之后就执行指定的功能函数&#xff0c;被定时器调用的这个功能函数叫做定时器的回调函数。回调函数的两次执行间隔叫做定时器的定时周期。 简而言之&#xff0c;当定时器的定时…

Postman接口测试工具详解【保姆级教程】

大家好,我是CodeQi! 在我们日常的开发工作中,无论是前端还是后端,API 接口的测试都是必不可少的一环。 你有没有遇到过这样的情况:接口测试工具复杂难用,使用起来让人抓狂;或者手动构造请求效率低下,容易出错? 别担心,我今天要介绍的 Postman 工具,将会彻底改变你…

某业帮六月校招后端笔试

题目一 解题思路 签到题&#xff0c;dp就行。 题目二 解题思路 这个比较烦人&#xff0c;需要处理额外的引号和括号。用DFS&#xff0c;对于每个间隙&#xff0c;插入与不插入都搜一遍。 题目三 解题思路&#xff1a; 双指针&#xff0c;左右各一个指针&#xff0c;对比长度&…

一文解开关于UWB定位技术的认识误区

作为一项新兴技术产业&#xff0c;UWB定位技术具有无限发展潜力。尤其是在TB行业应用中&#xff0c;UWB定位部分在项目的产值占比为10%-20%之间&#xff0c;这便意味着&#xff0c;UWB定位市场可以撬动其本身市场产值的5-10倍。 然而&#xff0c;伴随着UWB定位技术的迅速发展&a…

MySQL数据库增删改查示例

一、 1、登陆数据库 2、创建数据库zoo 3、修改数据库zoo字符集为gbk 4、选择当前数据库为zoo 5、查看创建数据库zoo信息 6、删除数据库zoo 二、创建俩张表 先创建一个数据库并使用&#xff1a; 创建员工表 创建员工绩效表 三、修改表 1.在员工表的基本上增加一个image系列&a…

如何使用小红书矩阵系统:提升内容管理与发布的指南

小红书作为一个集社区分享与电商功能于一体的平台&#xff0c;吸引了大量的用户和创作者。随着内容创作和账号管理的复杂性增加&#xff0c;小红书矩阵系统成为了一个强大的工具&#xff0c;帮助用户提高效率和扩大影响力。本文将详细介绍如何使用小红书矩阵系统&#xff0c;以…

用StartAI文生图做电商设计 AI服装面料设计教程

AI电商设计需要考虑以下多个问题&#xff0c;面面俱到即可小成本做电商 步骤&#xff1a;电商选品确定文生图关键 理解面料特性&#xff1a;了解不同面料的特性&#xff0c;如透气性、弹性、耐用性等&#xff0c;以便更好地利用AI进行设计。色彩搭配&#xff1a;利用AI分析流…

Ubuntu离线安装vsftpd

1.使用lsb_release -a命令查看当前系统的版本信息 2. 使用联网计算机下载对应系统版本的deb安装包 https://pkgs.org/download/vsftpd 3.安装 dpkg -i vsftpd_3.0.5-0ubuntu1_amd64.deb 没有安装dpkg的请到我博客查看&#xff0c;链接如下&#xff1a; Ubuntu20.04离线安装…

免费的鼠标连点器哪个好用?5款2024年最新鼠标连点器分享

鼠标连点器是电脑网络游戏爱好者并不陌生的游戏辅助工具&#xff0c;他在FPS、RTS、moba等游戏种类中发挥着重要作用。可以帮助玩家的鼠标完成各种简单点击动作。轻松实现游戏刷机升级。让你游戏升级不再“肝”&#xff0c;轻松刷图升级&#xff0c;秒表大佬不是梦&#xff01;…

经营人心:Mrs. B的百年传奇

这个故事的主角是Rose Blumkin&#xff0c;也被称为Mrs. B&#xff0c;她是Nebraska Furniture Mart的创始人。 她的故事确实是一个关于用户思维、客户关系和创业精神的经典案例。 Rose Blumkin于1893年出生在俄罗斯的一个小村庄&#xff0c;她在1921年移民到美国。 1937年&…

EHS是什么意思啊?EHS系统有什么作用?

当你走进一家现代化的工厂或企业&#xff0c;你可能会好奇&#xff1a;这些繁忙的生产线和高效运转的设备背后&#xff0c;是如何确保员工的安全、环境的保护和产品的质量的&#xff1f;答案可能就藏在“EHS系统”这个名词里。 那么&#xff0c;EHS是什么意思啊&#xff1f;它…

基于Hadoop平台的电信客服数据的处理与分析④项目实现:任务15:数据生产

任务描述 电信数据生产是一个完整且严密的体系&#xff0c;这样可以保证数据的鲁棒性。在本项目的数据生产模块中&#xff0c;我们来模拟生产一些电信数据。同时&#xff0c;我们必须清楚电信数据的格式和数据结构&#xff0c;这样才能在后续的数据产生、存储、分析和展示环节…