`

HTML5 1 新增的语义标记

阅读更多
<section>跟<div>类似,也是默认换行


html5 form表单新增的属性
<form  novalidate>  novalidate属性表单中所有的input都不会验证



html5 input:不支持的浏览器就是普通的文本输入框text

<input type="search"/>输入搜索的内容(不常用)

<input type="del" title="请输入11位数的手机号码" pattern="^\d{11}$"/>

<input type="url"/>

<input type="email"/>

<input type="number " formnovalidate  min="0" max="100" step="3"/>
formnovalidate属性单个input元素验证失效

<input type="range" min="0" max="100" step="3"/>滑块

<input type="color"/> 颜色采集器

<input type="file" multiple accept="image/*" name="pic">
multiple:可以上传多个文件
accept:而且只能是图片文件




html5 多媒体播放元素
1,音频
<audio  controls autoplay>
     <source src="test.mp3" type="audio/mp3"/>
     <source src="test.ogg" type="audio/ogg"/>
     <source src="test.wav" type="audio/wav"/>
</audio>
controls 播放出现控制界面,可以暂停关闭等
autoplay页面加载完自动播放

2,视频
<video controls autoplay width="500" height="300" poster="end.jpg" loop>    
     <source src="test.ogg" type="audio/ogg"/>
     <source src="test.webm" type="audio/webm"/>
</video >
poster:当视频不可用时,用一张图片替代展示(不支持的播放格式)
loop: 当视频播放完成后再次开始播放



html5新增的标签
1,mark
默认以黄色背景高亮显示
这个妹子<mark>真美丽</mark>

2,wbr
当某个元素在一个父级元素中展示的宽度不够时,会换行显示
这个妹子真nice<wbr>

3,progress进度条
<progress  min="0" max="100" value="30"></progress>

4,meter 有颜色区分的进度条(默认是绿色)
<meter min="0" max="100" value="50" low="40" high="80" optinum="100"></meter>
value:等于50是绿色安全展示
low:低于40橙色警告展示
high:高于80橙色警告提示
optinum:良好值

5,canvas 相当于一个画板,上面可以画图,常用于html5游戏或者动画
  canvas结合js做出网页游戏

6,details 细节信息展示
<details>
   <summary>想看详情请点击</summary>
    这是详细信息,很好的文章,值得观赏
</details>

7,ruby 标签定义ruby注释



html5 废除的元素
1,font ,u废除, 因为这2个标签的效果都能用样式做到<span>
2,frameset ,frame,noframes废弃



html5 新增的属性
1,<base target="_blank" href="http://baidu.com">
下面所有有链接的地方前面都会不上这个href

2,<ol reversed></ol>
reversed:指定列表倒序

3,<script  async/>
async:可以让脚本异步执行

4,<style scoped>
scoped :局部的添加样式

5,全局属性
hidden  :所有的元素都可以使用这个属性,隐藏元素
spellcheck :判断输入的内容是否需要拼写检查,默认为true


分享到:
评论

相关推荐

    html5新增标签和属性

    HTML5 新增标签和属性 HTML5 中新增了许多标签和属性,使得开发者可以更快速地了解和掌握 HTML5 技术,并实现快速上手。这些新增的标签和属性可以帮助开发者快速实现页面布局,提高浏览器的解析速度,并且提供了更...

    HTML5元素周期表

    这个表格包括了HTML5工作草案中定义的104个正式元素,以及两个标记有星号的提议元素。这种可视化表示法有助于开发者快速定位和了解每个元素的作用、属性和用法。 HTML5是超文本标记语言(HyperText Markup Language...

    HTML5课程总结,新增标签

    新增语义化标签包括: 1. 布局标签:header、footer、nav、article、section、aside、main、hgroup 等。 2. 状态标签:meter、progress 等。 3. 列表标签:datalist 等。 4. 文本标签:mark、ruby、rt 等。 新增...

    HTML5新增属性与表单元素

    HTML5作为最新的超文本标记语言标准,相较于上一版本HTML4,带来了许多新特性,其中包括新增的表单元素和属性。这些新增元素和属性的引入,极大地扩展了网页的功能,增强了用户交互体验,同时也简化了开发者的工作...

    html5标记文字_动力节点Java学院整理

    综上所述,HTML5在标记文字方面所做的改进和新增的特性,为Web开发者提供了更加丰富、语义化和功能性强的标记语言。通过学习和正确使用这些标记,开发者能够创建出结构更清晰、功能更强大、用户体验更好的Web页面。

    自定义html标记替换html5新增元素

    在标题中提到的“自定义html标记替换html5新增元素”,主要是指在遇到不支持HTML5新元素的老版本浏览器(如早期的Internet Explorer)时,如何通过自定义标签来实现兼容性。 HTML5的新元素包括`&lt;header&gt;`和`...

    从入门到精通HTML5——PDF——网盘链接

     12.1.2 HTML 5中的标记方法 226  12.1.3 HTML 5语法中的3个要点 227  12.1.4 标签实例 228  12.2 新增的元素和废除的元素 228  12.2.1 新增的结构元素 228  12.2.2 新增的块级的语义元素 230  12.2.3 新增的...

    【HTML5:超文本标记语言2】

    HTML5是超文本标记语言的最新版本,引入了许多新的特性以增强网页的交互性和功能。在HTML5中,表单控件的使用更加丰富和灵活,使得开发者能够创建更复杂、用户友好的在线表单。 1. **Form表单**:表单在HTML中用于...

    HTML5学习心得总结(推荐)

    在绘制图形方面,HTML5新增了canvas元素,开发者可以利用JavaScript操作canvas绘图上下文来绘制各种图形,包括路径、文本、图像等。 视频和音频方面,HTML5引入了video和audio元素,提供了标准的接口用于媒体内容的...

    Html5程序设计基础教程(练习题参考答案)

    - HTML5是超文本标记语言的第五个版本,增加了许多新的元素和API,旨在提高语义性、可访问性和互操作性。 - 新增的语义化元素如, , , , , , 等,帮助更好地组织网页内容结构。 - 用于高亮文本,用于表示日期和...

    HTML5中文参考手册

    HTML5是超文本标记语言(HyperText Markup Language)的第五代标准版本,它不仅增强了网页的表现力,还引入了众多新特性来简化Web开发流程,提高用户体验。本手册全面介绍了HTML5的属性与功能,覆盖了从基础到进阶的...

    1.06 HTML5新特性

    "HTML5 新特性" ...HTML5 引进了语义化标记,例如 `、、、、、&lt;footer&gt;` 等,提供了更好的文档结构和可读性。 HTML5 新特性为 Web 开发人员提供了更多的选择和可能性,使得 Web 应用程序更加丰富和多样化。

    4HTML5CSS3从入门到精通自测练习修正版资料.pdf

    1. HTML5的语义化标记元素包括header、nav、main、section、article、aside、figure、figcaption、footer等,这些元素可以帮助搜索引擎更好地理解网页的结构和内容。 2. input类型包括text、password、checkbox、...

    HTML+CSS基础学习源代码(含有新增HTML5属性)

    1. **新元素**:HTML5引入了如、、、、、等结构性元素,帮助开发者更好地组织页面内容,提高语义化程度。 2. **多媒体支持**:HTML5提供了原生的音频()和视频()标签,使得在网页中嵌入媒体文件变得更加简单,不再...

    Html5新增标签有哪些

    1. 标签:这是HTML5中新增的一个用于嵌入音频内容的媒体播放标签。它允许直接在网页中嵌入音频文件,而无需任何插件支持。主要属性包括: - src:音频文件的路径; - controls:向用户显示播放控件; - autoplay...

    HTML标记大全.txt

    ### HTML标记大全知识点详解 #### 一、HTML基础结构与元素 **1.1 HTML文档基本结构** ...随着Web技术的不断进步,新的标记和特性也在不断地被引入到HTML标准中,例如HTML5中新增的语义化标记等。

    HTML5详解 Html5实战

    HTML5是下一代超文本标记语言,它在2014年正式成为W3C的推荐标准,极大地丰富了Web开发的潜力。HTML5的核心目标是提高用户体验,简化开发者的工作,并推动互联网应用程序的进步。本篇文章将深入探讨HTML5的各个方面...

Global site tag (gtag.js) - Google Analytics