H5+CSS3

第一章 HTML5标签

1.1 废弃的标签

        .applet

        .big

        .center

        .font

        .frame

1.2 新增标签

1.2.1 语义和结构

        1.注释注解标签

<ruby>

        英雄

<rt> ying xiong </rt>

</ruby>

2.描述文档

<details>

<!--定义标题-->

<summary>中国医生</summary>

 本片根据2020年抗击新冠肺炎疫情真实事件改编。讲述中国各地的白衣逆行者在这场浩大战役中纷 纷挺身而出、争分夺秒、浴血奋战在武汉前线，不顾自身安危守护国人生命安全的震撼故事

</details>

3.进度条

<progress value ="0" max="100" id="pro">请升级浏览器</progress>

已完成<span id ="res">0%</span>

<script>

setInterval(function(){

var pro = document.getElementById('pro')

var res = document.getElementById('res')

pro.value++；

// provalue ++;

res.innerHTML=(pro.value / 100 * 100) +'%'

if(pro.value==100)

alert('上传完成')

clearInterval(t)

}

},500)

</script>

 4.导航链接标签 nav

<nav>

<a href = "#">首页</a>

<a href = "#">关于我们</a>

<a href = "#">新闻资讯</a>

<a href = "#">联系我们</a>

</nav>

5.布局结构标签 

        header 定义文档的页眉部分

        main 定义网页的主要内容部分

        section 定义文档中的区段

        article 文章内容部分

        aside 定义其所处内容之外的内容，个人理解 侧边栏

        footer 文档中的页脚部分

6.内嵌框架标签 iframe

src 定义显示文档的url地址

frameborder 是否显示框架周围的边框 0 表示不显示 1表示不显示

marginHeight 定义顶部和底部的边距

marginWidth 定义左侧和右侧的边距

scrolling 是否显示滚动条 yes 显示 | no 不显示 | auto 自动

1.2.2  媒体标签

a. 视频标签 video

controls 是否显示播放面板

autoplay 自动播放 由于浏览器会拦截自动播放声音的视频，因此需要加上 muted 属性

muted 静音输出

poster 在视频为播放前，显示的图像(封面)

loop 设置视频循环播放

<!---->

<video src="sucai/tianwmen.mp4" controls autoplay muted>

浏览器不支持该标签，请升级浏览器

</video>

<!--通过source标签引入视频资源-->

<video controls loop poster="sucai/shanheling.jpg">

浏览器不支持该标签，请升级浏览器

<source src="sucai/tianwen.mp4"type="video/mp4"/>

<source src="sucai/tianwen.ogg"type="video/ogg"/>

<source src="sucai/tianwen.webm"type="video/webm"/>

</video>

b. 音频标签

audio controls 是否显示播放面板

autoplay 自动播放 由于浏览器会拦截自动播放声音的视频，因此需要加上 muted 属性

muted 静音输出

loop 设置视频循环播放 

<audio id="music"src="sucai/wuji.mp3"controls loop></audio>