今天继续为大家分享前端的知识,如果对前端比较感兴趣的小伙伴,可以关注我,我会更大家继续分享更多与前端相关的内容,当然如果内容中又不当的或者文字错误的,欢迎大家在评论区留言,我会及时修改纠正。
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,继续用就行了。
以上开发工具的安装使用,在网络上都会有很多资料,可以动动小手指就能查到哦。
今天就分享到这儿吧,如果喜欢的记得点关注哦,也欢迎在留言区留言。