HTML5标签整理

HTML 5新加入的标签以黑体标识，HTML 5不支持的以斜体标识。

标签描述
<!--...--> 评论
<!DOCTYPE> 文档类型
a 超链接
abbr 缩写
acronym HTML 5中废弃，请使用abbr
address 定义文档作者的联系信息
applet HTML 5中废弃，请使用object
area image map中的区域
article 文章
aside 边注
audio 音频
b 粗体
base 定义文档中所有相对链接的base信息
basefont HTML 5中废弃，请使用CSS
bdi 与周围文字使用不同文字方向
bdo 覆盖现有的文字方向
big HTML 5中废弃，请使用CSS
blockquote 引用
body 文档主体
br 换行
button 可点击的按钮
canvas 通过脚本（一般是JavaScipt）编写canvas动画
caption 表格描述
center HTML 5中废弃，请使用CSS
cite 书籍、音乐、电影、电视剧、绘画、雕塑等著作的标题
code 代码
col 表格中的列
colgroup 分组表格中的列
command 命令按钮（主流浏览器均不支持）
datalist 表单中预先定义值的列表
dd 定义列表中的定义
del 删除
details 用户可查看或隐藏的详细信息
dfn 术语的定义
dialog 对话框
dir HTML 5中废弃，请使用ul
dl 定义列表
dt 定义列表中的被定义项
em 强调
embed 外部（非HTML）应用的容器
fieldset 分组表单中的相关元素
figcaption 图表描述
figure 图表
font HTML 5中废弃，请使用CSS
footer 页脚
form 表单
frame HTML 5中废弃
frameset HTML 5中废弃
h1到h6 标题
head 文档信息
header 页首
hr 水平分割线
html HTML根元素
i 斜体
iframe inline frame
img 图片
input 表单中的输入框
ins 插入
kbd 键盘输入
keygen 表单中的密钥对生成
label input标签
legend fieldset描述
li 列表项
link 定义文档和外部资源的关系（最常见的用法是链接到样式表)
main 文档的主体部分
map 客户端图片地图
mark 高亮文本
menu 菜单
meta 元信息
meter 计量器
nav 导航链接
noframes HTML 5中废弃
noscript 为不支持客户端脚本的用户准备的替代性内容
object 嵌入对象
ol 有序列表
optgroup 分组下拉列表中的相关项
option 下拉列表中的选项
output 演算结果
p 段落
param object的参数
pre 预格式文本
progress 任务进展度
q 简短的引用
rp 为不支持ruby记号的浏览器准备的替代性内容
rt 字符的解释、读音（东亚字体）
ruby ruby标记（东亚字体）
s 不再正确的内容
samp 电脑程序的输出示例
script 客户端脚本
section 文档区块
select 下拉列表
small 字体较小的文本
source 多媒体元素（video和audio）的多个来源
span 小块
strike HTML 5中废弃，请使用del
strong 强调
style 文档样式|
sub 下标
summary details标题
sup 上标
table 表格
tbody 表格的主体
td 单元格
textarea 文本框
tfoot 表格底部
th 表格头部的单元格
thead 表格头部
time 时间、日期
title 文档标题
tr 表格中的列
track 多媒体元素（video和audio）的字幕
tt HTML 5中废弃，请使用CSS
u 下划线
ul 无序列表
var 变量
video 视频或电影
wbr 可换行之处
 
 
 

HTML5 Element Index

Head

