HTML5新特性汇总0804

时间：2023-04-05 20:29:23 HTML5

语义标签用最合适的HTML元素标记内容。优点：提高可访问性SEO结构清晰，利于维护通用容器：div块级通用容器span无语义容器的短语内容：简短、描述性、独特（提高搜索引擎排名）。搜索引擎会以标题作为索引来判断页面的主要内容。一个有效的标题应该包含几个与页面内容密切相关的关键词。建议将标题的核心内容放在前60个字符。：h1~h6层级标题，用于创建页面信息的层级关系。对于搜索引擎来说，如果标题与搜索词相匹配，这些标题将被赋予较高的权重，尤其是h1

：标题通常包括网站标志、主导航、全站链接和搜索词。框架。也适用于标记页面中的一组介绍性或导航内容。：标签导航，只用于文档中重要的链接组。Html5规范不推荐辅助页脚链接使用nav，除非页脚再次显示顶级全局导航，或者包含职位信息等重要链接。

：页面的主要内容，一个页面只能使用一次。如果它是一个网络应用程序，围绕它的主要功能。

：表示文档、页面、应用程序或独立容器。文章可以嵌套文章，只要内部文章和外部文章是部分对整体的关系。

：一组主图相似的内容，比如网站首页可以分为介绍、新闻、联系方式等版块，如果只是为了添加样式，使用div：指定侧边栏，包括引用、侧边栏、一组文章链接、广告、友情链接、相关产品列表等，如果放在main中，应该紧靠与内容有关。：页脚，只有parent为body时，才是整个页面的页脚。：指定规则，输入免责声明、评论、签名、版权。仅用于短语，不得用于未标记“使用条款”、“隐私政策”等的长篇法律声明。不是简单的样式标签（对搜索引擎抓取有意义和强调strong>em>cite）：表示内容的重要性。：标记内容焦点（主要用于改善段落文本语义）（斜体）：表示引用或引用，如书名、歌曲名,movie等,Concerts,concerts,specifications,newspapers,orlegaldocuments等（斜体）：高亮文字（黄色背景色），提醒读者

：创建afigure(默认边距约为40px)

:图形的标题，必须是嵌入图形的第一个或最后一个元素。：引号文字，默认换行显示。：标记事件。datetime属性遵循特定格式。如果省略该属性，文本内容必须是合法的日期或时间格式。（不再相关时使用s标签）：解释缩写。使用title属性提供全名，只能在第一次出现时使用。：定义term元素，必须在定义的旁边，可以用在描述列表dl元素中。

：作者、相关人员或组织的联系方式（邮箱地址、联系方式页面链接）表示具体地址，斜体自动换行：已删除内容.：添加的内容。一种罕见的元素，可以包围块级和短语内容。：标记代码。包括示例代码或文件名(<<>>)

：预格式化文本。保留文本固有的换行符和空格。：表示分数的数值或已知量程的测量结果。比如投票结果。例如：20%completed：完成进度。该值可以通过js动态更新。标签数据集新属性详解（IE11、FirefoxGoogle）在HTML5中，我们可以使用data-前缀来设置我们需要存储一些数据的自定义属性。通过数据集获取这些数据。这里的data-前缀称为数据属性，可以通过脚本定义，也可以通过应用CSS属性选择器来设置样式。数量不受限制，在操作和渲染数据时提供非常强大的控制。一个例子教你如何使用数据集。比如我们想在一个文本按钮上存储对应的id。以下是将数据属性应用于元素的示例：￥20.12

//获取属性的值，您可以像这样使用数据集对象：varfood=document.getElementById('food');vartypeOfDrink=food.dataset.drink;classList(FirefoxGooglelatest,IE10及以上版本)obj.classList.add()Addclassobj.classList.remove()Removeclassobj.classList.contains()判断是否包含指定的类对象。classList.toggle()切换类obj.classList.length获取类的编号HTML5新表单新输入类型emailemail类型用于应包含电子邮件地址的输入字段。提交表单时，将自动验证电子邮件字段的值。电子邮件：urllurl类型用于应包含URL地址的输入字段。提交表单时，会自动验证url字段的值。主页：numbernumber类型用于应包含数值的输入字段。您还可以对接受的数字设置限制：Points:rangerange类型应包含数值输入字段的范围。范围类型显示为滑块。您还可以对接受的数字设置限制：searchsearch类型用于搜索字段，例如站点搜索或谷歌搜索。搜索字段显示为常规文本字段。新表单属性自动完成自动完成属性指定表单或输入字段应具有自动完成功能。注意：自动完成适用于

