如果你跟我一样，希望快速制作一个属于自己的个人网站，怎么样才能快速学会并且构建一个自己的网站呢，也许我的经验可以帮助到你。里面有许多是其他更专业的朋友整理的文档，我会一一标明出处。
同时，这篇文章提到的一些理解可能不是那么严谨，参杂比较多的个人的理解方式，希望避开专业的术语，能让大家更好地理解代码。本文可作大纲了解，毕竟代码这东西有太多细节，仅仅通过一篇文章是不能完全讲透彻的。
一、网站在代码中由什么构成?
我们看到的网站都由以下几个基础部分构成：结构，样式，动作。
1-1.首先，结构就是网站的框架，所有网页内容，无论是图片还是文字，其实都是放置在一个个方形的盒子里的。比如：
这些方形的盒子，在代码里是用标签语言来实现的，也就是HTML。基础的盒子标签比如<div></div>。标签语言一般成对出现.也有少数单个的标签，比如插入图片的标签为<img>。
在个人网站中经常用到的基本的标签有：
<body></body>
<nav></nav>
<div></div>
<ul></ul>
<li></li>
<a></a>
<img>
<p></p>
<span></span>
<button></button>
你只需要认识以上一些标签组合，就可以完成一个简单的个人网站的框架了。
更多标签可以到3cshool这个网站去查看：https://www.w3school.com.cn.1-2.其次，我们要了解盒子模型的排列和嵌套.可以注意到,上面百度网站的图片中，盒子跟盒子的关系除了平行或者竖直排列，就是大盒子嵌套着小盒子.我们设计和制作网站就是把这一个个盒子合理地排列和嵌套。排列关系在代码中很好理解，就是一组标签接着一组标签写下去,基本可以理解为排列的关系：
比如上面的代码中，几组<li></li>标签就是排列的关系。
<nav></nav>，<ul></ul>和几组<li></li>标签就是嵌套的关系.<nav></nav>是最外层的大盒子，<ul></ul>是中间的盒子，<li></li>是被包裹在最里面的盒子。
代码和盒子的对应关系是：红色方框盒子对应<nav></nav>标签,紫色方框盒子对应<ul></ul>标签，蓝色方框盒子对应<li></li>标签。
1-3.对标签进行分类，可分为内联元素和块级元素。内联元素和块级元素有不同的默认样式，分清楚内联元素和块级元素的区别，有助于我们更灵活地安排页面结构：
a.下表列出了内联元素和块级元素的主要区别
html中内联元素和块级元素的区别块级元素行内元素独占一行,默认情况下，其宽度自动填满其父元素宽度相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化可以设置width，height属性行内元素设置width，height属性无效可以设置margin和padding属性行内元素起边距作用的只有margin-left、margin-right、padding-left、padding-right，其它属性不会起边距效果。对应于display:block对应于display:inline；
b.块级元素主要有
<div>定义文档中的分区或节
<dl>定义列表
<dt>定义列表中的项目
<form>创建表单元素
<h1><h2><h3><h4><h5><h6>标题元素
<hr>水平线
<li>定义列表项目
<ol>有序列表
<ul>无序列表
<p>定义段落
<table>定义表格
<td>表格中的标准单元格
<tr>表格中的行
c.内联元素有
<a>可定义锚以及超链接
<b>字体加粗
<big>大号字体加粗
<br>换行
<em>定义为强调的内容
<i>斜体文本效果
<img>向网页中嵌入一张图像
<input>输入框
<select>定义单选或者多选菜单
<span>组合文档中的行内元素
<var>定义变量
其中，<input>和<img>都是行内元素，但是它们是可以设置宽和高的。
注:以上关于内联元素和块级元素的区别出自CSDN“区块小白龙”的博客
https://blog.csdn.net/xuanfuhuo4769/article/details/81326457
里面还有关于可替换元素和不可替换元素的说明。但最重要的还是先弄清楚内联元素和块级元素。
如果你记不清哪个是内联元素，哪个是块级元素,不知道这个标签可不可以定义宽高，你可以先给这个元素写一个背景颜色，然后定义宽高，刷新一下，看看有没有起作用。
怎么让一组样式显示在相应的结构中?有了标签框架，就要有相应的样式去描述这个方形的盒子，颜色，外边框，里面的字体，字体的颜色，位置是靠左还是靠右等等。在了解样式之前，我们需要明白，标签是有默认的属性，也就是默认的样式的。有些标签本身没有高度和宽度，如果里面既没有放置其他有宽度和高度的标签，也没有给这个标签定义宽高样式的话，是没有办法直观地看到这个盒子的。这时我们有必要了解css样式。
2.css样式
2-1.选择器
在了解css样式之前，我们要明白，样式和框架之间是怎么链接在一起的。样式和框架其实是通过相同的命名链接在一起的，这个命名方式，在样式表中我们称为“选择器”。在标签也就是在结构中，称之为“命名”。命名方式主要有标签选择器，id选择器和class选择器，当然还有其他很多种选择器，但记住以上三种选择器的使用就足够我们搭建个人网站了。
例如以上的代码中，蓝色方框的为class选择器，橙色方框的为id选择器，所有标签元素，例如<li></li>都可以作为标签选择器。
在css样式表中是这样的
我们留意到，id选择器在样式中的写法是“# id名 {}”，class选择器在样式中的写法是“. 类名 {}”，标签选择器的写法是“标签名 {}””{}”括号里面写样式,以及样式对应的数值。其中id名和类名是我们自己可以随意取的，但是一般都会根据网页结构或者这个结构的功能去命名。且注意他们的区别：id选择器具有唯一性，如果给某个标签命名了id=”menu”，那么这个网页中只能有这一个选择器，而同一个class选择器名称可以用在多处，只要他们的样式是一样的,就可以写同一个class名称。
我常用的命名方式如：nav,firstnav,aboutmebt,secondnav,main,right,left,text,content等等。
常用的命名方式可参考CSDN“C小浩”的博客:
https://blog.csdn.net/chen_haoqiang/article/details/54646380
一般情况下，如果你在前面写了一个样式，比如.menu{width:100px;},后面再写了一个.menu{width:200px;}，那最后这个名字对应的结构的宽度是200px；后面的样式会覆盖前面的样式，只要两个名字都是指向同一个标签元素.这涉及到选择器的优先级问题。
附:扩展阅读,选择器的优先级
https://www.jb51.net/css/470518.html.
https://www.runoob.com/w3cnote/css-style-priority.html
怎么让网页动起起来?
3.动作(jQuery/javascript)
要让网页产生交互行为,单靠html和css的力量是有限的，尽管有<a href=””></a>标签之类的标签可以添加超链接，或者css中诸如:hover之类的伪类。需要实现更复杂的动作，需要依靠jQuery/javascript完成个人网站，不需要太多复杂的数据传输，我们只需要用到jQuery就足够了。jQuery可理解为简化版的javascript。
以上提到css的基本结构是“选择器” 样式，jQuery也可以用相同的方法理解，它的基本结构是“选择器” 动作。其中jQuery的“选择器”写法是：$(“div”)或者$(“.content”)$(“#main”)等等，由此可知jQuery的“选择器”就是$(“”)，双引号中间可以是css的选择器：$(“css选择器”)，这种写法叫做“jQuery 元素选择器”,是jQuery选择器中的一种。
jQuery的更多选择器可参看:
https://www.w3school.com.cn/jQuery/jQuery_selectors.asp
如果是连续的动作，两个动作之间没有因果关系，动作都是针对同一个对象,那就接续写下去，比如$(“元素1”).addClass().removeClass().animate()
关于jQuery的更多详细介绍可参看:
B站视频教程:
https://www.bilibili.com/video/BV1Ep4y1677G
jQuery API 3.5.1 速查表:
https://jquery.cuishifeng.cn/index.html
以上，就是针对“结构(盒子模型概念,div) 样式(css) 动作(jQuery)”这三个分别负责网页的骨骼，样式，动作的三种语言框架的介绍。
二、个人网站中需要的基本结构
导航栏 网页主体是个人网站必不可少的两个大的结构，导航栏又以顶部导航和侧边导航这两种最为常见。
在了解了以上基础知识之后，我们就可以根据热心好友提供的代码去修改自己喜欢的样式。比如：
代码链接:https://www.cnblogs.com/yuer20180726/p/11005545.html
代码链接:https://www.jb51.net/css/379455.html
关键词百度搜索:网页二级导航栏代码
5.断点布局
这里讲到了一个专业名称——断点布局，其实通俗来说就是网页随着浏览器的左右拉伸，改变了显示的宽度,网页随之做一些改变，适应屏幕的大小，以免某些重要的内容被遮盖。作为用户，我们有时可能忽略了这一细节的设计。
具体效果可参看:
http://www.w3cdream.com/content-sort-7-article-577.html
具体代码可以简化为下图：
这里是说:当屏幕宽度小于750px时，使用后面中括号里面的样式，以此类推，第二行意思是，当屏幕宽度大于750px且小于1000px时，使用相应中括号里面的样式。屏幕宽度大于1000px时，使用后面中括号里面的样式。具体的屏幕断点范围可以根据自己的需求进行设置。
相关链接:
关于响应式布局和自适应布局的详细解释
http://caibaojian.com/356.html
4.一些可能会遇到的问题解决方案
4-1.块元素同显示在同一行
在块级元素和内联元素的区别中，已得知<div></div>属于块级元素，独占一行，如果要让box01box02,box03在同一行显示。
方案一：可以在样式表中给这里面的三个元素写float:left;
方案二：给他们的父级元素添加display: flex;
这个做法简单，但是不能跳转到精确的位置，只能跳转到特定的模块，在顶部导航栏浮动在主体内容之上并固定在顶部的时候，跳转到相应模块，会出现顶部导航栏覆盖掉部分模块内容的情况。
这个方法适合侧边导航或者顶部导航不固定在顶部的情况。(2)指定时间滚动到ID为gun的元素,且gun这个类名对应的元素字体颜色变为#2F5DDD:
$(‘.gun’).click(function() {
$(‘html,body’).animate({
scrollTop: $(“.gun”).offset().top – 80
}, 400);
$(this).css(‘color’,’#2F5DDD’);
});
相关链接:
关于offset() 方法的介绍:
http://w3c0.com/jquery/136968
https://www.haorooms.com/post/jquery_offset_xy
关于animate() 方法的介绍:
https://www.w3school.com.cn/jquery/effect_animate.asp
JS如何实现在页面上快速定位（锚点跳转问题）:
https://www.jb51.net/article/121107.htm
https://www.jq22.com/webqd4315
4-3.导航栏置顶导致覆盖网页主体部分的问题
可在网页主体之前增加一个块级元素，让它的高度跟导航栏的高度相同。
相关链接:
锚点定位被顶部固定导航栏遮住的解决方案:
https://zhuanlan.zhihu.com/p/127781764
4-4.button:hover不起作用的原因:
写button样式的时候，选择器层级超过两级，就不起作用了。应减少选择器的层级。
注:本页面打开和新页面打开的写法区别。
方案一来自CSDN“菜鸟M”的博客:
https://blog.csdn.net/weixin_43592907/article/details/107606531
方案二：通过input标签，并且赋予input标签的类型是button，如<input type=button οnclick=”window.open(‘连接’)”>4-6.引用外部特殊字体
个人网站设计通常会用到特殊字体，这时要用到@font-face{ font-family: “字体名称”; src:url(“字体在网站文件夹中的位置”) ; }
具体详见:https://www.cnblogs.com/ylh188/p/15002643.html
4-7.css样式单独写在一个外链文件中
样式少的时候，可以把样式写在<style></style>这个标签中，代表样式信息.样式多的时候，单独创建一个文件名为.css的样式文件，再通过<link>标签链接到相应的html文件中。这样所有公用的样式都可以放在一个样式表里面，比如导航的样式需要改动时，只需要改一个样式表就可以。
例如:<link rel=”stylesheet” type=”text/css” href=”theme.css” />
以下是百度知道中关于单独引用样式文件的讨论:
https://zhidao.baidu.com/question/402684981.html
4-8.如何让<ul></ul>标签中li横向排列
在导航栏或者文章列表中经常用到无序列表，无序列表标签组合为<ul><li></li></ul><ul></ul>中的各条目<li></li>默认都是纵向排列的，如果让他们横向排列，只需要给所有<li></li>标签添加float:left;这个样式即可。
相关链接:
用<ul><li>无序列表标签写一个横向导航栏的具体操作参见:
https://blog.csdn.net/leewokan/article/details/6626774
关于无序列表、有序列表、自定义列表
https://blog.csdn.net/qq_41999819/article/details/89501800
4-9.如果引用的图片是svg格式,且图片中包含文字,会涉及不同浏览器中文字显示不同的问题
解决方案是将文字转曲，同时把相应的文字包放到文字文件夹里面。
以上如有错漏，欢迎指正和补充。
