关于“菜鸟教程”网站的模仿_HTML_前端（小白学习9小时的理解成果）

一些前言：可预见的未来处处与计算机相关，故开始学习相关计算机内容。同时编写该系列内容是希望，可以将新手学习过程中，可能遇见的问题事无巨细的解答。既是对后人的便利，也是对自己所学的一次系统化整理。

小声说：因为老师要求作业的同时也要求创作博客...相信我，我真的可以帮助一个纯小白入门。

一、效果展示

二、代码分享

<html>
	<head>
	<meta charset="utf-8">
	<meta name="keywords" content="">
	<meta name="description" content="">
	<title>找不到脑袋</title>
	<link rel="shortcut icon" href="https://www.bilibili.com/favicon.ico?v=1" type="image/x-icon">
	</link>
	</head>
	
<body>


<!-- 搜索栏-->
<div style="width:100%;height:74px;padding-left:10px;padding-right:10px;background-color:#F6F6F6">
	<!-- logo-->
	<div style="width:40%;height:59px;float:left;padding-left:300px"><p style="display:table-cell;vertical-align:middle;">
	<font size="7">菜<font color="green">鸟</font>教程</font></p>
	</div>
	<!-- 搜索框-->
	<div style="width:40%;height:38px;padding-top:21px;margin-left:25px;float:left;"><input type="search" placeholder="search" style="width:500px;height:30px;display:table-cell;vertical-align:middle;"></div>
</div>
<!-- 导航栏-->
<div style="width:100%;height:29px;background-color:#96B97D;padding-top:9px">
	<div style="wight:200;float:left;margin-left:170px;margin-right:25"><font color="white">首页</font></div>
	<div style="wight:200;float:left;margin-left:25px;margin-right:25"><font color="white">菜鸟笔记</font></div>
	<div style="wight:200;float:left;margin-left:25px;margin-right:25"><font color="white">菜鸟工具</font></div>
	<div style="wight:200;float:left;margin-left:25px;margin-right:25"><font color="white">参考手册</font></div>
	<div style="wight:200;float:left;margin-left:25;margin-right:25"><font color="white">用户笔记</font></div>
	<div style="wight:200;float:left;margin-left:25;margin-right:25"><font color="white">测验/考试</font></div>
	<div style="wight:200;float:left;margin-left:25;margin-right:25"><font color="white">本地书签</font></div>
