这是我参与「第五届青训营」笔记创作活动的第1天。
一、本堂课重点内容:
- 了解HTML的基本结构和语法
- 学习HTML标签的基本使用方法
- 学习使用HTML创建一个网页的基本流程
二、详细知识点介绍:
-
我们学习了HTML的基本结构,包括
<html>、<head>、<body>等标签的作用。其中,<html>标签是整个HTML文档的根元素,它包含了整个HTML文档的内容。<head>标签用于存放文档的元信息,如文档标题、关键字、描述等。<body>标签用于存放页面的正文内容。 -
学习了常用的HTML标签,如
<p>、<h1>、<a>等,并了解了它们的作用。其中,<p>标签用于创建段落,<h1>~<h6>标签用于创建标题,<a>标签用于创建链接。我们还学习了一些常用的标签,如<img>、<div>、<span>等,这些标签都可以用于实现页面布局和样式。 -
学习了HTML中的属性和值,并了解了它们在HTML标签中的作用。属性主要用于描述标签的特性,如链接的地址、图片的宽高等。常用的属性有
href、src、alt、id、class等。值则是为属性赋的具体的值,如链接的地址值、图片的宽高值等。
三、实践练习例子:
-
通过练习创建一个简单的HTML页面,包括添加段落、标题、链接等元素。在练习中,我们学会了如何使用
<p>、<h1>、<a>等标签来创建页面元素。 -
通过练习使用不同的HTML标签和属性,实现页面布局和样式。我们学习了如何使用
<div>、<span>标签来实现页面的布局,如何使用CSS来定义样式。
示例代码:
<!DOCTYPE html>
<html>
<head>
<title>我的第一个HTML页面</title>
</head>
<body>
<h1>这是我的第一个HTML页面</h1>
<p>这是我参与「第五届青训营」笔记创作活动的第1天。</p>
<a href="https://juejin.cn/">这是一个链接,点击可以跳转到稀土掘金首页。</a>
<img src="链接.jpg" alt="这是一张图片">
<div>
<p>这是一个块级元素,用于实现页面布局。</p>
<span>这是一个行内元素,用于实现页面样式。</span>
</div>
</body>
</html>
总的来说,今天的学习让我对HTML有了更深入的了解,并且通过实践练习加深了对HTML标签和属性的理解。我将继续努力学习,提高自己的前端技能。