HTML常见标签part2
一，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 = "提示信息" />
注意：
- src设置的图片地址可以是本地的地址也可以是一个网络地址。
- 图片的格式可以是png、jpg和gif。
- alt属性的值会在图片加载失败时显示在网页上。
- 还可以为图片设置宽度(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>
- 浏览器查看效果：行内块元素
- 与行内元素在一行内显示
- 可以设置宽度和高度
- 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>
