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

news2024/10/7 11:29:02

这一节,我们说一下学习前端开发的话,最入门的也是非常重要的一门可成,也就是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.coloradmin.cn/o/1893321.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Windows系统安装SSH服务结合内网穿透配置公网地址远程ssh连接

前言 在当今的数字化转型时代&#xff0c;远程连接和管理计算机已成为日常工作中不可或缺的一部分。对于 Windows 用户而言&#xff0c;SSH&#xff08;Secure Shell&#xff09;协议提供了一种安全、高效的远程访问和命令执行方式。SSH 不仅提供了加密的通信通道&#xff0c;…

SalesForce集成案例-获取联系人信息

SalesForce本身比较复杂&#xff0c;涉及的东西比较多&#xff0c;下面以使用REST API接口为例&#xff0c;介绍与SalesForce集成的过程&#xff0c;集成案例&#xff1a;获取联系人信息。 首先需要注册一个免费的开发者帐号&#xff0c;具有完全操作SalesForce的权限。 1、注…

【vmbox centos7 网络配置】【centos7 glances 安装】【centos7 安装MySQL5.7】

文章目录 vmbox centos7 网络配置centos7 修改镜像地址centos7 安装 glancesCentOS 7 上安装 MySQL 5.7 并进行基本的安全配置使用 firewalld 开放 3306 端口 可以远程连接mysql vmbox centos7 网络配置 目前 能组建集群 虚拟机网络互通&#xff0c;虚拟机能访问外网 创建一个…

OpenCV库Windows端编译方法

编译前提 &#xff08;1&#xff09;下载好所需版本的OpenCV源码&#xff0c;点击进入下载地址&#xff0c;此处以OpenCV-2.4.13.6为例&#xff0c;下载页面截图如下图所示&#xff1a; 解压后如下图所示&#xff1a; &#xff08;2&#xff09;安装好CMake软件&#xff0c;点…

数据结构(一)C语言补

数据结构 内存空间划分 一个进程启动后&#xff0c;会生成4G的内存空间 0~3G是用户空间(应用层) 3~4G是内核空间(底层) 0~3G 3~4G 所有的进程都会共享3G~4G的内核空间&#xff0c; 但是每个进程会独立拥有0~3G的用户空间。 栈区 存放数据特点 栈区存放数据的申请空间的先后…

Ecology Letters | 植物多样性-生产力关系的正反馈机制:基于BEF-China的7年大规模实验数据

本文首发于“生态学者”微信公众号&#xff01; 森林提供了丰富的生态系统功能和服务&#xff0c;如生物质生产、碳固存、气候调节、水过滤和防止土壤侵蚀。森林生物多样性丧失的空前速度可能会严重损害世界森林提供基本生态系统功能和服务的能力。因此&#xff0c;了解物种丧失…

【Linux进阶】Linux目录配置,FHS

在了解了每个文件的相关种类与属性&#xff0c;以及了解了如何修改文件属性与权限的相关信息后&#xff0c;再来要了解的就是&#xff0c;为什么每个Linux发行版它们的配置文件、执行文件、每个目录内放置的东西&#xff0c;其实都差不多&#xff1f;原来是有一套标准依据&…

CentralCache中心缓存

目录 一.CentralCache基本结构 1.CentralCache任务 2.基本结构 二.函数调用层次结构/.h文件 三.Span和SpanList的封装 Span:大块内存跨度 PAGE_ID _pageId size_t _objSize _useCount SpanList:管理Span的双链表(桶锁) 四.获取大块内存GetOneSpan 五.FetchRangeObj输…

C语言作业笔记

1. 要找俩个数使其相加等于一个数&#xff0c;那么俩个数从头尾出发&#xff0c;先动一边&#xff0c;假设是尾先动&#xff0c;一开始俩个数相加大于sum&#xff08;小于的话就动头&#xff09;&#xff0c;那么总有一时刻俩数相加小于sum&#xff0c;则就在那一刻停下来&…

MySQL高可用(MHA高可用)

