学习HTML的第6天

一、表单元素

1、input 输入框， 行内块元素
2、type 输入框类型 text表示是一个文本输入框
3、placeholder 占位字符，用于提示输入框应该输入的内容
4、value 表示输入框中内容
5、name 属性，和后台服务器交互时，必须携带name属性，发送请求时的参数名
6、password 密码输入框，输入的内容不可见，以·的形式显示
7、 email 邮箱输入框
8、umber 数字输入框
9、 label 标签 和input一起使用，将label和input标签绑定到一起 for属性值就是input输入框的id值
10、单选 type=“radio” 表示一个单选选项处于同一组单选框只能选中一个值，将多个radio的name属性值设置为相同的值

二、viewport 视口设置

1、PC端浏览器会自动忽略这行代码，移动端浏览器会根据这行代码对页面视口进行设置
2、 width=device-width 设置视口宽度为设备屏幕宽度
3、initial-scale=1.0 设置视口默认缩放比例 1.0表示不缩放
4、user-scalable=no 设置页面不允许用户进行缩放
5、默认情况下，移动端浏览器在打开网页时为了显示全部内容，会将页面进行缩小，针对移动端设备专门设计一套网页，这种移动端页面就没有必要进行压缩了
viewport用于页面设置视口。是专门针对移动端浏览进行的设置
对于移动端网页，有两种实现方式
1.网站PC端页面和移动端页面完全分开做，根据用户访问的设备类型，给用户返回不同的页面(百度，淘宝，京东…国内大多数网站都是这种做法)
2.响应式页面布局，页面自身可以根据浏览器窗口的宽度进行不同的布局，在屏幕宽度到达某个临界点时，切换为另一种布局样式，在较宽的浏览器中显示PC布局，在较窄的移动端品目上显示移动端页面布局

3、媒体查询和响应式布局

• @media 设置媒体查询，设置一些样式仅在某些条件下生效
  媒体查询就是响应式页面的基础
  例子：
  @media (max-width:900px) {

    	main{
    		width: 600px;
    	}
    	
    	.box{
    		width: 33.33%;
    	}
    }
    
    @media (max-width:600px) {
    	
    	main{
    		width: 300px;
    	}
    	
    	.box{
    		width: 50%;
    	}
    }