这篇博客介绍了HTML的基础知识，包括HTML的概念、查看网页HTML代码的方法、HTML的层级结构以及HTML的基本组成，如标签和元素。文章通过实例详细解释了如何创建一级、二级、三级标题以及段落，并探讨了网页头和网页体的构成。同时，还讲解了style属性、href属性和class属性在定义网页样式和创建链接中的应用。
HTML概念
HTML（Hyper Text Markup Language）是用来描述网页的一种语言，也叫超文本标记语言
HTML文档就是前端工程师设计网页时使用的语言，浏览器会根据HTML文档的描述，解析出它所描述的网页。
查看网页HTML代码
Windows系统的电脑：
- 使用快捷键ctrl+u来查看网页源代码
- 在网页的空白处点击右键，然后选择“检查”（快捷方式：ctrl+shift+i）
HTML的层级
尖角向下代表展开，向右代表合上了，这就是HTML的层级关系。
这每一个可以展开和合上的小三角形里包含的内容，都是一个层级，它很像电脑中一层一层的文件夹。
HTML的组成
标签和元素：
渲染结果如下：
—————————————————————————————————————————————————————————————
我是一级标题
我是二级标题
我是三级标题
我是一个段落啦。一级标题、二级标题和我，我们三个一起组成了body。
—————————————————————————————————————————————————————————————<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<p>我是一个段落啦。一级标题、二级标题和我，我们三个一起组成了body。
</p>
</body>
</html>
标签： <标签>
元素：<标签> 标签内容 <标签>
eg：
开始标签 < body >
结束标签 < /body >
网页头和网页体
HTML文档的基本是由【网页头】和【网页体】组成的：
HTML文档的最外层标签一定是 < html >，里面嵌套着< head >元素与< body >元素。
< head >元素代表了【网页头】，< body >元素代表了【网页体】，这是最基本的网页结构。
【网页头】的内容不会被直接呈现在浏览器里的网页正文中，而【网页体】的内容是会直接显示在网页正文中的
<head>
<meta charset="utf-8"> #定义了HTML文档的字符编码
<title>我是网页的名字</title> #<title>元素用来定义网页的标题，这个标题就是显示在浏览器的标签页中的内容
</head>
eg：如下是渲染结果：
—————————————————————————————————————————————————————————————
这个书苑不太冷
吴枫推荐的书:
《奇点遗民》
本书精选收录了刘宇昆的科幻佳作共22篇。《奇点遗民》融入了科幻艺术吸引人的几大元素：数字化生命、影像化记忆、人工智能、外星访客……刘宇昆的独特之处在于，他写的不是科幻探险或英雄奇幻，而是数据时代里每个人的生活和情感变化。透过这本书，我们看到的不仅是未来还有当下。
————————————————————————————————————————————————————————————— ```python这个书苑不太冷
#元素代表一级标题，对应网页中的“这个书苑不太冷”
吴枫推荐的书:
#元素代表三级标题，对应网页中的“吴枫推荐的书”
《奇点遗民》
#元素代表二级标题，对应网页中的“奇点移民”；然后是
元素，对应网页中“本书精选......还有当下”这一整段文本。
本书精选收录了刘宇昆的科幻佳作共22篇。《奇点遗民》融入了科幻艺术吸引人的几大元素：数字化生命、影像化记忆、人工智能、外星访客……刘宇昆的独特之处在于，他写的不是科幻探险或英雄奇幻，而是数据时代里每个人的生活和情感变化。透过这本书，我们看到的不仅是未来还有当下。
``` ### 属性 HTML标签可以通过设置【属性】来为HTML元素描述更多的信息。 ***如下是渲染结果：*** —————————————————————————————————————————————————————————————这个书苑不太冷
吴枫推荐的书:
点这里看看《奇点遗民》
本书精选收录了刘宇昆的科幻佳作共22篇。《奇点遗民》融入了科幻艺术吸引人的几大元素：数字化生命、影像化记忆、人工智能、外星访客……
最低0.47元/天 解锁文章
扫一扫
5808
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