什么是 MHA MHA&#xff08;MasterHigh Availability&#xff09;是一套优秀的MySQL高可用环境下故障切换和主从复制的软件。 MHA 的出现就是解决MySQL 单点的问题。 MySQL故障切换过程中&#xff0c;MHA能做到0-30秒内自动完成故障切换操作。 MHA能在故障切换的过程中最大…

机器学习与模式识别_清华大学出版社

contents 前言第1章 绪论1.1 引言1.2 基本术语1.3 假设空间1.4 归纳偏好1.5 发展历程1.6 应用现状 第2章 模型评估与选择2.1 经验误差与过拟合2.2 评估方法2.3 性能度量2.3.1 回归任务2.3.2 分类任务 2.4 比较检验2.5 偏差与方差2.5.1 偏差-方差分解2.5.2 偏差-方差窘境 第3章 …

In Ictu Oculi: Exposing AI Created Fake Videos by Detecting Eye Blinking

文章目录 In Ictu Oculi: Exposing AI Created Fake Videos by Detecting Eye Blinking背景关键点内容预处理Long-Term Recurrent CNNsLSTM-RNN模型训练实验data启示In Ictu Oculi: Exposing AI Created Fake Videos by Detecting Eye Blinking 会议:2018 IEEE International…

用Vue3和Rough.js绘制一个交互式3D图

本文由ScriptEcho平台提供技术支持 项目地址&#xff1a;传送门 基于Rough.js和GSAP创建交互式SVG图形卡片 应用场景 本代码适用于需要创建动态交互式SVG图形卡片的场景&#xff0c;例如网页设计、数据可视化和交互式艺术作品。 基本功能 该代码利用Rough.js和GSAP库&…

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

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

在 PostgreSQL 中强制执行连接顺序#postgresql认证

让我们首先创建一些表&#xff1a; PgSQL plan# SELECT CREATE TABLE x || id || (id int) FROM generate_series(1, 5) AS id;?column? --------------------------CREATE TABLE x1 (id int)CREATE TABLE x2 (id int)CREATE TABLE x3 (id int)CREATE TABLE…

Richtek立锜科技车规级器件选型

芯片按照应用场景&#xff0c;通常可以分为消费级、工业级、车规级和军工级四个等级&#xff0c;其要求依次为军工>车规>工业>消费。 所谓“车规级元器件”--即通过AEC-Q认证 汽车不同于消费级产品&#xff0c;会运行在户外、高温、高寒、潮湿等苛刻的环境&#xff0c…

首获IF就高达13分!各刊潜力无限——爱思唯尔2024首获IF期刊大盘点!

【SciencePub学术】爱思唯尔&#xff08;Elsevier&#xff09;是一家全球知名的国际性学术出版公司&#xff0c;总部位于荷兰阿姆斯特丹。该公司主要出版科学、技术和医学领域的学术期刊和书籍&#xff0c;涵盖了广泛的学科领域&#xff0c;如生命科学、物理科学、社会科学等。…

Python面向对象编程中的继承及其应用

目录 1. 继承的基本概念 2. 继承的语法 3. 继承的应用场景 4. 使用示例&#xff1a;汽车销售系统 5. 总结 继承是面向对象编程中的一个重要概念&#xff0c;它允许我们根据已有类创建新类&#xff0c;并继承已有类的属性和方法。在本文中&#xff0c;我们将学习Python中的…

c++习题09-分离整数的各个数

目录 一&#xff0c;题目 二&#xff0c;思路 三&#xff0c;代码 一&#xff0c;题目 二&#xff0c;思路 一开始我想到的是将简单容易输出的1000以内的数先进行相应的运算&#xff0c;再输出之后再对1000以上的数字进行判断&#xff08;主要还是想先将很大的数变小&#x…

Java数字化产科管理系统源码,多家医院应用案例,可直接上项目

Java数字化产科管理系统源码&#xff0c;多家医院应用案例&#xff0c;可直接上项目 数字化产科管理平台系统是什么&#xff1f;该系统由产品包涵门诊管理、住院管理、统计管理、移动服务四大模块&#xff0c;新版本涵盖围产全过程&#xff0c;从建档、首检、复检、住院(待产、…