HTML入门08

产品形态

• 第一种：pc端和移动端共用一个域名的，比如

  • 华为：https://www.huawei.com/cn/?ic_medium=direct&ic_source=surlent

  • 苹果：https://www.apple.com/cn/?afid=p238%7C11DPVC7K_mtid_18707vxu38484&cid=aos-cn-kwsg-brand

• 第二种：pc端和移动端用两个域名的，pc端和移动分别做了两套，比如：小米、京东、淘宝，一般域名中带有m的都是移动端。

  • 京东pc：https://www.jd.com/

  • 京东移动： https://m.jd.com/

  • 小米pc：https//www.mi.com/

  • 小米移动：https://m.mi.com/

• 总结：什么时候共用一套，什么时候用两套？

  • 当结构比较简单的时候，我们可以共用一套。当结构比较复杂我们就可以写两套。

pc端和移动端的区别

• 事件上的区别：pc端有鼠标，所以会有与鼠标相关的事件：比如点击、滑过等。但是移动端没有鼠标，只有与手指相关的一些事件，比如滑屏，左滑、右滑等事件
• 浏览器兼容性：pc端需要考虑各个浏览器的兼容性问题，比如：火狐、谷歌、ie等，但是移动端不需要考虑各个浏览器的兼容问题，它的内核就是webkit和谷歌一样。但是移动端需要考虑适配问题，因为各个手机屏幕不一样大，而且机型不同，有时候也会有一定的兼容问题。

设计稿的尺寸

• 640x1136的宽度(单屏的页面)?参照iphone5手机分辨率:320*2

• 750x1334的宽度(单屏的页面)?参照iphone6手机分辨率:375*2

• 414x 736的宽度(单屏的页面)?参照iphone6plus?手机分辨率:414*3

新增标签

• header 头部 nav导航 footer底部 article文章 aside侧边栏 section区分大模块 figure配图 figcaption配图说明 video视频 audio音乐

 <header>头部</header>
    <footer>底部</footer>
    <nav>导航</nav>
    <article>文章</article>
    <aside>侧边栏</aside>
    <figure>
        <img src="" alt="配图">
        <figcaption>配图说明</figcaption>
    </figure>
    <section>大区域，跟div一样</section>
    <mian>主要内容</mian>
    <!-- preload:当你打开页面的时候就开始加载资源，如果不写就是点击的时候加载 -->
    <video src="212.mp4" controls autoplay loop preload></video>
    

兼容性

<audio controls>
 <!-- 会自上而下执行，如果前面执行，后面的就不执行了 -->
    <source src=”http://demo.mimvp.com/html5/take_you_fly.ogg” />
    <source src=”http://demo.mimvp.com/html5/take_you_fly.mp3″ />
    <source src=”http://demo.mimvp.com/html5/take_you_fly.wav” />
</audio>

新增的表单元素

<h3>新增的h5表单元素</h3>
    <!-- 数字 -->
    <input type="number">
    <!-- 搜索 -->
    <input type="search">
    <!-- 电话 -->
    <input type="tel">
    <!-- 颜色 -->
    <input type="color">
    <!-- 范围 -->
    <input type="range">
    <!-- 上传文件 -->
    <input type="file">
    <!-- 日期 -->
    <input type="date">
    <!-- 邮件 -->
    <input type="email">

css3需要增加的私有前缀

-webkit-border-radius:50%; //谷歌
      -moz-border-radius:50%;    //火狐
      -ms-border-radius:50% ;    //ie
      -o-border-radius:50%;      //欧朋
      border-radius:50% ;    //标准写法

css3补充：

• order-radius 也有四个值，顺序也是按照顺时针，border-radius:50%; 圆角 或者那个值写成宽度的一半（前提：宽高一样）
• box-shadow：
  • 第一个值：阴影水平偏移
  • 第二个值：阴影垂直偏移
  • 第三个值：阴影的模糊度(模糊的距离)
  • 第四个值：阴影的大小
  • 第五个值：颜色
  • 第六个值：默认是outset inset 内阴影
  • 注意：可以写多个阴影，但是要用逗号隔开

box-shadow: 0 0 50px 1px rgb(185, 88, 194) inset,0 0 50px 1px rgb(88, 146, 194);

渐变

• 渐变可以分为两种：
  • 线性渐变（Linear Gradients）
  • 径向渐变（Radial Gradients）

1. 线性渐变 默认是从上到下

.box{
  background:linear-gradient(red,green);
  background:-webkit-linear-gradient(red,green);
}

2. 从一个方向到另一个方向（left 、right 、bottom、top）

background:linear-gradient(left,red,green);
background:-webkit-linear-gradient(left,red,green); 

3. 对角的，两个方向可以进行组合，比如下面的就是从左上角到右下角

background:linear-gradient(left top,red,green);
background:-webkit-linear-gradient(left top,red,green);

4. 还可以是角度

background:linear-gradient(90deg,red,green);
background:-webkit-linear-gradient(90deg,red,green);

5. 可以来自由分配颜色的占比，用百分号

background: -webkit-linear-gradient(red 50%,black 50%);

径向渐变：默认的形状是椭圆，至少得有两个颜色值。

形状：ellipse 椭圆（默认），circle（圆）

.box{
        width:400px;
        height:600px;
        margin:0 auto;
        background:radial-gradient(circle,red,green);
        background:-webkit-gradient(circle,red,green);

    }

小案例，晴空

        body,html{
            height: 100%;
            overflow: hidden;
            background:radial-gradient(200px at right top,red, yellow, gray);
            /* 200px 是圆的半径 right top是右上角开始 red是圆心颜色 yellow是外圈颜色  gray是超出范围颜色  */
        }

视口

我们不加视口的时候，模拟移动端，body的宽度默认是980px,并不是手机屏幕的宽度，如果想要把咱们的页面在手机屏幕中显示完全，就会进行缩放，这样的话，里面的文字等就会看不清楚，为了避免这种情况，通常咱们会加视口，让页面的宽度等于手机屏幕的宽度。
在写移动端的时候一定要加上下面的代码，快捷键：meta:vp + tab

<meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

媒体查询

@media 针对不同媒体类型可以定制不同的样式规则。 例如：你可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则。 但是这些多媒体类型在很多设备上支持还不够友好。

@media not|only mediatype and (expressions) { CSS 代码...; }

• 媒体类型
  

      /* min大于等于  max小于等于 */
        @media screen and (max-width:1000px) and (min-width:900px){
            div{
                width:200px;
                background-color: blueviolet;
            }
        /* }
        @media screen and (max-width:500px){
            div{
                width:100px;
                background-color: brown;
            } */

写移动端时需要注意，如果版心写死的话，当宽度小于版心时下方会出现滚动条，解决方法为，在小于版心宽度时，将版心宽度设为100%

@media all and (max-width:1080px) {
    .md{
        width:100%;
    }
    /* 去除版心造成的下方滚动条效果 */
}

h1设置字体大小后，上下会有一点空隙，解决方法

h1{
line-height:1;
}