「前端」HTML之结构

yumo6668个月前 (04-27)技术文章106

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

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,继续用就行了。

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

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

相关文章

什么是 HTML

什么是 HTML?HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 不是一种编程语言,而是一种标记语言 (marku...

HTML DOM Input Text 对象

Input Text 对象 Input Text 对象代表 HTML 中 type="text" 的 <input> 元素。 访问 Input Text 对象你可以通过 getEle...

前端入门——什么是HTML,如何快速学习

上一篇介绍了网页的基本结构,那如何编写网页的内容? 前提是要学会HTML标签的用法,本篇主要介绍HTML标签是什么,如何学习,需要大概多长时间学习。本篇主要基于html5介绍,html5 是最新版的标...

程序员电脑编程教程-HTML语言开发介绍与概述

做全栈攻城狮-每日更新原创IT编程技术及日常实用视频。主要内容:正式引入HTML网页开发,学习并了解HTML的相关知识。变身Web开发达人,做全栈程序员。这是以第一课,希望以我的方式,你将学会HTML...

这里有一份HTML的超全教程,自学建网站不再是梦

在互联网高速发展的今天,我们通过浏览器可以看到各种各样的网站,包含了各式不同的领域还有内容,通过点击网站上的标签和栏目我们就能够很方便地看到网站上显示的各种数据,而这些都是建立在HTML这种标记语言的...

HTML 列表

HTML的常用列表可以分为三种:无序列表,有序列表以及定义列表。无序列表定义:<ul>...</ul> ,表示项目之间没有顺序规定的列表。内层标签是 <li>......