html初识2

认识标签

---

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>

点我转到 html初识1 的页面

有时,我们需要在新建浏览器窗口中打开链接,需用到 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>

点我转到 html初识1 的页面

---

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 = "提示文本">

哈哈,这张图被我当桌面了.

---