大家好！我是小周，今天分享一下关于HTML的知识，一是帮助自己复习，二是想告诉小伙伴们，网页没你想的那么复杂，我会用大白话讲解，让你快乐走上前端之路，我是一个后端的，手动狗头，话不多说，coding ?

HTML是啥？能吃吗

看看维基百科怎么说

超文本标记语言（简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML是一种标记语言而非编程语言。

总结：HTML是能被浏览器解析并展示给用户的超文本标记语言，注意，标记，就是使用标签对应一个构建网页的基本元素，例如使用<a>表示一个超链接，为什么说是超文本呢？看到超链接没，可以点跳走的，就是不仅仅可以有文本，还能有图片，视频等等

那到底能吃吗？能吃，就是吃不饱

武器推荐 vscode

工欲善其事必先利其器，小声bb，作为村里写代码最多的男人，我在这里首推 VSCODE官方网站，由于官网在国外，有些小伙伴可能说下载慢，OK，我准备了起飞下载的链接，点我起飞

过了n秒……

这里博主认为动手能力超强的你，已经安装好了，跟着村里代码写的最6的博主来简单配置一下，以下配置分为可选和必选，注意哦

必选

打开自动报存

安装插件 open in brower，在浏览器打开需要使用

可选
中文汉化插件，安装重新进入vscode就好

拿捏 Hello world 网页

这里先创建一个文件夹，我这里就叫 handsome，狗头包名，然后打开文件夹，新建文件 命名为 HelloWorld.html ，注意是html后缀

恭喜你，已经学完了 ?

哈哈，开玩笑，恭喜你，仪式感到位了，下面就是认真的了

HTML标签语法格式

A：都有哪些是单标签，哪些是双标签啊？
B：title,body,div,p……都是双标签，br,meta……是单标签，会了吗？
A：啥玩意，听不懂，不学了??
B：回来，你可以村里唯一的程序员，标签这个用的多了，就记着了，标签我们只需要学习最常用的，剩下的需要时去查，懂了吗？
A：嘿嘿，懂了

其实区分单标签还是双标签有技巧，假如需要装东西，一般就是双标签包起来

学习最常用标签

下面就是常见标签的学习了，认真点哦

注释

注释是不会被浏览器解析的，主要作用是写代码的人或看代码的人能更清晰，别人自己看着舒服的代码是好代码，好的代码一般都有好的注释

<!DOCTYPE html>
<html lang="en">
<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>Hello World!</title>
</head>
<body>
    <!-- Hello World -->
    <!-- 注释，不会被浏览器解析，帮助人理解的 -->
    <!-- 比如，我是村里最牛的程序猿，嘿嘿 -->
</body>
</html>

div盒子

双标签，使用div，表示盒子，会站满一整个行

<!DOCTYPE html>
<html lang="en">
<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>Hello World!</title>
</head>
<body>
    <!-- div标签，双标签，主要用于装东西，有个特点
    div很霸道，会占满一整行 -->
    <div style="background-color: pink;">我是霸道div</div>
    啊，我被霸道div挤下来了
</body>
</html>

h1,h2,h3,h4,h5,h6标题

h1表示重要信息，往后依次递减，大小也是依次递减，一共有6级

<!DOCTYPE html>
<html lang="en">
<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>Hello World!</title>
</head>
<body>
    <!-- h1表示重要信息，往后依次递减，大小也是依次递减 一共有6级-->
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>
</body>
</html>

p段落

段落标签，独占一行

<!DOCTYPE html>
<html lang="en">
<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>Hello World!</title>
</head>
<body>
    <!-- p段落标签，独占一行-->
    <p style="background-color: pink">saqw</p>
    qewq
</body>
</html>

hr水平分割线

hr 水平分割线单标签

<!DOCTYPE html>
<html lang="en">
<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>Hello World!</title>
</head>
<body>
    <p style="background-color: pink">saqw</p>
    <!-- hr 水平分割线 单标签 -->
    <hr>
</body>
</html>

span块

span，块，大小根据多少内容决定，注意，在HTML中换行也是有标签的，使用 br

<!DOCTYPE html>
<html lang="en">
<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>Hello World!</title>
</head>
<body>
    <!-- span 块 大小根据多少内容决定 -->
    <!-- 注意 在HTML中换行也是有标签的 使用 br -->
    <span style="background-color: blue;">我有这么多♥♥</span><br>
    <span style="background-color: pink;">我比你多♥♥♥♥♥♥♥♥♥♥</span>
</body>
</html>

img图片

img标签  用于插入图片
src     是图片的位置
width   表示图片显示400个像素
title   鼠标悬停在图片上显示的文字
alt     图片出错了显示的文字

