菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 陈紫怡-20221022-H5C3 [打印本页]

---

作者: Dasmondlicht    时间: 2022-10-22 23:41
标题: 陈紫怡-20221022-H5C3
一、今日学习内容：

• HTML5
  
  • HTML新特性
    
    • 增加了一些新的标签、表单和表单属性，这些特性都有兼容性问题，基本要IE9+以上的浏览器，如果不考虑兼容性问题，可以大量使用
      
  • HTML5新增标签
    
  • 常用H5标签
    
    • 头部标签 <header></header>
      
    • 导航栏标签 <nav></nav>
      
    • 内容标签 <article></article>
      
    • 侧边栏标签 <aside></aside>
      
    • 块级标签 <section></section>
      
    • 底部标签 <footer></footer>
      
  • HTML5标签优缺点
    
    • 优点：便于搜索引擎来解析
      
    • 缺点：会有兼容性问题
      
  • HTML5新增input标签内type属性的属性值
    
    • <form action="">
      
      • <!-- 限制用户输入的内容必须是e-mail类型 --><input type="email"><br>
        
      • <!-- 限制用户输入必须为url类型 --><input type="url"><br>
        
      • <!-- 限制用户输入必须为日期类型 --><input type="date"><br>
        
      • <!-- 限制用户必须输入时间 --><input type="time"><br>
        
      • <!-- 限制用户必须输入月份 --><input type="month"><br>
        
      • <!-- 限制用户必须输入周 --><input type="week"><br>
        
      • <!-- 限制用户必须输入数字 --><input type="number"><br>
        
      • <!-- 搜索框 --><input type="search"><br>
        
      • <!-- 生成颜色选择表单 --><input type="color"><br>
        
      • <!-- 手机号码 -->
        
      • <!-- 号码都不尽相同，所以不能明确限制，要配合js和正则表达式来进行限制 --><input type="tel"><br>
        
    • 新增属性值
      
    • 注意 属性值为tel时，声明的input标签为电话号码输入，但全世界的号码都不尽相同，所以不能做出明确的限制，需要配合JS和正则表达式来进行限制。
      
  • HTML5新增表单属性
    
    • 表格
      
  • HTML5新增多媒体标签
    
    • <audio>标签 音频标签
      
      • 当前所支持的三种音频格式
        
      • 常用属性、属性值：
        
        • autoplay：autoplay；自动播放
          
        • controls：controls；向用户展示播放控件
          
        • loop：loop；重复循环播放
          
        • src:url；要播放音频的url地址
          
      • audio多格式轮询
        
    • <video>标签 视频标签
      
      • 当前视频标签所支持的三种
        
      • 相关属性和属性值
        
      • video多格式轮询
        
• CSS新增属性
  
  • css怪异盒模型
    
    • css3中可以通过box-sizing来制定盒模型，它有两个值，分别为content-box和border-box
      
    • box-sizing:content-box；盒子的大小是width+padding+border（默认值）
      
    • box-sizing：border-box；盒子大小为width；
      
      • 注意点：
        
        • 使用box-sizing：border-box；时，padding和border都不要超过盒子本身的宽高
          
  • css3新增选择器
    
    • 属性选择器
      
      • 概念：
        
        • 属性选择器可以根据元素的特定属性来选择元素，这样就不借助于类或者id选择器
          
    • 结构伪类选择器
      
      • 概念：
        
        • 结构伪类选择器主要是根据文档的结构来选择元素，通常用于根据父元素来选择里面的子元素的情况
          
        • nth-child(n)
          
          • n是数字的情况（n代表从0开始不断递增的数字）
            
          • n是关键字的情况
            
          • n是公式的情况
            
        • nth-child和nth-of-type的区别：
          
          • nth-child对父元素里面所有的子元素排序选择（序号是固定的），先找到第n个孩子，然后再看是否和相应元素匹配
            
          • nth-of-type对父元素里面的所有指定的子元素进行排序选择，先去进行相应元素的匹配，再排序去选择第n个元素
            

---

欢迎光临 菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)

Powered by Discuz! X3.4