</div>
<!-- 操作栏-->
<div style="width:100%;height:100%;background-color:#F6F6F6">
		<!-- 左-->
		<div style="width:200px;height:550px;margin-top:30px;margin-left:115px;margin-right:20px;background-color:#EBE9E9;float:left">
			<div style="wight:50px;height:7px;margin-left:20px;padding-top:15px;"><font size="5" color="#787A7C">全部教程</font></div>
			<font color="#262626">
			<br><br><div style="wight:50px;height:30px;margin-left:20px;">HTML/CSS</div>
			<hr><div style="wight:50px;height:7px;margin-left:20px;padding-top:7px;">JavaScript</div>
			<br><hr><div style="wight:50px;height:7px;margin-left:20px;padding-top:7px;">服务器</div>
			<br><hr><div style="wight:50px;height:7px;margin-left:20px;padding-top:7px;">数据段</div>
			<br><hr><div style="wight:50px;height:7px;margin-left:20px;padding-top:7px;">移动端</div>
			<br><hr><div style="wight:50px;height:7px;margin-left:20px;padding-top:7px;">XML教程</div>
			<br><hr><div style="wight:50px;height:7px;margin-left:20px;padding-top:7px;">ASP.NET</div>
			<br><hr><div style="wight:50px;height:7px;margin-left:20px;padding-top:7px;">开发工具</div>
			<br><hr><div style="wight:50px;height:7px;margin-left:20px;padding-top:7px;">网站建设</div>
		<br><hr></font>
		</div>
		<!-- 右-->
	<div style="width:1250px;height:500px;margin-left:50px;margin-top:30px;background-color:#FFFFFF;float:left;">
		<div style="width:1180px;height:400px;margin-left:35px;margin-top:30px;background-color:#FFFFFF;float:left;">
			<font size="5"><b>HTML/CSS</b></font><br><hr>
			
			<div style="height:135px;">
				<div style="width:360px;height:100px;padding-top:20px;padding-left:30px;background-color:#F6F6F6;float:left;">
				<font color="#618349">【学习HTML】</font><br>
				<div style="margin-top:10px;float:left;"><img src="html.png" width="50px"></div>
				<div style="margin-top:10px;">HTML，即超文本标记语言(Hyper Text Markup Language)</div>
				</div>
				<div style="width:360px;height:100px;margin-left:5px;padding-top:20px;padding-left:30px;background-color:#F6F6F6;float:left;">
				<font color="#618349">【学习HTML5】</font><br>
				<div style="margin-top:10px;float:left;"><img src="html2.png" width="50px"></div>
				<div style="margin-top:10px;">HTML5是下一代HTML标准</div>
				</div>
				<div style="width:360px;height:100px;margin-left:5px;padding-top:20px;padding-left:30px;background-color:#F6F6F6;float:left;">
				<font color="#618349">【学习CSS】</font><br>
				<div style="margin-top:10px;float:left;"><img src="html3.png" width="50px"></div>
				<div style="margin-top:10px;">层叠样式表（Cascading StyleSheet）</div>
				</div>
			</div>
			<div style="height:135px;clear:both">
				<div style="width:360px;height:100px;padding-top:20px;padding-left:30px;background-color:#F6F6F6;float:left;">
				<font color="#618349">【学习CSS3】</font><br>
				<div style="margin-top:10px;float:left;"><img src="html4.png" width="50px"></div>
				<div style="margin-top:10px;">CSS3是CSS技术的升级版本</div>
				</div>
				<div style="width:360px;height:100px;margin-left:5px;padding-top:20px;padding-left:30px;background-color:#F6F6F6;float:left;">
				<font color="#618349">【学习Bootsrap3】</font><br>
				<div style="margin-top:10px;float:left;"><img src="html5.png" width="50px"></div>
				<div style="margin-top:10px;">Bootstrap,来自Twitter，是目前最受欢迎的前端框架</div>
				</div>
				<div style="width:360px;height:100px;margin-left:5px;padding-top:20px;padding-left:30px;background-color:#F6F6F6;float:left;">
				<font color="#618349">【学习Bootsrap4】</font><br>
				<div style="margin-top:10px;float:left;"><img src="html6.png" width="50px"></div>
				<div style="margin-top:10px;">Bootstrap4目前是Bootstrap的最新版本</div>
				</div>
			</div>
			<div style="height:135px;clear:both">
				<div style="width:360px;height:100px;padding-top:20px;padding-left:30px;background-color:#F6F6F6;float:left;">
				<font color="#618349">【学习Font Awesome】</font><br>
				<div style="margin-top:10px;float:left;"><img src="html7.png" width="50px"></div>
				<div style="margin-top:10px;">Font Awesome是一套绝佳的图标字体库和CSS框架</div>
				</div>
				<div style="width:360px;height:100px;margin-left:5px;padding-top:20px;padding-left:30px;background-color:#F6F6F6;float:left;">
				<font color="#618349">【学习Foundation】</font><br>
				<div style="margin-top:10px;float:left;"><img src="html8.png" width="50px"></div>
				<div style="margin-top:10px;">Foundation用于开发响应式的HTML，CSS and JavaScript框架</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- 尾栏-->
<div style="width=1250px;height:280px;padding-top:30px;padding-bottom:30px;">
	<font color="#868593">
	<div style="width:1px;height:300px;margin-left:290px;background-color:#E5E5E5;float:left;"></div>
		<div style="width:200px;height:300px;float:left;"><div style="margin-left:25px;">在线实例</div>
		<font size="2"><ul><li>HTML实例</li><br><li>CSS实例</li><br><li>JavaScript实例</li><br><li>Ajax实例</li><br><li>jQuery实例</li><br><li>XML实例</li><br><li>Java实例</li></font>
		</div>
	<div style="width:1px;height:300px;background-color:#E5E5E5;float:left;"></div>
		<div style="width:200px;height:300px;float:left;"><div style="margin-left:25px;">字符集</div>
		<font size="2"><ul><li>HTML字符集设置</li><br><li>HTML ASCII字符集</li><br><li>JS混淆加密</li><br><li>PNG/JPEG图片压缩</li><br><li>HTML拾色器</li><br><li>JSON格式化工具</li><br><li>随机数生成器</li></font>
		</div>
	<div style="width:1px;height:300px;background-color:#F6F6F6;float:left;"></div>
	<div style="width:1px;height:300px;background-color:#E5E5E5;float:left;"></div>
		<div style="width:200px;height:300px;float:left;"><div style="margin-left:25px;">最新更新</div>
		<font size="2"><ul><li>R包</li><br><li>R数据框</li><br><li>R因子</li><br><li>Linux pkill命令</li><br><li>Linux killall命令</li><br><li>R数组</li><br><li>R矩阵</li><br></font>
		</div>
	<div style="width:1px;height:300px;background-color:#F6F6F6;float:left;"></div>
	<div style="width:1px;height:300px;background-color:#E5E5E5;float:left;"></div>
		<div style="width:200px;height:300px;float:left;"><div style="margin-left:25px;">站点信息</div>
		<font size="2"><ul><li>意见反馈</li><br><li>免责声明</li><br><li>关于我们</li><br><li>文章归档</li></font>
		</div>
	</font>
	<div style="width:1px;height:300px;background-color:#E5E5E5;float:left;"></div>
		<div style="width:200px;height:300px;float:left;"><div style="margin-left:25px;"></div>
		<div style="width:100px;margin-left:50px"><font size="4"><b>关注微信</b></font></div><div style="margin-top:20px;margin-left:40px;"><img src="runnoobcode.png"></div>
		</div>
