前言

最近微信小程序后期学习框架遇到瓶颈，听的有点懵，所以不得不先来补一下前端基础知识，即前端三件套HTML、CSS、JavaScript ，因为小程序里面很多知识点与前端三件套大同小异，正好也进行对比学习，为后期学习框架完成自己主持的大创项目打下基础。

这篇文章边学边总结，一开始是写在Typora上的，一键复制过来有很多格式化错误，排版也不行，所以缩写又花了点时间把知识点回顾整理了一遍，全文一万多字，码字不易，先赞后看3Q~

文章目录

一、概念介绍

1.网站与网页

（1）网站

网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页的集合

（2）网页

网页，顾名思义，它是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读

（3）关系

网页是构成网站的基本元素，它通常是由图片、链接、文字、声音、视频等元素构成。

2.HTML

(1)概念

全称为 Hyper Text Markup Language ，即超文本标记语言，是最基础的网页开发语言

超文本：超文本即使用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本从而超越了传统文本的限制
标记语言：由标签构成的语言。如：<标签名称>
注意，标记语言不是编程语言，所以它不具备逻辑性

（2）语法规范

基本语法概述：

HTML标签是由尖括号包围的关键词，如：<html>
HTML标签通常是成对出现的，如：<html></html> ，这一类称之为双标签，第一个为开始标签，第二个为结束标签
有些特殊的标签必须是单个标签组成，这一类很少，如：<br> ，这一类称之为单标签

标签关系：

包含关系

<head>
     <title> </title>
</head>

并列关系

<head></head>
<body></body>
<font></font>

（3）网页的形成

网页是由网页元素组成的，这些元素是利用HTML标签所描述出来的，然后通过浏览器自带的引擎解析后展示给用户，下面以CSDN首页为例：

二、HTML标签大全

1.骨架标签

每个网页都会有的一个基本结构标签，称之为骨架标签，在此基础上才能去书写其它标签

标签名	定义	说明
<html></html>	HTML标签	根标签，是页面中最大的标签
<head></head>	文档的头部	在头部标签中必须要去设置title标签
<title></title>	文档的标题	页面展示时候在浏览器顶部的网页标题
<body></body>	文档的主题	包含页面中的所有元素

下面是在IDEA中新建HTML文件后自动生成的骨架标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

注意：

<!DOCTYPE html>不是一个HTML标签，只是一个文档类型声明标签，它告诉浏览器当前页面采用HTML5版本来显示网页
lang 是语言种类，即网页语言类型，定义为en即为英文网页，定义为zh-CN即为中文网页
charset 是字符集，其值表示HTML文档使用哪种字符编码，一般情况下均使用UTF-8，其基本包含了全世界所有国家所需要用到的字符，所以也称为“万国码”

2.文本标签

2.1标题标签

语法：

<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>

语义：

作为标题使用，并且依据重要性递减

特点：

加了标题标签的文字会加粗，字号也会依次变大
一个标题是独占一行的

2.2段落与换行标签

（1）段落标签

语法：

<p>这是一个段落标签</p>

语义：

可以把HTML文档分为若干段落

特点：

文本在一个段落中会根据浏览器窗口的大小自动换行
段落和段落之间具有间隔

（2）换行标签

语法：

<br />

语义：

起到强制换行的作用

特点：

<br />是一个单标签
<br />是单纯的换一行，与段落有所区别，段落之间会插入一些垂直的间距，即带有行间距

2.3文本格式化标签

有时候需要为文字设置加粗、斜体、或者下划线等效果，可以突出文本重点，可以使用一下标签

语义	标签
加粗	<strong> </strong>或者<b> </b> （重点）
倾斜	<em> </em>或者<i> </i> （重点）
删除线	<del> </del>或者<s> </s>
下划线	<ins> </ins>或者<u> </u>

3.图像标签

3.1图像标签

语法：

<img src="图像路径URL" />

它是一个单标签，其中src是图像标签的必须属性。

图像标签的其它属性：

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本。当图片不能正常显示时展示
title	文本	提示文本。鼠标放在图片上悬停时展示
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

注意点：

图像标签可以拥有多个属性，必须写在标签名的后面
属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开
属性采取键值对的形式，即key=”value”的格式，属性=“属性值”

3.2相对路径与绝对路径

（1）相对路径

相对路径就是以引用文件所在位置为参考基础，而建立出的目录路径。

