认识标签
1.用于陈列列表信息的标签
ul-li 是 没有前后顺序的信息列表
<ul>
<li>腾讯</li>
<li>百度</li>
<li>阿里巴巴</li>
</ul>
- 腾讯
- 百度
- 阿里巴巴
ol-li 是 有顺序的的信息列表 (“o” 可以用”order”来记)
<ol>
<li>太阳</li>
<li>地球</li>
<li>月球</li>
</ol>
2.排版标签 div
div就像一个容器,存放存放各式标签和内容,在排版时,根据亲疏关系使用div进行划分,极其常用.
<div>
<ol>
<li>太阳</li>
<li>地球</li>
<li>月球</li>
</ol>
</div>
<div>
<ul>
<li>腾讯</li>
<li>百度</li>
<li>阿里巴巴</li>
</ul>
</div>
通常我们会对div标签进行命名,使逻辑更加清晰,也方便使用css对其进行修改.
<div id="heavenly_body">
<ol>
<li>太阳</li>
<li>地球</li>
<li>月球</li>
</ol>
</div>
<div id="bat">
<ul>
<li>腾讯</li>
<li>百度</li>
<li>阿里巴巴</li>
</ul>
</div>
3.创建表格的标签 table tbody tr th td
table 标记表格的开始与结束.
tbody 加上它后,这个表格要表格要等表格内容全部下载完成才会显示.
tr 表格的一行,有几对tr表格就有几行(单词 “row” ).
td 表格中的一个单元格(“danyuange”拼音”d”,反正我这么记了),一行有几对td ,说明一行有多少列.
th 表格表头,默认会粗体,居中显示.
需要注意的是,表格在不加css样式时,是没有线的,这里演示的样式时,经过处理的.
<table summary="表述了一些人的基本信息">
<!-- summary为摘要 -->
<caption>基本信息表</caption>
<!-- caption标签为标题 -->
<tbody>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>17</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>19</td>
</tr>
</tbody>
</table>
姓名 | 性别 | 年龄 |
---|---|---|
张三 | 男 | 18 |
李四 | 女 | 17 |
王五 | 男 | 19 |
4.超链接标签 a
使用a可以实现超链接,它在网站上很常见,title作用是方便搜索引擎了解链接地址的内容.
需要注意的是,a标签默认样式为蓝色,学习css后,可以对它进行修改
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
<!--以下是一个例子-->
<a href="http://blog.csdn.net/sumuyunyu/article/details/50390159" title="html初识1">点我转到 html初识1 的页面</a>
有时,我们需要在新建浏览器窗口中打开链接,需用到 target
<a href="目标网址" target="_blank">click here!</a>
<!--以下是一个例子-->
<a href="http://blog.csdn.net/sumuyunyu/article/details/50390159" title="html初识1" target="_blank">点我转到 html初识1 的页面</a>
5.链接Email地址
<a href="mailto: 邮箱地址?subject=邮件主题&body=邮件内容">显示内容</a>
<!--以下是一个例子-->
<a href="mailto: sumuyunyu@163.com?subject=交个朋友吧,很喜欢你的文章&body=苏木云雨你好">对我的博客有什么意见或者建议就发送邮件给我吧</a>
6.图片标签
src : 图片的位置
alt : 当图像不可见时(如:下载不成功),可以看到该属性指定的文本.
title : 提供鼠标滑过时,图片显示的文本.
注意图片的格式可以死gif,png,jpeg格式的图片
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
哈哈,这张图被我当桌面了.