莫方教程网

专业程序员编程教程与实战案例分享

「前端」HTML之结构 html前端架构

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

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

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

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

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言