<!DOCTYPE html>
<html lang="en">
<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>Hello World!</title>
</head>
<body>
    <!-- 
    img标签  用于插入图片
    src     是图片的位置
    width   表示图片显示400个像素
    title   鼠标悬停在图片上显示的文字
    alt     图片出错了显示的文字
    -->
    <img src="./1.jpg" width="400" title="起风了呀龙猫" alt="这是张图">
</body>
</html>

a超链接

href="https://www.baidu.com"  要去哪个地方
target="_self"  在当前页面打开
target="_blank" 新开一个页面打开

<!DOCTYPE html>
<html lang="en">
<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>Hello World!</title>
</head>
<body>
    <!-- a 超级链接 -->
    <!-- 
    href="https://www.baidu.com"  要去哪个地方
    target="_self"  在当前页面打开
    target="_blank" 新开一个页面打开
     -->
    <a href="https://www.baidu.com" target="_self">百度</a>
    <a href="https://www.baidu.com" target="_blank">百度</a>
</body>
</html>

ul li列表

列表，ul表示使用列表 li具体的列表项

<!DOCTYPE html>
<html lang="en">
<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>Hello World!</title>
</head>
<body>
    <!-- 列表标签 -->
    <!-- ul表示使用列表 li具体的列表项 -->
    <ul>
        <li>起风了</li>
        <li>龙猫</li>
        <li>天空之城</li>
    </ul>
</body>
</html>

OK，学了不少了，可以了，现在写一个小案例，综合练习一下，写完可以有满满成就感的呦，开动了

实战，个人简介

先看成品

1. 更改网页标题

<!DOCTYPE html>
<html lang="en">
<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>XXX的个人简介</title>
</head>
<body>

</body>
</html>

2. 添加网页图标

能看到很多网站都是有自己的图标的，比如C站是这样，那怎么添加网页图标呢，只需要在head标签中添加一行 <link rel="icon" href="图标链接"> 就可以喽

<!DOCTYPE html>
<html lang="en">
<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>XXX的个人简介</title>
    <link rel="icon" href="图标链接">
</head>
<body>

</body>
</html>

3. 编写网页结构

<!DOCTYPE html>
<html lang="en">
<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>XXX的个人简介</title>
    <link rel="icon" href="图标链接">
</head>
<body>
    <div>
        <!-- 村里的希望写的个人简介 -->
        <h3>周棋洛的个人简介</h3>
        <hr width="300" style="margin-left: 0;">
        <span>姓名：周棋洛</span><br>
        <p>性别：男</p>
        <span>简介：handsome，<br>大二在校生一枚，热爱技术</span><br>
        <hr width="300" style="margin-left: 0;">
        <p>图片：</p>
        <img src="./1.jpg" width="300" alt=""><br>
        <span>友链：</span>
        <a href="">csdn</a>
        <a href="">微信</a>
        <a href="">QQ</a>
        <a href="">github</a><br>
        <hr width="300" style="margin-left: 0;">
        <span>技术：</span><br>
        <ul>
            <li>HTML</li>
            <li>vscode</li>
            <li>加油呀</li>
        </ul>
        <hr width="300" style="margin-left: 0;">
    </div>
</body>
</html>

4. 完结撒花，敬请期待

恭喜你 ??，写下来你的第一个网页，期待后续的教程……

尾 ?

博主主修的后端，但是对前端技术也十分感兴趣，目前学习到了 Vue 框架，但是对底层非常好奇，希望能搞明白细节原理，和大家一起分享，所以这是一篇很基础的教程，我也在尽可能地让教程更有趣，想想如果一年前刚进入大学不久的我，看到了这篇文章后开启了他的前端之旅，真的很棒呀！如果你觉得文章写的不错，点赞评论支持博主呀，俺会很开心滴??????

本文标题：还不会写网页？10分钟后…会了，确定不来学习吗？

本文链接：https://blog.quwenai.cn/post/9502.html

作者授权：除特别说明外，本文由 toobug 原创编译并授权 TOOBUG信息安全网刊载发布。

本文链接：https://blog.quwenai.cn/post/9502.html

分享到：

正文

还不会写网页？10分钟后…会了，确定不来学习吗？

HTML是啥？能吃吗

武器推荐 vscode

拿捏 Hello world 网页

HTML标签语法格式

学习最常用标签

注释

div盒子

h1,h2,h3,h4,h5,h6标题

p段落

hr水平分割线

span块

img图片

a超链接

ul li列表

实战，个人简介

1. 更改网页标题

2. 添加网页图标

3. 编写网页结构

4. 完结撒花，敬请期待

尾 ?

相关阅读

浪漫博主使用 Javascript 做了个表白工具，最后升华了

抽出20分钟,快乐学习Vue

【Vue】快乐学习第四篇，组件访问及插槽使用

【Vue快乐学习】学会路由，陆游？

发表评论取消回复

还没有评论，来说两句吧...

目录[+]