HTML元素与布局技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/liujia20001123/article/details/83342080

1.无序列表、有序列表和定义列表适合的场合分别是什么？

无序列表：一般用于无序类型的列表，导航、侧边栏新闻、有规律的图文组合模块等。
有序列表：一般用于带有顺序编号的特定场合，试卷、问卷选项等。
定义列表:一般适用于带有标题和标题解释性内容的场合。

2.表格的跨行、跨列分别使用什么属性？要实现一个跨3行2列的单元格需要那几个步骤？

跨行：colspan属性。
跨列：rowspan属性。
步骤：先设置跨行和跨列属性，“colspan=3”,“rowspan=2”。
再删除被合并的其他单元格。

3.HTML5中的媒体元素有哪些？怎么实现不同浏览器都能播放?
视频元素、音频元素。
通过source引入的视频文件的格式至少包括WebM和MPEG4或Ogg和MPEG4。
通过source引入的音频文件的格式至少包括WAV和MP3或MP3和Ogg。

4.制作百度知道页面中的“品牌全知道”板块。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>品牌全知道</title>
 </head>
 <body>
  <img src="img/iknowshouye.jpg"/>
  <h2>品牌全知道</h2>
  <ul>
   <li><img src="img/icon-1.jpg" />理肤泉敏感全知道</li>
   <li><img src="img/icon-2.jpg" />薇姿健康肌肤全知道</li>
   <li><img src="img/icon-3.jpg" />中信银行全知道</li>
   <li><img src="img/icon-4.gif" />Window7全知道</li>
   <li><img src="img/icon-5.jpg" />海信电视全知道</li>
   <li><img src="img/icon-6.jpg" />多美滋全知道</li>
   <li><img src="img/icon-7.jpg" />三星手机全知道</li>
  </ul>
 </body>
</html>

在这里插入图片描述
5.使用HTML5的结构元素布局贵美.商城购物车页面。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>贵美商城-商品购买页</title>
  <style>
   header,footer{
    height: 100px;
    border: 1px solid black;
   }
   section{
    height: 200px;
    border: 1px solid black;
   }
  </style>
 </head>
 <body>
  <header>
   <h2>第一页</h2>
  </header>
  <section>
   <h2>第二页</h2>
  </section>
  <footer>
   <h2>第三页</h2>
  </footer>
 </body>
</html>

在这里插入图片描述

第二章