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

HTML5简介_0

时间:2023-04-05 13:55:24 HTML5

1、H5浏览器兼容由于HTML5没有统一的标准,不同的浏览器解析不同,目前还在推广阶段,但大部分都是一样的2、H5新文档声明1)Html4文档声明2)Html5的文档声明中HTML4.01中,DOCTYPE语句指的是文档类型定义DTD(DocumentTypeDefinition),因为HTML4.01是基于SGML(StandardGeneralizedMarkupLanguage,一种定义电子文档结构和描述其内容的国际标准语言;)。DTD指定标记语言的规则,以便浏览器可以正确呈现内容。HTML5不是基于SGML,因此不需要引用DTD。提示:始终向HTML文档添加DOCTYPE声明,以便浏览器知道文档类型。扩展:CSS盒模型:CSS标准盒模型和奇怪的盒模型?CSS中的Box模型分为两种:W3C标准和IE标准的box模型。大多数浏览器使用W3C标准模型,而IE使用微软自己的标准。怪异模式是“部分浏览器在支持W3C标准的同时保留了原有的解析方式”,怪异模式主要表现在IE内核的浏览器中。如果缺少DOCTYPE,在ie6、ie7、ie8下会触发怪异模式(quirksmode)。未定义doctype时会触发Quirks模式。在标准模式下,一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)在weird模式下,一个块的总宽度=width+margin(左右)对)(即width已经包含了padding和border值)3.H5的特点1)比较简洁,但实际开发中要注意写规范,有利于后期维护2)标签的语义扩展:语义的重要性:①当页面加载失败时,也能呈现清晰的结构②有利于SEO优化和被搜索引擎收录(即容易被网络爬虫识别)③在项目开发和维护中,语义也大大降低了开发难度,节省了成本和新结构标签的区别和意义3)语法更宽松4)多设备跨平台5)自适应网页设计4、H5新增语义标签headerhead标签header。htmlheader_noLogin.htmlnavnavigationtagarticlearticletagasidesidebarNavigationfooterfooter.htmlsectionChapters,headers,columns1)Sections表示内容块,通常分为章节、页眉、页脚或页面的其他部分。可与h1-h6等元素结合使用,表示文档的结构2)article表示页面上与上下文无关的一段独立内容,如博客中的一篇文章或一篇文章inanewspaper3)asideAside表示action除了元素的内容外,与文章元素的内容相关的辅助信息。4)header表示页面中的一个内容块或整个页面的标题5)footer表示整个页面的脚注或页面中的一个内容块。通常,它会包括创建者的姓名、创建日期和创建者联系信息。6)nav表示页面中导航链接的部分,①传统导航栏②腾讯新闻③侧边栏导航④行业内部导航:百度百科⑤翻页操作7)figure表示一个独立的流量内容,一般表示主流量文档独立的内容单元。指定单个流内容(图像、图表、照片、代码等)。使用figcaption元素向图形元素添加标题。◆图是元素的组合,带有可选的标题。用于表示网页上的独立内容。figure元素的内容应该相对于主要内容,但如果删除应该不会影响文档流。◆figcaption表示图的标题。属于图,图中只能放一个figcaption8)video定义视频,比如电影剪辑或者其他视频流你的浏览器不支持视频how许多视频允许一个source元素,source元素可以连接不同的视频文件,浏览器将使用第一个可识别的格式播放提示:可以在开始标签和结束标签之间放置文本内容,这样旧的浏览器可以显示不支持该标签的信息。param元素允许您为插入到XHTML文档中的对象指定运行时设置,也就是说,该标签可以为包含它的标签提供参数。name定义参数的名称(在脚本中使用)。HTML5中video标签支持哪些格式的视频文件?Ogg:Ogg文件,带Threora视频编码和Vorbis音频编码;MPEG4:具有H.264视频编码和AAC音频编码的MPEG4文件;WebM:WebM文件,采用VP8视频编码和Vorbis音频编码9)embedembedtag用于定义嵌套内容,包括各种媒体,格式可以是midi、wav、AIFF、AU、MP3、Flash等。10)audio定义音频,例如音乐或其他音频流您的浏览器不支持音频标签。提示:文本内容可以放在开始标签和结束标签之间,这样旧的浏览器可以显示不支持该标签的信息。11)标记高亮文本。一个典型的应用是在搜索结果中向用户突出显示搜索关键字。12)Canvas代表图形,例如图标和其他图像。这个元素本身没有任何行为,只提供一个画布,但是它向客户端js呈现了一个绘图API,以便脚本可以在画布上绘制它想画的东西13)Datalistdatalist提供了一个预定义的列表,通过id与输入关联。在input中输入的时候会有自动完成功能,用户会看到一个下拉列表可以选择。14)output表示不同类型的输出,例如脚本的输出为:定义一个或多个与输出字段相关的元素。form:定义输入域所属的一种或多种形式。名称:为对象定义一个唯一的名称。(提交表单时使用)5.新增的表单元素Search/tel/url/email/number/range/color/file/Datetime/date/month/week/time/datetime-local1)email专门用于inputemailAddress文本框,如果此文本框中的内容不是email地址格式,则不允许提交。但它不会检查电子邮件地址是否存在。提交时可以为空,除非添加了required属性。具有multiple属性,允许在文本框中输入一串以逗号分隔的电子邮件地址。2)urllurl:专门用来输入URL地址的文本框。如果文本框中的内容不是URL地址格式,则不允许提交。3)numberNumber:专门用来输入数字的文本框。提交时会检查内容是否为数字,是否有min、max、step属性。4)range用于只输入一个值范围内的文本框,它有min属性和max属性,还有step属性,可以指定每次拖动的步幅。minminimumvaluemaxmaximumvaluestep数字间隔5)datepickers(date,month,week,ti??me,datetime,datetime-local)有几种用于选择日期和时间的新输入类型。日期-选择日、月、年InternetExplorer或Firefox不支持“月”元素。月-选择月、年InternetExplorer或Firefox不支持“月”元素。week-选择周和年InternetExplorer或Firefox不支持“month”元素。time-选择时间(小时和分钟)InternetExplorer或Firefox不支持“月”元素。datetime-选择时间、日、月、年(UTC时间)。“日期时间元素在InternetExplorer、Firefox或Chrome中不受支持,在Safari中部分受支持。在Opera12及更早版本中完全受支持。datetime-local-选择时间、日期、月、年(本地时间)InternetExplorer或Firefox不支持支持“月”元素,注意和input标签设置样式一样,但是不能实现在标签中设置部分样式。比如改变日历的背景颜色,颜色框的按钮Effects,6.H5新增表单验证1)placeholderplaceholder属性:当文本框处于未输入状态时,文本框显示的输入提示2)autofocusautofocus属性:针对文本框,选择框,或者给按钮控件添加该属性,打开页面时控件会自动获取国标焦点,一个页面只能有一个3)required必填属性:验证input不能为空4)listlist属性:与datalist元素配合使用5)autocompleteautocomplete属性:注意:form元素必须有name属性。丰富的输入和使用的自动完成功能是一个节省输入时间的功能,也很方便。只有三种类型:开/关/“”。on可以显示指定交替输入的数据列表。使用datalist元素和list属性为备用输入提供数据列表。自动补全时,datalist元素中的数据可以作为备选输入数据显示在文本框中:HTML5新增提交时验证表单和表单元素内容有效性的大量功能。6)自动验证min,max,step:为包含数字或日期的输入类型指定限制(约束)max:最大值min:最小值step:数字区间7)取消验证novalidate属性指定不对表单进行验证提交表单或输入字段时。注意:novalidate属性适用于以下类型的表单和输入标签:文本、搜索、url、电话、电子邮件、密码、日期选择器、范围和颜色。