程序员经验分享-hwhale

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

2023-05-16

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

在这里插入图片描述

HTML是啥？能吃吗

看看维基百科怎么说

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

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

那到底能吃吗？能吃，就是吃不饱
在这里插入图片描述

武器推荐 vscode

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

过了n秒……

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

必选

打开自动报存在这里插入图片描述

安装插件 open in brower，在浏览器打开需要使用
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 框架，但是对底层非常好奇，希望能搞明白细节原理，和大家一起分享，所以这是一篇很基础的教程，我也在尽可能地让教程更有趣，想想如果一年前刚进入大学不久的我，看到了这篇文章后开启了他的前端之旅，真的很棒呀！如果你觉得文章写的不错，点赞评论支持博主呀，俺会很开心滴👋🏼👋🏼👋🏼

在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

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

  • 2021.12.30遇到的错误：No module named ‘paddle‘

    实际上已经安装了paddlepaddle xff0c 但不知为何又报这个错误 根据提示可知原因为未安装paddle 于是又去安装百度飞桨官网安装paddle 安装命令为 python span class token operator sp

  • 计组第六课

    汇编语言的组成 1 汇编指令 xff1a 机器码的助记符 xff0c 有对应机器码 2 伪指令 xff1a 无对应机器码 xff0c 由编译器执行 xff0c 没有对应机器码 3 其他符号 xff1a 如 43 等 xff0c 由编译器识别

  • GitLab秘钥添加

    前提 xff1a 下载Git Bash软件 xff0c 并拥有GitLab账号 1 选择用户主目录 xff08 C 用户 用户名 xff09 下 xff0c 新建一个文件夹 直接修改其文件名为 ssh会提示 必须输入文件名 xff0c 修改

  • C++/C sort函数用法（详细),cmp的构造--一学就会，一用就对

    sort函数 sort是c 43 43 STL标准库中提到的基于快速排序的排序函数 xff0c 在做题的时候使用sort函数很方便 xff0c 使用sort要使用 include 快速排序具有不稳定性 不稳定性是指 xff0c 对于指定区域

  • 远程桌面蓝屏解决办法

    远程桌面蓝屏解决方法 原理 xff1a 重新启动远程桌面进程 操作 xff1a Ctrl Alt End 进入任务管理器 选择expolrer exe结束进程 切换到C盘的Windows目录 运行expolrer exe

  • DPU环境配置

    DPU 型号 xff1a MBF2M516A CEEOT xff08 全高半长 xff08 FHHL xff09 DPU xff09 DPU 类型 xff1a NVIDIA BlueField 2 Ethernet DPU 操作系统 xff

  • s3cmd安装及配置

    一 安装s3cmd 安装命令如下所示 xff1a yum y install python pip pip install s3cmd 二 配置s3cmd 配置s3cmd有两种方式 xff1a 1 使用s3cmd configure方式配置

  • C++中cin输入过程中如何处理ctrl+c输入

    引子 今天在写一个while true 循环程序 xff0c 程序中有用到SetConsoleCtrlHandler函数处理CTRL 43 C输入 xff0c 用到cin输入时不小心按下ctrl 43 c进入了无限循环 xff0c cin不

  • 如果正确修改数据库编码为utf8仍然无法插入中文可以试试用Navicat插入数据

    我的MySQL编码已经修改为utf8 但是仍然无法插入中文数据 如下 这是我的MySQL编码格式 此时插入中文数据就会报错 我的解决办法是使用Navicat插入数据 使用eclipse连接并输出后可以正常执行 lt 64 page lang

  • 如何用LaTeX写一个PPT

    如何用LaTeX写一个PPT 说到写PPT大家一般会想到的是微软的Microsoft PowerPoint xff0c 因为他更易于制作并且拥有丰富的动画 xff0c 但是当你需要制作一个学术相关的ppt时 xff0c 你需要更好的排版以及

  • Ubuntu 22.04图形界面的卸载

    如果你想在 Ubuntu 上卸载图形界面 xff0c 可以按照以下步骤操作 xff1a 进入终端界面 xff1a 按下 Ctrl 43 Alt 43 F3 xff08 或者其他 F1 F6 xff09 可以切换到终端界面 xff0c 然后使

  • 百鸡百钱问题

    我国古代数学家张丘建在 算经 一书中曾提出过著名的 百钱买百鸡 问题 该问题叙述如下 xff1a 鸡翁一 xff0c 值钱五 xff1b 鸡母一 xff0c 值钱三 xff1b 鸡雏三 xff0c 值钱一 xff1b 百钱买百鸡 xff0c

  • 2.【已修复】windows10更新:你的设备中缺少重要的安全和质量修复。

    问题 xff1a 由于自己给笔记本重装Windows10 专业版系统 xff0c 用一段时间后发现系统更新失败 xff0c 更新错误 xff1a 你的设备中缺少重要的安全和质量修复 危 xff1a 电脑有问题先备份资料 解决问题 xff1a

  • Python实现用户注册登录功能

    一 环境 python3 43 vscode 二 文件 xff1a 程序文件 用户 管理员 注册 登陆 py 启动标记文件 flag txt gt 文件内容 xff1a 0 三 程序步骤分块 xff1a 主程序入口 初次启动后 xff0c

  • 5.MySQL建立表的关系（外键）

    目录 1 前言 2 表与表关系 1 一对多关系 2 多对多关系 xff1a 3 一对一关系 3 对表总结 xff1a 4 补充 xff1a 1 修改表 2 复制表 1 前言 1 方法 xff1a foreign key xff1a 外键 外

  • 41.Django之web注册登录修改注销功能实现

    目录 1 django配置步骤 2 django链接数据库 MySQL 3 利用orm创建数据库表 4 django的myweb01项目中的url py添加路由 5 django的app01应用中的views py添加逻辑函数 6 temp

  • 1. 403 错误 html

    目录 1 效果图 2 code 3 使用 1 效果图 2 code lt DOCTYPE html gt lt html lang zh gt lt head gt lt meta charset utf 8 gt lt title gt

  • linux vi/vim命令学习

    一 依据个人理解 xff0c vi和vim主要有以下几点区别 xff1a 1 vim命令编辑脚本时 xff0c 能够检查出一些基本的语法错误 xff0c 比如括号匹配等 xff0c vi命令不具有这一功能 2 一般linux系统安装时都是自

  • 2. 404 错误 html

    目录 1 效果图 2 code 3 使用 1 效果图 2 code lt DOCTYPE html gt lt html gt lt head gt lt meta charset utf 8 gt lt title gt 404 lt t

  • 3. 500 服务器异常 html

    目录 1 效果图 2 code 1 效果图 2 code lt DOCTYPE html gt lt html gt lt head gt lt meta charset utf 8 gt lt title gt 500 lt title

