HTML5 review

section:适用于独立结构内容,无结构关系(例如article,aside与其他标签可以组合形成具有特定结构关系的标签结构)。须具有标题(待考证).

menu&nav:menu用于应用程序的菜单,而nav用于导航,体现在语义意义上。

aside:附属信息,例如:引用,侧边栏,广告等等,区别于父元素主体内容的意义迥异的内容。

time:pubdate:布尔类型,用于指明多个time标签中哪个time用于表示发布时间。

header:表示某个内容块的标题(可以为复合标题,例如包括搜索表单,logo图片等)

footer:父元素的脚注(作者,版权信息等)

hgroup:标签组合

pubdate:布尔类型

HTML5及之前版本标签用法及语义学习:

根标签:

html:根元素,代表HTML文档的根节点。所有其它元素都是它的子节点。

元标签(包含一些文本自身的信息):

head:其中规定文档的标题,脚本样式的链接。

title:文档的标题。

base:定义相对URL的基准。

link:链接外部样式表到html文档

meta:定义其它元标签无法描述的元信息。(知识点小技巧较多,以后展开学习)

stlye:内联样式表。

脚本相关:

script:链接外部脚本

noscript:禁止脚本运行时显示的替代内容

template(模板):允许包含加载页面时不渲染,之后通过JS实例化的内容。存储在页面中通过JS来操作的内容。(未使用过)

章节:

body:表示文档的内容

section:表示一个区域(无结构信息,例如表示导航,侧边栏,正文等),在文档中框架中充当一定作用,而非一般容器div。一般包含一个heading。

nav:导航

article:相对独立的内容部分

aside:侧边栏

hN:文旦标题,描述部分内容的主题

header:页面或部分内容头部,经常包含logo,标题,导航目录

footer:页面或部分内容尾部,经常包含法律信息、版权、反馈信息等。

address:为最近的article标签提供联系信息(作者信息),或者为body提供联系信息。不能 用于其他用途。

main:定义文档主要的唯一内容。

组织内容:

p:段落

hr:章节、文章中段落之间的分隔符。

pre:已排版内容,提示浏览器保留内容原始格式。

blockquote:引用其他的内容。

ol:有序列表

ul:无序列表

li:列表项

dl(defined list):定义列表

dt(defined term):定义的名称。

dd(defined description):定义的描述。

figure:与文档有关的图例及其说明,可不包含figcaption,表示没有说明。

figcaption:对figure中的图的描述文字

div::通用容器,用于样式描述的需求将标签进行分组。

文字形式:

a:超链接

em:强调,文字以斜体形式出现。

strong:重点,文字以粗体形式出现,体现内容在上下文中的重要性。

small:注释,用于法律申明等,文字以比正常文字小的字号出现。

s:不准确或不相关的内容,内容呈现文本删除线或一条线穿过。

cite:作品的引用,缩写或者名称。

q:内联形式的简短引用。

dfn:定义

abbr:缩写,完整内容出现在其title属性中

data:机器可读形式的内容

time:表示日期和时间,其机器可读形式通过datetime形式表示

code:代码

var:代码变量

samp:程序输出

kdd:用户(键盘)输入,在浏览器中以等宽字体的内联元素显示。

sub:下标

sup:上标

i:某种原因区别于普通文本的文本,以斜体显示。

b:仅表示与普通文本有字体上的区别,无语义,表关键字等,以加粗形式显示。

u:文字以下划线形式表示,如标记拼写错误文字。

mark:表示内容在上下文中的关联。区别于strong。

ruby:被ruby注释标记的文字

rt:ruby注释

rp:代表 ruby 注释两边的 额外插入文本 ,用于在不支持 ruby 注释显示的浏览器中提供友好的注释显示。

bdi:不同于父元素文本方向的文字

bdo:指定子元素文本方向。

span:没有特殊含义的文本,语义元素不合适时使用该元素

br:换行

wbr:建议换行

编辑:

ins:增加到文档中的内容

del:从正文中移出的内容。

嵌入内容

img:图片

iframe:框架

embed:应用程序

object:

param:object指定的插件的参数

video:视频,提供用户界面

audio:音频

source:指定video或audio的媒体源

track:指定video或audio的字幕或歌词

canvas:位图区域

map,area:共同定义图像映射区域

svg:外链矢量图

math:数学公式

表格

table:表

caption:表的标题

colgroup:列组

col:列

tbody:表格主体

thead:表头

tfoot:表尾

tr:行

td:表的正文单元格

th:头部单元格

表单:

form:表单包含多个控件

fieldset:控件组

legend:fieldset的标题

label:表单控件的标题

input:文本框、单选框等控件,通过type选择

button:按钮

select:下拉框

datalist:包含一组option,表示可选项

optgroup:select中创建多个分组的选项

textarea:多行文本框

keygen:秘钥对生成器控件

output:计算结果,输出

progress:进度条

meter:滑动块

交互元素(待学习)

details

summary

menuitem

menu

时间: 2024-10-11 16:54:13

HTML5 review的相关文章

HTML5微数据

