百度360必应搜狗淘宝本站头条
vba高级教程svn连接scheduledtaskmybatis plus结构体数组
当前位置：网站首页 > 编程网 > 正文

「前端」HTML之结构

yuyutoo 2025-05-11 19:26 4 浏览 0 评论

今天继续为大家分享前端的知识，如果对前端比较感兴趣的小伙伴，可以关注我，我会更大家继续分享更多与前端相关的内容，当然如果内容中又不当的或者文字错误的，欢迎大家在评论区留言，我会及时修改纠正。

1.初识HTML

  • HTML指的是超文本标记语言（Hyper Text Markup Language），是用来描述网页的一种语言。
  • HTML不是一种编程语言，而是一种标记语言（markup language），标记语言是一套标记标签（markup tag）。
  • HTML标签描述网页元素，比如图片标签、文字标签、链接标签等。
  • HTML标签有自己的语法规范，并且所有的HTML标签都是用尖括号（<>）包起来。

2.HTML骨架结构

HTML基本骨架语法如下所示：

HTML骨架标签说明：

下面通过对HTML骨架的基本认识，你也可以小试牛刀，打开记事本，新建一个带有HTML骨架标签的.txt文件。

在.txt中写入HTML骨架标签，保存，并将.txt的后缀名修改为.html，右键单击你写好的文件，然后选择你要显示的浏览器，本人习惯用谷歌的浏览器，这个根据个人的习惯来选择就好了。

示例代码如下：

注意：HTML标签名、标签的属性名以及大部分属性值都统一用小写，不要问我为什么，这是人家W3C的规范，咱们按规范行事就好啦。

正确示范：

错误示范：

3.HTML标签的分类

HTML标签：在HTML页面中，带有“<>”尖括号符号的元素被称为HTML标签元素，如上面的<html>、<head>、<body>，它们都是用尖括号包起来，而且这几个标签还是HTML的骨架结构标签，就好比人之所以能站立，就是因为有骨架支撑。

通常我们将其分为常规元素和空元素，以下是对两种类型的介绍。

常规元素（双标签）

语法：<标签名>内容</标签名>，如<body>我的网页内容</body>。

说明：

  • 该语法中"<标签名>"表示该标签的作用开始，一般称为"开始标签（start tag）"，"</标签名>"表示该标签的作用结束，一般称为"结束标签（end tag）"。
  • 和开始标签相比，结束标签只是在前面加了一个封闭符"/"。
  • 提示：HTML多数都是双标签。

空元素（单标签或自封闭标签）

语法：<标签名 /> ，比如 <br />

说明：

  • 空元素用单标签来表示。简单说，就是里边不需要包含内容，属于自封闭标签。
  • 提示：此类标签较少，只需要用到的时候记住就行，在开发过程中自己不断的积累。

4.HTML标签的关系

标签之间的关系主要是针对双标签，双标签之间的关系分为如下几种。

嵌套关系：

并列关系：

提示：在开发的过程中，如果标签之间是嵌套关系，那么子元素可以通过tab键进行缩进，让其结构和格式更加的清晰。

5.前端开发工具

之前我们是通过记事本来写html骨架结构，会发现这种情况针对几行代码，还是能消化的，但是碰上几千甚至几万以及更多，此时应该怎么办呢？这个时候就得用到我们的前端开发工具，通过前端开发工具，可以更快更高效的提高我们的开发效率，那我们常见的前端开发工具有如下几种：

说明：

  • Dreamweaver：学校用得多。
  • Sublime：推荐使用，轻量级，效率高，打开速度快，优点多，但是使用插件的时候，需要下载哦。
  • WebStorm：这个我没用过，但是有的人很喜欢，属于付费的。
  • Hbuilder：推荐使用，轻量级，免费，效率高，打开速度快，现在都是使用HbuilderX版本，这个是可以去官网下载到的，重点它免费、免费、免费，重要的事情说三遍！！！。
  • VS Code：这个是微软的，也属于开源免费的，功能很强大的，尤其是在JavaScript开发方面，也是本人推荐使用的。

提示：Hbuilder和VS Code谁更好？我只能说各有千秋，根据个人的习惯，我个人就比较喜欢Hbuilder，偶尔会用VS Code，如果你习惯用VS Code，继续用就行了。

以上开发工具的安装使用，在网络上都会有很多资料，可以动动小手指就能查到哦。

今天就分享到这儿吧，如果喜欢的记得点关注哦，也欢迎在留言区留言。

