html第五天

html5类型:

color    颜色类型
date     日期
datetime 日期
datetime-local  日期与时间
month    月份
week     周
time     时间
email    邮箱
number   数值
file     文件

H5中的新的表单元素和属性

datalist     规定输入框的选项列表

   <input  list="brow">
   <datalist id="brow">
      <option value="firefox"></option>
      <option value="chrome"></option>
      <option value="opera"></option>
      <option value="ie"></option>
   </datalist>

autofocus="autofocus"   自动获取焦点
required     输入框为空,验证提示
step        规定数字间隔,通常放在number当中
min --  max     规定类型内容的范围

  <input type="number" step="5" min="50" max="60">

  <input type="date" min="2022-04-01" max="2022-04-03">

outline: none;   去掉获取焦点时蓝色的线

box-sizing   定义如何计算一个元素的总宽度或者总高度

content-box
默认值:如果你设置一个元素的宽度为100px,那么这个元素的内容区域会有100px;并且任何边框和内边距的宽度都会被添加到最后绘制出来的元素宽度上
注:不包含margin

width(宽度)+padding(内边距)+border(边框)=总宽度

border-box
告诉浏览器,你要设置的边框和内边距是包含在width中的
也就是说,如果你设置一个元素的宽度为100px,那么这个100px会包含它的border和padding
注:不包含margin

div  box-sizing:border-box;       总宽度:200
     width:200px;
     border:10px
     padding:50px;

显示和隐藏:
display:none;  隐藏
display:block; 显示

隐藏的时候不会占用空间,也就是说该元素不但被隐藏了,而且该元素占用的空间也从页面中消失.

visibility:hidden;   隐藏
visibility:bisible;  显示

隐藏的时候会占用空间,也就是说该元素被隐藏时,该元素占用的空间不会从页面中消失

兼容
浏览器兼容性问题,是指因为不同的浏览器对同一代码有不同的解析,造成页面展示效果的不统一.

常见的浏览器内核:
Trident内核       Gecko内核      Blink内核     Webkit内核

IE: Trident内核  User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; rv:11.0) like Gecko
谷歌:Webkit内核   版本现在是Blink内核 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36
火狐:Gecko内核  
opera:Webkit内核   现在是Blink内核
360:IE和谷歌双内核
百度: IE内核
QQ浏览器:Trident内核 和  Webkit内核
safari  Webkit内核
常见的兼容性问题:
1.不同的浏览器的标签的自带的内外边距不同
解决:*{ margin:0; padding:0;}
2.当标签的高度小于10px;在IE6,IE7中会超出自己设置的高度.
解决:overflow:hidden;
3.图片默认有间距,而且使用内外边距清除也不好使.(一般出现在很多图片放在一起的时候)
解决:使用float进行布局

调整兼容性:
1.之前老版本浏览器(IE)
<!--[if IE]>  如果是IE    <![endif]-->
<!--[if IE 6]>  如果是IE6    <![endif]-->
<!--[if IE 7]>  如果是IE7    <![endif]-->

<!--[if gt IE 7]>  如果是IE7以上    <![endif]-->
<!--[if lt IE 7]>  如果是IE7以下    <![endif]-->
<!--[if gte IE 7]>  如果是IE7及以上    <![endif]-->
<!--[if lte IE 7]>  如果是IE7及以下    <![endif]-->
<!--[if !IE ]>  如果不是IE    <![endif]-->

    <!--[if IE]> 
        
        <link href="new_file.css" rel="stylesheet" type="text/css" />
        
    <![endif]-->    

2.css3样式太超前,有些浏览器不支持.
  -o-         opera
  -ms-        IE
  -moz-       火狐
  -Webkit-    谷歌

transform:
-o-transform:
-ms-transform:
-moz-transform:
-Webkit-transform:

css精灵
通常还被称为"css图像拼合"或者是"css贴图定位".
其实就是通过将多张图片融合到一张图片里,然后通过css background背景定位布置网页背景.
好处:降低http请求次数,增加了网站的性能
合适用在图片较多的网站,或者人流量大的网站
   

placeholder    input注释
letter-spacing   字间距