HTML5 // CSS3 笔记一 h5简介 // 常用标签 // 布局差异

一.介绍 // 兼容性

1-1. 介绍

1-2. 兼容性

 

1-3. 兼容前缀

-webkit- // -moz- // -o- // -ms-

eg：

    -webkit-box-shadow : 0 0 0 2px #000 ;

        -moz-box-shadow : 0 0 0 2px #000 ;

           -ms-box-shadow : 0 0 0 2px #000 ;
             -o-box-shadow : 0 0 0 2px #000 ;

    

兼容性查询网站：https://caniuse.com/

 

---

 

 二.新标签 

 2-1.结构标签

• header  头部
• nav  导航
• aticle 内容
• section  盒子
• hgroup 标题标签盒子，放h标签
• figure 定义独立流的内容，有文字有图片时用，可以单独出现
• figcaption 不能单独出现，只能在figure里面；对图片的描述 
• aside 侧边栏
• footer 底部

  2-1.特殊结构标签

• mark 重点显示（有黄色背景高亮/行内元素）
• ruby 注释
• rt 和 rp ，rp要写在rt中

• <ruby>槑 <rt> mei <rp>mei</rp> </rt> </ruby>

• meter 表示尺度

• <meter min='0' max='100' value='60' low='20' hight='90'></meter>

• progress 进度条 不给value时 为动态

• <progress min='0' max='100' value='60'></progress>

• dialog 对话框    给open才会显示

• <dialog open> 
      啦啦啦
  </dialog>

• details 描述文档的细节部分 和summary配合使用 可以给样式 如高宽
• summary 
• <wbr><wbr/>定义文本在何处换行，不用

---

三.布局差异

3-1.传统布局

 

 3-2.HTML5布局

 

 3-3.意义