-
HTML3天快速入门教程（详细整理附案例）
前言
最近微信小程序后期学习框架遇到瓶颈，听的有点懵，所以不得不先来补一下前端基础知识，即前端三件套HTML、CSS、JavaScript ，因为小程序里面很多知识点与前端三件套大同小异，正好也进行对比学习，为后期学习框架完成自己主持的大创项目打下基础。
这篇文章边学边总结，一开始是写在Typora上的，一键复制过来有很多格式化错误，排版也不行，所以缩写又花了点时间把知识点回顾整理了一遍，全文一万多字，码字不易，先赞后看3Q~
文章目录
一、概念介绍
1.网站与网页
（1）网站
网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页的集合
（2）网页
网页，顾名思义，它是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读
（3）关系
网页是构成网站的基本元素，它通常是由图片、链接、文字、声音、视频等元素构成。
2.HTML
(1)概念
全称为 Hyper Text Markup Language ，即超文本标记语言，是最基础的网页开发语言
-
超文本：超文本即使用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本从而超越了传统文本的限制
-
标记语言：由标签构成的语言。如：<标签名称>
-
注意 ，标记语言不是编程语言，所以它不具备逻辑性
（2）语法规范
基本语法概述：
- HTML标签是由尖括号包围的关键词，如：
- HTML标签通常是成对出现的，如： ，这一类称之为双标签，第一个为开始标签，第二个为结束标签
- 有些特殊的标签必须是单个标签组成，这一类很少，如：
，这一类称之为单标签
标签关系：
- 包含关系
- <head>
- <title> title>
- head>
- 并列关系
- <head>head>
- <body>body>
- <font>font>
（3）网页的形成
网页是由网页元素组成的，这些元素是利用HTML标签所描述出来的，然后通过浏览器自带的引擎解析后展示给用户，下面以CSDN首页为例：
二、HTML标签大全
1.骨架标签
每个网页都会有的一个基本结构标签，称之为骨架标签，在此基础上才能去书写其它标签
标签名 定义 说明 HTML标签 根标签，是页面中最大的标签 文档的头部 在头部标签中必须要去设置title标签 文档的标题 页面展示时候在浏览器顶部的网页标题 文档的主题 包含页面中的所有元素 下面是在IDEA中新建HTML文件后自动生成的骨架标签：
- html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Titletitle>
- head>
- <body>
- body>
- 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 />语义：
起到强制换行的作用
特点：
-
是一个单标签
是单纯的换一行，与段落有所区别，段落之间会插入一些垂直的间距，即带有行间距
2.3文本格式化标签
有时候需要为文字设置加粗、斜体、或者下划线等效果，可以突出文本重点，可以使用一下标签
语义 标签 加粗 或者 （重点） 倾斜 或者 （重点） 删除线 下划线 或者
3.图像标签
3.1图像标签
语法：
<img src="图像路径URL" />它是一个单标签，其中src是图像标签的必须属性。
图像标签的其它属性：
属性 属性值 说明 src 图片路径 必须属性 alt 文本 替换文本。当图片不能正常显示时展示 title 文本 提示文本。鼠标放在图片上悬停时展示 width 像素 设置图像的宽度 height 像素 设置图像的高度 border 像素 设置图像的边框粗细 注意点：
- 图像标签可以拥有多个属性，必须写在标签名的后面
- 属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开
- 属性采取键值对的形式，即key="value"的格式，属性=“属性值”
3.2相对路径与绝对路径
（1）相对路径
相对路径就是以引用文件所在位置为参考基础，而建立出的目录路径。
相对路径分类 符号 说明 同一级路径 无 图片文件与HTML文件位于同一个目录下，则可以直接引用 下一级路径 / 图片文件位于HTML文件的下一级，如： 
上一级路径 ../ 图片文件位于HTML文件的上一级，如： 
（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>
- <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>列表项1li>
- <li>列表项2li>
- <li>列表项3li>
- ...
- ul>
注意:
- 无序列表的各个列表项是并列的，没有顺序之分
- 但是 标签相当于一个容器，在其里面可以容纳其它所有元素
- 无序列表会自带样式属性，在实际中会用CSS进行控制样式
（2）有序列表
介绍：
- 标签表示无序列表，一般会以有序数字来呈现列表项，列表项使用
- 来定义
语法：
- <ol>
- <li>列表项1li>
- <li>列表项2li>
- <li>列表项3li>
- ...
- ol>
注意：
- 但是 标签相当于一个容器，在其里面可以容纳其它所有元素
- 有序列表会自带样式属性，在实际中会用CSS进行控制样式
（3）自定义列表
使用场景：
自定义列表常用于对术语或者名词进行解释与描述，列表项前没有任何符号
下面还是以华为商城底部的内容为例：
可以看到底下内容都是在为最顶部的一个名词做解释或者描述
语法：
- <dl>
- <dt>名词dt>
- <dd>名词解释1dd>
- <dd>名词解释2dd>
- <dd>名词解释3dd>
- dl>
一张神图来帮助理解：
6.表格标签
6.1主要作用
表格主要用于显示、展示数据，可以使得数据显示地非常规整，可读性很好
6.2基本语法
- <table>
- <tr>
- <th>这是表头单元格标签th>
- tr>
- <tr>
- <td>这是普通单元格标签td>
- tr>
- table>
语义：
是用于定义表格的标签，是最外层的
标签用于定义表格中的行，必须嵌套在 标签中
标签用于定义表格的表头，默认会有加粗居中的效果 标签用于定义表格中普通的单元格，全称为table data，即数据单元格的内容
6.3表格属性
表格标签的属性在实际开发中不是很常用，后面会通过CSS来控制表格样式
属性名称 属性值 描述 align left、center、right 规定表格相对周围元素的对齐方式 border 1或“” 规定表格是否具有边框，默认没有 cellpadding 像素值 规定单元格的边沿与其里面内容的距离，默认1像素 cellspacing 像素值 规定单元格之间的距离，默认2像素 width 像素值或者百分比 规定表格的宽度 6.4表格结构标签
语法：
- <thead>
- 这里放表头部分的内容
- thead>
- <tbody>
- 这是表格的主体，放数据本体
- tbody>
说明：
- 和是两个语义化标签，即是为了更好的增加代码的可读性
- 应用场景是当表格非常长的时候，使用它可以使得表格的结构更为清晰
6.5合并单元格
合并单元格的方式:
- 跨行合并： rowspan="合并单元格的个数"
- 跨列合并：colspan="合并单元格的个数"
目标单元格写合并代码：
- 跨行合并：最上侧的单元格为目标单元格，在其开始标签中写合并代码
- 跨列合并：最左侧的单元格为目标单元格，在其开始标签中写合并代码
合并单元格三部曲:
- 先确定是跨行合并还是跨列合并
- 找到目标单元格，写上合并方式=合并单元格个数 的代码，如：
- 删除多余的单元格
7.块级标签
- <div> 这是个大盒子div>
- <span> 这是个小盒子span>
它们没有语义，就是一个用来装内容的盒子
理解记忆：
- div是division的缩写，意为分割、分区
- 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 是输入的意思，在表单元素中标签用来收集用户的信息，实现交互
在标签中，包含一个type属性，根据其值的不同，输入字段input可以表现为文本字段、复选框、单选按钮、按钮、密码框等多种形式
语法：
<inout type="属性值" />注意：
- 为单标签
- type属性设置不同的属性值来指定不同的控件类型
type属性值如下：
标签除type之外的其它常用属性：
说明：
- name和value是每个表单元素都有的属性值，主要给后台人员使用
- name是表单元素的名字，要求单选按钮和复选按钮要有相同的name值
- checked属性主要针对单选按钮和复选框，主要作用是打开页面时就能默认选择某个表单元素
9.4 label 文本提示标签
概念：
比如：用户在选择性别的单选按钮时，因为按钮较小对某些用户来说不是很好点中，所以此时将性别男这个文本与单选按钮绑定，点击男就可以选中该单选按钮了。
语法：
- <label for="sex">男label>
- <input type="radio" name="choosesex" id="sex" />
注意：
9.5 select 下拉列表标签
概述：
在页面中，如果有多个选项需要让用户选择，并且想要节约页面空间时，此时可以使用
语法：
- <select>
- <option>选项1option>
- <option>选项2option>
- <option>选项3option>
- ...
- select>
注意：
- 在
9.6 textarea 文本域标签
概述：
当用户输入的内容较多时，我们就不能单纯地使用文本框表单了，此时需要使用
-