4.html5实战训练

</pre><p></p><p><span style="font-size:14px">根据上述图片用html5建立页面布局。体会各个标签的意义。</span></p><p></p><p><span style="font-size:18px"><strong>1.先定义头部</strong></span></p><p><span style="font-size:14px"><header><p>这里是头部</p></span></p><p><span style="font-size:14px">头部的样式：header{height:150px;background:#ABCDEF; }</span></p><p><span style="font-size:18px"><strong>2.中间部分用div块又分为2个section和aside</strong></span></p><p><span style="font-size:14px">定义中间部分的样式，有float：left和float：right</span></p><p><span style="font-size:18px"><strong>3.定义footer.,在样式定义中  Clear：both 清除浮动。</strong></span></p><p><span style="font-size:18px"><strong>4．定义头部中的导航<nav>，他只是一个标签，里面的含需要用ul 和li列表的形式。</strong></span></p><p><strong><span style="font-size:18px">5.定义右侧边栏用hgroup把所有的标题整合成一个组。</span></strong></p><p><span style="font-size:18px"><strong>6.footer标签的使用</strong></span></p><p><span style="font-size:14px"><hr/>代表的是下划线</span></p><p><span style="font-size:14px"><small>小字体</small></span></p><p><span style="font-size:14px"><diglog></span></p><p><span style="font-size:14px"><dt>这里提问</dt></span></p><p><span style="font-size:14px"><dd>这里回答</dd></span></p><p><span style="font-size:14px"></diglog></span></p><p><strong><span style="font-size:18px">7.<meter>和<progress ></span></strong></p><p><span style="font-size:14px"><strong>A.</strong> <metermin="0" max="10" value="5" low=" 3"high="8"></meter></span></p><p><span style="font-size:14px"><img src="https://img-blog.csdn.net/20150124202339531?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ3VvY2FpcWluMTIz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /></span></p><p><span style="font-size:14px">    解释代码：min最小值，max最大值，value表示当前值，low表示3，high表示，说明在3---8之间进度条显示绿色，超出范围或者低于这个范围则用黄色表示，处于警告状态，多用于气压，温度检测。</span></p><p><span style="font-size:14px"><strong>B.</strong>进度条应用<progress max="100"value="50" </progress>，多用于安装进度。安装成功表示100%，当前值50%</span></p><p><span style="font-size:14px"><strong>8.往系统中内嵌菜单</strong></span></p><p><span style="font-size:14px"><div  contextmenu="caidan" >  右击我试试  </div></span></p><p><span style="font-size:14px"><menutype="context"  id="caidan"></span></p><p><span style="font-size:14px"><menuitemlabel="菜单一" οnclick="alert('我是菜单一')"icon="http://www.baidu.com/img/baidu_sylogo1.gif"></menuitem></span></p><p><span style="font-size:14px"></menu></span></p><p><span style="font-size:14px">显示结果：  (firefox可以显示)                     </span></p><p><span style="font-size:14px">  <img src="https://img-blog.csdn.net/20150124201831725?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ3VvY2FpcWluMTIz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />      <img src="https://img-blog.csdn.net/20150124201843940?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ3VvY2FpcWluMTIz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /></span></p><p><span style="font-size:14px">解释：contextmenu属性，设置右键菜单。</span></p><p><span style="font-size:14px">Onclick，单击这个动作</span></p><p><span style="font-size:14px">  Icon：小图标</span></p><p><span style="font-size:18px"><strong>9. <details></strong></span></p><p><span style="font-size:14px"><dt>这是一个问题</dt></span></p><p><span style="font-size:14px"><dd>为什么呢？</dd></span></p><p><span style="font-size:14px"></details></span></p><p><span style="font-size:14px">标签是有“详细信息“的下拉箭头，<dt>和<dd>分别表示提问和回</span></p><p><span style="font-size:14px">10. <ruby>邝<rt>kuang</rt> </ruby>（IE可以显示）<img src="https://img-blog.csdn.net/20150124202026588?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ3VvY2FpcWluMTIz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /></span></p><p><span style="font-size:14px">给生僻字加注释。但出现了一个问题，支持在字体上方加注释的是IE浏览器，在火狐显示<img src="https://img-blog.csdn.net/20150124202011609?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ3VvY2FpcWluMTIz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />。在不支持注释的浏览器中怎么办呢？加入一个括号：如下代码 <ruby>邝(<rt>kuang</rt>) </ruby>,</span></p><p><span style="font-size:14px">这样2个浏览器显示如下IE<img src="https://img-blog.csdn.net/20150124202052702?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ3VvY2FpcWluMTIz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />,火狐，当然火狐完全没有问题，但是IE 却不完美，于是有一个方法来解决这个问题就是用<rp></rp>括号注释掉，这样火狐中显示括号，而IE中则不显示括号，听起来搜 so good, </span></p><p><span style="font-size:14px"></span></p><pre name="code" class="html"><ruby>邝<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby>

11.<mark> 标签

在之前的html中我们可以用加粗来强调重点，但是在html5中应用<mark>自动加上底色强调重点。.

mark 标签的意思是<mark>把重点的内容加上黄色底色</mark>