</div>
<!-- 阐释栏-->
<div style="padding-top:20px;text-align:center;background-color:#F6F6F6"><font color="#868593">Copyright © 2013-2024 菜鸟教程  runoob.com All Rights Reserved. 备案号：闽ICP备15012807号-1</font></div>
</body>
	
	
</html>

三、学习经验分享

关于HTML的前言：HTML的正式名称是超文本标记语言，主要是利用各类标签完成网页的设计。

1.相关软件的下载

类似于使用python编程需要python这个软件，看视频需要视频网站，玩游戏需要启动器一样，我们利用HTML进行前端网页设计也需要相关的软件。

这里我推荐两个：因为快捷键没有那么多，比较适合新手的npp（noptead++）；还有比较专业的VScode。（下载时，全部默认设置就好）

选一个就好。

2.如何打开你的工作页面？

好了，工具现在有了。那么你该怎么开始呢？

a.首先随意打开一个打开一个文件——点击查看——点击显示——点击文件拓展名。使“文件拓展名”处于打开状态。

使你可以修改文件后缀。

a.在任意位置（你记得住的地方，建议在桌面上）创建一个记事本（文本文档）。

b.右键记事本——重命名。将文件名改成index.html（注意html使后缀名，请不要改成index.html.txt），随后在弹窗中点击确定。

如果此时该文件图标改变，则进入下一步，否则请从a.重新操作。

c.右键index文件，然后在打开方式中选择你所下载的工具。

如果没有找到你下载的工具，请点击“选择其他应用”后，在电脑中找到工具所在文件夹后选中。

这里放上我的地址供参考C:\Program Files (x86)\Notepad++

d.随后在出现的界面中就可以开始创作了

VScode可能会出现welcome的界面，关掉就好。

3.真正开始创作内容

首先要了解html中大部分标签都是有始有终的例如<div></div>;<p></p>...

浅灰色斜体或者亮绿色，并且前面又在之间的为注释，仅为向读者解释作用。

a.HTML文件的结构

首先在界面的最开始要写上，

<!DOCTYPE html>

这是对该界面使用语言的声明。

随后标记处你的工作范围，

<!DOCTYPE html>
<html>
<!--你的工作区域-->
</html>

html正是你所使用的语言。

内容分成两个部分head、body

head部分是对头部的编写

包括汉语编码（utf-8可看做与ASCII类似）的设置、

css（本次未使用，略讲）的链接——可以没有

小图标和标题——可以没有

<!DOCTYPE html>
<html>
<head>
    <!--汉语编码-->
    <meta charset="utf-8">

    <!--链接css文件-->
    <link rel="stylesheet" href="css/wall.css">

    <!--标题-->
    <title>找不到脑袋</title>

    <!--小图标-->
	<link rel="shortcut icon" href="https://www.bilibili.com/favicon.ico?v=1"         
type="image/x-icon">

</head>


</html>

然后才是工作量最大的部分body。

也就是身体，包含绝大多数内容。

<!DOCTYPE html>
<html>
<head>
    <!--汉语编码-->
    <meta charset="utf-8">

    <!--链接css文件-->
    <link rel="stylesheet" href="css/wall.css">

    <!--标题-->
    <title>找不到脑袋</title>

    <!--小图标-->
	<link rel="shortcut icon" href="https://www.bilibili.com/favicon.ico?v=1"         
type="image/x-icon">

</head>
<body>
<!--网页的身体部分-->
</body>
</html>

随后就可以愉快的在身体部分编写网页的主要内容了。

b.认识标签

刚刚也说了html是由标签构成的，标签就是一种具有一定作用的标记。内容一旦有了某种标签就会按照标签运行。

标签具有属性，标签类似于将一个内容转化成一种特定的格式，属性则是对这个格式进行修饰。

所以在创作的过程中，会先分析目标网页所需要的标签，而具体的格式则是在编写的过程中不断地调整。

<title><!--网页标题--></title>

title：设置网页的标题（必须在head内部使用，后续未作说明皆为body内部使用）

<h1>1号标题</h1>
<h2>2号标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>
<h5>5号标题</h5>
<h6>6号标题</h6>
<p>段落内容</p>

