这是我参与2022首次更文挑战的第17天，活动详情查看：2022首次更文挑战」。
大前端
1. HTTP
1.1 认识WEB
1.1.1 浏览器Browser
用内核（即渲染引擎，解析HTML与CSS，读取网页内容，渲染代码，计算显示方式，呈现页面）区别于js引擎
- webkit
- Chrome
- Safari
- ms
- IE
- moz
- Firefox
- o
- Opera
1.1.2 标准WEB
规范代码编写，通过不同浏览器也尽可能展示一致内容
提高页面加载速度
使网站更易于维护
降低网站流量费用
让Web的发展前景更广阔
内容能被更广泛的设备访问
更容易被搜寻引擎搜索
1.2 搜索引擎优化SEO
Search Engine Optimization
1). 网页title 标题
首页标题：网站名(产品名) - 网站的介绍
28个字以内
2). Keywords 关键字
限制在6～8个关键词左右，电商类网站可以多些
3). Description 网站说明
字符数含空格不超过 120 个汉字
补 title keywords 未能充分的表述
用英文逗号 关键词1 , 关键词2
- 结构HTML身体
- 表现CSS着装
- 行为JavaScript动作
2. IDE
2.1 开发工具
- Dreamweaver
- SublimeText
- WebStorm
- HBuilder
- VScode
2.2 Emmet语法
页面骨架：！ 按下tab键
多个子元素：ul>li*6
序列化：h$*6
内容化：h｛学生｝*6
带名：.div #div
复制粘贴上下行：光标到对象，shift+alt+↑或↓
多行选择：光标到对象，shift+alt+按下拖动光标
跳转行数：ctrl + g
查询：ctrl + h
替换：ctrl +alt + enter
3. HTML
3.1 简史History
3.1.1 HTML
1.0→2.0→3.2→4.0→4.01→5.0
（Hyper Text Markup Language）超文本标记语言
超越文本（可以添加视频video、图片images、动画animation）
超链接
3.1.2 XHTML
1.0→1.1
EXtensible HyperText Markup Language可扩展超文本标签语言
作为一种 XML 应用被重新定义的 HTML
规范更严格更纯净（包括标签小写、属性值双引号），现代HTML的参照
主流浏览器支持
3.2 语法
3.2.1 文档类型（!doctype html）
3.2.2 页面语言lang
根据根据lang属性来设定不同语言的css样式，或者字体
告诉搜索引擎做精确的识别
让语法检查程序做语言识别
帮助翻译工具做识别
帮助网页阅读程序做识别
3.2.3 <head>
- 字符编码charset
计算机识别和储存的各种文字
- 标签页标题title
3.2.4 <body>
元素=<开始标签>+内容+<结束标签>
3.3 常用元素Element
即结构（可理解为身体各部分器官）
标签关系：嵌套、并列
3.3.1 双标签tags
3.3.1.1 块级元素block.
- div、p、h1~h6、li、ul、ol塌陷 三个表区别
1.list item列表布局整齐
ul先到先得 ol有序排列
【dl>dt>dd】
2.table表格展示数据
【caption table>th/tr>td（thead标题 tbody数据 tfoot脚注）】 【border/cellspacing/cellpadding
表格边框/相邻单元格外边间距/单元格内外边间距三参为0（去重叠可用border-collapse）】
【跨单元格 柱列colspan 横行rowspan】
3. form表单收集用户信息
表单域action--服务器脚本
表单控件type="date" name maxlength
提示信息
<label for="">扩大热区<input id="">
textarea/seclect/option
checkbox的name=“ [ ]”加中括号表示含多个值
3.3.1.2 行内标签inline
- span、a、em、strong、del、ins、quote
- title、style、script、table、form value与placeholder区别
都有提示功能
value，光标置于输入框提示还在，从语义可知，值的一部分，随表单一起发送
placeholder，光标置于输入框提示被取代，不会随表单一起发送（相当于背景、用户体验佳）
3.3.2 单/void标签
3.3.2.1 行内块标签inline-block
一行可多个，但有白缝
- img尺寸显示
- .jpg
- .png
- .gif 格式、插与背景、底侧空白
格式区别（优先考虑webp>jpg>png>svg>png24>png8>gif）
1 . png透明，文件大，色彩多
png24，控制在40kb，色彩少
png8，文件小，色彩单一
【小LOGO、透明背景】
2 . jpg不透明，文件小，色彩中
图片大小控制在40~200kb
【轮播/广告、大背景/产品】
3 . gif可单一透明，色彩少【动】
4 . 谷歌webp
【可透明可动态，且文件小】
*5 . 字体图徽.ico
【可用于标签页title，<link rel="icon"】
^6 . 缩放矢量.svg，<svg>
【依赖代码，可编辑，SEO爬虫可读取】
''7 . 京东压缩.dpg
【压缩50%大小，兼容平台、浏览器】
插图和背景区别
前者为产品展示，移动位置靠盒模型margin padding
后者为小图标或超大背景图，只能通过background-position
去除图片底侧空白
不让img input行内块与父盒子基线对齐
vertical-align：top（大图居中middle） 或 display：block
- input、td、br、hr
3.3.2.2 meta
- name：keywords、description
- http-equiv：content-type
3.3.2.3 link
media引入资源
响应布局，样式较多时，应用多套
<link href=“.css” media="screen and (min-width=320px) >
<link href=“.css” media="screen and (min-width=460px) >
