目录
学习方法
前端要怎么学？
前端位于整个项目首要要开发的内容，直接和用户打交道，实现页面的展现和交互功能，所以在分类上俗称为前端。随着软件技术的日趋成熟，前端内容也呈现爆炸式的增长，和革命性的变革，前端借鉴后端的发展经验，也开始应用分层体系，也开始术有专攻，解决一个专项的问题，也开始变得庞大和臃肿。从简单单一功能向框架过渡。今天的前端技术已经变得不简单，不亚于后端开发，甚至难度超越了后端开发。![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-udWFoW0m-1622524547943)(RackMultipart20210601-4-m99z7q_html_5588926e3af02795.png)]](https://i-blog.csdnimg.cn/blog_migrate/1b0dbbd9e3a17c7627a8ea29479dc099.png)
但从整体来看（前端占软件开发总量的百分之十左右，地位可见一斑）；从技术的含金量来看（如：业务功能是核心，远超UI的作用；分布式缓存redis的作用远超vue前端），从职业的发展路径来看（通向架构师之路，大都由后端工程师晋升的，前端几乎没有）；从薪资的天花板来看（随着年头的拉长，后端工程师的薪资是前端的几倍），后端优势远大于前端。所以对于大家而言，千万不要把重心放在前端技术上，会用，会查，会改才是正确的定位！
前端技术栈
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mEFXt4Ps-1622524547953)(RackMultipart20210601-4-m99z7q_html_29c2cd04815f81b1.png)]](https://i-blog.csdnimg.cn/blog_migrate/cdfd6cccd2465bf1208588a474a86e66.png)
HTML超文本标记语言实现页面展现，形成静态网页
CSS层叠样式表实现页面美化
JS javascript脚本语言实现页面前端和后端的数据交互，形成动态网页
React facebook出品前端、移动端JavaScript框架
Angular google 出品基于TypeScript的开源 Web 应用框架
Vue 国人出品，阿里收购构建用户界面的渐进式框架，自底向上开发
NodeJS 基于 Chrome V8 引擎的 JavaScript 运行环境
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TcUHCCVZ-1622524547957)(RackMultipart20210601-4-m99z7q_html_e60c47cf6b814a43.png)]](https://i-blog.csdnimg.cn/blog_migrate/c75d6d06b71f7886dc51307b1ab8dab4.png)
目前市场主流是ES6标准，但TypeScript可能会成为趋势，如Vue 3.0选用的语言则为TypeScript。TypeScript将带来JavaScript的华丽转身，迈入强语言行列，所以其发展趋势不容小觑。
Vue Element Admin 是通过Vue框架结合饿了吗的ElementUI，并在其基础上实现了后台管理的基本功能，企业在其基础上，直接二次开发，添加业务，实现敏捷编程。
HBuilderX
介绍
HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。 HBuilder的编写用到了Java、C、Web和Ruby，本身主体是由Java编写。
它基于Eclipse，所以顺其自然地兼容了Eclipse的插件，用过Eclipse的开发者使用HBuilder会非常顺手。形成HBuilderX开发前端内容，Eclipse/Idea开发后端内容的格局。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gy8DZUVs-1622524547963)(RackMultipart20210601-4-m99z7q_html_cbd41ff6ec1f9ed.png)]](https://i-blog.csdnimg.cn/blog_migrate/e2709c98395e2fbe68b275c63c0550b0.png)
特点：快，是HBuilder的最大优势，通过完整的语法提示和代码块模板等，大幅提升HTML、js、css的开发效率。
安装
官网：https://www.dcloud.io/hbuilderx.html
安装app版本，整体下来近600m。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aCwWb0K7-1622524547965)(RackMultipart20210601-4-m99z7q_html_d9384e25bb3db9fc.png)]](https://i-blog.csdnimg.cn/blog_migrate/0bed15a0b3dc979dfb0684ef424ab66f.png)
主题
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LmK9UvgO-1622524547968)(RackMultipart20210601-4-m99z7q_html_31078ba115c2b9d6.png)]](https://i-blog.csdnimg.cn/blog_migrate/c9d1cd6b452dd938f9bc764b840d64e1.png)
字体
默认字体i和l分不清，换成Verdana字体。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-29eA5TsR-1622524547970)(RackMultipart20210601-4-m99z7q_html_4c609fba3fe0aabd.png)]](https://i-blog.csdnimg.cn/blog_migrate/7dac66278bc7c119666528be134f6f46.png)
备注字体颜色
默认灰色看不清晰，可以换成黑色，直接编辑Default.xml，修改下面3行的颜色，重新启动HBuilderX即可。
项目结构
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dcjsbpVq-1622524547979)(RackMultipart20210601-4-m99z7q_html_229c5bd6bd7af05.png)]](https://i-blog.csdnimg.cn/blog_migrate/1f9467da8c8d192bc0f7f54f53d81f74.png)
jQuery语法支持
HBuilderX对javascript、html、css、vue支持很好，这些无需选择默认支持，同时也对jQuery有很好的支持，但需要单独选择。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A09oy11O-1622524547982)(RackMultipart20210601-4-m99z7q_html_c5965d15cf1b373c.png)]](https://i-blog.csdnimg.cn/blog_migrate/ce4513279e4b56c76c598e053224a90c.png)
Web概述
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jla0yree-1622524547984)(RackMultipart20210601-4-m99z7q_html_96371a0fb852cc09.png)]
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RMHrS3jT-1622524547985)(RackMultipart20210601-4-m99z7q_html_1972cf7982ce6751.png)]](https://i-blog.csdnimg.cn/blog_migrate/9a6042a67a71eed8fc901665f7682b01.png)
静态页面HTML
概念
HTML（Hyper Text Markup Language）超文本标记语言，是做网站页面的最基础的开发语言，由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。由W3C组织发展壮大。它的功能很弱，连脚本语言都算不上，类比java这种强语言，那就是一个天上一个地下，但它小而美，网站开发它却是霸主。
HTML历史上有如下版本：
HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布
HTML 2.0：1995年11月作为RFC 1866发布
HTML 3.2：1997年1月14日，W3C推荐标准
HTML 4.0：1997年12月18日，W3C推荐标准
HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准
HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手
结构
文档声明，用来声明HTML文档所遵循的HTML规范。
头部分，用来存放HTML文档的基本属性信息，比如网页标题、编码格式，这部分内容会被网页优先加载。
体部分，用来存放网页要显示的数据。
声明网页标题
用来通知浏览器使用哪个编码来打开HTML文档，打开的方式一定要和保存文件时使用的编码一致，避免出现中文乱码问题。
入门案例
<!doctype html>
<html>
<head>
<title>quickstart</title>
<!-- 防止中文乱码 -->
<meta charset="UTF-8"/>
</head>
<body>
hello html ~
你好呀
<!--
ctrl c / v 复制粘贴
ctrl x / d 删除
ctrl 上/下 箭头 调整位置
-->
</body>
</html>
语法
- HTML标签
HTML是一门标记语言，标签分为开始标签和结束标签，如<a></a>。
如果开始和结束中间没有内容，可以合并成一个自闭标签
- HTML属性
-
HTML标签都可以具有属性，属性包括属性名和属性值，如果有多个属性，要以空格隔开。属性的值要用单引号或者双引号引起来。
如：<a href="" target="" name="" id=""></a>
- HTML注释
格式：<!-- 注释内容 -->
注意：不能交叉嵌套！
- 如何在网页中做空格和换行
换行：<br/>
空格：在HTML中，多个空格会被当成一个空格来显示。常用标签
标题标签
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3eLuFsRU-1622524547986)(RackMultipart20210601-4-m99z7q_html_a749c2ef6bea9da5.png)]](https://i-blog.csdnimg.cn/blog_migrate/5584132dbe45fcea114acda94a9a048d.png)
<!doctype html>
<html>
<head>
<title>01</title>
<meta charset="utf-8"/>
</head>
<body>
<!-- 标题标签:
包括:h1~h6
-->
<h1 align=”center”>我是1号标题</h1>
<h2>我是2号标题</h2>
<h3>我是3号标题</h3>
<h4>我是4号标题</h4>
<h5>我是5号标题</h5>
<h6>我是6号标题</h6>
</body>
</html>
列表标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题标签</title>
</head>
<body>
<!-- 列表标签:
ol + li 有序
ul + li 无序
type 定义列表符号,默认是 disc 小圆点
-->
<ul type="circle">
<li>中国</li>
<li>美国</li>
<li>小日本</li>
</ul>
<ul type="square">
<li>中国</li>
<li>美国</li>
<li>小日本</li>
</ul>
<ul type="disc">
<li>中国</li>
<li>美国</li>
<li>小日本</li>
</ul>
</body>
</html>
图片标签
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KKgW0jTg-1622524547990)(RackMultipart20210601-4-m99z7q_html_ac5bdafd79ffcc99.png)]](https://i-blog.csdnimg.cn/blog_migrate/e735cccafd059f8ecadeb3a81e1371c4.png)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题标签</title>
</head>
<body>
<!-- 图片标签:
img向网页中引入图片 (相对路径/绝对路径)
border:边框
width:宽度
height:高度
-->
<img src="1.jpg" border="10px" width="50%" height="30%">
</body>
</html>
超链接标签
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dAvzn1OD-1622524547992)(RackMultipart20210601-4-m99z7q_html_a68b0a50ee70e0c2.png)]](https://i-blog.csdnimg.cn/blog_migrate/b89433bf4ed4524c0cf373216496c6fa.png)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题标签</title>
</head>
<body>
<!-- 超链接标签
href 指定要跳转的位置
target 指定要打开的方式
-->
<a href="http://www.baidu.com" target="_blank">点我</a>
<a name="_top">java从入门到精通</a>
<h6>你好java</h6>
<h6>你好java</h6>
<h6>你好java</h6>
<h6>你好java</h6>
<h6>你好java</h6>
<h6>你好java</h6>
<h6>你好java</h6>
<h6>你好java</h6>
<h6>你好java</h6>
<h6>你好java</h6>
<h6>你好java</h6>
<h6>你好java</h6>
<a href="#_top">回到顶部</a><!-- 获取_top的位置,像书签 -->
<br><br><br><br>
</body>
</html>
Input标签
<input type="text" /> 普通文本框
<input type="password" /> 密码
<input type="radio"/>男 单选框
<input type="number" /> 数字值
<input type="week" /> 日历
<input type="checkbox" />杨幂 复选框
<input type="button" value="点我一下"/>
<input type="submit" value="提交数据"/>
表格标签
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A1cQU74W-1622524547994)(RackMultipart20210601-4-m99z7q_html_e87275fbddfa8f12.png)]](https://i-blog.csdnimg.cn/blog_migrate/ed4bd07eda5382fc2146b5bd4ef983d3.png)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>各种标签</title>
</head>
<body>
<!--table表格标签
tr 表格里的行
td 表格里的列
border:表格的边框
cellspacing:单元格的间距
bgcolor:背景颜色
width:宽度
align:位置
-->
<table border="1px" cellspacing="0" bgcolor="antiquewhite" width="30%" align="center">
<tr>
<td colspan="2">11</td> <!-- colspan是列合并,合并2列-->
<!-- <td>12</td> -->
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td rowspan="2">23</td> <!-- rowspan是行合并,合并2行 -->
</tr>
<tr>
<td>31</td>
<td>32</td>
<!-- <td>33</td> -->
</tr>
</table>
</body>
</html>
表单标签
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xaGk0vCh-1622524547996)(RackMultipart20210601-4-m99z7q_html_bad7f2d6e9b5dcb6.png)]](https://i-blog.csdnimg.cn/blog_migrate/452e169bfb1247f4c50fb412a8ac5bf4.png)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>form表单</title>
</head>
<body>
<!-- get方式提交的数据都在地址栏里 http://127.0.0.1:8848/cgbtest/3.html?user=&pwd= -->
<!-- <form method="get"> -->
<!-- post提交安全不显示数据 -->
<form method="post">
<table border="1px" bgcolor="bisque" cellspacing="0" width="35%" cellpadding="3">
<th colspan="2">注册表单</th>
<tr>
<td>用户名:</td>
<td><input type="text" name="user"/></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="pwd"/></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" name="repwd"/></td>
</tr>
<tr>
<td>昵称:</td>
<td><input type="text" name="nick"/></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="text" name="mail"/></td>
</tr>
<tr>
<td>性别:</td>
<td>
<!-- 不配name属性,性别是多选!! sex属性的值按照1 2 提交-->
<!-- input中,type如果是radio或者checkbox的话,不配置value属性的话,默认提交on -->
<input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="2"/>女
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<!-- name必须配,多选 ,提交的值就是1 2 3 -->
<input type="checkbox" name="like" value="1"/>篮球
<input type="checkbox" name="like" value="2"/>足球
<input type="checkbox" name="like" value="3"/>排球
</td>
</tr>
<tr>
<td>城市:</td>
<td>
<select name="city"> <!-- 实现多选,按name提交数据 1 2-->
<option value="1">北京</option>
<option value="2">上海</option>
</select>
</td>
</tr>
<tr>
<td>头像:</td>
<td>
<input type="file" name="path"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit">提交</button>
</td>
</tr>
</table>
</form>
</body>
</html>
其他标签
<!-- 其他标签 div p span -->
<div>大家好</div>
<div>大家好</div>
<div>大家好</div>
<p> Nice</p>
<p> Nice</p>
<p> Nice</p>
<span> hello</span>
<span> hello</span>
<span> hello</span>
永和门店管理系统
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>永和大王账单</title>
</head>
<body>
<div>顾客联</div>
<div>请您留意取餐账单号</div>
<div>自取顾客联</div>
<div>永和大王（北三环西路店）</div>
<div>010-62112313</div>
<div>--结账单--</div>
<div>账单号：P000009</div>
<div>账单类型：食堂</div>
<div>人数：1</div>
<div>收银员：张静</div>
<div>开单时间：2018-04-17 07:24:11</div>
<div>结账时间：2018-04-17 07:24:22</div>
<hr style="border : 1px dashed ;" />
<div>
<table>
<tr>
<td width="40">数量</td>
<td width="130">品项</td>
<td>金额</td>
</tr>
<tr>
<td>1</td>
<td>油条豆浆套餐</td>
<td>7.00</td>
</tr>
<tr>
<td> </td>
<td>1 X --非矾油条</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>1 X --现磨豆浆（热/甜）</td>
<td> </td>
</tr>
</table>
</div>
<hr style="border : 1px dashed ;" />
<div>
<table>
<tr>
<td width="140">支付宝花呗一元早餐</td>
<td width="30">1</td>
<td width="30" align="right">-3.00</td>
</tr>
<tr>
<td>合计</td>
<td> </td>
<td width="30" align="right">4.00</td>
</tr>
<tr>
<td>支付宝</td>
<td> </td>
<td width="30" align="right">1.00</td>
</tr>
<tr>
<td>支付宝补贴</td>
<td> </td>
<td width="30" align="right">3.00</td>
</tr>
</table>
</div>
<hr style="border : 1px dashed ;" />
<div>打印时间：2018-04-17 07:24:23</div>
<hr style="border : 1px dashed ;" />
<div>根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描时请保持小票平整。</div>
<div><img src=""></div>
<div>官网：www.yonghe.com.cn</div>
<div>加盟热线：86-21-60769397 或 86-21-60799002</div>
<br/>
</body>
</html>
学生管理系统
H5播放视频
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7cCgjolu-1622524547999)(RackMultipart20210601-4-m99z7q_html_cb3592d41d9441da.png)]](https://i-blog.csdnimg.cn/blog_migrate/e329c9fc263cd7ebb70fa9b6b73301a1.png)
<html>
<head>
<meta charset="utf-8">
<title>H5网页技术</title>
</head>
<body>
<!-- 加载mp3音频
注意::浏览器默认规定视频音频不会自动播放，因为自动播放会占用流量
-->
<audio controls="controls">
<source src="jay.mp3"></source>
</audio>
<!-- 加载mp4 视频
注意::不能按网站方式访问,无法打开视频,直接按本地文件打开方式可以正常播放
http://127.0.0.1:8848/cgb/video.html
-->
<video controls="controls">
<source src="yibo.mp4"></source>
</video>
<img src="1.jpg"/>
<img src="D:/1.jpg"/>
</body>
</html>
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
