【JavaEE初阶】前端篇：HTML（上篇）

最新推荐文章于 2024-08-05 04:37:18 发布

哎呀是小张啊

最新推荐文章于 2024-08-05 04:37:18 发布

阅读量1k

点赞数 13

分类专栏： JavaEE初阶文章标签：前端 HTML 标签

本文链接：https://blog.csdn.net/qq_53362595/article/details/126920802

版权

☕导航小助手☕

🍚写在前面

🍱一、第一个HTML程序

🍣🍣1.1 如何创建一个新HTML文件

🧀🧀1.2 HTML的完整结构

🍛🍛1.3 关于html文件的详解

🥡🥡1.4 使用开发者工具

🍜二、HTML常见标签

🍝🍝2.1 注释标签

🦪🦪2.2 标题标签

🍤🍤2.3 段落标签

🍞🍞2.4 换行标签

🍔🍔2.5 格式化标签

🥩🥩2.6 图片标签（重点）

🍰🍰🍰2.6.1 图片和 html文件放在同级目录下

🧇🧇🧇2.6.2 图片和 html文件没有放在同级目录下

🍨🍨🍨2.6.3 使用网络地址获取路径（最常见）

🥐🥐🥐2.6.4 img标签的其他属性

写在前面

关于前端的学习，将会一部分一部分的介绍 "骨" （HTML）、"皮"（CSS）、"魂"（JS）~

HTML 描述了界面的结构，CSS 描述了页面的样式、JS 描述了前后端交互的动作行为 ~

骨、皮、魂三位一体，构成了一个完整的网页，称为 "webapp" ~

关于 HTML 的学习，打算分为两篇博客介绍 ~

现在，就开始展开 HTML 的学习吧 ~

一、第一个HTML程序

HTML 是一个 "标签化" 的编程语言，它不能描述 "逻辑"，但是确可以描述 "特征" ~

1.1 如何创建一个新HTML文件

第一步，创建一个文件，后缀名改为 .html

第二步，以记事本方式打开文件，敲代码，保存代码

第三步，保存之后，直接双击 .html文件即可

此时，一个 "超级简单的 .html文件" 就已经大功告成了 ~

不过，在实际中这种直接写上 "hello world" 的代码的写法并不规范，更规范的写法是需要给它们套上标签，这个在下面会介绍 ~

1.2 HTML的完整结构

在实际上，上述的代码是不严谨的 ~

推荐使用 VsCode 这个软件来编写代码，而不是使用记事本 ~

在 VsCode中，我们可以使用 ! + Tab键 或者 ! + 回车 来直接快捷创建出一个完整严谨的 html文件 ~

在这个完整结构中，有许多的标签构成的 ~

而这些标签，就类似于构成了一棵 "树"（是树形结构，但不一定是二叉树，而是 N 叉树，我们把这棵 "树" 叫做 "DOM树"）~

DOM:"文档对象模型" 的意思，我们把一个 html文件视为一个文档，文档里面有很多的 "标签"(tag)，每个标签也可以称为是一个 "元素"(element)，同时每个元素也对应到一个 "对象"(对象里面有属性、方法)！！！

其中，上面的标签有的是成对的(占大部分)，有的不是成对的(小部分，叫做单标签)，比如：

<head> 是开始标签，</head> 是结束标签，这两者之间就是标签的内容（内容可以是文本，也可以是一些其他的标签）~

<html> 是 html文件的顶层标签(根节点)，<html> 需要有 <head> 和 <body> 标签，其中 <head> 标签主要存放的是一些属性信息(又叫做元信息)，<body> 存放的是页面/网页上所要显示的内容

1.3 关于html文件的详解

需要注意的是，在写完 html文件的时候，需要保存了之后再运行程序 ~

<!DOCTYPE html>

描述了文件内容是什么类型/格式 ~

html 有很多版本，而这种表示，就表示了当前是 HTML5 这个版本 ~

这也是当前最主流的版本，也是最新的版本 ~

<html lang="en">

        描述了这个网页的语言使用的是 "英语" ，这个可以用来触发浏览器的翻译功能 ~

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta> 标签就是描述一些 "属性数据"，是页面的属性，和展示的内容无关 ~

        比如说，编码格式是 UTF-8 ~

需要注意的是，<meta>标签是 "单标签" ~