html-基础学习篇

###DAY1

1、axure 原型工具
ui 1个人
微信小程序 + css动画 + uniapp + webApp
2、html5、css3
网页的整体框架
骨头
装饰
难点：布局
3、linux
基本命令、权限
部署项目
apache
购买阿里云

小组(3~5) 多人合作开发项目

4、JavaScript脚本
es5 + DOM + BOM
ecmascript5
DOM 文档对象模型
BOM 浏览器对象模型

难点：数组、对象、函数、高级面向对象(继承、原型链)

5、jQuery
请求
http

难点：ajax、$.ajax

6、html5api
标签
拓展：音、视频、画布、本地储存

第一阶段项目
看点资讯

7、es6
es5的版本升级(语法升级)

8、vue
语法基于es6
vue生态系统
axios http请求
vuerouter 路由 (页面的跳转)
element-ui

9、项目
难点：技术的选取、业务逻辑

10、swagger
java接口
前端调用访问

前后端分离开发

原型 + 重构 + 请求 + 部署

1、软件安装
1) 编辑器
vscode(sublime)
2) 浏览器
火狐(谷歌)
3) 金山打字通

2、笔记保存的目录
太原理工/html5/day01/note.txt

3、html
1. 超文本标记语言
2. 超文本与普通文本的区别
普通文本
纯字符
超文本
纯字符、音视频、图片、音乐
3. 浏览器是按照从上往下的顺序解析html文件
4. 语法错误时，浏览器不报错
5. 以.html和.htm作为后缀

4、环境
编辑器
vscode
浏览器
火狐
服务器
阿里云

5、代码开发流程
1. 在vscode里面编写代码
2. 右击当前文件open in browser
3. 浏览器查看效果
4. 将本地代码上传到阿里云服务器
5. 通过公网ip访问部署的代码

6、http协议
HTTP协议采用了请求/响应模型
请求
请求体、请求头、请求数据
请求数据
let obj = {name:‘tom’,age:23}
请求头
content-type:‘application/json’
content-type:‘application/x-www-form-urlencoded’
响应
响应体、响应头、响应内容
响应内容
ajax res.data
axios res.data.data
接口所需要的数据格式不同时
json字符串 “{‘name’:‘tom’,‘age’:23}”
查询字符串 name=tom&age=23

url 统一资源定位符
    协议://ip:port/path
    http://47.93.255.92/hello.html

7、html结构
1. 元素(标签)的构成
开始标签、内容、结束标签
2. 块级元素与行内元素
块级元素
div、html、body、h1~h5、p…
1) 独占一行空间
2) 高度有内容决定、宽度占满窗口
3) 宽、高可以设置
行内元素
span、i、bold…
1) 与其他元素共享一行空间
2) 宽高由内容决定
3) 宽高无法设置
块级元素可以嵌套其他元素
行内元素不可以嵌套块级元素

hello world

122212

hello world