从零开始学前端-HTML初识

Cat Bayi

已于 2023-08-08 15:45:08 修改

阅读量453

点赞数 5

文章标签： html 前端 javascript 1024程序员节

于 2022-10-22 20:47:17 首次发布

本文链接：https://blog.csdn.net/cat_bayi/article/details/127466167

版权

标签并添加title

本文适合想学前端，从零开始的童鞋们

一.你对HTML也许并不陌生

大家先看一段HTML：

<!DOCTYPE html> 
<html lang="zh"> 
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>这是一段HTML</title>
    </head>
    <body>
        <h1>你也许对HTML并不陌生</h1>
        <p>那么，你看懂了吗？</p>
    </body>
</html>

是不是有点熟悉又有点懵？

<!DOCTYPE html> <!--TA告诉浏览器这个文档所使用的 HTML 规范，后面我们会讲到-->
<html lang="zh"> <!--TA告诉浏览器开始了HTML，里面的 “lang” 元素表示这个HTML里用的语言（zh是中文的意思）-->
    <head> <!--TA告诉浏览器HTML里写在最开始的head标签开始-->
        <meta charset="UTF-8"><!--TA告诉浏览器这个HTML里引用的字符集；<meta>这个标签我们之后会讲到-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--TA是IE的兼容代码，我们之后会讲到-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--TA很复杂，之后我们讲CSS时会说到-->
        <title>这是一段HTML</title> <!--你现在看见这个博客时浏览器在显示这个博客时创建的标签上面有一行字，TA就是干这个的-->
    </head> <!--表示结束这个head标签-->
    <body> <!--TA告诉浏览器HTML里写在head标签后面的body标签开始-->
        <h1>你也许对HTML并不陌生</h1> <!--这相当于大标题-->
        <p>那么，你看懂了吗？</p> <!--TA表示TA里面的东西是一个段落-->
    </body> <!--表示结束这个body标签-->
</html> <!--TA告诉浏览器结束了HTML-->

加上注释后是不是就明白多了？

二.让我们准备一个编译器

HTML我们已经看过了，激动人心的时刻到了，让我们自己来写一段

在这之前，你需要准备一款编译器，像Bayi我用的是VSCode，你们也可以用它，也可以选择别的编译器

VSCode下载链接：动身去下载

安装教程：去康康

三.让我们开始吧

第一步：添加<html>标签

<html>
</html>

第二步：添加<head>标签并添加title

<html>
    <head>
        <title>Hello_world</title>
    </head>
</html>

第三步：添加<body>标签并添加H1标题

<html>
    <head>
        <title>Hello_World</title>
    </head>

    <body>
        <h1>Hello_World</h1>
    </body>
</html>

好了，让我们运行试一下：

如果你的也是这样的话，那么恭喜！

如果不是，请发在评论区，Bayi会为你解答

四.结语

今天你写出了你的第一个HTML，不管你成功与否，也该结束了，下期再见……

记录一下：从零开始学前端的一个给blog；1533字，不算太多

Cat Bayi

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
4
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