相关推荐

建筑福利-pdf转dwg格式转换器，再也不用描图-极客青年

作为一名经常熬夜画图的建筑狗或者cad用户，你体验过pdf图纸描图到cad吗？前几天一个老同学找我，说他的毕业设计需要我帮忙，发给我一份pdf图纸文件，问我怎么把pdf图纸转换成dwg格式。机智的我灵...

想学 HTML，不知从何入手?看完这篇文章你就知道了

很多人都说HTML是一门很简单的语言，看看书，看看视频就能读懂。但是，如果你完全没有接触过，就想通过看一遍教程，背背标签，想要完全了解HTML，真的有点太天真了。HTML中文...

「前端」HTML之结构

今天继续为大家分享前端的知识，如果对前端比较感兴趣的小伙伴，可以关注我，我会更大家继续分享更多与前端相关的内容，当然如果内容中又不当的或者文字错误的，欢迎大家在评论区留言，我会及时修改纠正。1.初识H...

手把手教你使用Python网络爬虫下载一本小说(附源码)

大家好，我是Python进阶者。前言前几天【磐奚鸟】大佬在群里分享了一个抓取小说的代码，感觉还是蛮不错的，这里分享给大家学习。...

用于处理pdf文件格式的转换器

在上传过程中如果单个文件太大则容易中断，而且文件太大的话对与存储也有些弊端。那么我们应该想到将文件进行压缩(注意这里压缩指的是不改变文件格式的压缩，而不是用变成压缩文件。这里就将以下用专门的软件压缩P...

乐书:在线 Kindle 电子书制作和转换工具

之前Kindle伴侣曾推荐过可以在Windows和Mac系统平台上运行的kindle电子书制作软件Sigil（教程），用它可以制作出高质量的的ePub格式电子书，当然最后还需要通...

付费文档怎么下载?教你5种方法，任意下载全网资源

网上查资料的时候，经常遇到需要注册登录或者付费的才能复制或者是下载，遇到这种情况大多数人都会选择重新查。...

捡来的知识!3种方法随便复制网页内容，白嫖真香呀

网上的资源真的多，所以许多人常常会从网上找资料。我们看到感兴趣的内容，第一时间可能会想要收入囊中。比如说截个图啊，或者挑选有意思的句子复制粘贴，记录下来。可是，有些时候，却会遇到这样的情况：1、内容不...

AI的使用，生成HTML网页。

利用deepseek，豆包，kimi以及通义千问，写入相同的需求。【写一个网页，实现抽奖功能，点击“开始”，按键显示“停止”，姓名开始显示在屏幕上，人员包括：“张三”，“里斯”，“Bool”，“流水废...

pdf转换成jpg转换器 4.1 官方正式版

pdf转换成jpg工具软件简介pdf转换成jpg转换器是一款界面简洁，操作方便的pdf转换成jpg转换器。pdf转换成jpg转换器可以将PDF文档转换为JPG，BMP，GIF，PNG，TIF图片文件。...

办公必备的office转换成pdf转换器怎么用?

2016-02-2415:53:37南方报道网评论(我要点评)字体刚从校园走出社会，对于快节奏的办公环境，难免会觉得有些吃力。在起步阶段力求将手头上的事情按时完工不出错，但是渐渐的你会发现，别人只...

为什么PDF转Word大多要收费?

PDF转Word大多都要收费？并非主要是因为技术上的难度，而是基于多方面的商业和版权考虑的，下面给大家浅分析下原因：...

如何用python生成简单的html report报告

前提：用python写了一个简单的log分析，主要也就是查询一些key，value出来，后面也可以根据需求增加。查询出来后，为了好看，搞个html表格来显示。需要的组件：jinja2flask...

学用系列|如何搞定word批量替换修改和格式转换?这里一站搞定

想必不少朋友都会碰到批量修改word文档内容、压缩文档图片、文件格式转换等重复性文档处理工作的需要，今天胖胖老师就推荐给大家一个免费工具XCLWinKits，一站搞定你所有的需要。什么是XCLWinK...

这款PDF文档转换神器，能帮你解决PDF使用中的许多难点

不管是平时的学习还是工作，相信许多朋友都经常接触PDF文件。可以说，PDF文件在我们的日常办公学习过程中的重要性和Word文档一样重要。在之前的更新中，小编介绍了几款非常不错的PDF文档格式转换软件，...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表