心得技巧

html5 HTML/Xhtml CSS XML/XSLT Dreamweaver教程 Frontpage教程心得技巧

上一篇: 深入react技术栈(4):React数据流下一篇:canvas学习（html5）画画

学习笔记 | HTML 基本结构和基本标签 ——前端学习第一步！

发布时间：2022-07-04 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了学习笔记 | HTML 基本结构和基本标签 ——前端学习第一步！，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

HTML

HTML 全称 “HyPEr Text Markup Language（超文本标记语言）”，是网页的标准语言。但是它并不是一门编程语言，而是一门描述性的标记语言。

基本语法

<标签符号>内容</标签符号>

HTML语言中，标签符一般是成对出现的，第一个表示标签的开始，第二个多了一条斜杠，表示标签内容的结束。

在HTML中，标签有很多种，每一种都有着不同的功能，适用于不同的情况。例如，想要显示一段文字，就应该使用 “段落标签（p）”F1b;假如想要显示图片，则应使用 “图片标签（img）”。

示例：

<strong>这是粗体</strong>

学习笔记 | HTML 基本结构和基本标签 ——前端学习第一步！

上面的示例中使用 “粗体标签（b或strong）” 来实现粗体文本显示。

学习 HTML 语言，就是要学习各种各样的标签，然后学会在不同的情况中使用不同的标签，以实现不同的表达效果。

1. HTML 基本结构

HTML语言中，一个页面是由四个部分组成：

文档声明：<!DOCTYPE html>
html 标签对：<html></html>
head 标签对：<head></head>
body 标签对：<body></body>

图示：

学习笔记 | HTML 基本结构和基本标签 ——前端学习第一步！

文档声明

<!DOCTYPE html>

这是一个文档声明，表示这是一个HTML页面。

html 标签

<html></html>

html标签表示页面内容的范围。它告诉浏览器，这个页面从 <html> 开始，到 </html> 结束。

head 标签

<head></head>

head 标签是网页的 “头部”，在这个标签里会定义一些特殊内容，比如页面的标题、页面的字符编码以及自动刷新等。

body 标签

<body></body>

body 标签是网页的 “身体”，在这个标签里我们可以编写大部分页面显示内容。一个网页中，有大部分内容实在这里编写的。

示例

<!DOCTYPE html>
<html>
	<head>
		<tITle>这是网页标题</title>
	</head>
	<body>
		<p>这是页面的内容</p>
		<p>这是一个段落</p>
		<strong>这是粗体</strong>
	</body>
</html>

效果：

学习笔记 | HTML 基本结构和基本标签 ——前端学习第一步！

在上面示例的 HTML 代码里，head 标签内部中的 title 标签定义页面的标题，这个标题将会显示在标签栏上。body 标签里的 p 标签定义一段文字，这个段落将直接显示在页面上。

HTML 注释语句

在实际开发中，我们需要在一些关键、重要或复杂难懂的代码中进行注释，以标示它是干什么的。这时候需要用到注释语句：

<!--注释内容-->

注释的内容在浏览器中不会显示，也就是说，HTML 标签是给浏览器看的，而注释是给程序员自己看的。当你的代码中有重要的复杂的部分，就需要给代码进行注释。

在实际开发中，一个页面的代码往往很长，可能有成百上千行，这时候如果不给关键代码进行注释，阅读起来会十分辛苦，可能连你自己也很难读懂。更别说在团队开发中，队友维护你的代码时，将会花费大量时间阅读和理解代码，费时费神，效率极低。

当然，并不是每一行代码都必须注释，一般的代码较容易理解，只需要在复杂的部分，或是在关键的、重要的部分进行注释即可。

一个注释的示例：

<!--
	作者：Cresyeal
	博客：blog.csdn.net/weixin_52132159
	时间：2021-09-29
	描述：这是一串用来展示注释的代码
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>注释示例</title>		<!--网页标题-->
	</head>
	<body>
		<p>这是页面的内容</p>		<!--段落标签-->
		<p>这是一个段落</p>
		<strong>这是粗体</strong>	<!--粗体-->
	</body>
</html>

在浏览器中看 HTML

进入你的浏览器，进入作者博客主页，然后右键单击页面，在弹出菜单中点击 “检查” 或 “审查元素”，把鼠标放到右侧的代码块上，你可以看到每一个标签对应的页面上的部分：

@H_261_406@

右键点击 “查看网页源代码”，我们也可以看到这个网页的 HTML 代码：

学习笔记 | HTML 基本结构和基本标签 ——前端学习第一步！

在这里你可以试着找找页面的四个基本部分，看看他们的标签。

– the End –

好啦，这篇文章就到这里了。以上就是我分享的全部内容，感谢阅读！

后记：开学之后要上学，可能更文会变得少了，甚至几乎不更了。因为面临着中考的压力。也许等到放假之后会继续更新。这是作者前端开发学习之路的第一步，谢谢大家的支持！

本文收录于专栏：前端开发学习笔记 关注作者，持续阅读作者的文章，学习更多编程知识！ https://bLOG.csdn.net/weixin_52132159

推荐阅读

爬虫
Python爬虫 | 爬取b站北京奥运会开幕式弹幕，有多少人从东京奥运会跑过来的？
绝密！Python爬虫告诉你刷分机器人背后的原理！这篇文章差点没过审
【爬虫】用Python爬取豆瓣电影分类排行榜
【Python爬虫】爬虫利器 requests 库小结（建议收藏！）

Python一些事
没想到我连五年级的题目都解不出来？可不能被人小看，让万能的Python登场
女朋友让我深夜十二点催她睡觉，我有Python我就不干

教程
想学Python不知从何入手？学习Python必备秘籍，附地址，速拿！
Python标准库：datetime 时间和日期模块 —— 时间的获取和操作详解
学习笔记 | PyInstaller 使用教程——用pyinstaller打包exe应用程序【建议收藏！】

实例
Python：程序猿怎么追女生？教你用Python做一个表白神器，告别表白尴尬！

其他
Python每天一道题：昆虫繁殖问题？我把密密麻麻的幼虫和成虫搞定了