前端与 HTML | 青训营笔记

99 阅读2分钟

这是我参与「第五届青训营」笔记创作活动的第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标签和属性的理解。我将继续努力学习,提高自己的前端技能。