IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 学习笔记 | HTML 基本结构和基本标签 ——前端学习第一步! -> 正文阅读

[JavaScript知识库]学习笔记 | 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

推荐阅读

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-09-30 11:50:23  更:2021-09-30 11:51:24 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/19 1:05:53-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码