前端前景
就业前景
- 行业前景
- 每月平均薪资：应届生1.3w
- 前端岗位城市：北京、上海、广州、深圳、杭州、其他城市
- 前端常见能做的事
- 小程序
- 网站
- 管理系统
- 隧道管理系统、图书馆管理系统、…
- 数据可视化
- 表格、条形图、柱状图、3D、…
- 游戏
- App
- uniapp、RN、Flutter
准备
第一个前端程序
- 两步完成一个网页程序
- 第一步：使用记事本，编写代码
- 注意事项
- 文件后缀名以.html结尾
- 在编写代码的过程中，<>必须是英文状态下编写
- 注意事项
- 第二步：以浏览器方式打开
- 右键打开方式，以浏览器方式打开即可
- 第一步：使用记事本，编写代码
前端工具的选择与安装
- 浏览器
- 火狐浏览器
- 谷歌浏览器
- 简洁大方、打开响应速度快
- 开发者调试工具
- IE浏览器
- 开发者工具
- WebStorm
- VSCode
- 推荐选择
- 打开速度快
- 使用方便
- VSCode中文语言包安装
- 拓展-搜索Chinese-点击安装
- 推荐选择
- HbuilderX
- VSCode开发者工具快捷键
- VSCode打开文件夹与创建文件
- 选择文件夹
- 拖拽文件夹
- VSCode常用快捷键列表
- 代码格式化：Shift+Alt+F
- 向上或向下移动一行：Alt+Up或Alt+Down
- 快速复制一行代码：Shift+Alt+Up或Shift+Alt+Down
- 快速保存:Ctrl+S
- 快速查找:Ctrl+F
- 快速替换:Ctrl+H
- VSCode打开文件夹与创建文件
HTML5简介与基础框架
HTML5介绍
- HTML5用来描述网页的一种语言，被称为超文本标记语言。用HTML5编写的文件，后缀以.html结尾
- HTML是一种标记语言，标记语言是一套标记标签。标签是由尖括号包围的关键字，例如：
- 标签由两种表现形式
- 双标签，例如:
<html></html> - 单标签，例如:
<img>
HTML5的DOCTYPE声明
- DOCTYPE是document.type(文档类型)的缩写。是H5的声明位于文档的最前面，处于标签之前。它是网页必备组成部分，避免浏览器的怪异模式。
html5基本骨架
- html标签
- 定义HTML文档，我们浏览器看到这个元素后就明白这是个HTML文档了，所以你的其他元素要包裹在它里面，标签限定了文档的开始点和结束点。
<!DOCTYPE html><html></html> - head标签
- head标签用于定义文档的头部。文档的头部描述了文档的各种属性和信息，包括文档的标题、在Web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
<!DOCTYPE html><html><head></head></html> - body标签
- body元素定义文档的主体，它包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。它会直接在页面中显示出来，也就是用户可以直观看到的内容。
<!DOCTYPE html><html><head></head><body>我会显示在浏览器中</body></html> - title标签
- 可定义文档标题
- 它显示在浏览器窗口的标题栏或状态栏上
<title>标签是<head>标签中唯一必须要求包含的东西，也就是说写head一定要写title<title>的增加有利于SEO的优化（SEO是搜索引擎诱惑的英文缩写，通过对网站内容调整满足引擎的排名需求）
<!DOCTYPE html><html><head><title>第一个页面</title></head><body>我会显示在浏览器中</body></html> - meta标签
- meta标签是一种单标签，用来描述一个HTML网页文档的属性，关键词等，例如：charset=“utf-8”是说当前使用的是utf-8编码格式，在开发中我们经常会看到utf-8,或是gbk，这些都是编码格式，通常使用utf-8。
<!DOCTYPE html><html lang='en'><head><meta charset="UTF-8"><title>我的网页</title></head><body></body></html>
标签之标题
标题介绍与应用
- 标题是通过
<h1>-<h6>标签进行定义的。生成h1-h6快捷键h$*6
<h1>定义最大的标题<h6>定义最小的标题
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> - VSCode插件
- 快速打开浏览器
- 拓展->搜索open in browser->点击安装->在.html文件内右击鼠标会出现两个使用方式，上面一个是默认浏览器打开，下面一个是自己搜索浏览器打开即可
- 正确使用标题
- 请确保将HTML标题只用于标题
- 谨慎使用标题
- 应该将
<h1>用作主标题（最重要的），其后是<h2>(次重要的)，再其次是<h3>，以此类推。
- 标题标签位置摆放
- 在标签中添加属性：align=“left|center|right”默认居左
标签之段落、换行、水平线
- 段落是通过
<p>标签定义的
<p>这是一个段落</p>
<p>这是另一个段落</p>- 换行
- 如果希望在不产生一个新段落的情况下进行换行（新行），就使用
<br>``<br/>元素是一个空的HTML元素。
<p>这个<br>段落<br>演示了分行的效果</p><br> <br/>后面的<br/>中的 ‘/’ 可加可不加，但是加上 ‘/’ 比较规范 - 如果希望在不产生一个新段落的情况下进行换行（新行），就使用
- 水平线
<hr/>标签是一种单标签，在HTML页面中创建水平线
<hr color=""width=""size=""align=""/>‘width’和’size’单位是’px’
- 属性
- color:设置水平线的颜色
- width:设置水平线的长度
- size：设置水平线的高度
- align：设置水平线的对齐方式（默认居中），可取值left|right