Day4 HTML新增元素与布局
HTML新增属性:
一:常见的布局标签(都是块级元素)
<header>头部</header> <nav>导航</nav> <aside>侧边栏</aside> <article>文章,独立的块,帖子</article> <section>章节,页眉,页脚</section> <footer>页脚</footer>
1.header 页面头部
2.nav 导航链接
3.article 定义页面独立的内容区域,例如一篇完整的论坛帖子,一篇博客文章,一个用户评论等.
4.aside 定义页面的侧边栏内容
5.footer 页脚
6. section 定义文档中的节。比如章节、页眉、页脚或文档中的其它部分
7.figure 用于对元素进行组合。 多用于图片与图片描述组合 ( 跟dl自定义列表dd,dt相同 )
8.figcaption 是figure的标题
<figure> <img src="images/img1.png" alt=""/> <figcaption>中国队周琦狂砍22分</figcaption> </figure>
dl自定义列表dd,dt相同,图片不缩进,内容缩进.
figure图片内容都缩进
9.mark 标记 (默认黄色背景,字体黑色)
定义带有记号的文本,它会给你要突出显示的文本下加个背景色。
如:你是<mark>大长腿</mark>吗?
10.details 标签用于描述文档或文档某个部分的细节 (IE不支持 <details> 标签)
<details> <summary>details中的标题</summary> summary 是details中的标题 <p>详细的内容</p>
</details>
11.meter 用来表示范围已知且可度量的内容。
<meter> </meter>标签(同电池)
<meter> 标签定义度量衡。仅用于已知最大和最小值的度量。
<meter min="0" max="100" value="80"></meter> low:最低预警值 high:最高预警值 <meter min="0" max="100" value="81" low="20" high="80"></meter> 低于20,高于80会变颜色,相等颜色不变为绿色
12.ruby 加注释
13.<progress></progress>标签 (同进度条)
<progress> 标签定义运行中的进度(进程)
<progress max="100" value="20"></progress>
max:定义完成值 value:定义当前值
15.<datalist></datalist>标签
(给input提供选项列表)定义 input 可能的值.datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表
16.<video> </video>标签 (支持mp4,ogg移动端,webM高清) 行内元素,IE5,6,7,8不支持
<video> 标签定义视频,比如电影片段或其他视频流.
eg:<video src="movie.mp4" controls>您的浏览器不支持视频。</video>
常用属性:src 路径(必须属性)
autoplay 自动播放
loop 循环播放
controls 显示控制面板
muted 静音
post 视频播放前显示图片 post="img.jpg"
width height 宽度高度
17.<audio></audio>标签 (支持MP3,ogg,wav) 没有宽高.
<audio> 标签定义声音,比如音乐或其他音频流.
eg:<audio src="someaudio.mp3">您的浏览器不支持音频.</audio>
18.<source></source> 标签
给浏览器提供多种格式,浏览器根据自己支持的情况选择支持的格式.比如视频音频.
eg:<audio controls> <source src="horse.ogg" > <source src="horse.mp3" > 您的浏览器不支持视频. </audio>
19.<embed/>标签 (行内元素)
<embed> 标签定义嵌入的内容,比如插件,也可以用来引入视频,音频.
<embed> 标签必须有 src 属性
eg1:<embed src="helloworld.mp4" width="800" height="400"/> eg2:<embed src="images/纸短情长.mp3" type=""/>
20.<canvas> </canvas> 标签
canvas只是个图形容器,通过脚本js来绘制图形.(比如图标和其他图像).实现非常复杂的动画效果.
eg: <canvas id="myCanvas">你的浏览器不支持canvas标签</canvas> <script type="text/javascript"> var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); </script>
1.document 文档
2.getElementById 通过ID获取元素
3.ctx(getcontext) 获取上下文
4.fillstyle 填充样式
5.fillRect 填充剂