一，HTML常见标签part2

二，盒子标签

可定义文档的分区 division的缩写 译：区
标签可以把文档分割为独立的、不同的部分,请看下面代码我们将他们进行分区 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8" >
    <title>常用标签一</title>
</head>
<body>
    <div id="wrap">
        <div class="para">
            <p style="height: 1000px" id="p1">段落</p>
        </div>

        <div class="anchor">
            我是普通的文本
            <h1>

                <a href="http://www.baidu.com" target="_blank" title="路飞学城">路飞学城</a>
                <a href="a.zip">下载包</a>
                <a href="mailto:zhaoxu@tedu.cn">联系我们</a>
                <a href="#">跳转到顶部</a>
                <a href="#p1">跳转到p1</a>

                <a href="javascript:alert(1)">内容</a>
                <a href="javascript:;">内容</a>
            </h1>
        </div>
        <!-- <h2>小马哥</h2>
        <h3>小马哥</h3>
        <h4>小马哥</h4>
        <h5>小马哥</h4>
        <h6>小马哥</h6> -->
        <div class="para">
        <!-- 定义段落 通常指文章一段内容 -->
        <p>我是段落！！！</p>
        <p>我是段落！！！</p>
        <p>我是段落！！！</p>
        </div>

        <div class="lists">
            <!-- 无序列表 -->
            <ul type="circle">
                <li>我的账户</li>
                <li>我的订单</li>
                <li>我的优惠券</li>
                <li>我的收藏</li>
                <li>退出</li>
            </ul>
            <!-- 有序列表 -->
            <ol type="a">
                <li>我的账户</li>
                <li>我的订单</li>
                <li>我的优惠券</li>
                <li>我的收藏</li>
                <li>退出</li>
            </ol>
        </div>
    </div>
</body>
</html>

分析上面代码可以下面的层次结构

<div id='wrap'>
    <div class='para'></div>
    <div class='anchor'></div>
    <div class='para'></div>
    <div class='lists'></div>    
</div>

我们将文档放在一个父级的区（div）中，它里面包含四块区（div）域，浏览器查看效果,你会发现每小块区域都是独占一行的，所以div是块级元素。另外，每块区域表示独立的一块，id属性和class属性其实很简单，你可以看成给这个区域起个名字。id是唯一的，一个页面中不能有两个重复的id，跟身份证号码一样，class可以设置同样的属性值，并且可以设置多个，例如class=’para n1‘

三，图片标签

一个网页除了有文字，还会有图片。我们使用<img/>标签在网页中插入图片。

语法：<img src="图片地址" alt="图片加载失败时显示的内容" title = "提示信息" />

注意：

  1. src设置的图片地址可以是本地的地址也可以是一个网络地址。
  2. 图片的格式可以是png、jpg和gif。
  3. alt属性的值会在图片加载失败时显示在网页上。
  4. 还可以为图片设置宽度(width)和高度(height)，不设置就显示图片默认的宽度和高度
<div>
     <span>与行内元素展示的标签<span>
     <span>与行内元素展示的标签<span>
     <img src="./machine-right.png" alt="金融量化分析" style="width:200px;height:200px">
     <img src="./finance-right.png" alt="人工智能实战"  style="width: 200px;height: 200px">
 </div>
  1. 浏览器查看效果：行内块元素
  2. 与行内元素在一行内显示
  3. 可以设置宽度和高度
  4. span标签可以单独摘出某块内容，结合css设置相应的样式
<p>小马哥学习前端</p><span>金融分析</span>,<span>人工智能</span>等互联网最前沿技术,开启职业生涯新可能</p>

四，小练习题

好的，同学们，此时大家是不是对于以上标签有所认知了呢？ 这样吧！我来出一个小练习，你来做！ 练习：将img标签中的图片独占一行展示，并设置设置相应标题，在图片下方，描述该图片内容的信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img练习</title>
</head>
<body>
    <!--将img标签中的图片独占一行展示，并设置设置相应标题，在图片下方，描述该图片内容的信息。 -->
    <div>
        <h6>人工智能</h6>
        <img src="./人工智能.png"  alt="人工智能" width="200">
        <p>
            迎上ai风口
        </p>

        <h6>云计算</h6>
        <img src="云计算.png" alt="云计算" width="200">
        <p>
           玩转linux
        </p>
    </div>

</body>
</html>