HTML5新增加的标签

一、标签（HTML5不引入DTD?因为不基于SGML。）

（1）<section></section> 表示内容区块 

（2）<article></article>表示页面中的一块与上下不相关的独立内容 比如定义文章

（3）<aside></aside>表示article元素的内容之外 如定义文章侧边栏

（4）<header></header> 头部标签

（5）<footer></footer>脚部标签

（6）<nav></nav>导航标签

（7）figure

<figure> 定义一组媒体对象以及文字内容

　　<figcaption></figcaption>定义figure的标题  figure中只能放置一个figcaption

</figure>

（8）<embed/> 定义嵌套的内容 格式可以是midi、mav、MP3、flash等

（9）<mark></mark>标记 即高亮显示文字

（10）<video src=""></video> 定义视频    autoplay自动播放 controls控制播放 loop是否重复播放 preload是否自动加载

　　poster属性规定视频下载时显示的图像或者用户点击播放按钮前显示的图标 如poster=“./img/1.jpg”

　　一共支持三种格式：ogg、MPEG4、webm

　　多个文件时用source或param

　　<source src="" type=""/>

　　<param name=""  value=""  />name定义参数的名称

（11）<audio src=“”></audio>定义音频（用jq获取节点时需要写成$('#id')[0]）

（12）datalist

　　<input type="text" list="box"/>

　　<datalist id="box">

　　　　<option value="" />

　　　　<option value="" />

　　</datalist>

（13）<canvas>定义图形提供画布</canvas>

（14）<output></output>表示不同类型的输出 比如脚本的输出

（15）新增的表单元素  ：email     URL   number  range  date  

　　表单验证：placeholder   autofocus自动获取焦点一个页面只能有一个    required验证输入不能为空    autocomplete数据检索，加在form上，必须有name属性 max min 最大值  最小值  step数字间隔   novalidate取消验证

二、流式布局

　　即百分比布局。（宽度， 高度，边距，rem，定位值）
　　尺寸百分比 = 目标元素的宽度（高度）/ 父级的宽高
　　定位值百分比 = 目标元素的定位值 / 父级的宽高
　　margin和padding / 父级的宽度

　　em: 针对父级来设置自身

　　rem: 针对html

三、媒体查询

　　可以根据不同屏幕尺寸，动态的修改网页布局以及样式，是响应式网站不可缺少的一部分
　　only 可以省略 多个条件用and相连
　　@media only screen and (min-width:500px) and (max-width:700px){......}
link:
　　<link rel="stylesheet" href="" media="screen and (min-width:500px) and (max-width:700px)">

四、响应式布局

 　　三个条件：a、网站必须建立灵活的网络基础 b、引用到网站的图片必须是可伸缩的 c、不同的显示风格，需要在media  Query上设置不同的样式

　　响应式网站：由两种办法完成响应式网站, 流式布局和媒体查询，通常情况下相辅相成共同完成响应式网站。

五、私有属性前缀

 　　-webkit-: 谷歌前缀，谷歌内核（猎豹 360 safari）
　　-o-: 欧朋 （已经摒弃自己的内核，转战谷歌的阵营）
　　-ms-: 微软 ie   
　　-moz-: 火狐 

 

转载于:https://www.cnblogs.com/niuxiaoxian/p/8424042.html