随机推荐

  • 蓝桥杯之单片机学习（三）——共阳数码管的静态显示

    文章目录 一 训练任务二 训练重点三 训练准备3 1 原理图展示3 2 数字对照表3 3 数码管分路3 4 一些解释 四 代码实现注意事项 一 训练任务 在CT107D单片机综合训练平台上 xff0c 8个数码管分别依次显示0 9的值 xf

  • Dockerfile 定制专属镜像|果断收藏

    前言 大家好 xff0c 本文是对 Docker 自定义镜像的详细讲解 xff0c 讲解了如何进行构建自己的 Docker 镜像以及 Dockerfile 的操作指令 希望对大家有所帮助 一 使用 Dockerfile 定制镜像 1 1 D

  • 蓝桥杯python组练题第六天——七段码——蓝桥杯官网题库

    单词分析 题目描述 本题为填空题 xff0c 只需要算出结果后 xff0c 在代码中使用输出语句将所填结果输出即可 不建议写代码 小蓝要用七段码数码管来表示一种特殊的文字 上图给出了七段码数码管的一个图示 xff0c 数码管中一共有 7 段

  • Ubuntu22.04开机网络无法连接，ping不通解决方案

    从前天开始 xff0c 虚拟机不知道为什么开机之后就无法联网 xff0c 也ping不通 xff0c 而且ifconfig显示我只有lo 没有ens33 xff0c 之后就开始找解决方案 失败的方案有很多 xff0c 比如 xff1a 重置

  • 计蒜客 T1096 石头剪刀布--C语言

    计蒜客 T1096 石头剪刀布 题目 石头剪刀布是常见的猜拳游戏 石头胜剪刀 xff0c 剪刀胜布 xff0c 布胜石头 如果两个人出拳一样 xff0c 则不分胜负 一天 xff0c 小 AA 和小 BB 正好在玩石头剪刀布 已知他们的出拳

  • AT89C52流水灯+外部中断INT0+定时器（汇编语言）

    AT89C52流水灯 43 外部中断INT0 43 定时器 xff08 汇编语言 xff09 任务要求 用 AT89S52 单片机控制彩灯 xff08 流水灯 xff09 图形及继电器 即 xff1a AT89S52 单片机上电时控制由发光

  • 【Verilog】通过任务(task)完成3个8bit数据的冒泡排序

    题目 xff1a 设计一个模块 xff0c 通过任务完成3个8位2进制输入数据的冒泡排序 要求 xff1a 时钟触发任务的执行 xff0c 每个时钟周期完成一次数据交换的操作 Verilog代码 xff1a module sort inpu

  • 官网下载JAVA的JDK11版本（下载、安装、配置环境变量）

    目录 前言必读 xff1a 一 下载JDK11 1 先去浏览器搜索 2 选择Products 3 Java 4 往下滑找到Oracle JDK 然后点击 5 往下滑找到Java11 xff0c 再选择自己的操作系统 6 选择exe这个直接安

  • linux命令学习之————ls,pwd,cd,hostnamectl,systemctl

    这几条命令之间没有什么联系 xff0c 随便写写 一 ls命令 1 显示当前目录下所包含的文件或目录名 xff1a ls 2 显示当前目录下所包含的文件或目录的详细信息 xff1a ls l 3 显示当前目录下所包含的文件或目录的详细信息

  • win10系统重装（超简单）

    目录 前言 操作步骤 第一步 xff1a 格式化硬盘 第二步 xff1a 硬盘重新分区 固态硬盘分区 机械硬盘分区 完成效果展示 第三步 xff1a 把ISO镜像文件写入固态硬盘 第四步 xff1a 关机拔u盘 第五步 xff1a 开机重装

  • 字符串中数据的排序

    题目 xff1a 有一个字符串 xff1a 91 27 46 38 50 xff0c 请写程序实现最终输出结果 xff1a 27 38 46 50 91 思路 xff1a 给数据排序 xff0c 我们首先想到的就是数组的排序方法 xff0c

  • Hadoop的shell命令

    Hadoop的shell命令 启动Hadoop常见的shell命令 与Linux系统命令差不多 xff0c 但小部分有区别 帮助命令 help 显示目录信息 ls 创建文件夹 mkdir 删除文件或文件夹 xff08 rm xff09 移动

  • Arduino连接ESP8266实现联网功能

    目录 1 前期准备 2 ESP8266代码 3 Arduino代码 4 易联智能 由于自己是物联网工程专业的学生 xff0c 所以对于一些单片机等硬件都必须要有一些了解 xff0c 接着这次做课设的机会 xff0c 我打算将自己的这次做课设

  • 7-2远程文件包含漏洞案例讲解和演示

    远程文件包含漏洞测试 远程文件包含漏洞测试 远程文件包含漏洞 远程文件包含漏洞形式跟本地文件包含漏洞差不多 xff0c 都是我们的开发人员在后台使用包含函数的时候 xff0c 没有对它包含的目的地 xff0c 进行相关的安全措施 xff0c

  • Java11的环境配置及注意事项

    1 进入电脑的设置 点击 高级系统设置 点击 环境设置 2 设置参数 2 1新建 JAVA HOME 变量 xff0c 变量值为 xff1a jdk的路径 2 2编辑系统变量中的 path 变量 新建 JAVA HOME bin 变量 3

  • Dockerfile 详解

    Dockerfile 详解 一 Dockerfile概述 Dockerfile 是一个文本格式的配置文件 xff0c 用户可以使用 Dockerfile 快速创建自定义的镜像 Dockerfile 由一行行命令语句组成 xff0c 并且支持

  • python打包exe

    Python版本 xff1a Python3 5 2 一 安装Pyinstaller 1 安装pywin32 下载安装文件 xff1a 查找到跟自己适用的python版本及window系统版本匹配的pywin32 xff0c 下载后安装 使

  • opencv调用摄像头报错(-215:Assertion failed) size.width＞0 && size.height＞0 in function ‘cv::imshow‘

    我使用OpenCV调用摄像头时报错 xff1a error span class token punctuation span span class token punctuation span span class token opera

  • Ceph集群更改IP地址

    由于一些原因 xff0c 有时需要将Ceph集群的IP地址进行更改 xff0c 以下为更改Ceph集群IP地址的步骤 xff1a 1 更改各机器IP地址 2 更改每台机器 etc hosts文件中的ip地址 3 更改ceph conf文件中

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

    大家好 xff01 我是小周 xff0c 今天分享一下关于HTML的知识 xff0c 一是帮助自己复习 xff0c 二是想告诉小伙伴们 xff0c 网页没你想的那么复杂 xff0c 我会用大白话讲解 xff0c 让你快乐走上前端之路 xff

热门标签