0


HTML入门零基础教程(二)

嗨,大家好,我是异星球的小怪同志

一个想法有点乱七八糟的小怪

如果觉得对你有帮助,请支持一波。

希望未来可以一起学习交流。

一、HTML标签

1.HTML语法规范

HTML标签都要包含在尖括号里,尖括号里可以写上想要的标签,标签一般都是成对出现的。

比如:<html>和</html>,我们称为双标签。标签中对应的第一个标签是开始标签,第二个标签是结束标签。

当然也有特殊的标签必须是单个标签(极少情况),比如:
,我们称为单标签。

2.标签的关系

双标签关系可以分为两类:包含关系和并列关系。

包含关系:简单可以理解为父子关系,head为父亲,title为儿子

<head>
    <title> </title>
</head>

并列关系:简单可以理解为兄弟关系,head为哥哥,body为弟弟

<head> </head>
<body> </body>

我们可以再尝试着理解:下面所属的代码,html是head和body的父亲,而html和body属于儿子为包含关系,并且head和body是兄弟关系也就是并列关系。

<html>
    <head> </head>
    <body> </body>
</html>

二、HTML的基本结构标签

1.第一个HTML网页

每一个网页都会有一个基本的结构标签(也称之为骨架标签),页面内容也是在这些基本标签上书写,HTML页面也称为HTML文档。

<html>
    <head>
        <title>1024程序员节快乐<title>
    </head>
    <body>
           代码敲烂,工资过万
    </body>
</html>
        

由上述代码可知:
标签名定义说明**<html></html>HTML 标签页面中最大的标签,我们称为根标签**
<head></head>
文档的头部**注意在head标签中我们必须要设置的标签的title<title></tltle>文档的标题让页面拥有一个属于自己的网页标题****<body></body>文档的主体元素包含文档的所有内容,页面内容基本都是放到body里面的**
** 那么我们可以来演示一遍**

2.HTML基本结构总结

三、网页开发工具

常见的网站建设工具有Sublime、Visual Studio Code、webstorm、Dreamweaver、Hbuilder等,其实都大差不差,只要你会运用都是可以的。可以用Dreamweaver我前面发的文章有讲http://t.csdn.cn/MwxEj ,也可以用现在大家经常用的Visual Studio Code。

1.Visual Studio Code的下载及安装

(1)下载去这里https://code.visualstudio.com/Download,根据你电脑的系统,选择版本进行下载。

** (2)下载好之后,进行一系列的安装,如下图所示:**

(a)首先选择我同意此协议

**(b)接着安装到自己想要的盘里,最好不要安装到C盘 **

**(c)红色的建议我们勾选,橙色的不建议勾选,想勾选也可以 **

**(d)选择好之后点击下一步 **

**(e)点击安装 **

**(f)安装成功 **

(g)我们双击桌面打开软件,选择中文安装包

(h)再次重启,就可以了

2.Visual Studio Code的使用

(1)首先我们可以点击文件窗口然后新建文件,也可以直接在界面上点击新建文件,接着文件建好之后要先保存,保存也可以在文件窗口中找到。文件一点要保存为.html网页格式

(2)那么我们就开始敲代码之路了,首先我们看到的是没有任何单词,一个一个写很费事,那么有了开发工具,我们就可以输入一个感叹号,注意是英文状态下输入,然后选择第一个感叹号

(3)这样我们的HTML基本骨架就已经形成了,就可以写想要的内容了

(4)我们可以尝试尝试 建立网页

(5)建立好之后,可以点击右键,然后用浏览器预览,也可以使用快捷键。浏览器的插件要在扩展中下载。当然后续如果需要什么插件,都可以这样下载,下载之后要记得重启一下。

(6)我们就可以看到我们所创建的网页了啦

3.使用VS Code的快捷键

(1)双击可以打开软件。

(2)新建文件夹(ctrl+n) 。

(3)保存(ctrl+s),注意移动要保存为.html文件。

(4)ctrl+加号键,ctrl+减号键,放大或缩小视图界面。

(5)生成页面的骨架结构,用英文状态下输入感叹号。

(6)利用鼠标右键可以很快点击浏览器预览。

4.VS Code插件安装

推荐安装的插件,仅供参考,安装好之后记得重启一下。
插件****作用
Chinese(Simplifed)Language

Pack for VS Code
中文(简体)语言包Open in Browser鼠标右击选择浏览器打开html文件JS-CSS-HTML Formatter每次保存,都会自动格式化js css 和html代码Auto Rename Tag自动重命名配对的HTML/XML标签CSS Peek追踪至样式
**好啦,今天就到这里,下次再更~ **

标签: html css javascript

本文转载自: https://blog.csdn.net/weixin_65445097/article/details/127522711
版权归原作者 异星球的小怪同志 所有, 如有侵权,请联系我们删除。

“HTML入门零基础教程(二)”的评论:

还没有评论