前端三件套之HTML（一）

最新推荐文章于 2023-12-30 16:38:52 发布

前端菜鸟阿皮

最新推荐文章于 2023-12-30 16:38:52 发布

阅读量158

点赞数 1

分类专栏：前端文章标签： html 前端开发语言

本文链接：https://blog.csdn.net/m0_56221851/article/details/131182704

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML(HyperText Markup Language,超文本标记语言)是用于创建网页的标准标记语言。它是Web开发的基础，用于定义网页的结构、内容和样式。HTML由一系列的标签组成，这些标签用于描述网页中的不同元素，如标题、段落、列表、链接等。通过使用这些标签，开发者可以轻松地创建出具有丰富内容和良好布局的网页。

在前端开发中，HTML通常与CSS(层叠样式表)和JavaScript(一种脚本语言)一起使用，共同构建响应式和交互式的Web应用程序。HTML负责提供网页的结构和内容，而CSS则负责控制网页的样式和布局，而JavaScript则负责实现网页的交互功能。这三者共同构成了前端开发的“三件套”。

接下来的时间，阿皮将会介绍前端三件套中的HTML。

老话说的好“工欲善其事必先利其器 ”，要学习HTML必须要有好的工具。

首先就是浏览器了，阿皮这里选择谷歌浏览器，原因有以下两点

1.简洁大方，打开响应速度快;

2.开发者调试工具;

接下来是开发者工具的选择

阿皮这里选择VSCODE，主要原因是：

1.打开速度快；

2.使用方便；

3.内含插件多，有GPT插件帮助开发；

接下,阿皮将给大家介绍VSCODE常用的快捷方式

1.生成浏览器文件 .html 的快捷方式

html:5 + Tab

2.为了更简单的生成，还可以配置 vsCode

文件 -> 首选项 -> 设置 -> Emmet -> 勾选 Trigger Expansion On Tab 和

Use Inline Completions

! + Tab

3.常用快捷键

1 代码格式化： Shift+Alt+F

2 向上或向下移动一行： Alt+Up 或 Alt+Down

3 快速复制一行代码： Shift+Alt+Up 或 Shift+Alt+Down

4 快速保存： Ctrl + S 5 快速查找： Ctrl + F

6 快速替换： Ctrl + H

HTML5介绍

HTML5 是用来描述网页的一种语言，被称为超文本标记语言。用

HTML5 编写的文件，后缀以 .html 结尾

HTML 是一种标记语言，标记语言是一套标记标签。标签是由尖括

号包围的关键字，例如：

<html>

标签有两种表现形式：

1 双标签，例如： <html></html>

2 单标签，例如： <img>

HTML5的 DOCTYPE声明

DOCTYPE 是 document type ( 文档类型 ) 的缩写。 <!DOCTYPE html > 是 H5 的声

明位于文档的最前面，处于标签之前。

他是网页必备的组成部分，避免浏览器的怪异模式。

 <!DOCTYPE html>

HTML5基本结构

接下来，阿皮将为大家介绍HTML的基本标签

一、HTML标签

定义 HTML 文档，这个元素我们浏览器看到后就明白这是个 HTML 文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点。

<!DOCTYPE html>
<html>
</html>

二、HEAD标签

head 标签用于定义文档的头部。文档的头部描述了文档的各种属性和信息包括文档的标题在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给用户。

<!DOCTYPE html>
<html>
    <head>
    </head>
</html>

三、BODY标签

body 元素定义文档的主体。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和

列表等等。）它会直接在页面中显示出来，也就是用户可以直观看到的内容

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
       我会显示在浏览器中
    </body>
</html>

四、TITLE标签

1.title标签可定义文档的标题。

2.它显示在浏览器窗口的标题栏或状态栏上。

3.<title> 标签是 <head> 标签中唯一必须要求包含的东西，就是说写head一定要写title

4.<title> 的增加有利于SEO优化

SEO是搜索引擎优化的英文缩写。通过对网站内容调整，满足搜索引擎的排名需求

<!DOCTYPE html>
<html>
    <head>
        <title>MY first HTML</title>
    </head>
    <body>
       我会显示在浏览器中
    </body>
</html>

五、META标签

meta 标签用来描述一个 HTML 网页文档的属性，关键词等，例如： charset="utf- 8" 是说当前使用的是 utf - 8 编码格式，在开发中我们经常会看到 utf - 8 ，或是 gbk ，这些都是编码格式，通常使用 utf - 8 。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>itbaizhan</title>
    </head>
    <body>
    </body>
</html>

接下来是，代码注释，一个良好的代码开发风格，注释是必不可少。

代码注释是程序员在代码中加入的辅助说明信息，不能被计算机执行，也不受语法约束，可以在里面写入任何内容。注释的作用有很多，比如提高晦涩难懂的代码的可读性；注释可以起到隐藏代码复杂细节的作用，比如接口注释可以帮助开发者在没有阅读代码的情况下快速了解该接口的功能和用法；如果写的好，注释还可以改善系统的设计。

<!-- 这是一段注释 -->
<!-- 这里的内容不会被浏览器显示 -->

温馨提示

在开始标签中有一个叹号，但是结束标签中没有

前端菜鸟阿皮

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端三件套之HTML（一）

它是Web开发的基础，用于定义网页的结构、内容和样式。HTML由一系列的标签组成，这些标签用于描述网页中的不同元素，如标题、段落、列表、链接等。在前端开发中，HTML通常与CSS(层叠样式表)和JavaScript(一种脚本语言)一起使用，共同构建响应式和交互式的Web应用程序。HTML负责提供网页的结构和内容，而CSS则负责控制网页的样式和布局，而JavaScript则负责实现网页的交互功能。接下来的时间，阿皮将会介绍前端三件套中的HTML。”，要学习HTML必须要有好的工具。工欲善其事必先利其器。
复制链接

扫一扫