一、布局视口

使用的是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 属性 与表单关联