相对路径分类	符号	说明
同一级路径	无	图片文件与HTML文件位于同一个目录下，则可以直接引用
下一级路径	/	图片文件位于HTML文件的下一级，如：<img src=”images/1.png” />
上一级路径	../	图片文件位于HTML文件的上一级，如：<img src=”../images/1.png” />

（2）绝对路径

绝对路径是指目录下的绝对路径，直接到达目标位置，通常是从盘符开始的路径。

例如：“D:\Web\HTML\images\1.png”

4.链接标签

4.1超链接标签

语法：

<a href="跳转的目标地址" target="目标窗口的弹出方式">文本或者图像</a>

理解记忆：

a 是单词anchor的缩写，意思是锚

重要属性：

属性	作用
href	指定目链接目标的URL地址，只有应用了此属性才具有了超链接的功能，故其是一个必须属性
target	指定页面打开方式，其中_self为默认值指的是在当前页面打开；_blank为在新的页面打开

4.2链接分类

(1)外部链接

用于链接外部网站资源

<a href="http://www.baidu.com">百度一下</a>

(2)内部连接

用于链接本地资源网页文件，实现网站内部页面的相互跳转，链接内直接填写页面文件名称即可

<a href="index.html">首页</a>

(3)空链接

当开发时没有确定链接目标时，可以使用空连接进行占位

<a href="#">这是个空链接</a>

(4)下载链接

如果href里面的值是一个文件或者压缩包，则会下载这个文件

<a href="下学期课表.zip">点击下载文件</a>

(5)网页元素链接

在网页中的各种元素，如文本、图像、表格、音频、视频等都可以添加超链接，只需将其标签包含在<a></a>内部即可，下面以给图片添加超链接为例：

<a>
   <img src="logo.png" />
</a>

(6)锚点链接

用于页面中元素的快速定位，在页面内部进行跳转

<a href="#life">个人生活</a>
<h2 id="life">个人生活</h2>

步骤：

在链接文本的href属性中设置其值为“ #名字 ” 的形式
找到目标位置标签，在里面添加一个id属性，其值就等于刚刚设置的名字
点击上面的锚点链接即可实现快速定位到添加id属性的标签位置处

5.列表标签

5.1概述

表格是用来显示数据的，那么列表就是用来布局的。

列表最大的特点就是整齐、整洁、有序，作为布局会更加的方便与自由

下面以华为商城左侧内容导航的布局为例：

5.2列表分类

（1）无序列表

介绍：

<ul>标签表示无序列表，一般会以实心圆点项目符号来呈现列表项，列表项使用<li>来定义

语法：

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ul>

注意:

无序列表的各个列表项是并列的，没有顺序之分
<ul></ul>中只能嵌套<li></li>标签，嵌套其它标签是绝对不允许的
但是<li></li>标签相当于一个容器，在其里面可以容纳其它所有元素
无序列表会自带样式属性，在实际中会用CSS进行控制样式

（2）有序列表

介绍：

<ol>标签表示无序列表，一般会以有序数字来呈现列表项，列表项使用<li>来定义

语法：

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ol>

注意：

<ol></ol>中只能嵌套<li></li>标签，嵌套其它标签是绝对不允许的
但是<li></li>标签相当于一个容器，在其里面可以容纳其它所有元素
有序列表会自带样式属性，在实际中会用CSS进行控制样式

（3）自定义列表

使用场景：

自定义列表常用于对术语或者名词进行解释与描述，列表项前没有任何符号

下面还是以华为商城底部的内容为例：

可以看到底下内容都是在为最顶部的一个名词做解释或者描述

语法：

<dl>
   <dt>名词</dt>
   <dd>名词解释1</dd>
   <dd>名词解释2</dd>
   <dd>名词解释3</dd>
</dl>

一张神图来帮助理解：

6.表格标签

6.1主要作用

表格主要用于显示、展示数据，可以使得数据显示地非常规整，可读性很好

6.2基本语法

<table>
    <tr>
       <th>这是表头单元格标签</th>
    </tr>
    <tr>
       <td>这是普通单元格标签</td>
    </tr>
  
</table>

语义：

<table></table>是用于定义表格的标签，是最外层的
<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中
<th></th>标签用于定义表格的表头，默认会有加粗居中的效果
<td></td>标签用于定义表格中普通的单元格，全称为table data，即数据单元格的内容

6.3表格属性

表格标签的属性在实际开发中不是很常用，后面会通过CSS来控制表格样式