标签，以及以下类型的标签：文本、搜索、url、电话、电子邮件、密码、日期选择器、范围和颜色。电子邮件：novalidatenovalidate属性规范提交表单时不应验证表单或输入字段。注意：novalidate属性适用于以下类型的

和标签：text、search、url、telephone、email、password、datepickers、range和color。E-mail:新的输入属性autocompleteautocomplete属性指定表单或输入字段应该具有自动完成功能。注意：自动完成适用于

标签，以及以下类型的标签：文本、搜索、url、电话、电子邮件、密码、日期选择器、范围和颜色。电子邮件：autofocusautofocus属性规范在页面加载时，该字段会自动获得焦点。注意：autofocus属性适用于所有标签类型。用户名：formform属性指定输入字段所属的一个或多个表单。注意：form属性适用于所有标签类型。表单属性必须引用它所属的表单的ID：Firstname：Lastname:表单覆盖（formaction、formenctype、formmethod、formnovalidate、formtarget）表单overridesattributes（表单覆盖属性）允许您覆盖表单元素的某些属性设置。-表单重写属性有：1.formaction——重写表单的action属性2.formenctype——重写表单的enctype属性3.formmethod——重写表单的method属性4.formnovalidate——重写表单的novalidate属性5.formtarget-覆盖表单的target属性注意：表单覆盖属性适用于以下类型的标签：submit和image。电子邮件：

height和width属性height和width属性指定图像类型的输入标签的图像高度和宽度。注意：height和width属性仅适用于图像类型的标签。list属性list属性指定了输入域的数据列表。datalist是输入字段的选项列表。注意：list属性适用于以下类型的标签：text、search、url、telephone、email、datepickers、number、range和color。网页：min、max和step属性min、max和step属性用于指定包含数字或日期的输入类型的限制（约束）。max属性指定输入字段允许的最大值。min属性指定输入字段允许的最小值。step属性指定输入域的合法数字区间（如果step="3"，则合法数字为-3,0,3,6等）。注意：min、max和step属性适用于以下类型的标签：日期选择器、数字和范围。下面的例子展示了一个数字字段，它接受0到10之间的值，步长为3（即合法值为0、3、6和9）：Points:multiple属性multiple属性指定输入域可以选择多个值。注意：multiple属性适用于以下类型的标签：电子邮件和文件。选择图像：novalidate属性novalidate属性指定在提交表单时不应验证表单或输入字段。注意：novalidate属性适用于以下类型的

和标签：text、search、url、telephone、email、password、datepickers、range和color。E-mail:pattern属性pattern属性指定用于验证输入字段（模式）。注意：pattern属性适用于以下类型的标签：text、search、url、telephone、email和password。以下示例显示了一个只能包含三个字母（不能包含数字或特殊字符）的文本字段：国家代码：placeholder属性placeholder属性提供了一个提示（hint）来描述输入字段的期望值。注意：placeholder属性适用于以下类型的标签：text、search、url、telephone、email和password。当输入框为空时提示（hint）出现，当输入框获得焦点时消失：规定必须在提交前填写输入栏（不能为空）。注意：required属性适用于以下类型的标签：text、search、url、telephone、email、password、datepickers、number、checkbox、radio和file。Name:音频（audio）和视频（video）支持的格式和书写格式Audio元素支持3种格式：OggMP3Wav您的浏览器不支持音频元素。video元素支持三种视频格式：MP4、WebM、Ogg。你的浏览器不支持视频标签。标签属性Audioandvideo:autoplay,controls,loop,muted,preload,srcVideo:autoplay,controls,loop,muted,width,height,poster,preload,src方法load():重新加载音频/视频元素play():开始播放音频/视频pause():暂停当前播放的音频/视频事件durationchange:当音频/视频的时长改变时ended:当前播放列表结束时pause:当音频/视频暂停时timeplay：当音频/视频开始或不再暂停时ratechange：当音频/视频的播放速度改变时timeupdate：当当前播放位置改变时volumechange：当音量改变时事件属性只读属性duration:返回当前总时长currentSrc:返回当前URLEnded:返回是否结束paused:返回是否暂停获取可修改属性:autoplay:设置或返回是否自动播放controls:设置或返回是否播放控件（如播放/暂停等）loop：设置或返回是否循环muted：设置或返回是否静音currentTime：设置或返回当前播放位置（以秒为单位）volume：设置或返回音量（指定音频/视频的当前音量。必须介于0.0和1.0之间。）1.0是最大音量（默认值）；0.5是一半体积(50%)；0.0为静音；playbackRate：设置或返回播放速度

上一篇：Wallys-无线AP-AR9344-MIMO-2T2R-5G-2-GETH-port--塑料

下一篇：Angular8集成Editor.md的Markdown编辑器，解析markdown

HTML5新特性汇总0804相关文章