HTML基础知识：标签结构与代码实践

需积分: 1 41 浏览量更新于2024-06-17 收藏 432KB PDF 举报

"HTML基本标签和代码示例" HTML（HyperText Markup Language）是用于创建网页的标准标记语言。它由一系列的元素组成，每个元素都通过开始标签和结束标签定义，形成了一个树形结构。HTML标签通常成对出现，如`<tag>`和`</tag>`，但有些标签如`<meta>`是自闭合的，没有结束标签。 1. **HTML文件结构** HTML文件通常以`<!DOCTYPE html>`声明开始，告知浏览器文档类型为HTML5。接着是`<html>`标签，它是整个HTML文档的根元素。根元素内包含`<head>`和`<body>`两个主要部分。`<head>`包含非可视化的元数据，如标题、字符集设置、链接外部资源等；`<body>`则包含实际展示给用户的网页内容。 2. **标签与节点** 每个HTML标签都代表一个节点，有其开始和结束标签，如``和``表示段落。如果一个标签没有结束标签，如`<img>`，则称为自闭合标签。同一层级的标签互为兄弟节点，如`<head>`和`<body>`。 3. **注释** HTML中的注释采用``包裹，用于开发者之间的交流，不会在页面上显示。在VSCode中，可以使用`ctrl+/`快捷键进行多行注释和取消注释。 4. **VSCode与HTML编写** 在VSCode中，编写HTML标签时，输入左括号后，快速输入右括号或标签名，VSCode会自动补全结束标签。此外，通过输入`<!`并按下Tab键，可以快速生成基础HTML框架。对于`<link>`标签，常用于引入CSS文件或设置网页图标（favicon）。 5. **元信息标签** - `<meta charset="UTF-8">`定义了文档的字符编码，这里是UTF-8。 - `<meta name="description" content="...">`提供网页的描述，对搜索引擎可见。 - `<meta name="keywords" content="...">`设置关键词，有助于搜索引擎索引。 - `<title>`标签定义网页标题，显示在浏览器标签页上，也是搜索引擎的重要参考。 6. **链接外部资源** `<link rel="icon" href="...">`用于设置网页图标，`href`属性应指向图标文件的URL，通常为相对或绝对路径。 7. **其他常见标签** - `<head>`内的`<title>`标签定义网页标题，用于浏览器和搜索结果。 - `<link>`除了设置图标外，还可链接CSS文件（如`<link rel="stylesheet" href="...">`）。了解这些基本概念和实践技巧，将有助于构建和理解HTML文档的结构，以及在VSCode这样的编辑器中高效编写HTML代码。熟练掌握HTML是前端开发的基础，为进一步学习CSS和JavaScript打下坚实基础。

终于决定还是自己送我去。

我再三劝他不必去；他只说：“不要紧，他们去不好！”

<!-- P 标签就是一段段落,即在 div 的基础上加了一些两个限制，加了前后行间距(因为

段落与段落之间会加一些行间距)-->

<pre>

#include <iostream>

using namespace std;

int main ()

{

int a, b;

cin >> a >> b;

cout << a + b << endl;

return 0;

}

</pre>

<!-- pre 标签与 p 标签的区别：pre 标签会保留原文格式，是等宽字体，并且保留空格

和换行 -->

<hr>

#include <iostream>

using namespace std;

int main () {

int a, b;

cin >> a >> b;

cout << a + b << endl;

return 0;

}

<hr>

到南京时，有朋友约去游逛，勾留了一日；

第二日上午便须渡江到浦口，下午上车北去。

父亲因为事忙，<del>本已说定不送我，</del>叫旅馆里一个熟识的茶房陪我同去。

<ins>他再三嘱咐茶房，</ins>甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌

躇了一会。

其实我那年已二十岁，北京已来往过两三次，是没有什么要紧的了。

剩余19页未读，继续阅读

shandongwill

粉丝: 5680
资源: 676

HTML基础知识：标签结构与代码实践

html基本标签

HTML基本标签

HTML基本标签参考

去除HTML标签删除HTML示例代码

简洁风琴标签导航JavaScript代码示例

前端 HTML 和 CSS 代码示例.rar

CSS实现标签效果的示例代码

HTML中Li标签的使用示例

html示例代码

HTML登录界面代码示例

最新资源