属性名称	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式
border	1或“”	规定表格是否具有边框，默认没有
cellpadding	像素值	规定单元格的边沿与其里面内容的距离，默认1像素
cellspacing	像素值	规定单元格之间的距离，默认2像素
width	像素值或者百分比	规定表格的宽度

6.4表格结构标签

语法：

<thead>
     这里放表头部分的内容
</thead>

<tbody>
     这是表格的主体，放数据本体
</tbody>

说明：

<thead></thead>和<tbody></tbody>是两个语义化标签，即是为了更好的增加代码的可读性
应用场景是当表格非常长的时候，使用它可以使得表格的结构更为清晰

6.5合并单元格

合并单元格的方式:

跨行合并： rowspan=”合并单元格的个数”
跨列合并：colspan=”合并单元格的个数”

目标单元格写合并代码：

跨行合并：最上侧的单元格为目标单元格，在其开始标签中写合并代码
跨列合并：最左侧的单元格为目标单元格，在其开始标签中写合并代码

合并单元格三部曲:

先确定是跨行合并还是跨列合并
找到目标单元格，写上合并方式=合并单元格个数的代码，如：<td colspan=”2″></td>
删除多余的单元格

7.块级标签

<div> 这是个大盒子</div>
<span> 这是个小盒子</span>

它们没有语义，就是一个用来装内容的盒子

理解记忆：

div是division的缩写，意为分割、分区
span意为跨度、跨距

特点：

<div>标签用来布局，但是现一行只能放一个<div>。它是大盒子
<span>标签用来布局，一行可以放多个<span>。它是小盒子

8.语义化标签

header: 表示头部
footer: 表示尾部
类似的还有表格中的表头thead标签，表主体tbody标签
这些语义化标签只是为了提高程序的可读性，没有任何样式，需要结合CSS一起使用

9.表单标签

9.1表单介绍

概念：

表单，顾名思义，和咱们平时去银行卡办理信用卡等等要填写的单子一样，其主要目的是为了收集用户的基本信息。下面来看看世纪佳缘会员注册界面的表单长啥样：

组成：

一个完整的表单通常是由表单域、表单控件（也称为表单元素）和提示信息3个部分组成

9.2 form表单域

概念：

顾名思义，表单域是一个包含表单元素的区域

语法：

<form action="URL地址" method="提交方式" name="表单域名称">
     各种表单元素控件
</form>

常用属性：

属性	属性值	作用
action	URL地址	用于指定接收并处理表单数据的服务器程序的URL地址
method	get/post	用于设置表单数据的提交方式，取值为get或者post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

9.3 input 文本输入标签

概念：

input 是输入的意思，在表单元素中<input>标签用来收集用户的信息，实现交互

在<input>标签中，包含一个type属性，根据其值的不同，输入字段input可以表现为文本字段、复选框、单选按钮、按钮、密码框等多种形式

语法：

<inout type="属性值" />

注意：

<input />为单标签
type属性设置不同的属性值来指定不同的控件类型

type属性值如下：

<input>标签除type之外的其它常用属性：

说明：

name和value是每个表单元素都有的属性值，主要给后台人员使用
name是表单元素的名字，要求单选按钮和复选按钮要有相同的name值
checked属性主要针对单选按钮和复选框，主要作用是打开页面时就能默认选择某个表单元素

9.4 label 文本提示标签

概念：

<label>标签为input元素定义标注（标签）

<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上来增加用户的体验。

比如：用户在选择性别的单选按钮时，因为按钮较小对某些用户来说不是很好点中，所以此时将性别男这个文本与单选按钮绑定，点击男就可以选中该单选按钮了。

语法：

<label for="sex">男</label>
<input type="radio" name="choosesex" id="sex" />

注意：

<label>标签的for属性必须与相关元素的id属性相同才能实现绑定效果

9.5 select 下拉列表标签

概述：

在页面中，如果有多个选项需要让用户选择，并且想要节约页面空间时，此时可以使用<select>标签定义下拉列表

语法：

<select>
     <option>选项1</option>
     <option>选项2</option>
     <option>选项3</option>
     ...
</select>

注意：

<select>标签中至少包含一对<option>
在<option>中定义selected=“selected”时，当前项即为默认选中项

9.6 textarea 文本域标签

概述：

当用户输入的内容较多时，我们就不能单纯地使用文本框表单了，此时需要使用<textarea>标签来定义一个供用户输入长文本的文本域，可以输入多行文本，该控件经常使用于留言板、评论区等

语法：

