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

Posted Cresyeal

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了学习笔记 | HTML 基本结构和基本标签 ——前端学习第一步!相关的知识,希望对你有一定的参考价值。

html

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

基本语法

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

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

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

示例:

<strong>这是粗体</strong>


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

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

1. HTML 基本结构

HTML语言中,一个页面是由四个部分组成:

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

图示:

文档声明

<!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 代码里,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

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

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

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


– the End –

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

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

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

推荐阅读

以上是关于学习笔记 | HTML 基本结构和基本标签 ——前端学习第一步!的主要内容,如果未能解决你的问题,请参考以下文章

html5标签video(播放器)学习笔记-基本操作

HTML笔记

HTML_1(一语法规范,二结构标签,三开发工具)

HTML5笔记003 - 第03章 基本标签

Python学习笔记之基本数据结构方法

基本数据结构学习笔记——树与二叉树