喵做梦技术讨论群
QQ群号:566341887 (2024/5刚建的群,可能没什么人一开始,相信会越来越好哒。大家一起互帮互助,共同进步,交流分享,奔赴未来!)
保姆级教程,包教会的好吧,只要你有梦想有目标,肯努力,一起进步,绝对成功!
一.创建文本
首先,我们需要创建一个文档.txt,就像下面一样。
鼠标右键,然后在“新建”中,选择“文本文档”。
于是我们就可以得到一个文档。
非常的简单吧。
二.初始框架
我们先展示一下,再详细展开讲解。
<html>
<head>
</head>
<body>
</body>
</html>
一般来说对于<xxx>,总有一个对应的</xxx>在下方,两个合起来相当于一个“{ }”般的存在。
这个html里面的<head>部分,额,不是很专业的说,就像是“头部”;而这个<body>就像是这个程序的主体,具体的会慢慢展开。一般来说都是从这个<body>中,在网页中展现出来给大家看。

三.网页名称
对于一个网页来说都有一个一个相应的名称,那么我们的这个怎么命名呢?请看代码。
<html>
<head>
<title>琉璃</title>
</head>
<body>
</body>
</html>
我们在<head>中添加一个<title>即可,中间不需要什么""啊,“”啊之类的。输入的就是网站名称。
四.网页模式
写道这里,肯定有些人想要看看这样写出来的网页长什么样子,这个简单。
我们可以看到对于这个文档来说,它有个文件拓展名,也就是文件的后缀,现在的后缀是".txt",我们接下来要做的就是把".txt"改成".html",双击打开即可。
改这个后缀呢,我们讲2种方法。
1.重命名
这个,大家都会吧,左键重命名。
选择“是”。
这样就得到了这么个文件,双击打开即可。(我这里用到是360浏览器,所以图标是这样的)
2.属性改名
这个跟重命名差不多,同样通过左键打开文件的属性。
把"小试.txt"改成"小试.html",点击"确定"。
选择"是"之后,也就可以相应的得到这个文件了。
双击打开即可。
3.展示效果
有些同志就是可能,哎呀,算了,我就放一下当前效果。
可以看到,我这里的网址 不是什么"http://",这个是绝对路径,别人在网上输入你的这个绝对路径是找不到你写的这个网站滴。
继续写代码的话,把后缀改回来就行。
4.手机上操作
在手机的文件资源管理里面,也可以创建一个.txt文本,然后写代码,改成.html,打开后照样可以运行。
这个我之前亲手试过,包可以的好吧。
也可以电脑上写好发到手机上运行,一样的。
(但是手机上代码,相当麻烦……)
五.展示文字
有了框架,总要有内容吧,这里先说如何显示文字。
要写在<body>中。
1.普通输出
<p>内容</p>
内容,就是内容。中文英文,啥啥字符都可以。
这个输出就像在文本中输出一样,从最左上角输出。
2.大小输出
不同的字体大小输出,就要用另外的代码啦。
<h1>内容</h1>
注意:h后面的数字是可以改动的,在1~6之中选择,数字越大,字体反而越小。
接下来,根据我的代码看一下效果。
<html>
<head>
<title>琉璃</title>
</head>
<body>
<h1>h1大小</h1>
<h2>h2大小</h2>
<h3>h3大小</h3>
<h4>h4大小</h4>
<h5>h5大小</h5>
<h6>h6大小</h6>
</body>
</html>
效果便是如此,最好还是自己试一下的好,这样感觉更直接。
3.字体加粗
<b>加粗</b>
4.斜体
<i>斜体</i>
5.自带下划线
<u>下划线</u>
6.滚动字体
<marquee>滚动</marquee>
这个滚动也是比较常见的,就像那种什么重大消息,网页顶部滚动循环播放。
7.综合效果
<html>
<head>
<title>琉璃</title>
</head>
<body>
<h1>h1大小</h1>
<h2>h2大小</h2>
<h3>h3大小</h3>
<h4>h4大小</h4>
<h5>h5大小</h5>
<h6>h6大小</h6>
<marquee>滚动</marquee>
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
</body>
</html>
六.下篇预告
这篇,内容不是很多,重点放下一篇,有个比较高级的东西要理解和学习。
虽然内容不多,但是还是比较详细的,我们下篇再见!
有什么问题尽管提喵。