HTML5 新增标签
HTML5:语义化标签:
标签 |
描述 |
<header> |
定义页面主体上的头部,header标签往往在一对body标签之中 |
<footer> |
定义页面的底部(页脚) |
<section> |
定义 用于表达书的一部分或一章,或者一章内的一节 |
<nav> |
用于菜单导航、链接导航的标签,是navigator的缩写。 |
<article> |
用于表示一篇文章的主体内容,一般为文字集中显示的区域 |
<aside> |
用以表达注记、贴士、侧栏、摘要、插入的引 用等作为补充主体的内容。从一个简单页面显示上,就是边栏,可以在左边,也可以在右边。从一个页面的局部看,就是摘要 |
<hgroup> |
给标题分组,为标题或者子标题进行分组,通常与h1-h6元素组合使用 |
<figure > |
标签规定独立的流内容(图像、图表、照片、代码等等)。
figcaption 元素写在 figure 内 为其 添加标题
|
<source > |
为媒介元素(比如 video 和 audio)指定多个播放格式与编码,浏览器会自动选择第一个可以识别的格式。非闭合标签,只有开始标签,没有结束标签。 |
<datalist > |
定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
请使用 input 元素的 list 属性来绑定 datalist。
|
<embed > |
定义嵌入的内容,比如插件。<embed src="helloworld.swf" /> |
<time > |
定义日期或时间,或者两者。 |
<address > |
①标签定义文档或文章的作者/拥有者的联系信息。 ②如果 <address> 元素位于 <body> 元素内,则它表示文档联系信息。
③如果 <address> 元素位于 <article> 元素内,则它表示文章的联系信息。
④<address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行
注意: 标签不应该用于描述通讯地址,除非它是联系信息的一部分。元素通常连同其他信息被包含在 <footer> 元素中。
|
<map> |
定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。
注意:<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性(取决于浏览器),所以我们应同时向 <map> 添加 id 和 name 属性。
|
<area> |
永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
圆形:shape="circ",coords="x,y,z"
多边形:shape="poly",coords="x1,y1,x2,y2,x3,y3,..."
矩形:shape="rect",coords="x1,y1,x2,y2"
|
<mark> |
定义页面中需要突出显示或高亮显示的内容 |
<details> |
标签定义元素的细节,目前只有 Chrome 和 Safari 6 支持 <details> 标签。 与 <summary> 标签 配合使用可以为 details 定义标题。标题是可见的,用户点击标题时,会显示出 details。 |
<video>视频标签:定义视频,比如电影片段或其他视频流。
<video>标签的属性:
属性 |
值 |
描述 |
autoplay |
autoplay |
如果出现该属性,则视频在就绪后马上播放。 |
controls |
controls |
如果出现该属性,则向用户显示控件,比如播放按钮。 |
height |
pixels |
设置视频播放器的高度。 |
loop |
loop |
如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
preload |
preload |
如果出现该属性,则视频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 |
src |
url |
要播放的视频的 URL。 |
width |
pixels |
设置视频播放器的宽度。 |
<audio>音频标签:定义声音,比如音乐或其他音频流。
<audio>标签的属性:
属性 |
值 |
描述 |
autoplay |
autoplay |
如果出现该属性,则音频在就绪后马上播放。 |
controls |
controls |
如果出现该属性,则向用户显示控件,比如播放按钮。 |
loop |
loop |
如果出现该属性,则每当音频结束时重新开始播放。 |
preload |
preload |
如果出现该属性,则音频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 |
src |
url |
要播放的音频的 URL。 |
<canvas>画布标签:定义图形,比如图标和其他图像
属性 |
描述 |
fillStyle |
设置或返回用于填充绘画的颜色、渐变或模式 |
strokeStyle |
设置或返回用于笔触的颜色、渐变或模式 |
矩形
方法 |
描述 |
rect() |
创建矩形 |
fillRect() |
绘制“被填充”的矩形 |
strokeRect() |
绘制矩形(无填充) |
clearRect() |
在给定的矩形内清除指定的像素 |
路径
方法 |
描述 |
fill() |
填充当前绘图(路径) |
stroke() |
绘制已定义的路径 |
beginPath() |
起始一条路径,或重置当前路径 |
moveTo() |
把路径移动到画布中的指定点,不创建线条 |
closePath() |
创建从当前点回到起始点的路径 |
lineTo() |
添加一个新点,然后在画布中创建从该点到最后指定点的线条 |
转换
方法 |
描述 |
rotate() |
旋转当前绘图 |
translate() |
重新映射画布上的 (0,0) 位置 |
方法 |
描述 |
fillText() |
在画布上绘制“被填充的”文本 |
strokeText() |
在画布上绘制文本(无填充) |
图像绘制
方法 |
描述 |
drawImage() |
向画布上绘制图像、画布或视频 |
像素操作
属性 |
描述 |
width |
返回 ImageData 对象的宽度 |
height |
返回 ImageData 对象的高度 |
其他
方法 |
描述 |
save() |
保存当前环境的状态 |
restore() |
返回之前保存过的路径状态和属性 |
以上是我总结的HTML5常用新增标签和一些标签的属性,如果有问题希望小伙伴们不吝赐教!
问题:许多标签没有自己独特的功能,表现就像div,那么语义化的好处是什么?
1. 有些标签是带有自己的样式和功能的,比如datalist 、detail 标签,这种类型的标签就像一个小组件,这不就是angular等前端的框架扩展html实现的东西吗? HTML会成长成什么样子,who knows?
2. 试想,如果我们没有加载到外部的css文件,我们的页面没有披上css华丽的外衣,变成了皇帝的新装,还好这些语义化的标签,让我们的页面不至于一丝不挂,远看像裸奔,近看,吊带、小裤裤、和袜子结构完整,似乎还能体现出你的衣品
3. 有利于SEO(serch engine optimization)HTML优化是网站内部优化的重点,<h1>-<h6> <title> <img> 等标签都可以告诉爬虫信息和重点,可以更好的和搜索引擎沟通,一个结构完整标签使用恰当的html 文档就像一篇好文章,一看就知道你的主题、中心思想、内容深度和广度,文笔构思
4.语义化标签对我们这样的程序猿 也是人性化的,增加代码的可读性,方便了我们开发和维护页面,有了统一的标准,减少差异化,有利于团队合作
HTML5 新增标签相关推荐
- html5 支持php标签吗,HTML5新增标签使用方法
HTML5提供了一些新的元素和属性,例如nav(网站导航块)和footer.这种标签将有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用,除此之外,还为其他浏览要素提供了新的功能,如au ...
- 十二、HTML5新增标签特性详解(audio、video、input)
HTML5 第一天 一.什么是 HTML5 HTML5 的概念与定义 定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML 两个概念: 是一个新 ...
- 前端基础8:HTML5新增标签及CSS3新属性 viewport 动画
HTML5新增标签 标签名 描述 header 头部 section 区分大模块 nav 导航 footer 尾部 article 文章 aside 侧边栏 audio 音频 video 视频 fig ...
- HTML5新增标签有哪些你知道吗?
html5新增标签 <article>标签定义外部的内容. 比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本.亦或是来自其他外部源内容. HTM ...
- HTML5新增标签以及扩展属性
HTML5新增标签以及属性 1. form表单可以和里面的内容分离 <form id=login action=login.php method=post ></form> & ...
- HTML5新增标签及废除标签整理
HTML5新增标签及废除标签整理(有些很偏就没有列出) 1>新增的标签 1>section元素 表示页面中的一个内容区块,比如章节.页眉.页脚或页面的其他部分,其实就像div,比div更具 ...
- HTML5新增标签最有用的总结
HTML5新增标签: 欢迎关注我的github: https://github.com/godkun/blog ##概要 1. HTML5 简介: (HTML5 是目前-2017年来说,是最新的一代H ...
- HTML5移动开发的基础与技巧(一)HTML5新增标签及应用场景
HTML5移动开发 HTML5的发展 HTML5 是 W3C 与 WHATWG 合作的结果.WHATWG为 HTML5 建立的一些规则: 新特性应该基于 HTML.CSS.DOM 以及 JavaScr ...
- html5下拉智能,HTML5新增标签 + 智能表单
一.HTML5的新增语义标签 1. 全新语义化标签 :用来定义文档或应用程序中的区域或章节. :用来定义文档的主导航区域,其中的链接指向其他页面或当前页面的某些区域. 用来包裹独立的内容片段,通常用来 ...
- HTML5新增标签的汇总与详解
趁着一点闲暇时间,把HTML5的新增标签整理了一下,用了表格的形式展现,分别归纳了各标签的用法及属性分析.这样方便各位以后在运用HTML5标记遇到疑惑时,直接上来对照看下就明了了,希望对大家有帮助哦. ...
最新文章
- java swing 树_Java Swing JTree 树形
- js 获取 屏幕 可用高度...
- C语言指针、数组与sizeof运算符
- javafx css颜色_JavaFX技巧7:使用CSS颜色常量/派生颜色
- oracle数据库物理结构包含,Oracle - 数据库物理结构
- EL表达式(Exprission language)
- spring security oauth2 资源服务器配置
- 树状结构搜索功能_百度搜索算法全解析SEO课程笔记
- 统计学学生学python吗_用Python学习统计学基础-4
- KindEditor
- RecyclerView让置顶项置顶
- mysql config.xml_generatorConfig-mysql.xml中连接数据库的正确书写方式。
- 我的世界1.13 mod制作——制作一个Item(二)
- 【MSSQL】SQL SERVER导入中文乱码问题解决
- python在新的图片窗口显示图片(图像)
- 【2018阅读书单2019阅读计划】
- 1.java概述与环境搭建
- java求1000以内的完数(方法)
- vs中readfile的作用,readFile和readFileSync之间的区别
- JavaScript调用Python代码
热门文章
- 项目文件夹下的obj文件夹
- java并发编程 目录_Java并发编程实战的作品目录
- AD拼版工具 Embedded board array 进行PCB拼版注意事项
- 使用nginx配置一个ip对应多个域名
- 酒精测试仪全国产化电子元件推荐方案
- 电脑重装系统忘记备份怎么找回文件
- Matlab矩阵基本操作(定义,运算)
- 无传感器永磁同步电机电机自适应自抗扰ADRC控制策略
- 华南理工计算机电路基础试题,2017年华南理工大学计算机电路基础
- 免费DEM数据(ASTER GDEMV3、ASTER GDEMV2、ASTER GDEMV1,SRTM90米、SRTM30米、GLS 2005 DEM、TanDEM)下载方式总结