一.环境:
- HTML:称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可 以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。也就是任东西想放入网页都以标签的格式放入。
- HTML 解释器:ie,chorme等,可以在电脑手机等有解释器的设备展示。
- HTML W3C的标准:1. 结构(文字,列表,图片,声音等)由 HTML负责 2. 表现也叫样式(大小,颜色,字体等)由 CSS负责 3. 行为(显示,动画效果,事件等)由JavaScropt负责
- HTML 文件夹结构:
cn -存放中文网页文件
en -存放英文网页文件
images -存放图像文件
css -存放css样式表
js -存放js脚本
imagestudio -存放psd源文件
flash -存放flash文件
falshstudio -存放flash源文件
media -存放多媒体文件
font -存放自定义字体文件
project -存放工程项目类资料
temp -存放客户原始资料 - chorme:
下载地址:https://www.google.cn/chrome/
安装插件:三个点->更多工具->扩展程序->打开开发者模式->直接拖进网页内安装->启用
chorme应用商店:左上的扩展程序列表->打开chorme网上应用商店(要先装igg谷歌访问助手)->下载完后会自动安装
chorme的插件:
1>.igg谷歌访问助手 (crx文件)
2>.adBlock 屏蔽广告
3>.charset 网页编码转换
4>.Dark Reader 夜间模式
5>.GoFullPage-Full Page ScreenCapture 整个网页截图
6>.infinity 新标签页
7>.page ruler redux 屏幕尺子
8>.tampermonkey 脚本管理
9>.vue.js devtools Vue.js开发者工具
10>.chrome-color-picker 颜色拾取器
11>.划词翻译
12>.简悦-simpRead 简单阅览
二.工具:
- vscode下载 https://code.visualstudio.com/ 相应的系统版本。直接安装。
- 常用插件:
1>.html css support (html代码提示)
2>.html/css/javacript snippets (代码片段)
3>.auto rename tag (标签自动更名)
4>.auto close tag (标签自动关闭)
5>.material icon theme (图标主题)
6>.one dark pro (文件主题)
7>.code runner (代码运行)
8>.eslint (检测代码)
9>.format html in php (PHP中格式化HTML代码)
9>.highlight matching tag (代码高亮插件)
10>.html snippets (html代码片段)
11>.javaScript(es6) code snippets (javaScript(es6)代码片段)
12>.live server (代码直接运行)
13>.markdownlint (优秀的markdown 语法检查器)
14>.markdown preview enhanced (最火的markdown实时预览工具)
15>.path intellsense (路径提示)
16>.php debug (php调试)
17>.php docblocker (php注释)
18>.php extension pack (php扩展包)
19>.php intelephense (超好用 php 智能代码提示器)
20>.php namespace resolver (php命名空间解析)
21>.prettier-code formatter (更优秀的代码美化格化工具)
22>.vetur (格式化功能 可能和eslint会有冲突)
23>.vue (vue提示)
24>.vue 3 snippets (vue3代码片段)
25>.vue - beautify (vue代码格式化)
26>. php intellisense (php 代码自动完成插件)
27>.open in browser (在默认浏览器打开当前文件)
27>.vim (快捷键)
三.运行原理:
浏览器->解析域名->连接到对应的地址服务器->连接成功后->发送http请求->结果返回给客户浏览器->浏览器解释并展示
网站开发流程:网站需求分析阶段(功能清晰完善,时间以及财务支出,竞争对手),网站技术分析阶段,网站页面策划阶段,网站设计开发阶段,网站测试改进阶段。