第一天:HTML入门

嘎哈,兄弟们!今天我给大家讲讲HTML的基础知识,听好了!

首先,咱们得知道HTML是什么玩意儿。它是HyperText Markup Language 的缩写,翻译过来就是超文本标记语言。别被这些名词吓到,其实它就是用来创建网页的一种语言。有了HTML,我们才能在网上看到各种各样的网页。

学习HTML的基本结构

HTML文档由一系列的元素组成,每个元素可以包含内容,并且可以具有属性。HTML元素通常由开始标签、结束标签和内容构成。

接着,咱们来学学HTML的基本结构,就像盖房子一样,得有个框架。

创建一个简单的HTML文档

            
                <!DOCTYPE html>
                <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <title>我的第一个网页</title>
                </head>
                <body>
                    <h1>欢迎来到我的网页</h1>
                    <p>这是一个段落,用于展示网页内容。</p>
                </body>
                </html>
            
        

哥们儿,别慌,我来解释一下。<!DOCTYPE html> 这一行是告诉浏览器这是一个HTML文档。然后,在 <html> 标签中,我们把整个文档的内容包起来。

<head> 标签中,我们可以放一些网页的头信息,比如标题。这个标题会显示在浏览器的标签页上。

接下来,在<body> 标签中,我们放网页的具体内容。<h1> 是一个标题标签,用来显示主要标题。<p> 是段落标签,可以写一些文字内容。

标题

在HTML中,标题标签用来显示页面中重要的标题内容。最常用的是 <h1><h6> 这几个标签,数字越小,标题就越大。

下面是一个例子,展示了如何使用标题标签:

        
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>标题</title>
            </head>
            <body>
                <h1>这是一个大标题</h1>
                <h2>这是一个稍小一点的标题</h2>
                <h3>这是一个更小一点的标题</h3>
                <h4>这是一个更更小一点的标题</h4>
                <h5>这是一个更更更小一点的标题</h5>
                <h6>这是一个更更更更小一点的标题</h6>
            </body>
            </html>
        
      

在浏览器中显示出来的效果就是不同大小的标题文字。标题对于网页的结构和内容组织非常重要,可以让用户更快速地了解页面的主要内容。

段落

段落标签<p>用来定义文本的段落。我们可以在段落标签中放置文字内容,让页面更加清晰和有组织。

        
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>段落</title>
            </head>
            <body>
                <p>这是一个段落,里面可以写一些文字内容。</p>
                <p>这是也一个段落,里面可以写一些文字内容。</p>
            </body>
            </html>
        
      

段落标签能够帮助我们将文字分段显示。

非常好!你已经成为了入门级别的前端小子。

下一个 文本标签和div