一、布局视口
使用的是CSS像素
二、视觉视口
物理像素（屏幕上的一个发光点）
三、默认在PC端，1CSS像素 = 1物理像素
可以通过Ctrl+滚轮缩放，本事是改变了 CSS像素 与 物理像素 的比例！
放大 -- 1CSS像素容纳更多的物理像素，内容看起来变大，但是布局视口在变小
缩小 -- 1物理像素容纳更多的CSS像素，内容看起来变小，但是布局视口在变大
四、基于JS监控布局视口的变换
视口宽度：document.documentElement.clientWidth;
视口高度：document.documentElement.clientHeight;
实施监控视口的变换
window.onresize()
五、基于CSS选择器监控布局视口的变换
@media screen and (断点){
选择器及其样式
}
注意事项：
1. and 前后必须有空格
2. 存在样式覆盖的问题，建议 @media screen 样式使用 !important
3. 手机端默认视口一般是 980px,设置完美视口
六、设置完美视口使用<meta name="viewport" content="width=device-width">
完美视口: 就是手机屏幕的分辨率，浏览器出厂时已经设置。 目的让移动端的内容看起来和PC端的一致。
七、语义
1.程序员：降低维护成本
2.浏览器：即便没有加载CSS样式，文档结构仍然清晰
3.搜索引擎：更快收录网站
<header>....
表单：
属性 method : get -- 提交的数据会显示在地址栏
post -- 提交的数据不显示在地址栏
自动填充：
autocomplete
-- on 默认，会显示浏览器历史记录（用户已经提交成功的数据）
-- off 关闭自动填充
autofocus
自动获取输入焦点
pattern 自定义验证规则（正则）--- 不安全
保存用户输入的临时数据
formaction --- 临时保存的服务器地址
formnovalidate --- 保存时不验证
自定义验证的信息
inputDom.oninput = function(){
var res = 值是否合法;
if(res){
inputDom.setCustomValidity("");//正确需要使用空串重置
}else{
inputDom.setCustomValidity("错误提示信息");
}
}
表单域 form 属性
通过 form 属性 与表单关联