HTML和CSS技巧提高

HTML5和CSS3提高

HTML5的新特性

新特性 有兼容性问题，基本上都是IE9+以上版本的浏览器才支持。

div对于搜索引擎来说是没有语义的

HTML5新增的语义化标签

1. <header>:头部标签
2. <nav>:导航标签
3. <article>: 内容标签
4. <section>:定义文档某个区域  相当于大号的div
5. <aside>: 侧边栏标签
6. <footer>:尾部标签

 

注意：  1. 这种语义化标准主要是针对搜索引擎的；

1. 这些新标签页面中可以使用多次；
2. 在IE9中，需要把这些元素转换为块级元素；
3. 其中，我们移动端更喜欢使用这些标签；
4. HTML5还增加了很多其他标签，我们后面再慢慢学。

HTML5新增的多媒体标签

包含两个：1.  <auto>音频

 

1. <video>视频，<video>元素支持三种视频格式：MP4,Webm和Ogg。尽量使用mp4格式。

 <video src=”文件地址” controls=”controls”></video>

<video width:”320” height=”240” controls>

      <source src=”movie.mp4” type=”video/mp4”>

      <source src=”movie.ogg” type=”video.ogg”>

您的浏览器不支持video标签

 </video>

怎样下载视频： 在对应的网页中点击右键，选择“检查”，点击该视频找到对应的video中的src，右键，选择open in new tab， 打开视频后右键另存为。

 

<video src=”media/mi.mp4” autoplay=”autoplay” muted=”muted></video>谷歌浏览器可以自动播放。

.video{

    width: 100%;

}

   <!-- autoplay表示自动播放，muted表示允许谷歌自动播放 controls表示显示控件，比如播放按钮等

         loop表示自动循环播放 poster表示等待加载时显示的图片 -->

3. 音频<audio>

支持三种音频格式

<audio src=”文件地址” controls=”controls”></a

 

<audio  controls=”controls”>

   <source src=”happy.mp3” type=”audio/mpeg”>

   <source src=”happy.oog” type=”autio/ogg”>

您的浏览器暂不支持<autio>标签

</audio>

 

 

 

4. 新增搜索表单

 <input type=”search”>

 

5. HTML5新增的表单属性

   

属性 -->

     <form action="">

ltCSS3的新特性

有兼容性问题ie9才支持

1. 新增选择器

1. 属性选择器  （也有权重，权重值为10）

Input[value]{ color: pink; }

1. 结构伪类选择器

    主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素。

nth-child(n) 选择某个父元素的一个或多个特定的子元素。

n可以是数字，关键字和公式

n如果是数字就选择第n个子元素，里面数字从1开始...

n可以是关键字：even偶数，odd奇数

n可以是公式

隔行变色

/*  nth-child与nth-of-type的区别

1. nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配。
2. nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子。
3. 无序列表nth-child更多。

/* nth-child与nth-of-type的区别 */

 

1.1. 伪元素选择器（当在盒子里插入一些装饰的小标签时使用）

 ::before  在元素内部的前面插入内容

 ::after    在元素内部的后面插入内容

Content: ‘’;  是必填内容

注意：

before和after创建一个元素，但是属于行内元素

新创建的这个元素在文档树中是找不到的，所以我们称为伪元素

 

语法：element::before{}

before和after必须有content属性

before在父元素内容的前面创建元素，after在父元素内容的后面插入

伪元素选择器的应用：

/* 伪元素选择器使用场景2: 仿土豆效果 即一个图片有遮

后面两种伪元素 清除浮动算是第一种额外标签法的一个升级和优化

1. 图片模糊处理

   CSS3滤镜filter   filter CSS属性将模糊或颜色偏移等图形效果应用于元素。blur是函数。

filter:函数(); 例如：filter:blur(5px); blur模糊处理 数值越大越模糊。

im

    /* blur是函数，数值越大越模糊 */

    filte

1. 计算盒子宽度width: calc函数

calc()此CSS函数让你在声明CSS属性值时执行一些计算

 width: calc(100% -80px);

括号里可以使用+-*/

/* 计算盒子宽度width: calc函数  */

 

4. CSS3过渡（重点） 谁做过渡给谁加

  过渡动画：是从一个状态渐渐的过渡到另外一个状态，经常和：hover一起搭配使用

  transition:要过渡的属性 花费时间运动曲线 何时开始；

1. 属性：想要变化的css属性 宽度高度 背景颜色 内外边距都可以。如果想要所有属性都变化过渡，写一个all就可以了。
2. 花费时间：单位是秒（必须写单位）比如0.5s
3. 运动曲线：默认是ease（可以省略）
4. 何时开始：单位是秒（必须写单位）可以设置延迟触发时间 默认是0s（可以省略）

/* css过渡 */

比如进度条就利用过渡 css过渡练习-进度条 */

.b

1. H5介绍

  广义的html5是html5本身+css3+javascript

ar {

    width: 150px;

    height: 30px;

    border: 1px solid red;

    border-radius: 7px;

    padding: 1px;

}

.bar_in {

    width: 50%;

    height: 100%;

    background-color: red;

    transition: all .7s;

}

.bar:hover .bar_in {

    width: 100%;

}

<!-- css过渡练习-进度条 -->

    <div class="bar">

        <div class="bar_in"></div>

 

罩层*/

.tudou::before{

    content: '';

    /* 隐藏遮罩层 */

    display: none;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0,0,0,.4) url(image...) no-repeat center;

}

 

.tudou:hover::before{

      display: block;

}

/* 伪元素选择器使用场景3: 清除浮动 */

.clearfix:before,.clearfix:after{

    content: '';

    display: table;

}

.clearfix:after{

    clear: both;

}

<!-- 伪元素选择器使用场景1：伪元素字体图标 -->

       <div></div>

       <!-- 伪元素选择器使用场景2: 仿土豆效果 即一个图片有遮罩层 -->

       <div class="tudou">

           <img src="" alt="">

       </div>

       <!-- 伪元素选择器使用场景3: 清除浮动 -->