前端开发入门教程,web前端零基础html5 +css3+前端项目笔记(更新中)

本文介绍了HTML的基础知识,包括web标准的构成,使用VSCode作为开发工具,强调代码注释的重要性。文章详细讲解了HTML标签的结构,如双标签与单标签,以及父子和兄弟关系。此外,还列举了常用的HTML标签,如标题、段落、换行、水平分割线、文本格式化、图片、音频、视频和超链接标签,并提到了路径的绝对与相对概念。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

学习视频

HTML初识

web标准的构成

工具准备-VSCode

由于国内下载慢,故有如下下载链接:

下载链接

安装好后需要用到的插件名为open in browser

需要汉化的直接在拓展商店里查询 Chinese即可,拓展商店如下图所示:

代码规范

1、代码注释

作为一名合格的程序员,在写代码时,其有一定的注释是很有必要的,其注释的作用如下所示:

HTML标签的组成和关系

1、标签的结构

双标签如:<body></body>、<html></html>等等

单标签如:<br>、<hr>等等

2、标签间的关系

(1)、父子关系(嵌套关系)

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

(2)、兄弟关系(并列关系)

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

常用标签

1、标题标签

<h1>一级标题</h1> <h2>二级标题</h2> ......

共6级标签,其特点如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>一级标题</h1>  
    <h2>二级标题</h2>
    <h3>三级标题</h3>  
    <h4>四级标题</h4>  
    <h5>五级标题</h5>  
    <h6>六级标题</h6>  
</body>
</html>

(注:在VSCode中,在空html文件中,输入!和回车即可生成模板)

网页显示结果如图所示:

2、段落标签

段落标签<p></p>用于分段显示,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>这是一个段落</p>
</body>
</html>

3、换行标签

4、水平分割线标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <hr>
    <p>这是一个段落</p>
    <hr>
</body>
</html>

5、文本格式化标签

6、图片标签

7、音频标签

8、视频标签

9、超链接标签

10、列表标签

暂时就写这么多标签,如若需要更多,请点击这里

路径问题

1、绝对路径

2、相对路径

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值