欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML5+CSS3基础知识汇总 (HTML5篇)

程序员文章站 2022-03-11 21:15:07
文章目录1. HTML5的介绍2. HTML5的优势3. HTML5前景趋势4. H5 新增语义化标签5.H5 新增多媒体标签5.1


HTML5+CSS3基础知识汇总 (HTML5篇)

1. HTML5的介绍

  1.1 HTML介绍
       万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改. 用于取代HTML4与XHTML的新一代标准版本,所以叫做HTML5
  1.2 HTML新增特性
        HTML5设计目的是为了在移动设备上多媒体。
        新增了新特性:语义特性,本地存储特性,设备兼容特性,连接特性,网页多媒体特性,三维、图形及特殊特性,性能与集成特性,CSS3特性。
  1.3 HTML5开发手者手册指南
        参考文献:https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML

2. HTML5的优势

  1. 提高可用性和改进用户的友好体验
  2. 更好的语义标签
  3. 可以给站点带来更多的多媒体元素(视频和音频)
  4. 可以很好的替代flash和Silverlight
  5. 当涉及到网站的爬取和索引的时候,对于SEO很友好
  6. 将被大量应用于移动端和应用程序
  7. 可移植性好

3. HTML5前景趋势

  • 移动优势
  • 游戏开发者领衔“主演”
    HTML5+CSS3基础知识汇总 (HTML5篇)

4. H5 新增语义化标签

以前布局,我们基本都用div来做。div对于搜索引擎来说,是没有语义的。
现在我们有了语义化标签。这种语义化标签主要针对搜索引擎。
HTML5+CSS3基础知识汇总 (HTML5篇)

	<!--头部标签-->
	<header></header>
	<!--导航标签-->
	<nav></nav>
	<!--内容标签-->
	<artical></artical>
	<!--块级标签-->
	<section></section>
	<!--侧边标签-->
	<aside></aside>
	<!--尾部标签-->
	<footer></footer>

注意:

  1. 这种语义化标签主要针对搜索引擎的。
  2. 这些新标签可以在页面中使用多次
  3. 在IE9中需要,需要把这些元素转换为块级元素
  4. 这些标签主要针对移动端开发。

5.H5 新增多媒体标签

  • 音频: <audio>
  • 视频: <video>

    使用它们可以很方便的在页面中嵌入音频和视频,而不再去使用flash和其他浏览器插件。

  5.1 <audio>音频标签

     5.1.1 音频格式

      当前,<audio>元素支持三种音频格式:HTML5+CSS3基础知识汇总 (HTML5篇)

     5.1.2 常用属性

HTML5+CSS3基础知识汇总 (HTML5篇)

     5.1.3 代码格式
	<!--第一种: 只能用一种格式-->
	<audio src="文件地址" controls="controls"></audio>
	<!--第二种:可以用多种格式-->
	<audio controls="controls">
		<source src="文件地址.ogg" />
		<source src="文件地址.mp3" />
		<source src="文件地址.wav" />
		您的浏览器暂不支持audio标签
	</audio>

   5.2 <video>视频标签

     5.2.1 视频格式

      当前,<video>元素支持三种视频格式:HTML5+CSS3基础知识汇总 (HTML5篇)

     5.2.2 常用属性
HTML5+CSS3基础知识汇总 (HTML5篇)
     5.2.3 代码格式
	<!--第一种: 只能用一种格式-->
	<video src="文件地址" controls="controls"></audio>
	<!--第二种:可以用多种格式-->
	<video controls="controls">
		<source src="文件地址.ogg" />
		<source src="文件地址.mp4" />
		<source src="文件地址.webM" />
		您的浏览器暂不支持video标签
	</video>

注意:

  1. 音频标签和视频标签使用基本一致。
  2. 浏览器支持情况不同。
  3. 谷歌浏览器把音频和视频自动播放给自动禁用了。
  4. 我们可以给视频标签添加muted属性可以自动禁言播放视频,音频不可以。
  5. 视频标签是重点,我们经常设置自动播放,不使用controls控件,循环和设置大小。

6. H5新增表单

  6.1 新增表单元素

HTML5+CSS3基础知识汇总 (HTML5篇)

  6.2 新增表单属性

HTML5+CSS3基础知识汇总 (HTML5篇)
总结:
     1. HTML5 里面新增的语义化标签
     2. HTML5 视频标签设置自动播放以及修改大小
     3. HTML5 中新增的数字表单、手机号码表单以及搜索表单
     4. HTML5 表单中新增的占位符以及多选属性

本文地址:https://blog.csdn.net/qq_43636251/article/details/107574384