文章目录 iframe内联框架table布局div元素的分类通用属性meta 元素link元素 新增的布局标签(h5)header元素footer元素article元素section元素aside元素nav元素微格式的概念time元素hgroup元素address元素新布局的优点figure/figcaption元素新布局的优点figure/figcaption元素
iframe内联框架
iframe为body元素的子元素，必须放在body中使用。可以引入一个外部的页面。
在现实开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索。
主要属性：src；name；id；width；height；frameborder（框架边框），scrolling（滚动条）。
应用场景：数据传输、共享代码，局部刷新、第三方介入（广告）等。
1.table布局是传统的网页布局方式：早期网页由于内容较少，布局简单，都是使用table布局
2.优点:比较简单，容易理解
3.缺点：对于复杂的布局，表格嵌套太多，比较繁琐；后期维护和修改很不方便…
4.table布局思路：用表格把屏幕分成几块–不同的单元格存放不同的内容
divdiv（块）：div全称为division，“分割、分区”的意思，<div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在<div>标签中，div中还可以嵌套多层div，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。
元素的分类块元素:主要特征是会产生换行效果，自动与其他元素分离成两行；通常可以作为容器在内部添加其他元素。
块元素有：h1~h6;hr;ul;ol;p;table…
内联元素（行内元素）:不会产生换行效果，会和其他元素并列排列；
内联元素有：a，img，span…
div元素是通用的块元素，内部可以包含其他各种元素包括其他div元素；并且可以通过CSS设置样式来完成复杂的页面的布局。span是行内元素，只占用自身大小的元素，不会占用一行。
块元素主要用来做页面的布局，内联元素主要用来选中文本设置样式，一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含块元素。
a元素可以包含任意元素，除了它本身。
p元素不可以包含任何其他块元素。
通用属性通用属性（全局属性）可以用于任何的HTML5元素；通用属性有十几种。
id属性
id属性用于指定元素的识别名称，相当于一个人的身份证，是唯一的，同一个文档中不能有重复的id；一般配合CSS和JavaScript来选择元素。
class属性
class属性用于指定元素的类别名称，可以使用class元素给同一个文档中的多个元素进行归类，CSS就可以通过class个同一类元素设置统一的样式。
style属性
stlyle属性用于给元素设定样式（内联样式或内部样式表）。
title属性
title属性用于显示省略的内容（或补充/提示说明的内容）：当光标移动到元素内容上时显示title里的内容。
dir属性
dir属性用于设定元素标签内容的文字方向。在文本样式的 bdo元素中可以用到。
lang属性
lang属性用于指定语言，比如中文还是英文：zh-cn/en;除了在html标签中设置，它还可以在特定元素中使用，改变该元素使用的语言。
其他通用元素还有：
accesskey:元素快捷键tabindex：元素移动顺序draggable：元素拖动contenteditable:元素是否允许编辑hidden:隐藏元素spellchcheck：元素检查contextmenu:元素快捷菜单data-yourvalue：自定义属性 meta 元素添加一些辅助信息，可以用于浏览器的SEO，搜索引擎优化。
meta 是个单标签，它没有结束标签；meta元素也可以成为空元素。
meta元素为head元素的子元素，且只能放在head标签中使用。
meta元素重要用来附加文档的额外信息，除了使用我们熟悉的 charset="utf-8"声明字符编码外，它还有几个常用的功能
通过name与content属性为文件加入作者(author)描述信息（description）关键词(kewords)编码工具（generator）等信息
通过属性http-equiv将指定的信息以HTTP表头信息的方式送到客户端。
<!--使用meta标签还可以设置网页的关键字--><meta name="keywords" content="HTML5,前端,java" /><!--还可以用来指定网页的描述搜索引擎在检索网页时，会同时检索页面中的关键词和描述，但是这两个值不会影响到页面在搜索引擎中的排名--><meta name="description" content="发布h5、js等前端相关的信息" /><!--使用meta标签可以用来做请求的重定向<meta http-equiv="refresh" content="秒数;url=目标路径"/>--><!--5秒后跳转到百度--><meta http-equiv="refresh" content="5;url=http://www.baidu.com"/> link元素 <!--京东网站的dns 和 icon--><!--域名解析--><link rel="dns-prefetch" rel="external nofollow" href="//static.360buyimg.com"/><link rel="dns-prefetch" rel="external nofollow" href="//misc.360buyimg.com"/><link rel="dns-prefetch" rel="external nofollow" href="//img10.360buyimg.com"/><link rel="dns-prefetch" rel="external nofollow" href="//img11.360buyimg.com"/><link rel="dns-prefetch" rel="external nofollow" href="//img12.360buyimg.com"/><link rel="dns-prefetch" rel="external nofollow" href="//img13.360buyimg.com"/><link rel="dns-prefetch" rel="external nofollow" href="//img14.360buyimg.com"/><link rel="dns-prefetch" rel="external nofollow" href="//img20.360buyimg.com"/><link rel="dns-prefetch" rel="external nofollow" href="//img30.360buyimg.com"/><link rel="dns-prefetch" rel="external nofollow" href="//d.3.cn"/><link rel="dns-prefetch" rel="external nofollow" href="//d.jd.com"/><!--标题的图标--><link rel="icon" rel="external nofollow" rel="external nofollow" href="//www.jd.com/favicon.ico" mce_rel="external nofollow" rel="external nofollow" href="//www.jd.com/favicon.ico" type="image/x-icon"/><!--还可以导入外部样式表--> 新增的布局标签(h5)新增的布局标签可以概括为两类：用于控制页面主体内容的标签，可以划分为主体结构标签；非主体结构标签，用来放置辅助主体内容的信息。
HTML 5新的语义化标签header :页眉footer :页脚main ;主体hgroup ;标题组合nav :导航注: header、 footer、 main在一个网页中只能出现一次。article :独立的内容aside :辅助信息的内容section :区域figure :描述图像或视频figcaption :描述图像或视频的标题部分datalist :选项列表details / summary :文档细节/文档标题progress / meter :定义进度条/定义度量范围time:定义日期或时间怕孤独的万宝路 :带有记号的文本article标签：定义一个独立内容区块：一篇文章、一个视频文件等
cection标签：定义一个区域，如文章的章节等
nav标签：定义目录导航
aside标签：定义侧边栏
figure/figcaption标签：定义一组媒体内容以及它们的标题
header/footer标签：定义一个头部/底部
hgroup标签：标题分组
address标签：地址、联系信息等
header元素用于设置一个页面的标题部分，通常会包含标题，LOGO，导航等
通常会放在文章的头部
通常用于设置一个网页的底部区域，会包含友情链接，版权声明，文件建立日期，联系方式等。通常会放在页面的页脚。
article元素用于定义一个独立的内容区块，比如一篇文章，一篇博客，一个帖子，论坛的一段用户评论，一篇新闻消息等。
article元素内可以嵌套其他元素，它可以有自己的头、尾、主体等内容。使用时要特别注意内容的独立性，一般对于独立完整的内容才使用article元素，如果只是一段内容的话应该使用section元素。
用来定义文章中的章节(通常应该有标题和段落内容)
用来定义文档中特定内容的区块，可视为一个区域分组元素，用来给页面上的内容分块。
section元素可以定义文档的主体内容。
用一句话来概括它的作用就是给内容分段，给页面分区
注意他与div的区别，div强调在形式上的独立性，section强调的是内容上的独立性，注意它的语义。
article元素和section元素的区别语义不同：article元素更强调内容的独立性，section元素更强调内容的关联性。article元素是独立完整的内容，section元素页面内容分块。
相同点：本质上都是带有语义的div块元素，分别可以看作<div id="section">和<div id="article">。
aside元素aside元素通常用来设置侧边栏。
用于定义article元素之外的内容，前提是这些内容与article元素内的内容相关。
同时也可嵌套在article元素内部使用，作为主要内容的附属信息，比如与主内容有关的参考资料，名词解释等。
nav元素用来定义目录、导航栏、超链接
并非所有的超链接都放在nav元素中，通常只把一个文档中的主导航栏放在nav中
在文章页面中，nav还可以用来给一个文字做一个目录的超链接
微格式的概念HTML5中的微格式，是一种利用HTML5中的新标签对网页添加附加信息的方法，附加信息例如新闻事件发生的日期和时间，文章发表的日期等。
HTML5中的微格式是为了简化浏览器对数据的提取，方便搜索引擎的搜索.
time元素time是HTML5新增的元素
time元素代表24小时中的某个时刻或某个日期，表示时刻时允许带时差。它可以定义很多格式的日期和时间
datetime属性中日期与时间之间要用"T"文字分隔，"T"表示时间。请注意倒数第二行，时间加上Z文字表示给机器编码时使用UTC标准时间，表示向机器编码另一地区时间，如果是编码本地时间，则不需要添加时差。
pubdate属性是个可选标签，加上它搜索引擎/浏览器就可以很方便的识别出那个日期是文章、新闻的发表日期。
time元素示例
<time datetime="2015-10-22">2020年2月12日晚上8点</time>
<time datetime="2015-10-22T20:00">2020年2月12日晚上8点</time>
<time datetime="2015-10-22T20:00Z">2020年2月12日晚上8点</time>
<time datetime="2015-10-22T20:00+09:00">美国时间2020年2月12日晚上8点</time>
hgroup元素通常用来给标题分组，通常放在header中；但是并非强制要求，也不是绝对的。
address元素通常用用来说明作者的联系信息，例如名字，E-mail，电话，地址等
address元素中的内容会以斜体显示。
新布局的优点更注重于内容而不是形式
对人的友好：更加的语义化，高度的描述性，更加的直观，增加了代码的可读性。
对计算机的友好：浏览器更容易解析，搜索引擎更容易抓取文档的内容
代码更加的简洁
figure/figcaption元素figure/figcaption都是HTML5中新增的元素
figure元素是一个媒体组合元素，也就是对其他的媒体元素进行组合，比如：图像、图表等等
figcaption元素：用来给figure元素定义标题。
新布局的优点更注重于内容而不是形式
对人的友好：更加的语义化，高度的描述性，更加的直观，增加了代码的可读性。
对计算机的友好：浏览器更容易解析，搜索引擎更容易抓取文档的内容
代码更加的简洁
figure/figcaption元素figure/figcaption都是HTML5中新增的元素
figure元素是一个媒体组合元素，也就是对其他的媒体元素进行组合，比如：图像、图表等等
figcaption元素：用来给figure元素定义标题。