当前位置: 首页 > Web前端 > HTML5

HTML5&CSS3内容合集(一)

时间:2023-04-05 22:32:22 HTML5

1.HTML发展史介绍2.浏览器支持2.1新标签支持html5中加入了很多新标签,包括8个新的语义结构标签。header,section,footer,aside,nav,main,article,figure,但在某些版本的IE中没有有效支持。/*人为的进行一些处理,让代码正常显示在ie:*/header,section,footer,aside,nav,main,article,figure {display:block;}因为新的语义结构标签在code是块级元素,除了块级元素本身的特性和语义外,没有其他作用,所以可以简单的转换成块级元素,保证在所有浏览器中正常显示。上面的写法无法实现ie8以下的风格。如果你想完全兼容所有的浏览器,你可以使用SjoerdVisscher创建的“shiv”插件来解决这个问题。对于“shiv”插件,可以下载文件直接使用,也可以作为静态库使用,比如国内的百度静态库:在实际应用中,可以通过条件注释来引用,如下:2.2HTML条件注释关于条件注释,最常见的应用是条件注释对于IE,如下:其中lt为修饰,同类型修饰有以下几种:lte:是缩写ofLessthanorequalto,即小于等于的意思。lt:是Lessthan的缩写,小于的意思。gte:是Greaterthanorequalto的缩写,意思是大于等于。gt:是Greaterthan的缩写,大于的意思。!:表示不等于,与javascript中的不等于判断相同3.HTML5中新的标签和属性3.1智能表单3.1.1新的表单元素指定输入域的选项列表。该属性指定表单或输入字段具有自动完成功能。当用户开始在自动完成字段中键入时,浏览器将显示设置的提示。用于不同类型的输出,比如脚本计算等+=60提供了一种可靠的用户认证方式,目前已弃用,虽然部分浏览可以使用,但不推荐使用。标记指定表单的密钥对生成器字段。提交表单时,会生成两个密钥,一个是私有密钥,一个是公共密钥。私钥保存在客户端,公钥发送给服务器。公钥可用于稍后验证用户的客户端证书。用户名:加密:/form>3.1.2 Addnewinputtypecolorselectcolordateselectdatefromdatedatetime定义日期和时间控制器(支持Openg和safari,不推荐)datetime-localselectdateandtimeemailmailboxmonth选择输入字段其中月份数字包含一个值,也可以使用以下属性来限制该值:max指定允许的最大值min指定允许的最小值step合法数字区间值默认值范围包含一定范围的数字输入字段,也可以使用以下属性限制取值:max指定允许的最大值min指定允许的最小值steplegalnumericintervalvaluedefaultvaluesearchsearchfieldtel电话号码字段(兼容性不好,不推荐)time时间选择urldomain名称周和年

3.1.3新增表单属性form/input新增属性autocomplete自动完成功能提示:该属性可能失败的原因:①浏览器不支持②表单启用但输入已关闭或窗体已关闭但输入已打开③未设置名称属性。此属性应用于
标签和以下类型的输入标签:文本、搜索、url、电话、电子邮件、密码、日期选择器、范围和颜色。这个属性是否启用可以通过on和off来设置。form属性novalidate规定在提交表单时不验证表单或输入域.input属性autofocus字段自动form属性指定输入字段所属的一个或多个表单formaction描述表单提交的URL地址会覆盖表单标签的action属性formmethod属性。formmethod属性定义提交表单的方式。formmethod属性覆盖了
元素的method属性。formnovalidate属性与表单中的novalidate属性相同。novalidate属性是一个布尔属性。novalidate属性说明元素在提交表单时不需要验证。formnovalidate属性将覆盖元素的novalidate属性。formtarget属性设置页面的显示方式,取值与target属性相同。该属性与type=submit配合使用,设置数据提交后的页面打开方式。list属性list属性指定输入字段的数据列表。datalist是输入字段的选项列表。multiple属性multiple属性指定可以在一个元素中选择多个值。注意:multiple属性适用于以下类型的标签:email和filepattern属性pattern属性描述了用于验证元素值的正则表达式。注意:pattern属性适用于以下类型的标签:text,search,url,tel,email,password.placeholder表单提示required属性设置该属性的input为required属性3.2中新增的结构标签html5新增8个结构化标签:3.3新增语义标签meter定义度量衡,仅用于已知最大值最小值的度量,如:磁盘使用、查询结果等,不能作为度量进度条。属性:表格属于哪个表格,high,low,low,max,maximum,min,minimum,optimum,value,当前值,progress,progressbar,IE9及之前不支持,不能用来显示度量衡。属性:max指定需要补全的值。当前值rp定义不支持ruby元素的浏览器显示的内容rt定义字符(汉语拼音或字符)的解释或发音ruby定义ruby注释(汉语注音或字符)通常用于组合IE8及更早版本不支持bdiIsolation标签允许您设置一段文本,使其脱离其父元素的文本方向设置。在发布用户评论或您无法完全控制的其他内容时,此标签很有用。
  • 用户user1:60分
  • 用户user2:80分
  • 用户user3:90分
4HTML5新技能4.1多媒体播放在html5中,它为我们提供了音视频播放,支持flash动画播放。提示:ie9以上浏览器及其他浏览器支持此播放音频播放:
ondragstart事件:当拖动元素开始被拖动拖动时触发事件,该事件作用于被拖动元素ondraenter事件:被拖动元素进入目标元素时触发的事件,该事件作用于目标元素ondragover事件:被拖动元素在目标元素上移动ondraenter事件当事件被触发时被触发。该事件作用于目标元素,这个事件作用于被拖动的元素Event.preventDefault()方法:阻止一些默认事件方法的执行等。一定要在ondragover中实现preventDefault(),否则不会触发ondrop事件。另外,如果你从其他应用程序或文件中拖入一些东西,尤其是图片,默认的动作是显示图片或相关信息,而不是真正执行拖放。这时候就需要使用文档的ondragover事件直接kill了。Event.effectAllowed属性:是拖动的效果。