<textarea rows="行数" cols="列数">
      文本内容
</textarea>

注意：

cols 限制每行中的字符数，rows限制显示的行数，一般不用，会在CSS中进行样式控制

9.7表单元素总结

表单元素共分为三大组：input输入表单元素、select下拉表单元素、textarea文本域表单元素
三组表单元素都应该包含在form表单域中，并且都应该设置name属性
单选按钮和复选框必须设置相同的name值

10.注释与特殊字符

10.1注释

<!--注释语句--> 快键键是：ctrl+ /

10.2特殊字符

在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时可以使用以下特殊的字符来替代

常用的特殊字符如下：

  一个空格
© 版权符号
™ 商标
® 已注册
< 大于号
> 小于号

HTML常用特殊字符对照表

三、综合案例

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>圣诞老人</title>
</head>
<body>
<h1 id="mulu">圣诞节那些事</h1>
1.圣诞节的由来<br>
2.<a href="#oldman">圣诞老人的由来</a><br>
3.<a href="#oldtree">圣诞树的由来</a><br>
<hr>
<h2>圣诞节的由来</h2>
<p>
    圣诞节是基督教世界最大的节日。一般认为12月25日作为圣诞节可能开始于公元336年的罗马教会。4世纪初，1月6日是罗马帝国东部各教会纪念耶稣降生和受洗的双重节日，即上帝通过耶稣向世人显示自己。 这一天又是罗马历书的冬至节，意味着万物复苏的开始。可能由于这个原因，罗马教会才选择这一天作为圣诞节。后来，因为各地教会使用的历书不同，具体日期不能统一，于是就把12月24日到第二年的1月6日定为圣诞节节期（Christmas Tide），各地教会可以根据当地具体情况在这段节期之内庆祝圣诞节。 在欧美许多国家里，人们非常重视这个节日，把它和新年连在一起，而庆祝活动之热闹与隆重大大超过了新年，成为一个全民的节日。12月24日平安夜、12月25日圣诞节的主要纪念活动都与耶稣降生的传说有关 。
</p>
<img src="images/t1.gif">
<hr>
<a href="#mulu"><h2 id="oldman">圣诞老人的由来</h2></a>
<p>
    圣诞节当然少不了<a target="_blank" href="oldman.html"><i>圣诞老人</i></a>啦，根据圣经记载，书中并没有提起这一号人物。到底他是如何成为圣诞的主角之一呢？
</p>
<img src="images/t2.jpg">
<p>相传在一千六百多年前，荷兰巴里地方有一个老人，名叫尼古拉斯，他一生最爱帮助贫穷的人家。其中有一次他帮助三个贫穷的少女，送她们三袋金子以逃过被卖的不幸。</p>
<p>到了一八二二年，由荷兰传教士把这位伟大慈善家的故事传到美国，装扮圣诞老人渐渐地流行于世界各国。根据调查，以上故事还有下文；当尼古拉斯偷偷把其中一袋金子送给其中一名女子时，他把金子从其中一个窗户扔进去，恰好掉进晾在壁炉上的一只长袜中。于是，将礼物放在圣诞袜子的送礼方法便传到至今。</p>
<p>在平安夜里，孩子总会把一双双色彩缤纷的袜子挂在床头，然后在袜子旁边放杯热牛奶让圣诞老人喝，以让劳苦功高的圣诞老人解渴，并送份大礼给自己。? </p>
<hr>
<h2 id="oldtree">圣诞树的由来</h2>
<p>圣诞一直是庆祝圣诞节不可少的装饰物，如果家中没有圣诞树，就大大减少了过节气氛。关于圣诞树的来源有多种不同的传说。</p>
<p>其中一个是说：大约在十六世纪，圣诞树最先出现在德国，德国人把长青的松柏枝拿到屋中去摆设，将之成为圣诞树。后来，由德国人马丁路德把蜡烛放在树林中的枞树枝，然后点燃蜡烛，使它看起来像是引导人们到伯利恒去。而近今日，人们已经改用粉色的小灯泡了。</p>
<p>另一个传说记载。在很久以前，曾有一位农民，在圣诞节那天遇到一个穷苦小孩，他热情地接待了这个儿童。儿童临走时折下一根松枝插在地上，松枝立即变成一棵树，上面都挂满礼物，以答谢农民的好意。 </p>
<p>圣诞树真正出现在圣诞节时，首先见于德国，之后又传入欧洲和美国，并以其优美的姿态，成为圣诞节不可缺少的装饰。圣诞树的种类繁多，有天然松柏圣诞树、也有人造圣诞树及白色圣诞树。 每棵圣诞树上都挂满琳琅满目的装饰品，但每棵树的顶端必定有个特大的星星，象征三博士跟随该星而找到耶稣，而且也只有该家庭的一家之主可以把这棵希望之星挂上。</p>
<img src="images/t3.jpg">
<hr>
更多内容，可以<a href="https://baike.baidu.com/item/%E5%9C%A3%E8%AF%9E%E8%80%81%E4%BA%BA/570?fr=kg_general" target="_blank">百度一下</a>，查询关于圣诞节的详细信息！
</body>
</html>