h1~6：设置内容标题，1号为最大。

p：设置段落，有自动换行的作用（但不好用）

HTML（超文本标记语言——HyperText Markup Language）
<br>
是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。
<hr>
除 HTML 以外的其他技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）

br：换行（所以说上面那个不好用）

hr：划线

可以发现这两个人标签是没有结束标签的。

<input type="search" placeholder="search">

<input type="submit">

input：就是输入的意思，第一句是生成一个搜索栏，第二句是生成一个提交按钮

这里也可以窥见属性的用法，type便是input的一个属性，根据属性的不同，会出现不同的东西。

placeholder也是一个属性，可以在搜素栏内生成一句话。

接下来介绍三个重量级的标签及其部分属性（如果掌握了，那就可以完成大部分网页）

<div style="style="wight:200px;margin-left:170px;margin-right:25;float:left;"></div>
<font color="#000"></font>
<img src="img/imf1.png">

（a）先介绍img，顾名思义就是插入一张图片

那么图片从哪里来？img标签里的src就是图片所在位置

有两种填写方式

一是绝对路径

这张图片里的“位置就是绝对路径”，复制粘贴到代码中就可以。

二是相对路径

比如我的html文件和图片都在同一个文件夹中，那我就没必要写该文件夹之前的路径了

事例便是相对路径。

同时img标签不仅是插入图片的作用，我们还可以添加一个长宽的属性，以设置图片大小。

<img src="img/imf1.png" width="300px" height="200px">

（b）接下来是font标签，主要用于对文本的操作

可以用color属性改变颜色和size属性改变大小

<font color="#eee" size="6">我还</font>

color可以用颜色的16位编码表达出来（模仿网页时，可以用颜色吸管提取网页的颜色）

（c）最关键的div标签

首先我们要指导div是什么，div是一个块元素

<div style="width:100px;height:100px;background:#000"></div>

我们给这个块元素一个长宽和背景色（后面会细说），就明显的看到这个块元素所在的位置

经过我们块元素位置的调整，再在div块内加入相应元素就可以完成网页的构建。

接下来讲div的属性style

在style中我们可以设置宽度，高度，背景色，以及浮动

前三个都易于理解

细说一下浮动是什么。

我们要知道div块的一个属性，那就是“独占一行”。

div块存在一个默认的属性，那就是不允许别人和他同行

在div块之前的内容会在上一行

之后的内容会在下一行。

那如果我们要两个div并排，该如何操作呢？

<div style="width:100px;height:100px;background:#000"></div>
<div style="width:100px;height:100px;background:#eee"></div>

<div style="width:100px;height:100px;background:#000;float:left"></div>
<div style="width:100px;height:100px;background:#eee;float:left"></div>

可以复制两个代码感受一下区别

后者就是去除掉div块独占一行的属性后变为浮动属性

那这时我们又想换行了怎么办呢？

<div style="width:100px;height:100px;background:#000;float:left"></div>
<div style="width:100px;height:100px;background:#eee;float:left"></div>
<div style="width:200px;height:100px;background:#000"></div>

像这样输入并不能达到我们想要的效果

这时我们要了解一个新的属性

<div style="width:100px;height:100px;background:#000;float:left"></div>
<div style="width:100px;height:100px;background:#eee;float:left"></div>
<div style="width:200px;height:100px;background:#000;clear:both"></div>

这样就完成了div块的换行。

现在你又有了新的需求，你想要div块中间留有一定的空隙，怎么办？

我们再了解几个新的属性margin，padding，border。

这几个属性分别控制什么呢？

可以看一下这张图蓝色部分会是你的文本内容或者图片内容

border以内的部分会是background-color

<div style="width:100px;height:100px;margin-left:10px;background:#000;float:left"></div>
<div style="width:100px;height:100px;margin-top:20px;background:#eee;float:left"></div>
<div style="width:200px;height:100px;background:#000;clear:both"></div>

现在间隙问题解决了一部分了，如果给第三个div块加上上下间隔，你会发现不起作用

这其实是因为上面两个div块已经变为浮动属性了，也就是第三个div块的margin-top是与网页上端的间隔，而不是和div块

那我们要怎么做？？？

div块中其实可以套div块

<div style="width:300px;height:110px">
<div style="width:100px;height:100px;margin-left:10px;background:#000;float:left"></div>
<div style="width:100px;height:100px;margin-top:20px;background:#eee;float:left"></div>
</div>
<div style="width:200px;height:100px;margin-top:50px;background:#000;clear:both"></div>

如此便可

四、结语

现在你已经基本掌握了使用html的能力，试着自己做一下“菜鸟教程”这个网站吧...

我那天熬了一个大夜，五个小时才做完，加油吧。