我们知道一个软件通常是由前端和后端完成的。在前面我们学习的C/C++、数据结构等内容中，很多是后端相关的内容。本篇，我们就来学习编程的另一个方面——前端。
相关代码已经上传至作者的个人gitee：前端学习代码: 前端学习喜欢请支持一下
目录
前端介绍
在信息技术领域，‘前端’（Front-End）特指软件系统中直接面向最终用户、负责呈现信息与处理交互的部分。其核心职责在于实现用户界面（UI）与用户体验（UX），将业务逻辑和数据通过视觉化、可操作的形式有效传达给用户。前端开发聚焦于用户感官可直接触及的层面，包括布局结构、视觉样式、动态效果及交互逻辑的实现。
生活中常见的前端主要分为：Web页面、PC端程序页面、移动端APP页面
HTML的结构
HTML的介绍
HTML 语言是超文本标记语言
超文本例如：文本、声音、图片、视频、表格、链接
标记：由许许多多的表现组成。
HTML页面是运行在服务器上的。
HTML 代码代码是由 "标签" 构成的。
形如:
<body>hello</body>标签名 (body) 放到 < > 中
大部分标签成对出现. <body> 为开始标签, </body> 为结束标签.
少数标签只有开始标签, 称为 "单标签".
开始标签和结束标签之间, 写的是标签的内容. (hello)
开始标签中可能会带有 "属性". id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码)
<body id="myId">hello</body>HTML的基本结构
HTML的基本标签如下：
<html>
<head>
<title>第一个页面</title>
</head>
<body>
hello world
</body>
</html>上图所示的代码是一个双标签页面。
双标签：标签有开始有结束
其中：
html: 标签是整个 html 文件的根标签(最顶层标签)
head: 标签中写页面的属性.
body: 标签中写的是页面上显示的内容
title: 标签中写的是页面的标题.
以上部分构成一个DOM树
所有标签都是html的子标签。head和body是兄弟标签，head和title是父子标签。
每一个标签相当于一个对象
目前我们可以尝试在记事本上编写代码（后续我们会配置IDE来编写代码），以上代码复制倒记事本后将文件名后缀改为html保存，就可以在浏览器中运行了。
vscode开发环境配置搭建
接下来我们来配置一个自己的IDE前端开发环境。
除了vscode以外idea和subline也是前端的IDE，不过vscode是企业级的开发工具，因此学习vscode是十分有必要的
下载路径：下载 Visual Studio Code - Mac、Linux、Windows
下载安装后，可以新建选择自己的文件下进行编写
主要插件介绍：
：界面中文简体设置
：HTML代码编写支持
：在vscode内将代码运行起来
安装好后在代码右键找到View In Browser，点击
：通过它在vscode中直接打开浏览器。当你对内容做修改的时候对代码右键点击open with live server就可以直接刷新
目前针对于HTML的vscode配置到这里结束了。
vscode如何快速生成框架
按住！然后回车就会生成如图所示的框架代码
<!DOCTYPE html><!--指定HTML版本为5--><html lang="en"> <!--指定当前页面内容为英文--><meta charset="UTF-8"><!--解码规则-->
<!--渲染效果按照IE浏览器最高版本展示-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--移动端适配-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
<!--<title>Document</title>是HTML文档头部的一个标准元素，它定义了：
浏览器标签页中显示的标题
搜索引擎结果中显示的标题
浏览器收藏夹中保存的页面名称-->HTML标签
注释标签
注释不会显示在界面上. 目的是提高代码的可读性.
<!-- 我是注释 -->ctrl + / 快捷键可以快速进行注释/取消注释.
标题标签
有六个, 从 h1 - h6. 数字越大, 则字体越小
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>段落标签：p
把一段比较长的文本粘贴到 html 中, 会发现并没有分成段落.例如以下前端代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像
素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css
中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同
的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的
移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确
实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，
苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着
同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是
这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五
花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
</p>
<p>
还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中
1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。关于
这点，在文章后面的部分还会讲到。
</p>
<p>
在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的
定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 /
独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该
设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，
也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在
些许的兼容性问题，所以我们现在还并不能完全信赖这个东西，具体的情况可以看下这篇文章。
</p>
</body>
</html>结果为：
注意:
1、p 标签之间存在一个空隙
2、当前的 p 标签描述的段落, 前面还没有缩进. (未来 CSS 会学)
3、自动根据浏览器宽度来决定排版.
4、html 内容首尾处的换行, 空格均无效.
5、在 html 中文字之间输入的多个空格只相当于一个空格.
6、html 中直接输入换行不会真的换行, 而是相当于一个空格.
换行标签：br
br 是 break 的缩写. 表示换行.
br 是一个单标签(不需要结束标签)
br 标签不像 p 标签那样带有一个很大的空隙.
<br/> 是规范写法. 不建议写成 <br>
如以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
在css中我们一般使用px作为单位，<br/>
在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，
那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不
同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我
们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，
如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随
着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，
分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，
这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素
密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，安卓设备上的一个css像素相
当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
</p>
</body>
</html>结果为：
换行标签的间隙比段落标签间隙要小
格式化标签
加粗: strong 标签 和 b 标签
倾斜: em 标签 和 i 标签
删除线: del 标签 和 s 标签
下划线: ins 标签 和 u 标签
实际应用中该效果多数使用CSS来完成
图片标签: img
img 标签必须带有 src 属性 . 表示图片的路径
<img src="rose.jpg">此时要把 rose.jpg 这个图片文件放到和 html 中的同级目录中.
如果不指定路径的情况下需要将图片放到与html一样的文件夹下，否则需要指定路径
如：
./xxx.png
./xxx/xx.png
../xxx.png
img 标签的其他属性：
alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.
title: 提示文本. 鼠标放到图片上, 就会有提示.
width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡.
border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.
注意:
1. 属性可以有多个, 不能写到标签之前
2. 属性之间用空格分割, 可以是多个空格, 也可以是换行.
3. 属性之间不分先后顺序
4. 属性使用 "键值对" 的格式来表示.
关于目录结构:
对于一个复杂的网站, 页面资源很多, 这种情况可以使用目录把这些文件整理好.
1) 相对路径: 以 html 所在位置为基准, 找到图片的位置.
同级路径: 直接写文件名即可 (或者 ./)
下一级路径: image/1.jpg
上一级路径: ../image/1.jpg
2) 绝对路径: 一个完整的磁盘路径, 或者网络路径. 例如
磁盘路径 D:\rose.jpg
网络路径 https://images0.cnblogs.com/blog/130623/201407/300958470402077.png
超链接标签: a
href: 必须具备, 表示点击后会跳转到哪个页面.
target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开
<a href="http://www.baidu.com">百度</a>超链接的几种形式
外部链接: href 引用其他网站的地址
<a href="http://www.baidu.com">百度</a> 内部链接: 网站内部页面之间的链接. 写相对路径即可.
先建立一个html1，然后同目录一个html2
<!-- 1.html -->
我是 1.html
<a href="2.html">点我跳转到 2.html</a>
<!-- 2.html -->
我是 2.html
<a href="1.html">点我跳转到 1.html</a>空链接: 使用 # 在 href 中占位.
<a href="#">空链接</a>下载链接: href 对应的路径是一个文件. (可以使用 zip 文件)
<a href="test.zip">下载文件</a>网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中)
<a href="http://www.sogou.com">
<img src="rose.jpg" alt="">
</a>锚点链接: 可以快速定位到页面中的某个位置
<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one">
第一集剧情 <br>
第一集剧情 <br>
...
</p>
<p id="two">
第二集剧情 <br>
第二集剧情 <br>
...
</p>
<p id="three">
第三集剧情 <br>
第三集剧情 <br>
...
</p>禁止 a 标签跳转:
<a href="javascript:void(0);"> 或者
<a href="javascript:;">表格标签table
基本使用
table 标签: 表示整个表格
tr: 表示表格的一行
td: 表示一个单元格
th: 表示表头单元格. 会居中加粗
thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的) tbody: 表格得到主体区域.
table 包含 tr , tr 包含 td 或者 th
表格标签有一些属性, 可以用于设置大小边框等. 但是一般使用 CSS 方式来设置.这些属性都要放到 table 标签中.
align 是表格相对于周围元素的对齐方式. align="center" (不是内部元素的对齐方式)
border 表示边框. 1 表示有边框(数字越大, 边框越粗), "" 表示没边框.
cellpadding: 内容距离边框的距离, 默认 1 像素
cellspacing: 单元格之间的距离. 默认为 2 像素width / height: 设置尺寸.
注意, 这几个属性, vscode 都提示不出来.
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500"
height="500">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>10</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>11</td>
</tr>
</table>合并单元格
跨行合并: rowspan="n"（行）
跨列合并: colspan="n"（列）
步骤
1. 先确定跨行还是跨列
2. 找好目标单元格(跨列合并, 左侧是目标单元格; 跨行合并, 上方是目标单元格)
3. 删除的多余的单元格
列表标签
主要使用来布局的. 整齐好看.
无序列表[重要] ul li , .
有序列表[用的不多] ol li
自定义列表[重要] dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题, 下面有几个围绕着标题来展开的.
自定义列表(参考小米官网下方)
快捷方式：当我们输入ul>li*n的时候生成n行列表。就像下图：
ul>li*4结果为：
HTML列表类型详解
1. 无序列表 <ul>
无序列表用于表示没有特定顺序的项目集合，默认使用实心圆点作为项目符号。
Disc（实心圆点）：默认样式
Circle（空心圆环）：使用
list-style-type: circle;Square（实心方块）：使用
list-style-type: square;None（无符号）：使用
list-style-type: none;
2. 有序列表 <ol>
有序列表用于表示有顺序或序列的项目集合，默认使用数字作为序号。
数字（默认）：1, 2, 3...
大写字母：A, B, C...（使用
type="A"）小写字母：a, b, c...（使用
type="a"）大写罗马数字：I, II, III...（使用
type="I"）小写罗马数字：i, ii, iii...（使用
type="i"）
3. 自定义列表 <dl>
自定义列表用于表示术语及其定义，包含：
<dt>：术语（Definition Term）<dd>：术语的定义（Definition Description）
start的应用
基本功能：
start属性用于设置有序列表的起始编号值默认值：如果不指定start属性，列表默认从1开始编号
与type属性配合：start属性可以与type属性一起使用，控制不同编号类型的起始值
与value属性的区别：
start属性应用于<ol>元素，设置整个列表的起始编号value属性应用于<li>元素，设置单个列表项的编号并影响后续项
实际应用：常用于分页列表或在不同位置继续同一个列表
注意：
元素之间是并列关系
ul/ol 中只能放 li 不能放其他标签, dl 中只能放 dt 和 dd li 中可以放其他标签.
列表带有自己的样式, 可以使用 CSS 来修改. (例如前面的小圆点都会去掉)
举例说明：
<!-- 无序列表 -->
<h3>无序列表</h3>
<ul>
<li>诗华</li>
<li>清泉美亚</li>
<li>阑夜</li>
</ul>
<h3>有序列表</h3>
<ol>
<li>诗华</li>
<li>清泉美亚</li>
<li>阑夜</li>
</ol>
<h3>自定义列表</h3>
<dl>
<dt>我的老婆们</dt>
<dd>诗华</dd>
<dd>清泉美亚</dd>
<dd>阑夜</dd>
</dl>结果为：
表单标签
表单标签是用户与服务器发生交互的途径
分成两个部分:
表单域: 包含表单元素的区域. 重点是 form 标签.
表单控件: 输入框, 提交按钮等. 重点是 input 标签
form标签
<form action="test.html">
... [form 的内容]
</form>描述了要把数据按照什么方式, 提交到哪个页面中.
关于 form 需要结合 服务器 & 网络编程 来进一步理解.
input标签
各种输入控件, 单行文本框, 按钮, 单选框, 复选框.
type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.
name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一.
value: input 中的默认值.
checked: 默认被选中. (用于单选按钮和多选按钮)
maxlength: 设定最大长度.
（1）文本框
<input type="text">（2）密码框
<input type="password">（3）单选框
性别:
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女注意: 单选框之间必须具备相同的 name 属性, 才能实现 多选一 效果
（4）复选框
爱好:
<input type="checkbox"> 吃饭
<input type="checkbox"> 睡觉
<input type="checkbox">打游戏（5）普通按钮
<input type="button" value="我是个按钮">目前按钮是没有反应的，这部分需要之后学习JavaScript才能深入学习
<input type="button" value="我是个按钮" onclick="alert('hello')">（6）提交按钮
<form action="test.html">
<input type="text" name="username">
<input type="submit" value="提交">
</form> 提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送
（7）清空按钮
<form action="test.html">
<input type="text" name="username">
<input type="submit" value="提交">
<input type="reset" value="清空">
</form>
清空按钮必须放在 form 中. 点击后会将 form 内所有的用户输入内容重置
（8）选择文件
<input type="file">点击选择文件, 会弹出对话框, 选择文件.
label标签
搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验
for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的)
<label for="male">男</label> <input id="male" type="radio" name="sex">select标签
下拉菜单
option 中定义 selected="selected" 表示默认选中
<select>
<option>北京</option>
<option selected="selected">上海</option>
</select>注意：可以给的第一个选项, 作为默认选项
<select>
<option>--请选择年份--</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
</select>textarea 标签
<textarea rows="3" cols="50">
</textarea> 文本域中的内容, 就是默认内容, 注意, 空格也会有影响.
rows 和 cols 也都不会直接使用, 都是用 css 来改的.
无语意标签
div 标签, division 的缩写, 含义是 分割span 标签, 含义是跨度
就是两个盒子. 用于网页布局
div 是独占一行的, 是一个大盒子.
span 不独占一行, 是一个小盒子
<div>
<span>咬人猫</span>
<span>咬人猫</span>
<span>咬人猫</span>
</div>
<div>
<span>兔总裁</span>
<span>兔总裁</span>
<span>兔总裁</span>
</div>
<div>
<span>阿叶君</span>
<span>阿叶君</span>
<span>阿叶君</span>
</div>Emmet 快捷键
HTML中有很多方便的快捷键，这里给大家推荐几个常用的快捷键
快速输入标签
input[tab]快速输入多个标签
div*n[tab]标签带id
div#sex[tab]
标签带类名
div.sex[tab]
标签带子元素
ul>li*3[tab]标签带兄弟元素
span+span标签带内容
div{hello}标签带内容（编号）
div{$.hello}HTML的特殊字符
有些特殊的字符在 html 文件中是不能直接表示的, 例如:
空格:
 
小于号: <
<大于号: >
>按位与:
&参考资料：HTML特殊字符编码对照表
参考资料：使用 HTML 构建 Web
参考资料：HTML（超文本标记语言）
本期内容就到这里了，后续针对前端的内容我们将学习CSS等新内容。
喜欢请点个赞支持一下，谢谢
封面图自取;
