前端HTML5 新标签

学习目标：

• 新语义化标签 
• 表单新增标签
• 多媒体标签

---

学习内容：

一、新增语义化标签

header	头部
nav	导航条
main	内容
section	内容
footer	底部
aside	侧边栏
time	时间标签
mark	标记标签

1.什么是语义化，有什么好处？

      1).在没有CSS样式的情况下对代码结构一目了然

      2).有利于SEO

力扣回答：

a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构

b. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重

c. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页

d. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化

二、表单新增标签

input-type:属性	color : 颜色
	date: 日期
	range: 范围
	number: 数字
	time: 时间
	email：邮箱

三、多媒体标签

1. 网站标题图标：

           eg: <link rel="shortcut icon" href="url type=image/x-icon">

      网页添加关键字：作用  有利于搜索引擎优化 SEO：

          eg:  <meta name="keywords" content="四立级 书籍 ">

     网页描述内容：

          eg:<meta name="description" content="这是一个关于阅读的网页">   

     2.!important强制提高优先级

     3. (1).音频 audio :

音频 audio	格式	MP4、WebM、Ogg    type:文件的MIME格式
	属性	src:放置音频的路径
		control:控制台
		autoplay:自动播放
		loop:循环播放
		proload:预加载效果
		muted:静音

       (2).音频 video :

音频 video	格式	MP3、O更改、Wav    type:文件的MIME格式mp3-mpeg
	属性	src:放置音频的路径
		control:控制台
		autoplay:自动播放
		loop:循环播放
		proload:预加载效果
		poster:封面
		muted:静音

        (3).source: 指定视频音频兼容模式