凭什么说我是邪修?

我要干什么

不知道吧,闭着眼瞎写,要快?要误人子弟?

既然你也无聊,我就引你入歧途怎么样~

该怎么做

有编码工具吗?

没有就下载一个,不想下载非要吃编码的苦就桌面新建txt文件

code.visualstudio.com/

txt文档会创建吧?

这个我就不描述了

创建文件 改文件名和后缀会吧

vscode你就这样创建

名称你就叫他index就行。

你问我为什么叫index?

张三为什么叫张三?

你只要知道,他是大家约定俗成的入口文件就好

问我为啥入口文件为啥不能叫「入口.html」

随你,不建议 被骂了莫说是我说的就行

这些都不会百度会吧

这样搜↓

现在在index.html中编码

html 复制代码
<!DOCTYPE html>
<html>
  <header>
    <meta charset="UTF-8">
    <title>你想叫这个网页啥名字</title>
  </header>

  <body>
    你想写的内容
    <h1>你这个网页想有啥标题1</h1>
    <h2>你这个网页想有啥标题2</h2>
    <h3>你这个网页想有啥标题3</h3>
    <h4>你这个网页想有啥标题4</h4>
    <h5>...</h5>

  </body>
</html>

复制到你网页然后打开这个文件就行了,你会看到如下↓

我来简单解释下
<!DOCTYPE html>是用来声明文档类型的,html就是咱们的网页

然后电脑又不是人类,你需要准确度告诉它你要干什么。

这个时候有个概念,叫标签 你这样理解
<我开始写标题了> 我是标题文字 </我标题结束了>
<h1> = <我开始写标题了>
我是标题文字 = 就是等于你要写的标题
</h1> =</我标题结束了>

<html>同理 ,正常情况下标签都是成双成对儿的,也有很多标签是孤苦伶仃的, 写法就是<img />

眼尖的大佬想必已经注意到标签中的/了,双标签在结束标签的前方,单标签在单标签的后方,但都是在<>中 所有要展示出来的写到<body></body>当中

啰里啰嗦说了这么多,为什么写出来的页面这么丑?

人靠衣装马靠鞍,网页也是这样,不过网页靠的是「样式」

前标签中加入style并且设定你想要的样式就行,比如<h1 style="color:red;">你这个网页想有啥标题1</h1>效果如↓

和街边小广告有一拼是吧,试试div双标签吧

html 复制代码
     <div style="width: 100px; height: 100px; background-color: red">
      红的
    </div>
    <div style="width: 100px; height: 100px; background-color: blue; border-radius: 50%;">
      蓝的
    </div>
    <div style="width: 100px; height: 100px; background-color: green; border-radius: 10px;">
      绿的
    </div>

效果↓

width是宽
height是高
background-color是背景色
color是文字颜色
border-radius是圆角

颜色的取值格式可以是颜色英语直译/rgb/rgba/十六进制,这些都可以在ps或者什么其他取色盘上拿到,或者直接用这个www.fontke.com/tool/rgbsch... 但还是建议使用ps之类的直接取色

元素与样式的区别

上述这些决定一个标签元素样式的还有很多,但是不同的标签有不同个性的属性。

最常见的分两大类,行内元素以及块儿元素 举例中的h1div就是块元素,像是 <p></p>标签和<span></span>就是行内元素,通常用于处理文字。

区别就是行内元素不独占一行,与其他行内元素并排显示,宽度由内容决定,无法通过CSS设置宽高。

无法直接控制宽度和高度,仅支持水平方向的外边距和内边距调整。

块元素独占一行,前后自动换行,可自由设置宽度、高度及盒模型属性(如外边距、内边距)。

具体各种各样的标签可以参考www.runoob.com/html/html-t...

相关推荐
@PHARAOH16 小时前
HOW - 前端输入场景支持拼音匹配
前端
计算机安禾16 小时前
【c++面向对象编程】第21篇:运算符重载基础:语法、规则与不可重载的运算符
java·前端·c++
__log17 小时前
Vue 3 核心技术深度解析:从“会用API“到“懂原理、能表达“
前端·javascript·vue.js
ZC跨境爬虫17 小时前
跟着 MDN 学 HTML day_52:(深入 XPathExpression 接口)
开发语言·前端·javascript·ui·html·音视频
UXbot18 小时前
AI 原型工具零设计基础操作指南与功能解析(2026)
前端·ui·产品经理·原型模式·web app
yuzhiboyouye18 小时前
VO一般java后端怎么转换成前端想要的数据
java·前端·状态模式
小脑斧12318 小时前
从范式重构到工程落地:OpenTiny NEXT 引领前端智能化新范式
前端·hermesagent·opentiny next
小江的记录本18 小时前
【AI大模型选型指南】《2026年5月(最新版)国内外主流AI大模型选型指南》(企业版)
前端·人工智能·后端·ai作画·aigc·ai编程·ai写作
幽络源小助理19 小时前
最新轻量美化表白墙系统源码v2.0_带后台版_附搭建教程
前端·开源·源码·php源码