Web第三讲

列表和表单

定义列表

<dl>
<dt>咖啡</dt>
      <dd>黑色热饮料</dd>
        <dd></dd>
<dt></dt>
     <dd></dd>
      <dd></dd>
</dl>

无序列表

ul标签共有三个值
disc 实心圆形 circle 空心圆形 square 实心正方形

 <ul>
<li></li>
<li></li>
</ul>

有序列表

1.ol标记的属性
type 五种编号类型 1、A、a、I、i。
start 表示起始编号
2.li标记属性
type 表示当前列表项的编号类别
value 当前列表项前的编号，并影响其后的编号。

<ol>
<li><li>
</ol>

注意
1.列表可以嵌套，但不能发生交叉嵌套
2.ws书写 ul>li*5按tab键，直接显示有5个有序列表项
3.ul{list-style-type:none;} // list-style-type:none;去掉小黑点
li{float:left;padding:10px; } //float:left;图片左浮动,padding:10px;图片间的距离为10像素

设置热点区域

map和area标签

<a><img src="图像地址" usemap="#映射图形名称"></a>
<map name="映射图形名称">
    <area shape="热区图形" coords="热区坐标"href="url">
</map>

例：

<a><img src="../imag/保定火烧.jpg" alt="" width="800" height="400" usemap="#驴肉火烧"></a>
<map name="驴肉火烧">
    <area shape="circle"coords="50,50,30"href="https://www.baidu.com"><!--设置热点区域-->
</map>

代码展示效果：

#邮件链接

<a href="mailto:13398615712@163.com?subject=问题反馈">邮件反馈</a>

图像及图像组合

figure标签是 HTML 5 中的新标签，用作文档中插图的图像，标签规定独立的流内容（图像、图表、照片、代码等等）。

 <figure>
    <img src="../imag/保定火烧.jpg" alt="" width="50" height="50">
    <img src="../imag/保定火烧.jpg" alt="" width="50" height="50">
    <img src="../imag/保定火烧.jpg" alt="" width="50" height="50">
    <img src="../imag/保定火烧.jpg" alt="" width="50" height="50">
    <figcaption>美食</figcaption>

效果图如下：

视频音频插入

<video controls="controls" autoplay height="1000" width="1000" >
    <source type="video/mp4" src="URL">
</video>
<audio controls="controls" autoplay  loop="loop">
  <source type="audio/mpeg" src="URL">
</audio>