当前位置: 首页 > 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 小结

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

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

相关文章:

  • stm32中IIC通讯协议
  • Xilinx FPGA:vivado关于真双端口的串口传输数据的实验
  • Spring Boot与Spring Batch的深度集成
  • iOS开发中用到的自定义UI库
  • 【Kubernetes学习】
  • Python容器 之 字典--字典的遍历
  • 性能测试、负载测试、压力测试、稳定性测试简单区分【超详细】
  • Solr安装IK中文分词器
  • 【Linux开发实战指南】基于TCP、进程数据结构与SQL数据库:构建在线云词典系统(含注册、登录、查询、历史记录管理功能及源码分享)
  • 使用PowerShell开启防火墙端口
  • 在C++中内存泄露的几种情况及解决内存泄露和指针越界有哪些方法?
  • leetcode 403周赛 包含所有1的最小矩形面积||「暴力」
  • 玄机——第七章 常见攻击事件分析--钓鱼邮件 wp
  • AI绘画Stable Diffusion 解锁精美壁纸创作:利用SD与LLM定制你的专属壁纸,AI副业变现指南!
  • 使用LabVIEW报告生成工具包时报错97
  • 2018天猫双11|这就是阿里云!不止有新技术,更有温暖的社会力量
  • Eureka 2.0 开源流产,真的对你影响很大吗?
  • HTTP中的ETag在移动客户端的应用
  • js算法-归并排序(merge_sort)
  • JWT究竟是什么呢?
  • 机器学习学习笔记一
  • 解析带emoji和链接的聊天系统消息
  • 如何实现 font-size 的响应式
  • 协程
  • CMake 入门1/5:基于阿里云 ECS搭建体验环境
  • 宾利慕尚创始人典藏版国内首秀,2025年前实现全系车型电动化 | 2019上海车展 ...
  • 继 XDL 之后,阿里妈妈开源大规模分布式图表征学习框架 Euler ...
  • (笔记)Kotlin——Android封装ViewBinding之二 优化
  • (六) ES6 新特性 —— 迭代器(iterator)
  • (南京观海微电子)——COF介绍
  • (全部习题答案)研究生英语读写教程基础级教师用书PDF|| 研究生英语读写教程提高级教师用书PDF
  • (五)Python 垃圾回收机制
  • (已解决)vue+element-ui实现个人中心,仿照原神
  • (转)EOS中账户、钱包和密钥的关系
  • (转)Java socket中关闭IO流后,发生什么事?(以关闭输出流为例) .
  • *(长期更新)软考网络工程师学习笔记——Section 22 无线局域网
  • **PyTorch月学习计划 - 第一周;第6-7天: 自动梯度(Autograd)**
  • .NET Entity FrameWork 总结 ,在项目中用处个人感觉不大。适合初级用用,不涉及到与数据库通信。
  • .NET Standard / dotnet-core / net472 —— .NET 究竟应该如何大小写?
  • .NET框架类在ASP.NET中的使用(2) ——QA
  • .net流程开发平台的一些难点(1)
  • .Net转前端开发-启航篇,如何定制博客园主题
  • @Bean注解详解
  • @cacheable 是否缓存成功_让我们来学习学习SpringCache分布式缓存,为什么用?
  • @JSONField或@JsonProperty注解使用
  • @SuppressWarnings注解
  • [ vulhub漏洞复现篇 ] GhostScript 沙箱绕过(任意命令执行)漏洞CVE-2019-6116
  • [5] CUDA线程调用与存储器架构
  • [Algorithm][动态规划][简单多状态DP问题][按摩师][打家劫舍Ⅱ][删除并获得点数][粉刷房子]详细讲解
  • [BZOJ 3531][Sdoi2014]旅行(树链剖分+线段树)
  • [EFI]DELL XPS13 9360电脑 Hackintosh 黑苹果efi引导文件
  • [I2C]I2C通信协议详解(二) --- I2C时序及规格指引
  • [Java] 模拟Jdk 以及 CGLib 代理原理
  • [LeetCode]: 145: Binary Tree Postorder Traversal
  • [LeetCode]—Implement strStr() 寻找子串匹配第一个位置 (KMP)