HTML5学习补充
标签
元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。
meta包含name和content两个属性，可以使用name="description"，这样content的内容会在搜索引擎中显示（title也会）。
link可以给页面添加图标。
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<header>元素用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。
HTML <footer> 元素表示最近一个章节内容或者根节点（sectioning root ）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
HTML <address> 元素 表示其中的 HTML 提供了某个人或某个组织（等等）的联系信息。
HTML <nav>元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。
HTML <aside> 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框（call-out boxes）。
HTML <hgroup> element代表文档章节所属的多级别的目录，它将多个h1至h6的子元素组装到一起。
HTML <article>元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。可嵌套。
HTML <section>元素 无联系的小节。 一般来说，一个 <section> 应该出现在文档大纲中。
<datalist> HTML <datalist>元素包含了一组<option>元素，这些元素表示其它表单控件可选值.
和select有点类似，但是datalist需要有一个id，并且有一个输入框<input datalist="它的id" />来引用，不同的浏览器显示效果不一。
<details> 折叠。HTML <details>元素可创建一个挂件，仅在被切换成展开状态时，它才会显示内含的信息。<summary> 元素可为该部件提供概要或者标签。
在写css时，可有展开状态，即details[open] {样式表}
这是折叠标题
这是折叠的内容1
这是折叠的内容2这是折叠的内容3
HTML <embed> 元素将外部内容嵌入文档中的指定位置。此内容由外部应用程序或其他交互式内容源（如浏览器插件）提供。大多数浏览器已取消对插件的支持。
HTML <output> 标签表示计算或用户操作的结果。这相当于JS了。
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" name="b" value="50" /> +
<input type="number" name="a" value="10" /> =
<output name="result"></output>
</form>
HTML中的<progress>元素用来显示一项任务的完成进度。虽然规范中没有规定该元素具体如何显示,浏览器开发商可以自己决定,但通常情况下,该元素都显示为一个进度条形式. 属性max、value等。<meter>元素类似。
这是progress
这是meter
<a> 链接到要下载的资源时可以用属性download提供默认的下载文件名。
图片的配置 <figure><img><figcaption>说明文字</figcaption></figure>
HTML<table>标签里，设置以列为单位的样式可以用<colgroup>和<col>，如下：
<colgroup>
<col style="background-color: yellow" span="2">
</colgroup>
<caption>为表格设置标题，显示在表格顶部。
HTML <fieldset> 元素用于对表单中的控制元素进行分组（也包括 label 元素）。HTML <legend> 元素用于表示其父元素 <fieldset> 的内容标题。
网页结构
<header>页眉<nav>包含页面主导航功能。其中不应包含二级链接等内容。<main>主内容。主内容中还可以有各种子内容区段，可用<article><section>和<div>等元素表示。存放每个页面独有的内容。每个页面上只能用一次，且直接位于 中。最好不要把它嵌套进其它元素。 <aside>侧边栏，经常嵌套在<main>中。<footer>页脚。
<div> 非常便利但容易被滥用。由于它们没有语义值，会使 HTML 代码变得混乱。要小心使用，只有在没有更好的语义方案时才选择它，而且要尽可能少用， 否则文档的升级和维护工作会非常困难。
px pxem em
PX
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
PX特点
- IE无法调整那些使用px作为单位的字体大小；
- 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
- Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
EM
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
EM特点
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。
注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
所以我们在写CSS的时候，需要注意两点：
1. body选择器中声明Font-size=62.5%；
2. 将你的原来的px数值除以10，然后换上em作为单位；
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。
REM
rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：
p {font-size:14px; font-size:.875rem;}
注意： 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。
px 与 rem 的选择？
对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。
对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
rpx
rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。
无论是在iPhone6上面还是其他机型上面都是750rpx的屏幕宽度，拿iPhone6来讲，屏幕宽度为375px，把它分为750rpx后， 1rpx = 0.5px。
微信小程序同时也支持rem尺寸单位， rem 规定屏幕的宽度为20rem, 所以 1rem = (750/20)rpx = 37.5 rpx
SVG图像
SVG 是用于描述矢量图像的XML语言。 它基本上是像HTML一样的标记，只是你有许多不同的元素来定义要显示在图像中的形状，以及要应用于这些形状的效果。
以下是一个SVG手工编码的实例：
<svg version="1.1"
baseProfile="full"
width="300" height="200"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="grey" />
<circle cx="150" cy="100" r="90" fill="pink" />
</svg>
SVG除了迄今为止所描述的以外还有其他优点：
矢量图像中的文本仍然可访问（这也有利于 SEO)）。
SVG 可以很好地适应样式/脚本，因为图像的每个组件都是可以通过CSS或通过JavaScript编写的样式的元素。
那么为什么会有人想使用光栅图形而不是SVG？ 其实 SVG 确实有一些缺点：
SVG非常容易变得复杂，这意味着文件大小会增加; 复杂的SVG也会在浏览器中占用很长的处理时间。
SVG可能比栅格图像更难创建，具体取决于您尝试创建哪种图像。旧版浏览器不支持SVG，因此如果您需要在网站上支持旧版本的 IE，则可能不适合（SVG从IE9开始得到支持）。
由于上述原因，光栅图形更适合照片那样复杂精密的图像。