Sections

  • body
  • article 独立完整的功能
  • nav     标记导航（对应网页中重要的链接群就需要用这个标签）包含在<nav>中间的通常是<ul>无序列表。当然如果是面包屑链接就需用到<ol>有序列表
  • aside  定义侧栏标签（表示一部分内容与页面的主体并不是有很大的关系，但是可以独立存在），用他可以实现：升式引用、侧栏、相关文章的链接框、广告、友情链接等等。
  • section 
           带有主题的部分      <section></section> 主要用于 页面上的版块
           用于列举划分页面上的不同区域,或者划分文章里不同的节
  • 不要用它来定义样式，不要对它进行脚本控制，div更合适  （可通过内嵌<div>解决）      ！！其他语义标签并未有此限定
  • 如果用article,nav, aside来描述更合适的话，就不要使用section
  • section里面的内容通常以h1~h6开始，否则的话，不要使用section
 
  • header
  • footer  页脚标签（与<header>标签对应的标签），用他可以实现的功能有：附录、索引、版权页、许可协议等。
  • h1-h6
  • main
  • address <address>是用来定义与HTML页面或页面一部分有关的作者、相关人员或组织的联系信息，通常位于页面底部或相关部分内；
  • <address>标签中不能有<h1>~<h6>、<article>、<address>、<aside>、<footer>、<header>、<hgroup>、<nav>、<section>等标签；
  • 它并非显示通用邮寄地址(实际地址)的通用方式。因此，下面这种使用方式是错误的：
    HTML5将address元素定义为：显示与它最近的article或body元素的通信信息。
    它表示你应该使用address元素来显示当前article作者或整个页面的通信信息。因为可以在article中address,所以这也意味着在一个页面中可以多次使用address元素。address元素的内容可以是电子邮件地址、网址、电话号码、邮件地址或其他任何通信信息。
        <address>
           You can contact author at <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br>
           If you see any bugs, please <a href="mailto:webmaster@somedomain.com">contact webmaster</a>.<br>
            You may also want to visit us:<br>
            Mozilla Foundation<br>
            1981 Landings Drive<br>
            Building K<br>
            Mountain View, CA 94043-0801<br>
            USA
        </address>

Grouping

  • p
  • hr
  • pre
  • blockquote
  • ol
    • 用于呈现内容 ，而不是布局 （区分与section）
  • li
  • dl, dt, dd
  • figure  
    <figure>这个元素是用来引入图表、图形、照片等，对应的场景就是像是杂志中的图片一样，在HTML5之前是没有一个专门的标签来做这个事的，之前如果实现这个功能就是用没有语义的<div>标签；

    用法提示：
    1. <figure>元素可以包含多个内容块，但是只能有一个<figcaption>（可以理解成给图表加标题）标签；
    2. 可以用<h1>~<h6>来给<figure>增加标题；
    3. <figcaption>不能单独出现，需要有配套的内容一起出现。
  • figcaption
  • div  
    建议：
    1. 如果你觉得用HTML5中的新的标签比用<div>合适就一定要用新的标签，因为<div>没有任何的语义，这个是HTML5所不倡导的；
    2. 如果效果需要的话可以在HTML5新标签的外面加一个<div>标签，这样对HTML中的语义不会产生太大的影响。

Tables

Forms

Forms 2

  • keygen
  • output
  • progress  同样的一个进度条的显示，可以用做一些很好的与用户交互的效果，问题是浏览器的兼容现在也不好。
  • meter  可以用它做一些测量结果的显示与投票结果的显示

Interactive

Edits

Embedded

Text-level

 
总结：粗体和斜体是一种表现形式 而重要性是一种语义形式

<b> 粗体    

<strong> 粗 体并 重要性
 
<i>斜体
 
<em> 斜体 并 重要性
 

Text-level 2

  • time  可以通过这个标签标记一个具体的时间或日期，应用场景通常就是一篇文章的发表时间。
  • 需要注意的是：
    1. datetime中的时间最好与<time>标签中的文本元素日期一样，写法可以不一样；
    2. 如果这个时间是代表整个文章或是页面的时间需要添加pubdate属性；
    3. 不要在<time>标签中使用不确切的时间如：“今天中午”、“上周末”；
    4. 如果 使用pubdate属性需要注意的是要在同一个父标签下面不要出现张冠李戴的问题；
    5. <time>标签不能在嵌套另一个<time>标签；
    6. datatime中的时间格式需要是标准的机器可能的时间 如:YYYY-MM-DDThh:mm:ss
  • code
  • kbd
  • samp
  • var
  • mark
  • bdi
  • bdo
  • ruby, rt, rp
  • span
  • br
  • wbr 一个与<br>很像的新标签，区别在于它不会强制换行
 
********************************************************************************************************************
 
 
行内元素和块级元素分类
 

 

 

 
 
posted @ 2016-09-04 16:00  阿巴阿巴55996  阅读(197)  评论(0)    收藏  举报