一个月从0转战前端 - 1 - Html
学习四部曲：
1.HTML是结构骨架。
2.CSS是装饰。
3.JS是交互、逻辑。
4.vue前端常用框架。
只梳理个人认为常用的可以快速上手写项目的知识。不含介绍历史、弃用、废话
工具
webstorm (idea的web版)； 用惯了AS/idea界面一样，直接可以上手
常规：vscode
必装插件：Chinese、auto remake tag、open in browser(右键预览)、live service、easy less
HTML基础
-
<html>：语言<html lang="en">en或zh-CN -
<head>：定义网站的介绍、编码方式、搜索关键词等（不会出现在页面上）
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="Author" content="">
<meta name="Keywords" content="厉害很厉害" />
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
<title>Document</title>
</head>
-
<body>：主体（会出现在页面上） -
排版：
1.<h1> <h6>标题；
2.<p>段落，align="left center right" 对齐方式，（文本标签，只能放文本、图片、表单）
3.<hr />分割线，<hr color="red" align="left" size="5" width="500"/>
4.<div>和<span>“容器=viewGroup”，div换行、大容器、容器级，span不换行、小容器、文本级。
5.<center>居中标签 -
字体与超链接
1.转义符：空格 、小于<、大于>、符号&``&、双引号"、单引号'
2.<i>icon
3.<b>加粗
4.超链接:<a href="http://www.baidu.com" target="_blank">百度</a>；
跳到某一个id上。href="xx.html#id"
href:目标url、target="_blank"新页面、"_self"原页面(默认)、title悬停文本 -
图片
<img>：
1.src地址、width height：宽高、title悬停文本、alt无法展示默认文字、align：bottom（默认）、center、top、left、right对齐方式 -
列表
1.无序列表<ul>，无序列表中的每一项是<li>（ul：unordered list、li：list item）
2.有序列表<ol>，里面的每一项是<li>
3.定义列表<dl>,<dt>标题，<dd>列表项
-
表格
<table>、行<tr>、项<td>
-
表单
<form> action=“login.php”:指定表单处理程序，method="get/post"
1.输入框<input type="text" /> type：text、password、radio、checkbox、checked、hidden、button、submit、reset、image、filesize="50"最多输入50个readonly只读
2.下拉列表标签<select>是否多选，默认单选multiple="multiple"展示的条数size="3"
3.选项：<option>预选中：selected
4.<label>将文字和选项一起监听点击事件<input type="radio" name="sex" id="nan" /> <label for="nan">男</label> -
H5表单
<form>
新增<label >email: <input type="email" name="email" required></label>
email邮箱输入、color颜色选择器、url、tel、number、range进度条、time、data等等
1.提示hint：placeholder
2.正则限制输入：pattern
3.必填：required
4.获得焦点autofocus
5.事件：oninvalid()验证失败提示事件
下拉列表：
<input type="text" list ="mydata"/>
定义mydata数据：
<datalist id="myData">
<option>本科</option>
<option>研究生</option>
<option>不明</option>
</datalist>
- 多媒体
1.音乐播放：<audio src="有何不可 - 许嵩.mp3" controls></audio>
controls控制条（没有看不到进度条）、loop循环播放、preload预加载、autoplay自动播放
2.视频播放：<video>同上
3.滚动字幕：<marquee behavior="alternate" direction="down" width="300" height="200" bgcolor="#8c5dc1">我了</marquee>direction：方向；behavior：slide（只移动一次）、scroll（循环，默认值）、alternate（来回循环）
HTML5
H5 = Html升级版 + CSS升级版 + JS API升级版
H5中新增的语义标签：<section> 区块 、<article> 文章、<header> 、 <footer>、 <nav> 导航、 <aside> 侧边栏、<figure> 表示媒介内容分组、<time> 日期
DOM操作
-
获取元素（约等于findViewById） （“class”里定义id）
var selector = document.querySelector("selector")
点击事件：selector.onclick = function(){ } -
自定义属性（必须以data开头）
<div class="box" title="盒子" data-my-name="zidingyi">div</div>
<script>
var box = document.querySelector('.box');
//自定义的属性 需要通过 dateset[]方式来获取
console.log(box.dataset["myName"]); //打印结果：zidingyi
//设置自定义属性的值
box.dataset["content"] = "aaaa";
</script>
拖拽(用到的时候再看吧)
draggable="true" 拖拽监听：ondragstart - ondragend
定位
获取定位时，浏览器会自动选择位置的最优解。（GPS/WIFI/IP/手机信号基站）
- navigator.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息
- navigator.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息
successCallback/errorCallback:成功失败回调。
options:经纬度、position.coords.latitude纬度、longitude经度
数据存储
window.sessionStorage 存在内存中 5M
所以页面关闭就没有了
window.localStorage 存在本地 20M
存在硬盘或者浏览器的内存中（清除得手动删除）
二者都只能存储key-value的字符串
setItem(key, value);、getItem(key);、removeItem(key);、clear();、key(n);
网络状态监听
offline、online
window.addEventListener('online', function () {
alert('网络连接建立！');
});
应用缓存
cache manifest缓存清单
不常用，缺点较明显，只适合简单的单地址页面、数据请求量不高。
蔚来公司氛围 182人发布