HTML5+CSS3(1)

HTML5

HTML5作为html的第五次重大修改,作为新的HTML语言,具有新的元素,新的属性及行为。

广义的HTML5=HTML5本身+css+javascript HTML5具有兼容性,但具有发展趋势。

HTML5新增语义化标签

  • header:头部标签
  • nav:导航标签
  • article:内容标签
  • section:块级标签
  • aside:侧边栏标签
  • footer:脚部标签

HTML5+CSS3(1)_第1张图片

注意事项

1.新增标签可以使用多次

2.IE9以下的版本具有兼容性问题,需要转换成块级元素





    
    
    Document
    



    
头部
内容
块级
脚部

HTML5+CSS3(1)_第2张图片

HTML5多媒体标签

audio 音频标签

HTML5+CSS3(1)_第3张图片

  • autoplay:自动播放
  • controls:控件
  • loop:无限次循环播放
  • src:播放的地址




    
    
    Document



    
    

    
    



HTML5+CSS3(1)_第4张图片

video视频标签

HTML5+CSS3(1)_第5张图片





    
    
    Document
    



    
    


    
    


HTML5+CSS3(1)_第6张图片

HTML5新增input表单及属性

HTML5+CSS3(1)_第7张图片





    
    
    Document
    



    
  • 账号:
  • 邮箱:
  • 网址:
  • 日期:
  • 时间:
  • 月份:
  • 周:
  • 数值:
  • 手机号:
  • 搜索框:
  • 颜色

HTML5+CSS3(1)_第8张图片

CSS3选择器

属性选择器

HTML5+CSS3(1)_第9张图片

类选择器 属性选择器 伪类选择器的权值为10




    
    
    Document
    


    

HTML5+CSS3(1)_第10张图片

结构伪类选择器

HTML5+CSS3(1)_第11张图片

nth-chid(n):n可以为公式 也可以为关键字 even(偶数) old(奇数)



    
    
    Document
    



    

HTML5+CSS3(1)_第12张图片





    
    
    Document
    



    
百度 新浪 360 阿里巴巴 span标签 span标签 span标签 span标签

p标签

p标签

p标签

p标签

HTML5+CSS3(1)_第13张图片
两者最大的不同:前者只要是父元素中的子元素,都可以选中,后者可以选中指定元素

伪元素选择器

HTML5+CSS3(1)_第14张图片





    
    
    Document
    



    
一个

HTML5+CSS3(1)_第15张图片

注意事项

  • ::before和::after属于伪元素选择器,content属性必须要写
  • 伪元素不存在dom结构
  • 伪元素选择器为行内元素
  • 权重为1

伪元素选择器制作字体图标





    
    
    Document
    



    

HTML5+CSS3(1)_第16张图片

注意:目录下必须要fonts文件

transition:过渡

HTML5+CSS3(1)_第17张图片

简写

transition:过渡的属性 过渡的时间 过渡的时间曲线 过渡效果何时开始

注意事项

  • 过渡效果是一种效果从另一种效果的变化
  • 过渡有多组属性之间用逗号相隔
  • all代表所有的属性
  • 过渡的效果在自身元素上

    
        过渡
        
    
    
        

HTML5+CSS3(1)_第18张图片

你可能感兴趣的:(html5,css3)