HTML5+CSS3

  • 时间:
  • 浏览:
  • 来源:互联网

HTML5

1、什么是HTML5

1、HTML5简介

  • 万维网的核心语言、标准通用标准语言下的一个应用超文本标记语言(HTML)的第五次重大修改。作为新HTML,具有新的元素、属性和行为。
  • XHTML 可扩展超文本标记语言
    • 是一种增强的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。
  • HTML5
    • 它有更大的技术集,允许更多样化和强大的网站和应用程序。
    • 增加了新特性;语义特性,本地存储特性,设备兼容特性,连接特性,网页多媒体特性,三维、图形及特效特性,性能与集成特性, CSS3特性。
    • 这个集合有时称为HTML 5和朋友,通常缩写为HTML5

2、广义的HTML5

  • 广义的HTML5是HTML5本身+ CSS3 + JavaScript
  • 这个集合 有时称为HTML 5和朋友,通常缩写为HTMI5
  • 虽然HTML5的一 些特性仍然不被某些浏览器支持,但是它是一种发展趋势
  • HTML5 MDN介绍: hts://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML

2、H5新增语义化标签

新增语义化标签

	<header>:头部标签
	<nav>:导航标签
	<article>:内容标签
	<section>:块级标签
	<aside>:侧边栏标签
	<footer>:尾部标签
  • 这种语义化标准主要针对搜索引擎的。
  • 这些新标签页面中可以多次使用的
  • 在IE9中,需要把这些元素转换为块级元素。

3、新增多媒体标签

  • 音频:<audio>
  • 视频:<video>
  • 使用它们可方便的在页面中嵌入音频和视频,不再使用落后的flash和其他浏览器插件。

1、<audio> 音频标签

  • 支持的三种音频格式: Ogg Vorbis/ MP3 / Wav
  • <audio>音频标签语法格式
	<audio src="文件地址" controls="controls"></audio>
	<audio src="media/Good night (Live) - Lil Ghost小鬼.mp3" loop="loop" controls="controls" autoplay="autoplay"></audio>
		//兼容不同浏览器
	<audio controls="controls">
        <source src="media/Good night (Live) - Lil Ghost小鬼.mp3" type="audio/mpeg">
        <source src="media/Good-night-_Live_-Lil-Ghost小鬼.ogg" type="audio/ogg">
           你的浏览器太low了,不支持audio 播放
    </audio>
  • <audio> 属性-值
    • autoplay-autoplay 音频在就绪后马上播放。
    • controls-controls 向用户显示控件,比如播放按钮。
    • loop-loop 每当音频结束时重新开始播放。
    • src-url 要播放的音频 的URL。

2、<video>视频标签

  • 支持的三种音频格式: Ogg / MPEG 4 / WebM
  • <video>音频标签语法格式
    	<video src="文件地址" controls="controls"></video>
    
  • <video> 属性-值
    • autoplay-autoplay 视频就绪自动播放
    • controls-controls 向用户显示播放控件
    • width-pixels(像素) 设置播放器宽度
    • height-pixels(像素) 设置播放器高度
    • loop-loop 播放完是否继续播放该视频,循环视频
    • preload-preload 是否等加载完再播放
    • src-url 视频url地址
    • poster-imgurl 加载等待的画面图片
    • muted-muted 静音播放

4、H5新增input表单、表单属性

1、表单

type="email"  限制用户输入必须为Email类型
type="url"	  限制用户输入必须为URL类型
type="date"   限制用户输入必须为日期类型
type="time"   限制用户输入必须为时间类型
type="month"  限制用户输入必须为月类型
type="week"   限制用户输入必须为周类型
type="number" 限制用户输入必须为数字类型
type="tel"    手机号码
type="search" 搜索框
type="color"  生成一个颜色选择器

2、表单属性

  required="required"	     表单拥有该属性表示内容不能为空,必填
  placeholder="提示文本/占位符"	 表单的提示信息,存在默认值将不显示
  autofocus="autofocus"	     自动聚焦属性,页面加载完成自动聚焦到指定表单
  autocomplete="off/on"	
  	 当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。
	 默认已经打开,打开on/关闭off。
	 需要放在表单内同时加上name属性
	 同时成功提交
  multiple="multiple"	可以多选文件提交

本文链接http://element-ui.cn/article/show-153831.aspx