效果展示：

圣诞节那些事儿demo效果展示

2.世纪佳缘会员注册

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册界面</title>
</head>
<body>
    <!--标题-->
    <h2>青春不常在，抓紧谈恋爱——世纪佳缘</h2>
    <table border="1" cellspacing="0" cellpadding="0">
        <!--第1行-->
        <tr>
            <td>
                性别：
                <input id="nan" type="radio" name="sex"><label for="nan"><img src="../static/man.jpg">男</label>
                <input id="nv" type="radio" name="sex"><label for="nv"><img src="../static/women.jpg">女</label>
            </td>
        </tr>
        <!--第2行-->
        <tr>

            <td>
                生日：
                <select>
                    <option>--请选择年份--</option><option>1999</option><option>2000</option>
                    <option>2001</option><option>2002</option><option>2003</option>
                </select>
                <select>
                    <option>--请选择月份--</option>
                    <option>1</option><option>2</option><option>3</option>
                    <option>4</option><option>5</option><option>6</option><option>7</option>
                    <option>8</option><option>9</option><option>10</option><option>11</option>
                    <option>12</option>
                </select>
                <select>
                    <option>--请选择日--</option>
                    <option>2</option><option>3</option>
                    <option>4</option><option>5</option><option>6</option>
                </select>
            </td>

        </tr>
        <!--第3行-->
        <tr>
            <td>
                所在地区：
                <input type="text" value="江苏盐城">
            </td>
        </tr>
        <!--第4行-->
        <tr>
            <td>
                婚姻状况：
                <input type="radio" name="marry" id="weihun">
                <label for="weihun">未婚</label>
                <input type="radio" name="marry" id="yihun">
                <label for="yihun">已婚</label>
                <input type="radio" name="marry" id="lihun">
                <label for="lihun">离婚</label>
            </td>
        </tr>
        <!--第5行-->
        <tr>
            <td>
                学历：
                <select>
                    <option>--请选择学历--</option>
                    <option>博士</option>
                    <option>硕士</option>
                    <option>本科</option>
                    <option>专科</option>
                    <option>高中</option>
                    <option>初中</option>
                    <option>小学</option>
                </select>
            </td>
        </tr>
        <!--第6行-->
        <tr>
            <td>
                喜欢的类型：
                <input type="checkbox" name="leixing" id="1">
                <label for="1">清纯系</label>
                <input type="checkbox" name="leixing" id="2">
                <label for="2">萝莉系</label>
                <input type="checkbox" name="leixing" id="3">
                <label for="3">御姐系</label>
                <input type="checkbox" name="leixing" id="4">
                <label for="4">成熟系</label>
                <input type="checkbox" name="leixing" id="5">
                <label for="5">都喜欢</label>
            </td>
        </tr>
        <!--第7行-->
        <tr>
            <td>
                个人介绍：
                <textarea cols="20"  >不少于100字</textarea>
            </td>
        </tr>
        <!--第8行-->
        <tr>
            <td>
                <input type="submit" value="立即注册">
            </td>
        </tr>
        <!--第9行-->
        <tr>
            <td>
                <input id="tongyi" name="accept" type="checkbox" checked>
                <label for="tongyi">我同意注册条款和会员加入的标准</label>
            </td>
        </tr>
        <!--第10行-->
        <tr>
            <td>
                <a href="#">我是会员，立即登录</a>
            </td>
        </tr>
        <!--第11行-->
        <tr>
            <td>
                <ul>
                    <img width="30" height="20" src="../static/love.png">
                    我承诺:
                    <li>已经年满18周岁且单身</li>
                    <li>对爱情态度专一认真</li>
                    <li>真诚才是必杀技</li>
                </ul>
            </td>
        </tr>


    </table>

</body>
</html>

效果展示：