本篇文章是一个纯搬运贴,原博主是在是做的太详细了 原贴地址:http://www.zhangxinxu.com/wordpress/2011/12/html5扩展-微数据-丰富网页摘要/ 一.微数据是? 一个页面的内容,例如人物.事件或评论不仅要给用户看,还要让机器可识别.而目前机器智能程度有限,要让其知会特定内容含义,我们需要使用规定的标签.属性名以及特定用法等.举个简单例子,我们使用<h1>标签包裹页面标题信息就是为了让机器识别(搜索引擎 – SEO). 而微数据是什么呢?在我看来,微数据

HTML5扩展之微数据与丰富网页摘要

一.微数据是? 一个页面的内容,例如人物.事件或评论不仅要给用户看,还要让机器可识别.而目前机器智能程度有限,要让其知会特定内容含义,我们需要使用规定的标签.属性名以及特定用法等.举个简单例子,我们使用<h1>标签包裹页面标题信息就是为了让机器识别(搜索引擎 – SEO). 而微数据是什么呢?在我看来,微数据也是为了方便机器识别而产生的东西.其有特定的规范,有特定的格式.可以丰富搜索引擎的网页摘要. 先来看看比较官方的解释:HTML5 微数据规范是一种标记内容以描述特定类型的信息,例如评论.人

HTML5旋转立方体

在工作中的经常使用repo命令,但是有时会忘记一些命令和遇到的一些问题,记录下来方便已经查询. 常见问题: 问题1:找不到命令:repo 方法: 在下载android源码的时候用repo时提示找不到命令,可以用如下方法解决,在命令行中输入如下两行: echo 'export PATH=$PATH:$Home/bin' >>~/.bashrc export PATH=$PATH:$HOME/bin 问题2: /home/xxxxxx/bin/repo: line 1: 在未预料的"ne

HTML5扩展之微数据与丰富网页摘要itemscope, itemtype, itemprop

HTML5扩展之微数据与丰富网页摘要 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2058 一.微数据是? 一个页面的内容,例如人物.事件或评论不仅要给用户看,还要让机器可识别.而目前机器智能程度有限,要让其知会特定内容含义,我们需要使用规定的标签.属性名以及特定用法等.举个简单例子,我们使用<h1>标签包裹页面标题信息就是为了让机器识别(搜索引擎 – SEO).

HTML5扩展之微数据与丰富网页摘要——张鑫旭

一.微数据是? 一个页面的内容,例如人物.事件或评论不仅要给用户看,还要让机器可识别.而目前机器智能程度有限,要让其知会特定内容含义,我们需要使用规定的标签.属性名以及特定用法等.举个简单例子,我们使用<h1>标签包裹页面标题信息就是为了让机器识别(搜索引擎 – SEO). 而微数据是什么呢?在我看来,微数据也是为了方便机器识别而产生的东西.其有特定的规范,有特定的格式.可以丰富搜索引擎的网页摘要. 先来看看比较官方的解释:HTML5 微数据规范是一种标记内容以描述特定类型的信息,例如评论.人

html5标签说明

页面结构发生变化 web 1.0 table时代 多层嵌套效率低.seo抓取能力不强 web 2.0 时代 大量的DIV+CSS   典型案例(微博.博客) web3.0时代 html5 减少DIV+CSS 简洁 典型案例(百度) 标签的变化 增加25个标签 结构元素 section元素:表示页面中的一个内容区块:比如章节.页眉.页脚或页面中的其他部分.它可以与h1 h2 h3 h4 h5 h6等元素结合起来 article  元素:表示页面中的一块与上下文不相关的独立内容,譬如博客中的一篇文章

HTML5新增Canvas标签及对应属性、API详解(基础一)

知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签原型 <canvas width=”1000” height=”1000” id=”myCanvas”> 您的浏览器版本过低,不支持HTML5新增的canvas标签. </canvas> 使用js获取该画布,并指定对象 <script> Var canvasID = doc

HTML5介绍

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权:凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记. HTML5没有那么难,他是一个非常简单的标记. 三个知识点:THML5/JS/CSS3. 之后是网页框架 C/S 客户端/服务器 B/S 浏览器/服务器 C/S构架的优缺点: C/S架构的模型: C/S架构一旦发生更新,那么成千上万个客户机都要进行更新,如果更新内容比较多,客户机不更新完毕,就无法运行. B/S架构工作原理: B/S架构优缺点: 移动公司都是

Web程序员们,你准备好迎接HTML5了吗?

HTML5作为下一代的web开发标准,其特性已经慢慢地出现在主流的浏览器中,这种新的HTML将会让浏览器不必再依赖Flash.QuickTime.Silverlight等插件,也简化了原来需要大量JS才能达到的效果.虽然HTML5还在讨论过程中,但是其优越的特性已经得到了大家的认可,各大浏览器厂商,一些知名的内容发布网站也都是积极地推动, 尤其是即将发布的IE9会完全支持HTML5.作为Web开发人员的我们,需要做的是:如何把HTML5转化为各种Web应用,如何做到现有的Web应用过渡到HTML