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

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

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

http://www.lryc.cn/news/391092.html

相关文章:

  • 【DevOps】Elasticsearch集群JVM参数调整及滚动重启指南
  • 软设之多态
  • SD NAND时序解析
  • CSS-实例-div 水平居中 垂直靠上
  • 数据分析入门指南:从基础概念到实际应用(一)
  • ArcGIS Pro三维空间分析、专题制图、遥感制图全流程系统教学
  • Redis 7.x 系列【17】四种持久化策略
  • 开发经验:go切片的继承
  • PyQt5事件机制解析:从原理到实战一网打尽!
  • GraphQL与RESTful API的区别和优势
  • 关于 Qt4Qt5迁移至Qt6出现QDesktopWidget和QApplication::desktop()删除后兼容Qt6 的解决方法
  • 【HarmonyOS NEXT】鸿蒙Socket 连接
  • 1978Springboot在线维修预约服务应用系统idea开发mysql数据库web结构java编程计算机网页源码maven项目
  • 【vue】实现自动轮播+滚轮控制
  • 鸿翼FEX文件安全交换系统,打造安全高效的文件摆渡“绿色通道”
  • 苹果电脑虚拟机运行Windows Mac环境安装Win PD19虚拟机 parallels desktop19虚拟机安装教程免费密钥激活
  • 昇思25天学习打卡营第11天|基于MindSpore通过GPT实现情感分类
  • 【Python】变量与基本数据类型
  • Unity按键表大全
  • 第一周java。2
  • Arduino - Keypad 键盘
  • 国产芯片方案/蓝牙咖啡电子秤方案研发
  • reactjs18 中使用@reduxjs/toolkit同步异步数据的使用
  • 剧本杀小程序:助力商家发展,提高游戏体验
  • pikachu靶场 利用Rce上传一句话木马案例(工具:中国蚁剑)
  • CenterOS7安装java
  • react 重新加载子组件
  • 从零开始使用WordPress搭建个人网站并一键发布公网详细教程
  • 浅谈chrome引擎
  • 【常用知识点-Java】创建文件夹